/* ============================================
   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 h3{
    font-family: var(--font-display); font-size:1.1rem; font-weight:600; margin-bottom:12px;
    color: var(--color-primary-dark);
}
.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;
}

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