/* ============================================
   1) VARIABLES — modifiez ici pour changer les couleurs
   ============================================ */
:root{
    --color-primary:      #b6316c;   /* mauve/rose principal (CTA, accents forts) */
    --color-primary-dark: #7d1f52;   /* variante foncée du primaire (hover, header) */
    --color-secondary:    #6a3b8f;   /* mauve violet secondaire */
    --color-accent:       #ff8fb3;   /* rose clair d'accent (badges, liens) */
    --color-bg:           #fdf5f8;   /* fond général très clair */
    --color-bg-alt:       #f6e9f0;   /* fond alterné (cartes, sections) */
    --color-dark:         #2b1930;   /* prune très foncé (textes, footer) */
    --color-gray:         #7a6b7e;   /* texte secondaire */
    --color-white:        #ffffff;
    --color-online:       #4bcf8f;   /* pastille "en ligne" */

    --font-display: 'Archivo Expanded', Arial, sans-serif;
    --font-body: 'Archivo', Arial, sans-serif;

    --radius: 16px;
    --radius-sm: 10px;
    --shadow-soft: 0 10px 30px rgba(123, 31, 82, 0.12);
    --shadow-card: 0 6px 18px rgba(123, 31, 82, 0.10);
}

*{box-sizing:border-box; margin:0; padding:0;}
body{
    font-family: var(--font-body);
    background: var(--color-bg);
    color: var(--color-dark);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer; border:none;}
ul{list-style:none;}

.ms-5 { margin-left: 50px; }

/* ============================================
   2) HEADER + LOGO (effet léger dégradé + lueur)
   ============================================ */
header{
    position: sticky; top:0; z-index: 50;
    background: var(--color-white);
    border-bottom: 1px solid rgba(123,31,82,0.08);
}
.header-inner{
    max-width: 1200px; margin:0 auto; padding: 16px 24px;
    display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.logo{
    display: inline-flex; align-items: center; gap: 10px;
}
.logo-mark{
    position: relative;
    width: 38px; height: 38px; flex-shrink: 0;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    display:flex; align-items:center; justify-content:center;
    box-shadow: 0 6px 16px rgba(182,49,108,0.35);
    transform: rotate(-6deg);
    transition: transform .3s ease;
}
.logo:hover .logo-mark{ transform: rotate(0deg) scale(1.05); }
.logo-mark svg{ width:20px; height:20px; }
.logo-mark::after{
    content:"";
    position:absolute; inset:-3px;
    border-radius: 13px;
    border: 1.5px solid var(--color-accent);
    opacity: 0;
    transform: scale(0.85);
    transition: opacity .3s ease, transform .3s ease;
}
.logo:hover .logo-mark::after{ opacity: 1; transform: scale(1); }
.logo-word{
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: -0.5px;
    color: var(--color-dark);
    text-transform: uppercase;
}
.logo-word span.dot{ color: var(--color-primary); }

nav.main-nav{display:flex; align-items:center; gap: 28px;}
nav.main-nav a.nav-link{
    font-size: 0.92rem; font-weight:500; color: var(--color-gray);
    transition: color .2s ease;
}
nav.main-nav a.nav-link:hover{ color: var(--color-primary); }

.btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding: 11px 22px; border-radius: 999px;
    font-weight:600; font-size:0.92rem;
    transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
}
.btn-primary{
    background: linear-gradient(120deg, var(--color-primary), var(--color-secondary));
    color: var(--color-white);
    box-shadow: var(--shadow-soft);
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 14px 28px rgba(123,31,82,0.22); }
.btn-ghost{
    background: transparent; color: var(--color-primary-dark);
    border: 1.5px solid rgba(123,31,82,0.25);
}
.btn-ghost:hover{ background: var(--color-bg-alt); }

/* ============================================
   3) HERO
   ============================================ */
.hero{
    max-width:1200px; margin: 0 auto; padding: 40px 0 32px;
    text-align:center;
}
.hero h1{
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.5rem, 3.4vw, 2.4rem);
    color: var(--color-dark);
    max-width: 1220px; margin: 0 auto 10px;
    letter-spacing: -0.5px;
}
.hero h1 em{
    font-style: normal;
    color: var(--color-primary);
}
.hero p.sub{
    color: var(--color-gray); font-size: 0.98rem; max-width: 520px; margin: 0 auto 20px;
}
.hero-actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}

