/* ==========================================================================
   Home "épurée & premium" — scoped entirely under .hp-shell.
   Does not touch stylehp.css / styles_visit.css (shared by ~300 other pages).
   ========================================================================== */

:root{
  --hp-ground:      #120d13;
  --hp-panel:        rgba(30,22,31,0.62);
  --hp-panel-solid:  #1e161f;
  --hp-hairline:     rgba(247,240,244,0.09);
  --hp-hairline-2:   rgba(247,240,244,0.16);
  --hp-pink:         #f0359a;
  --hp-pink-soft:    #ff8cc8;
  --hp-gold:         #cda86a;
  --hp-ink:          #f7f0f4;
  --hp-ink-muted:    #b7a6b3;
  --hp-ink-faint:    #8a7a87;
  --hp-online:       #33d68e;
  --hp-radius-lg:    22px;
  --hp-radius-md:    16px;
  --hp-radius-sm:    10px;
  --hp-space-1:      8px;
  --hp-space-2:      16px;
  --hp-space-3:      24px;
  --hp-space-4:      40px;
  --hp-shadow-card:  0 20px 50px -22px rgba(0,0,0,0.7);
}

html.hp-html{background:var(--hp-ground) !important;}

body.hp-body{
  background:
    radial-gradient(120% 90% at 82% -10%, rgba(240,53,154,0.14), transparent 55%),
    radial-gradient(90% 70% at 6% 0%, rgba(205,168,106,0.09), transparent 50%),
    var(--hp-ground) !important;
  margin-bottom:60px;
  overflow-x:hidden;
}

.hp-shell{
  max-width:1180px;
  margin:0 auto;
  padding:0 var(--hp-space-3) 60px;
  color:var(--hp-ink);
  font-family:'Outfit', sans-serif;
}

.hp-shell *{box-sizing:border-box;}
.hp-shell h1,
.hp-shell h2,
.hp-shell h3{text-wrap:balance;}

.hp-shell .hp-eyebrow{
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--hp-gold);
  display:block;
  margin-bottom:6px;
}

.hp-shell .hp-tagline{
  font-family:'Fraunces','Georgia',serif;
  font-style:italic;
  font-weight:400;
  color:var(--hp-pink-soft);
  font-size:18px;
}

/* ---------- generic glass card ---------- */
.hp-shell .hp-card{
  background:var(--hp-panel);
  border:1px solid var(--hp-hairline);
  border-radius:var(--hp-radius-lg);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  box-shadow:var(--hp-shadow-card);
}

/* ---------- hero ---------- */
.hp-shell .hp-hero{
  display:grid;
  grid-template-columns:0.86fr 1.14fr;
  gap:var(--hp-space-3);
  margin-top:var(--hp-space-2);
  align-items:stretch;
}
@media (max-width:900px){
  .hp-shell .hp-hero{grid-template-columns:1fr;}
}

.hp-shell .hp-card--join{
  padding:var(--hp-space-3);
  display:flex;
  flex-direction:column;
  gap:var(--hp-space-2);
}
.hp-shell .hp-card--join .hp-card-title{
  font-size:18px;
  font-weight:600;
  text-align:center;
  color:var(--hp-ink);
  margin:0;
}
.hp-shell .hp-card--join .hp-card-title strong{color:var(--hp-pink-soft);}

.hp-shell .hp-join-faces{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}
@media (max-width:480px){
  .hp-shell .hp-join-faces{grid-template-columns:repeat(3,1fr);}
}

/* neutralise the legacy inline img styles (border:8px solid #333 etc.) */
.hp-shell .hp-join-faces img{
  width:100% !important;
  height:auto !important;
  aspect-ratio:1 !important;
  object-fit:cover !important;
  margin:0 !important;
  padding:0 !important;
  border:1px solid var(--hp-hairline-2) !important;
  border-radius:var(--hp-radius-sm) !important;
  box-shadow:0 10px 24px -12px rgba(0,0,0,0.6);
}

.hp-shell .hp-cta-label{
  text-align:center;
  font-size:14px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--hp-pink-soft);
  margin:0;
}