/* Hero condensé sur mobile : les membres doivent être visibles sans scroller */
@media (max-width: 640px){
    .hero{ padding: 18px 20px 16px; text-align:left; }
    .hero h1{ font-size: 1.25rem; margin-bottom:4px; }
    .hero p.sub{ display:none; }
    .hero-actions{ justify-content:flex-start; }
    .hero-actions .btn-ghost{ display:none; }
    .hero-actions .btn{ padding: 9px 18px; font-size:0.85rem; }
}

/* ============================================
   4) MUR DE MEMBRES (grille de thumbs)
   ============================================ */
.section-title-row{
    max-width:1200px; margin: 0 auto; padding: 0 24px;
    display:flex; align-items:baseline; justify-content:space-between; gap: 16px; flex-wrap:wrap;
    margin-bottom: 22px;
}
.section-title-row h2{
    font-family: var(--font-display); font-size:1.5rem; font-weight:600;
}
.filter-pills{display:flex; gap:8px; flex-wrap:wrap;}
.pill{
    padding:7px 16px; border-radius:999px; font-size:0.82rem; font-weight:500;
    background: var(--color-bg-alt); color: var(--color-gray);
}
.pill.active{ background: var(--color-primary); color:var(--color-white); }

/* Barre de filtres localisation : départements + villes, chacun sur une ligne avec overflow horizontal */
.location-filter-bar{
    max-width:1200px; margin: 0 auto 14px; padding: 0 24px;
    display:flex; flex-direction:column; gap:10px;
}
.scroll-row{
    display:flex; gap:8px; flex-wrap:nowrap; overflow-x:auto; padding-bottom:6px;
    scrollbar-width: thin; scrollbar-color: var(--color-bg-alt) transparent;
}
.scroll-row::-webkit-scrollbar{ height:5px; }
.scroll-row::-webkit-scrollbar-thumb{ background: var(--color-bg-alt); border-radius:999px; }
.scroll-row::-webkit-scrollbar-track{ background: transparent; }

.filter-row-label{
    font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.6px;
    color: var(--color-gray); margin-bottom:2px; display:block;
}

.region-pill{
    padding:7px 15px; border-radius:999px; font-size:0.8rem; font-weight:600;
    background: var(--color-white); color: var(--color-primary-dark);
    border: 1.5px solid var(--color-bg-alt); white-space:nowrap; flex-shrink:0;
    display:flex; align-items:center; gap:6px;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.region-pill svg{ width:13px; height:13px; }
.region-pill.active, .region-pill:hover{
    background: var(--color-primary); color: var(--color-white); border-color: var(--color-primary);
}

.city-pill{
    padding:7px 15px; border-radius:999px; font-size:0.8rem; font-weight:600;
    background: var(--color-bg-alt); color: var(--color-dark);
    border: 1.5px solid transparent; white-space:nowrap; flex-shrink:0;
    display:flex; align-items:center; gap:6px;
}
.city-pill svg{ width:13px; height:13px; }
.city-pill.active, .city-pill:hover{
    background: var(--color-secondary); color: var(--color-white);
}

.member-grid{
    max-width:1200px; margin: 0 auto 60px; padding: 0 24px;
    display:grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 20px;
}
.member-card{
    background: var(--color-white); border-radius: var(--radius);
    overflow:hidden; box-shadow: var(--shadow-card);
    transition: transform .2s ease, box-shadow .2s ease;
    cursor:pointer;
}
.member-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-soft); }
.thumb-wrap{ position:relative; aspect-ratio: 3/4; overflow:hidden; background: var(--color-bg-alt);}
.thumb-wrap img{ width:100%; height:100%; object-fit:cover; transform: scale(1.08); transition: filter .3s ease;}
.lock-badge{
    position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:6px; color:var(--color-white); background: rgba(43,25,48,0.28);
}
.lock-badge svg{width:22px; height:22px;}
.lock-badge span{font-size:0.72rem; font-weight:600; letter-spacing:0.3px;}
.online-dot{
    position:absolute; top:10px; right:10px; width:11px; height:11px; border-radius:50%;
    background: var(--color-online); border:2px solid var(--color-white);
}
.member-info{ padding: 12px 14px 16px; }
.member-info .name-row{display:flex; align-items:baseline; justify-content:space-between;}
.member-info .name-row strong{font-size:1rem;}
.member-info .name-row span.age{color:var(--color-gray); font-size:0.88rem;}
.member-info .loc{ font-size:0.82rem; color: var(--color-gray); margin-top:2px; display:flex; align-items:center; gap:4px;}

/* ============================================
   5) PAGE PROFIL
   ============================================ */
#profile-page{ display:block; }
#member-wall.hidden{ display:none; }

.profile-hero{
    position:relative; height: 500px; overflow:hidden;
    background: linear-gradient(120deg, var(--color-secondary), var(--color-primary));
}
.profile-hero img{ width:100%; height:100%; object-fit:contain; mix-blend-mode: normal;}
.profile-hero::after{
    content:""; position:absolute; inset:0;
    background: linear-gradient(180deg, rgba(43,25,48,0) 40%, rgba(43,25,48,0.75) 100%);
}
.back-btn{
    position:absolute; top:20px; left:250px; z-index:5;
    background: rgba(255,255,255,0.9); color:var(--color-dark);
    padding:8px 16px; border-radius:999px; font-size:0.85rem; font-weight:600;
}
.profile-header-info{
    position:absolute; bottom:20px; left:24px; right:24px; z-index:5;
    color: var(--color-white); display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:12px;
}
.profile-header-info h1{ font-family: var(--font-display); font-size:1.9rem; font-weight:600; }
.profile-header-info .meta{font-size:0.9rem; opacity:0.9; display:flex; gap:10px; align-items:center; margin-top:4px;}
.status-live{display:inline-flex; align-items:center; gap:5px; font-weight:600;}
.status-live::before{content:""; width:8px; height:8px; border-radius:50%; background: var(--color-online); display:inline-block;}

.profile-body{
    max-width:1000px; margin: -10px auto 60px; padding: 0 24px;
    display:grid; grid-template-columns: 1.6fr 1fr; gap: 22px;
}
@media (max-width: 780px){
    .profile-body{grid-template-columns: 1fr;}
    .profile-hero img{ object-fit:cover; }
}

.card{
    background: var(--color-white); border-radius: var(--radius);
    box-shadow: var(--shadow-card); padding: 22px 24px; margin-bottom:20px;
}
.card h2{
    font-family: var(--font-display); font-size:1.1rem; font-weight:600; margin-bottom:12px;
    color: var(--color-primary-dark);
}

.card p strong{
    font-family: var(--font-display);  color: var(--color-secondary); margin-bottom:12px;
}

.card p.bio{ color:var(--color-dark); font-size:0.95rem; line-height:1.7; }

.tag-list{ display:flex; flex-wrap:wrap; gap:8px; }
.tag{
    background: var(--color-bg-alt); color: var(--color-primary-dark);
    padding:6px 14px; border-radius:999px; font-size:0.82rem; font-weight:500;
}

.pref-row{ display:flex; justify-content:space-between; padding:9px 0; font-size:0.9rem; border-bottom: 1px solid var(--color-bg-alt);}
.pref-row:last-child{ border-bottom:none; }
.pref-row span.label{ color: var(--color-gray); }
.pref-row span.value{ font-weight:600; }

.loc-box{ display:flex; align-items:center; gap:12px; }
.loc-box .icon{
    width:42px; height:42px; border-radius:50%; background: var(--color-bg-alt);
    display:flex; align-items:center; justify-content:center; color: var(--color-primary); flex-shrink:0;
}
.loc-box .txt strong{ display:block; font-size:0.95rem; }
.loc-box .txt span{ font-size:0.82rem; color:var(--color-gray); }

.static {
    max-width:1200px; margin: 0 auto 60px; padding: 24px;
    font-size:0.8rem; color: var(--color-gray); line-height:1.7;
    background: #ffffff; border-radius: 5px;
}

.static p {
    margin-bottom: 20px;
}

.presentation {
    max-width:1200px; margin: 0 auto 60px; padding: 0 24px;
    font-size:0.8rem; color: var(--color-gray); line-height:1.7;
}

.presentation p {
    margin-bottom: 20px;
}

/* ============================================
   5 BIS) SEO — ACCORDEON + PRESENTATION GEO
   ============================================ */