.hp-shell .hp-btn-primary{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:linear-gradient(135deg, var(--hp-pink), #c81f79);
  color:#fff !important;
  font-weight:600;
  font-size:15px;
  padding:15px 20px;
  border-radius:999px;
  border:none;
  text-decoration:none;
  box-shadow:0 14px 30px -10px rgba(240,53,154,0.55);
  transition:transform .15s ease, box-shadow .15s ease;
}
.hp-shell .hp-btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 18px 34px -8px rgba(240,53,154,0.65);
}

.hp-shell .hp-adult-note{
  text-align:center;
  font-size:12.5px;
  color:var(--hp-ink-faint);
  letter-spacing:.02em;
}

/* value card */
.hp-shell .hp-card--value{
  padding:var(--hp-space-4) var(--hp-space-3);
  display:flex;
  flex-direction:column;
  gap:var(--hp-space-3);
  justify-content:center;
}
.hp-shell .hp-h1{
  font-size:clamp(26px,3.2vw,38px);
  font-weight:700;
  letter-spacing:-0.01em;
  line-height:1.15;
  color:var(--hp-ink);
  margin:0;
}

.hp-shell .hp-features{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px 24px;
  padding-top:var(--hp-space-2);
  border-top:1px solid var(--hp-hairline);
  margin:0;
}
@media (max-width:520px){
  .hp-shell .hp-features{grid-template-columns:1fr;}
}
.hp-shell .hp-feature{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:14.5px;
  color:var(--hp-ink-muted);
}
.hp-shell .hp-feature svg{flex:none;color:var(--hp-gold);}

.hp-shell .hp-stat-row{
  display:flex;
  align-items:baseline;
  gap:10px;
  padding-top:var(--hp-space-2);
  border-top:1px solid var(--hp-hairline);
  flex-wrap:wrap;
}
.hp-shell .hp-stat-num{
  font-size:28px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  color:var(--hp-pink-soft);
}
.hp-shell .hp-stat-label{font-size:14px;color:var(--hp-ink-muted);}

/* ---------- section shell ---------- */
.hp-shell .hp-section{
  margin-top:var(--hp-space-4);
  background:var(--hp-panel);
  border:1px solid var(--hp-hairline);
  border-radius:var(--hp-radius-lg);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  box-shadow:var(--hp-shadow-card);
  padding:var(--hp-space-3);
}
.hp-shell .hp-section-title{
  font-size:19px;
  font-weight:600;
  color:var(--hp-ink);
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 var(--hp-space-2);
}
.hp-shell .hp-section-title svg{color:var(--hp-gold);flex:none;}
.hp-shell .hp-section-sub{
  font-size:14px;
  color:var(--hp-ink-muted);
  margin:-8px 0 var(--hp-space-2);
  max-width:70ch;
  line-height:1.6;
}

.hp-shell .hp-two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--hp-space-3);
}
@media (max-width:900px){
  .hp-shell .hp-two-col{grid-template-columns:1fr;}
}

/* new members grid — restyles the existing PHP-generated markup
   (.conteneurvignettemembrehome / .divimgmembrehome / .girl,.boy,.couple,.trav)
   without touching the PHP that emits it. */