.seo-announcements,
.geo-presentation{
    max-width:1200px;
    margin:0 auto 56px;
    padding:0 24px;
}
.seo-section-heading{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:16px;
}
.seo-kicker{
    display:block;
    margin-bottom:6px;
    color:var(--color-primary);
    font-size:.7rem;
    font-weight:800;
    letter-spacing:1.2px;
    text-transform:uppercase;
}
.seo-section-heading h2,
.geo-presentation h2{
    color:var(--color-dark);
    font-family:var(--font-display);
    font-size:clamp(1.2rem,2.4vw,1.65rem);
    font-weight:700;
    letter-spacing:-.35px;
}
.seo-section-heading p{
    max-width:620px;
    margin-top:6px;
    color:var(--color-gray);
    font-size:.88rem;
}
.seo-count{
    flex-shrink:0;
    padding:7px 12px;
    border:1px solid var(--color-bg-alt);
    border-radius:999px;
    color:var(--color-primary-dark);
    background:var(--color-white);
    font-size:.75rem;
    font-weight:700;
}
.announcement-list{
    overflow:hidden;
    border:1px solid rgba(123,31,82,.1);
    border-radius:var(--radius);
    background:var(--color-white);
    box-shadow:var(--shadow-card);
}
.announcement-item + .announcement-item{border-top:1px solid var(--color-bg-alt);}
.announcement-item summary{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:18px 20px;
    cursor:pointer;
    list-style:none;
}
.announcement-item summary::-webkit-details-marker{display:none;}
.announcement-summary-copy{display:flex; flex-direction:column; gap:3px; min-width:0;}
.announcement-summary-copy strong{
    overflow:hidden;
    color:var(--color-dark);
    font-size:.95rem;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.announcement-summary-copy span{color:var(--color-gray); font-size:.78rem;}
.announcement-item summary:hover,
.announcement-item[open] summary{background:linear-gradient(90deg,var(--color-bg-alt),var(--color-white));}
.announcement-chevron{
    width:9px;
    height:9px;
    flex-shrink:0;
    border-right:2px solid var(--color-primary);
    border-bottom:2px solid var(--color-primary);
    transform:rotate(45deg) translateY(-2px);
    transition:transform .2s ease;
}
.announcement-item[open] .announcement-chevron{transform:rotate(225deg) translate(-1px,-2px);}
.announcement-content{
    padding:0 56px 20px 20px;
    color:var(--color-gray);
    font-size:.88rem;
    line-height:1.7;
}
.announcement-content p{margin-bottom:10px;}
.announcement-link{color:var(--color-primary-dark); font-size:.82rem; font-weight:800;}
.announcement-link span{display:inline-block; margin-left:4px; transition:transform .2s ease;}
.announcement-link:hover span{transform:translateX(3px);}
.geo-presentation-inner{
    position:relative;
    display:grid;
    grid-template-columns:minmax(210px,.72fr) minmax(0,1.5fr);
    gap:38px;
    padding:30px;
    border:1px solid rgba(123,31,82,.1);
    border-radius:var(--radius);
    background:linear-gradient(135deg,var(--color-white),var(--color-bg-alt));
    box-shadow:var(--shadow-card);
}
.geo-presentation-inner.is-collapsed{
    max-height:150px;
    overflow:hidden;
    padding-bottom:52px;
}
.geo-presentation-inner.is-collapsed::after{
    content:"";
    position:absolute;
    right:0;
    bottom:0;
    left:0;
    height:68px;
    pointer-events:none;
    background:linear-gradient(180deg,rgba(255,255,255,0),var(--color-bg-alt) 78%);
}
.geo-presentation-heading{position:relative;}
.geo-presentation-line{
    display:block;
    width:54px;
    height:4px;
    margin-top:18px;
    border-radius:999px;
    background:linear-gradient(90deg,var(--color-primary),var(--color-secondary));
}
.geo-presentation-copy{color:var(--color-gray); font-size:.92rem; line-height:1.75;}
.geo-presentation-copy p + p{margin-top:15px;}
.geo-presentation-toggle{
    position:absolute;
    right:24px;
    bottom:16px;
    z-index:2;
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:7px 12px;
    border:1px solid rgba(123,31,82,.16);
    border-radius:999px;
    color:var(--color-primary-dark);
    background:rgba(255,255,255,.94);
    box-shadow:0 3px 10px rgba(123,31,82,.08);
    font:inherit;
    font-size:.76rem;
    font-weight:800;
}
.geo-presentation-toggle:hover{background:var(--color-white);}
.geo-presentation-toggle-icon{font-size:1rem;line-height:.7;transition:transform .2s ease;}
.geo-presentation-inner.is-expanded{max-height:none;overflow:visible;padding-bottom:30px;}
.geo-presentation-inner.is-expanded::after{display:none;}
.geo-presentation-inner.is-expanded .geo-presentation-toggle-icon{transform:rotate(180deg);}
@media (max-width:700px){
    .seo-section-heading{align-items:flex-start; flex-direction:column; gap:10px;}
    .seo-count{align-self:flex-start;}
    .geo-presentation-inner{grid-template-columns:1fr; gap:18px; padding:22px;}
    .geo-presentation-inner.is-collapsed{max-height:150px;padding-bottom:48px;}
    .geo-presentation-toggle{right:16px;bottom:12px;}
    .geo-presentation-line{margin-top:12px;}
    .announcement-content{padding-right:20px;}
}

/* ============================================
   6) MODAL D'INSCRIPTION — SIDECAR (panneau latéral)
   ============================================ */
.overlay{
    position:fixed; inset:0; background: rgba(43,25,48,0.45);
    backdrop-filter: blur(2px);
    opacity:0; pointer-events:none; transition: opacity .3s ease; z-index:100;
}
.overlay.open{ opacity:1; pointer-events:auto; }

.sidecar{
    position:fixed; top:0; right:0; height:100%; width:min(430px, 100%);
    background: var(--color-white); z-index:101;
    transform: translateX(100%); transition: transform .35s cubic-bezier(.2,.9,.3,1);
    box-shadow: -20px 0 50px rgba(43,25,48,0.25);
    overflow-y:auto;
}
.sidecar.open{ transform: translateX(0); }

.sidecar-top{
    background: linear-gradient(120deg, var(--color-primary-dark), var(--color-primary));
    color: var(--color-white); padding: 26px 28px 22px; position:relative;
}
.sidecar-top .close-btn{
    position:absolute; top:18px; right:18px; width:32px; height:32px; border-radius:50%;
    background: rgba(255,255,255,0.18); color:var(--color-white); font-size:1.1rem;
    display:flex; align-items:center; justify-content:center;
}
.sidecar-top h2{ font-family: var(--font-display); font-size:1.5rem; font-weight:600; margin-bottom:6px;}
.sidecar-top p{ font-size:0.88rem; opacity:0.92; }

.sidecar-body{ padding: 24px 28px 32px; }

.benefits-list{ margin-bottom: 22px; }
.benefits-list li{
    display:flex; align-items:flex-start; gap:10px; font-size:0.88rem; color:var(--color-dark);
    padding: 8px 0;
}
.benefits-list li .check{
    width:20px; height:20px; border-radius:50%; background: var(--color-bg-alt); color:var(--color-primary);
    display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:0.7rem; font-weight:700;
    margin-top:1px;
}

.form-group{ margin-bottom:16px; }
.form-group label{ display:block; font-size:0.82rem; font-weight:600; margin-bottom:6px; color:var(--color-dark); }
.form-group input[type="email"]{
    width:100%; padding: 13px 15px; border-radius: var(--radius-sm);
    border: 1.5px solid var(--color-bg-alt); background: var(--color-bg);
    font-size:0.95rem; font-family:inherit; transition: border-color .2s ease;
}
.form-group input[type="email"]:focus{ outline:none; border-color: var(--color-primary); }

.form-group input, .form-group textarea {
    width:100%; padding: 13px 15px; border-radius: var(--radius-sm);
    border: 1.5px solid var(--color-bg-alt); background: var(--color-bg);
    font-size:0.95rem; font-family:inherit; transition: border-color .2s ease;
}
.form-group input:focus, .form-group textarea:focus{ outline:none; border-color: var(--color-primary); }

.age-check{
    display:flex; gap:12px; align-items:flex-start; background: var(--color-bg-alt);
    padding: 14px 16px; border-radius: var(--radius-sm); margin-bottom:20px;
}
.age-check .icon{ color: var(--color-primary); flex-shrink:0; margin-top:2px; }
.age-check p{ font-size:0.8rem; color: var(--color-gray); line-height:1.5; }
.age-check strong{ color: var(--color-dark); }

.sidecar-submit{ width:100%; padding:14px; border-radius:999px; font-size:0.98rem; }
.legal-note{ font-size:0.72rem; color: var(--color-gray); text-align:center; margin-top:14px; }

/* ============================================
   FOOTER
   ============================================ */
footer{ background: var(--color-dark); color: rgba(255,255,255,0.7); padding: 30px 24px; text-align:center; font-size:0.82rem; }
footer .logo{ font-size:1.3rem; margin-bottom:8px; filter:brightness(1.3); }

@media (max-width: 640px){
    nav.main-nav a.nav-link{ display:none; }
    .hero{ padding: 36px 20px 28px; }
}

/* ============================================
   PAGINATION
   ============================================ */

.pagination{
    max-width:1200px; margin: 0 auto 60px; padding: 0 24px;
    display:flex; align-items:center; justify-content:center; gap:8px;
    flex-wrap:wrap;
}
.page-item{ display:flex; }
.page-link{
    display:flex; align-items:center; justify-content:center;
    min-width:40px; height:40px; padding: 0 14px;
    border-radius: var(--radius-sm);
    background: var(--color-white); color: var(--color-dark);
    border: 1.5px solid var(--color-bg-alt);
    font-family: inherit; font-size:0.85rem; font-weight:600;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}
a.page-link:hover{
    background: var(--color-bg-alt); border-color: var(--color-bg-alt);
    transform: translateY(-1px);
}
.page-item.active .page-link{
    background: linear-gradient(120deg, var(--color-primary), var(--color-secondary));
    color: var(--color-white); border-color: transparent;
    box-shadow: var(--shadow-card);
}
.page-item.disabled .page-link{
    background: transparent; color: var(--color-gray);
    border-color: var(--color-bg-alt); opacity:0.55; cursor:not-allowed;
}

/* ============================================
   REGISTER
   ============================================ */

.is-valid {
    border-color: #198754 !important;
    background: #D0E7DD !important;
}

.is-invalid {
    border-color: #DC3545 !important;
    background: #F8D7DA !important;
}

#regForm .form-group {
    position: relative;
}

#regForm .form-group label.error {
    position: absolute;
    top: 35px;
    right: 6px;
    display: block;
    width: auto;
    height: 20px;
    margin: 0;
    padding: 5px;
    font-size: 12px;
    color: #DC3545;
}

#regFormFinal {
    display: none;
}

#regFormFinal p {
    text-align: center;
    margin-bottom: 10px;
    color: #198754
}

/* ============================================
   REDIRECT
   ============================================ */

#redirect .logo{ display:inline-flex; align-items:center; gap:10px; }
#redirect .logo-mark{
    position: relative; width: 38px; height: 38px; flex-shrink:0;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    display:flex; align-items:center; justify-content:center;
    box-shadow: 0 6px 16px rgba(182,49,108,0.35);
}
#redirect .logo-mark svg{ width:20px; height:20px; }
#redirect .logo-word{
    font-family: var(--font-display); font-weight:800; font-size:1.5rem;
    letter-spacing:-0.5px; color: var(--color-dark); text-transform:uppercase;
}
#redirect .logo-word span.dot{ color: var(--color-primary); }

#redirect header{ padding: 22px 24px; display:flex; justify-content:center; }

#redirect main{
    flex:1; display:flex; align-items:center; justify-content:center;
    padding: 24px;
}

#redirect .redirect-card{
    width:100%; max-width: 460px;
    background: var(--color-white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    padding: 32px 34px 36px;
    text-align:center;
}