.hp-shell .hp-members{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
@media (max-width:640px){
  .hp-shell .hp-members{grid-template-columns:1fr;}
}
.hp-shell .conteneurvignettemembrehome{
  display:flex !important;
  align-items:center;
  width:100% !important;
  height:auto !important;
  border:1px solid var(--hp-hairline-2) !important;
  background:rgba(255,255,255,0.04) !important;
  border-radius:var(--hp-radius-md) !important;
  padding:10px !important;
  margin:0 !important;
  overflow:hidden;
  transition:border-color .15s ease, background .15s ease;
}
.hp-shell .conteneurvignettemembrehome:hover{
  border-color:var(--hp-hairline-2);
  background:rgba(255,255,255,0.07) !important;
}
.hp-shell .conteneurvignettemembrehome div.divimgmembrehome{
  width:64px !important;
  height:64px !important;
  background-size:cover !important;
  border-radius:14px !important;
  border:1px solid var(--hp-hairline-2);
  flex:none;
}
.hp-shell .conteneurvignettemembrehome div[style]:not(.divimgmembrehome){
  width:auto !important;
  margin-left:12px !important;
}
.hp-shell .conteneurvignettemembrehome .girl{color:var(--hp-pink-soft) !important;}
.hp-shell .conteneurvignettemembrehome .boy{color:#7fb4ff !important;}
.hp-shell .conteneurvignettemembrehome .couple{color:#7be3b0 !important;}
.hp-shell .conteneurvignettemembrehome span[style*="464646"]{color:var(--hp-ink-faint) !important;}

/* listing pages (femmes-libertines.php etc.) — restyles the existing
   .conteneurvignettevisite / .divimgmembrevisite markup, scoped under
   .hp-shell so the 8 other pages sharing this markup (not wrapped in
   .hp-shell) are unaffected. */
.hp-shell .hp-listing-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
@media (max-width:900px){
  .hp-shell .hp-listing-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:640px){
  .hp-shell .hp-listing-grid{grid-template-columns:1fr;}
}
.hp-shell .conteneurvignettevisite{
  display:flex !important;
  align-items:center;
  width:100% !important;
  height:auto !important;
  border:1px solid var(--hp-hairline-2) !important;
  background:rgba(255,255,255,0.04) !important;
  border-radius:var(--hp-radius-md) !important;
  padding:10px !important;
  margin:0 !important;
  overflow:hidden;
  transition:border-color .15s ease, background .15s ease;
}
.hp-shell .conteneurvignettevisite:hover{
  border-color:var(--hp-hairline-2);
  background:rgba(255,255,255,0.07) !important;
}
.hp-shell .conteneurvignettevisite div.divimgmembrevisite{
  width:64px !important;
  height:64px !important;
  background-size:cover !important;
  background-position:center !important;
  border-radius:14px !important;
  border:1px solid var(--hp-hairline-2);
  flex:none;
}
.hp-shell .conteneurvignettevisite div[style]:not(.divimgmembrevisite){
  width:auto !important;
  margin-left:12px !important;
}
.hp-shell .conteneurvignettevisite .girl{color:var(--hp-pink-soft) !important;}
.hp-shell .conteneurvignettevisite .boy{color:#7fb4ff !important;}
.hp-shell .conteneurvignettevisite .couple{color:#7be3b0 !important;}
.hp-shell .conteneurvignettevisite .trav{color:#ffb15e !important;}
.hp-shell .conteneurvignettevisite span[style*="464646"]{color:var(--hp-ink-faint) !important;}

/* live-cam grid */
.hp-shell .hp-live-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:10px;
}
@media (max-width:640px){
  .hp-shell .hp-live-grid{grid-template-columns:repeat(4,1fr);}
}
.hp-shell .hp-live-grid img{
  width:100% !important;
  height:auto !important;
  aspect-ratio:1 !important;
  object-fit:cover !important;
  margin:0 !important;
  padding:0 !important;
  border:1px solid var(--hp-hairline-2) !important;
  border-radius:var(--hp-radius-sm) !important;
}

/* news */
.hp-shell .hp-news{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--hp-space-2);
}
@media (max-width:860px){
  .hp-shell .hp-news{grid-template-columns:1fr;}
}
.hp-shell .conteneurnews{
  height:auto !important;
  min-height:0 !important;
  border:1px solid var(--hp-hairline-2) !important;
  background:rgba(255,255,255,0.04) !important;
  border-radius:var(--hp-radius-md) !important;
  padding:var(--hp-space-2) !important;
  margin:0 !important;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.hp-shell .conteneurnews img{
  width:44px !important;
  float:none !important;
  border-radius:10px;
  margin:0 0 6px 0 !important;
}
.hp-shell .conteneurnews div[style*="font-size:19px"]{
  font-size:15.5px !important;
  color:var(--hp-ink) !important;
  display:block !important;
}
.hp-shell .conteneurnews div[style*="font-size:19px"] i{color:var(--hp-gold) !important;}
.hp-shell .conteneurnews span[style*="font-size:16px"]{color:var(--hp-ink-faint) !important;font-size:12px !important;}
.hp-shell .conteneurnews .girl a{color:var(--hp-pink-soft) !important;}
.hp-shell .conteneurnews span[style*="464646"]{color:var(--hp-ink-muted) !important;font-size:13.5px !important;line-height:1.55 !important;}

/* footer / social bar */
.hp-shell .hp-footer-bar{
  margin-top:var(--hp-space-4);
  padding:var(--hp-space-3);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--hp-space-2);
  flex-wrap:wrap;
}
.hp-shell .hp-footer-bar .hp-tagline{font-size:15px;}
.hp-shell .hp-social{display:flex;gap:10px;}
.hp-shell .hp-social a{
  width:38px;height:38px;
  border-radius:50%;
  border:1px solid var(--hp-hairline-2);
  display:flex;align-items:center;justify-content:center;
  color:var(--hp-ink-muted) !important;
  transition:color .15s ease, border-color .15s ease;
}
.hp-shell .hp-social a:hover{color:var(--hp-pink-soft) !important;border-color:rgba(240,53,154,0.4);}
.hp-shell .hp-social a i{font-size:17px !important;}

/* ---------- registration form ---------- */
.hp-shell .hp-form-group{margin-bottom:12px;}
.hp-shell .hp-input{
  display:block;
  width:100%;
  height:46px !important;
  padding:0 14px !important;
  border-radius:10px !important;
  border:1px solid var(--hp-hairline-2) !important;
  background:rgba(255,255,255,0.06) !important;
  color:var(--hp-ink) !important;
  font-size:15px !important;
  transition:border-color .15s ease, background .15s ease;
}
.hp-shell .hp-input::placeholder{color:var(--hp-ink-faint);opacity:1;}
.hp-shell .hp-input:focus{
  outline:none;
  border-color:var(--hp-pink) !important;
  background:rgba(255,255,255,0.1) !important;
  box-shadow:0 0 0 3px rgba(240,53,154,0.18);
}
.hp-shell select.hp-input{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b7a6b3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:right 14px center !important;
  background-size:14px !important;
  padding-right:36px !important;
}
.hp-shell select.hp-input option{color:#1b0712;}
.hp-shell #UserIDbox{font-size:12.5px;margin-top:6px;min-height:1px;}
.hp-shell .hp-checkbox-row{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--hp-ink-muted);
  font-size:13.5px;
  line-height:1.4;
  margin:16px 2px;
}
.hp-shell .hp-checkbox-row input[type=checkbox]{
  width:19px;height:19px;
  margin:0;flex:none;
  accent-color:var(--hp-pink);
}

/* ==========================================================================
   Registration wizard (inscription-ck-*) — full-bleed photo + centered glass card.
   ========================================================================== */
.hp-wizard-page{
  min-height:100vh;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:40px 20px 60px;
}
.hp-wizard-card{
  width:100%;
  max-width:900px;
  background:var(--hp-panel);
  border:1px solid var(--hp-hairline);
  border-radius:var(--hp-radius-lg);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 24px 60px -20px rgba(0,0,0,0.55);
  padding:var(--hp-space-4) var(--hp-space-3);
  color:var(--hp-ink);
  font-family:'Outfit',sans-serif;
}
.hp-wizard-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--hp-space-2);
  margin-bottom:var(--hp-space-2);
  flex-wrap:wrap;
}
.hp-wizard-title{
  font-size:clamp(20px,2.6vw,26px);
  font-weight:700;
  letter-spacing:-0.01em;
  margin:0;
  display:flex;
  align-items:center;
  gap:10px;
}
.hp-wizard-title i{color:var(--hp-gold);font-size:.85em;}
.hp-wizard-step{
  flex:none;
  display:flex;
  align-items:center;
  gap:8px;
  background:rgba(255,255,255,0.06);
  border:1px solid var(--hp-hairline-2);
  border-radius:999px;
  padding:6px 14px;
  font-size:13px;
  font-weight:600;
  color:var(--hp-ink-muted);
}
.hp-wizard-step b{color:var(--hp-pink-soft);font-size:15px;}
.hp-wizard-hint{
  color:var(--hp-ink-muted);
  font-size:14px;
  margin:0 0 var(--hp-space-3);
  padding-bottom:var(--hp-space-2);
  border-bottom:1px solid var(--hp-hairline);
}

.hp-wizard-card #step1{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2px 28px;
}
.hp-wizard-card .form-group.row{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:0 0 16px;
}
.hp-wizard-card .form-group.row > label{
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--hp-ink-faint);
  padding:0;
  max-width:none;
  flex:none;
}
.hp-wizard-card .form-group.row > div{
  max-width:none;
  flex:none;
  padding:0;
  width:100%;
}
.hp-wizard-card select,
.hp-wizard-card .hp-input{
  width:100%;
  height:44px;
  padding:0 12px;
  border-radius:10px;
  border:1px solid var(--hp-hairline-2);
  background:rgba(255,255,255,0.06);
  color:var(--hp-ink);
  font-size:14.5px;
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b7a6b3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:13px;
  padding-right:34px;
}
.hp-wizard-card select:focus{
  outline:none;
  border-color:var(--hp-pink);
  box-shadow:0 0 0 3px rgba(240,53,154,0.18);
}
.hp-wizard-card select option{color:#1b0712;}
.hp-wizard-card textarea{
  width:100%;
  padding:14px;
  border-radius:12px;
  border:1px solid var(--hp-hairline-2);
  background:rgba(255,255,255,0.06);
  color:var(--hp-ink);
  font-size:15px;
  font-family:'Outfit',sans-serif;
  resize:vertical;
  margin:14px 0 !important;
}
.hp-wizard-card textarea:focus{
  outline:none;
  border-color:var(--hp-pink);
  box-shadow:0 0 0 3px rgba(240,53,154,0.18);
}
.hp-wizard-card textarea::placeholder{color:var(--hp-ink-faint);}
.hp-wizard-card #charNum{
  display:inline-block;
  border:1px solid var(--hp-hairline-2) !important;
  border-radius:6px;
  color:var(--hp-pink-soft);
  font-weight:600;
}
.hp-wizard-card .form-group.row .row{
  display:flex;
  gap:8px;
  margin:0;
}
.hp-wizard-card .form-group.row .row > [class^="col-"]{
  padding:0;
  width:auto;
  max-width:none;
  flex:1;
}
.hp-wizard-actions{
  grid-column:1 / -1;
  display:flex;
  gap:14px;
  margin-top:10px;
  flex-wrap:wrap;
}
.hp-wizard-actions input[type=submit]{
  flex:1;
  min-width:180px;
  height:48px;
  border-radius:12px;
  border:none;
  font-weight:600;
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:.02em;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  background:linear-gradient(135deg,var(--hp-pink),#c81f79);
  color:#fff;
  box-shadow:0 14px 30px -10px rgba(240,53,154,0.55);
}
.hp-wizard-actions input[type=submit]:not(.submitvide):hover{transform:translateY(-1px);box-shadow:0 18px 34px -8px rgba(240,53,154,0.65);}
.hp-wizard-actions input.submitvide{
  background:transparent;
  color:var(--hp-ink-muted);
  border:1px solid var(--hp-hairline-2);
}
.hp-wizard-actions input.submitvide:hover{color:var(--hp-ink);border-color:var(--hp-ink-muted);}

@media (max-width:640px){
  .hp-wizard-card #step1{grid-template-columns:1fr;}
  .hp-wizard-card{padding:var(--hp-space-3) var(--hp-space-2);}
}

/* FAQ — native <details>/<summary> accordion, zero JS */
.hp-shell .hp-faq{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.hp-shell .hp-faq-item{
  border:1px solid var(--hp-hairline);
  border-radius:var(--hp-radius-md);
  background:rgba(247,240,244,0.02);
  overflow:hidden;
}
.hp-shell .hp-faq-item[open]{border-color:var(--hp-hairline-2);}
.hp-shell .hp-faq-item summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:16px 18px;
  font-size:15.5px;
  font-weight:600;
  color:var(--hp-ink);
}
.hp-shell .hp-faq-item summary::-webkit-details-marker{display:none;}
.hp-shell .hp-faq-item summary .hp-faq-plus{
  flex:none;
  width:24px;
  height:24px;
  border-radius:50%;
  border:1px solid var(--hp-hairline-2);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--hp-gold);
  transition:transform .2s ease, background .2s ease;
}
.hp-shell .hp-faq-item[open] summary .hp-faq-plus{transform:rotate(45deg);background:rgba(240,53,154,0.14);border-color:rgba(240,53,154,0.4);color:var(--hp-pink-soft);}
.hp-shell .hp-faq-item .hp-faq-answer{
  padding:0 18px 18px;
  margin:0;
  color:var(--hp-ink-muted);
  font-size:14.5px;
  line-height:1.65;
  max-width:75ch;
}