/* ---- Bloc profil (photo / pseudo / âge) ---- */
#redirect .profile-preview{
    display:flex; align-items:center; gap:14px;
    background: var(--color-bg);
    border: 1px solid var(--color-bg-alt);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    margin-bottom: 26px;
    text-align:left;
}
#redirect .profile-preview-photo{
    position:relative; width:56px; height:56px; flex-shrink:0;
    border-radius:50%; overflow:hidden;
    border: 2.5px solid var(--color-white);
    box-shadow: 0 0 0 2.5px var(--color-primary);
}
#redirect .profile-preview-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
#redirect .profile-preview-online{
    position:absolute; bottom:1px; right:1px; width:12px; height:12px; border-radius:50%;
    background: var(--color-online); border:2px solid var(--color-white);
}
#redirect .profile-preview-info{ flex:1; min-width:0; }
#redirect .profile-preview-info .row-top{ display:flex; align-items:baseline; gap:6px; }
#redirect .profile-preview-info strong{ font-size:1rem; font-weight:700; color: var(--color-dark); }
#redirect .profile-preview-info .age{ font-size:0.85rem; color: var(--color-gray); }
#redirect .profile-preview-info .status{
    display:block; font-size:0.75rem; font-weight:600; color: var(--color-primary);
    margin-top:2px;
}
#redirect .profile-preview-badge{
    flex-shrink:0; font-size:0.68rem; font-weight:700; text-transform:uppercase;
    letter-spacing:0.4px; color: var(--color-white);
    background: linear-gradient(120deg, var(--color-primary), var(--color-secondary));
    padding: 5px 10px; border-radius:999px;
}

#redirect .spinner-ring{
    width:64px; height:64px; margin: 0 auto 24px;
    position:relative;
}
#redirect .spinner-ring svg{ width:100%; height:100%; transform: rotate(-90deg); }
#redirect .spinner-ring circle{
    fill:none; stroke-width:5; stroke-linecap:round;
}
#redirect .spinner-ring .track{ stroke: var(--color-bg-alt); }
#redirect .spinner-ring .progress{
    stroke: url(#gradStroke);
    stroke-dasharray: 175;
    stroke-dashoffset: 175;
    transition: stroke-dashoffset 0.6s ease;
}
#redirect .spinner-ring .center-heart{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    color: var(--color-primary);
}
#redirect .spinner-ring .center-heart svg.heart-icon{ width:22px; height:22px; transform:none; }

#redirect h1{
    font-family: var(--font-display); font-weight:800; font-size:1.4rem;
    letter-spacing:-0.3px; margin-bottom:8px;
}
#redirect main p.sub{
    color: var(--color-gray); font-size:0.9rem; margin-bottom:30px;
}

/* ---- Liste des étapes ---- */
#redirect .steps{ text-align:left; margin-bottom: 8px; }
#redirect .step{
    display:flex; align-items:flex-start; gap:14px;
    padding: 12px 0;
    position:relative;
}
#redirect .step:not(:last-child)::after{
    content:"";
    position:absolute; left:15px; top:38px; bottom:-6px;
    width:2px; background: var(--color-bg-alt);
}
#redirect .step.done:not(:last-child)::after{ background: var(--color-primary); }

#redirect .step-icon{
    width:32px; height:32px; border-radius:50%; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    background: var(--color-bg-alt); color: var(--color-gray);
    font-size:0.8rem; font-weight:700;
    transition: background .3s ease, color .3s ease, transform .3s ease;
    z-index:1;
}
#redirect .step-icon svg{ width:15px; height:15px; display:none; }

#redirect .step.active .step-icon{
    background: var(--color-white);
    color: var(--color-primary);
    border: 2.5px solid var(--color-primary);
    animation: pulse 1.2s ease-in-out infinite;
}
#redirect .step.done .step-icon{
    background: linear-gradient(120deg, var(--color-primary), var(--color-secondary));
    color: var(--color-white); border:none;
}
#redirect .step.done .step-icon span{ display:none; }
#redirect .step.done .step-icon svg{ display:block; }

@keyframes pulse{
    0%,100%{ box-shadow: 0 0 0 0 rgba(182,49,108,0.25); }
    50%{ box-shadow: 0 0 0 6px rgba(182,49,108,0.12); }
}

#redirect .step-text{ padding-top:5px; }
#redirect .step-text strong{
    display:block; font-size:0.92rem; font-weight:700; color: var(--color-dark);
    transition: color .3s ease;
}
#redirect .step.pending .step-text strong{ color: var(--color-gray); }
#redirect .step-text span{ font-size:0.78rem; color: var(--color-gray); }

#redirect .step.active .step-text span::after{
    content:"…"; animation: dots 1.4s steps(4,end) infinite;
}
@keyframes dots{
    0%,20%{ content:"."; } 40%{ content:".."; } 60%,100%{ content:"..."; }
}

#redirect .redirect-note{
    margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--color-bg-alt);
    font-size:0.78rem; color: var(--color-gray);
}
#redirect .redirect-note strong{ color: var(--color-primary-dark); }

#redirect footer{ padding: 20px; text-align:center; font-size:0.75rem; color: var(--color-gray); }

/* ============================================
   7) POP DHTML — DISCLAIMER / VÉRIFICATION DE MAJORITÉ
   ============================================ */

#discRedirect { visibility: hidden; z-index: auto; }
#discRedirect_iframe { overflow: hidden; z-index: 5000; position: absolute; top: 0; left: 0; border: 0; }
#discRedirect_bg { z-index: 4998; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.age-gate-overlay{
    position:fixed; inset:0; z-index:200;
    background: radial-gradient(circle at 30% 20%, rgba(106,59,143,0.92), rgba(43,25,48,0.96));
    backdrop-filter: blur(6px);
    display:flex; align-items:center; justify-content:center;
    padding: 20px;
}
.age-gate-overlay.hidden{ display:none; }

.age-gate-card{
    width:100%; max-width: 440px;
    background: var(--color-white);
    border-radius: var(--radius);
    box-shadow: 0 30px 70px rgba(0,0,0,0.4);
    padding: 36px 32px 30px;
    text-align:center;
    animation: gateIn .4s cubic-bezier(.2,.9,.3,1);
}
@keyframes gateIn{
    from{ opacity:0; transform: translateY(18px) scale(0.97); }
    to{ opacity:1; transform: translateY(0) scale(1); }
}

.age-gate-badge{
    width:60px; height:60px; margin: 0 auto 18px;
    border-radius:50%;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: var(--color-white);
    display:flex; align-items:center; justify-content:center;
    font-family: var(--font-display); font-weight:800; font-size:1.3rem;
    box-shadow: 0 10px 26px rgba(182,49,108,0.35);
}

.age-gate-card h2{
    font-family: var(--font-display); font-weight:800; font-size:1.35rem;
    letter-spacing:-0.3px; margin-bottom:12px; color: var(--color-dark);
}
.age-gate-card p{
    font-size:0.9rem; color: var(--color-gray); line-height:1.6; margin-bottom:28px;
}
.age-gate-card p strong{ color: var(--color-dark); }

.age-gate-actions{ display:flex; flex-direction:column; gap:12px; }

.btn-enter{
    width:100%; padding: 16px; border-radius:999px;
    font-size:1.02rem; font-weight:800; letter-spacing:0.3px;
    color: var(--color-white);
    background: linear-gradient(120deg, var(--color-primary), var(--color-secondary));
    background-size: 160% auto;
    box-shadow: 0 14px 30px rgba(182,49,108,0.4);
    animation: glowPulse 2s ease-in-out infinite;
    transition: transform .15s ease, background-position .3s ease;
}
.btn-enter:hover{
    transform: translateY(-2px) scale(1.015);
    background-position: right center;
}
@keyframes glowPulse{
    0%,100%{ box-shadow: 0 14px 30px rgba(182,49,108,0.4); }
    50%{ box-shadow: 0 14px 40px rgba(182,49,108,0.65), 0 0 0 6px rgba(182,49,108,0.12); }
}

.btn-exit{
    width:100%; padding: 12px; border-radius:999px;
    font-size:0.85rem; font-weight:600; color: var(--color-gray);
    background: transparent; border: 1.5px solid var(--color-bg-alt);
    transition: background .2s ease, color .2s ease;
}
.btn-exit:hover{ background: var(--color-bg-alt); color: var(--color-dark); }

.age-gate-legal{
    margin-top:20px; font-size:0.7rem; color: var(--color-gray); opacity:0.8;
}

/* Base */
.alert {
    position: relative;
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.375rem;
}

/* Succès */
.alert-success {
    color: #0f5132;
    background-color: #d1e7dd;
    border-color: #badbcc;
}

/* Erreur */
.alert-danger {
    color: #842029;
    background-color: #f8d7da;
    border-color: #f5c2c7;
}

.latest-ads-rail {
    max-width: 1200px;
    margin: 0 auto 34px;
    padding: 0 24px;
}

.latest-ads-track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding: 4px 4px 12px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: var(--color-bg-alt) transparent;
}

.latest-ads-track::-webkit-scrollbar {
    height: 5px;
}

.latest-ads-track::-webkit-scrollbar-thumb {
    background: var(--color-bg-alt);
    border-radius: 999px;
}

.latest-ad-card {
    flex: 0 0 calc((100% - 64px) / 5);
    min-width: 0;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--color-white);
    box-shadow: var(--shadow-card);
    scroll-snap-align: start;
}

.latest-ad-thumb {
    aspect-ratio: 1 / 1.12;
    overflow: hidden;
    background: linear-gradient(
        135deg,
        var(--color-primary),
        var(--color-secondary)
    );
}

.latest-ad-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.latest-ad-info {
    padding: 11px 13px 13px;
}

.latest-ad-info strong {
    display: block;
    overflow: hidden;
    color: var(--color-dark);
    font-size: .88rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.latest-ad-info span {
    display: block;
    margin-top: 3px;
    color: var(--color-gray);
    font-size: .74rem;
}

@media (max-width: 1000px) {
    .latest-ad-card {
        flex-basis: calc((100% - 32px) / 3);
    }
}

@media (max-width: 700px) {
    .latest-ads-rail {
        padding: 0 16px;
    }

    .latest-ads-track {
        gap: 12px;
        margin-right: -16px;
        padding-right: 16px;
    }

    .latest-ad-card {
        /*
         * Deux cartes visibles et un aperçu de la troisième.
         */
        flex-basis: 43vw;
        min-width: 145px;
    }

    .latest-ad-thumb {
        aspect-ratio: 1 / 1.08;
    }
}