/**
 * Melanin Stories — assets/css/components/annuaire-entreprises-capture.css
 * Page de capture email — plein écran, sans scroll. Fichier autonome
 * (redéfinit ses propres tokens couleur pour ne dépendre d'aucun
 * autre fichier CSS du thème).
 */

:root{
  --ms-ink:#1A1410; --ms-paper:#FAF4E6;
  --ms-gold:#C8961E;
}

body.ms-lead-capture-page{
  margin:0; padding:0; min-height:100vh; width:100vw; overflow-y:auto; overflow-x:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-family:'Public Sans', sans-serif; color:var(--ms-paper); position:relative;
}

.ms-capture-bg{
  position:fixed; inset:0; z-index:0;
  background: url('https://melaninstories.com/wp-content/uploads/2026/09/marche-afro-couv-landing-page-annuaire.webp') center center / cover no-repeat, var(--ms-ink);
}

.ms-capture-overlay{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(180deg, rgba(26,20,16,0.55) 0%, rgba(26,20,16,0.72) 55%, rgba(26,20,16,0.88) 100%);
}

.ms-capture-wrap{
  max-width:640px; width:100%; text-align:center; position:relative; z-index:2; padding:20px;
}

.ms-capture-eyebrow{
  font-family:'IBM Plex Mono',monospace; font-size:clamp(10px,1.4vw,12px); font-weight:500; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--ms-gold); margin-bottom:14px;
}

.ms-capture-title{
  font-family:'Fraunces',serif; font-weight:600; font-size:clamp(26px,4.6vw,46px); line-height:1.1;
  letter-spacing:-0.01em; margin-bottom:14px;
}
.ms-capture-title em{font-style:normal; color:var(--ms-gold);}

.ms-capture-lead{
  font-size:clamp(13px,1.6vw,15px); color:rgba(250,244,230,0.85); max-width:440px; margin:0 auto 24px;
}

.ms-capture-form{display:flex; gap:10px; max-width:420px; margin:0 auto 12px; flex-wrap:wrap; position:relative;}
.ms-capture-form__hp{position:absolute; left:-9999px; top:-9999px;}
.ms-capture-form input[type="email"]{
  flex:1; min-width:200px; padding:13px 16px; border:none; font-family:'Public Sans',sans-serif;
  font-size:14px; background:var(--ms-paper); color:var(--ms-ink);
}
.ms-capture-form input[type="email"]:focus{outline:2px solid var(--ms-gold); outline-offset:-2px;}
.ms-capture-form button{
  background:var(--ms-gold); color:var(--ms-ink); border:none; padding:13px 24px; font-family:'IBM Plex Mono',monospace;
  font-size:12px; letter-spacing:0.06em; text-transform:uppercase; cursor:pointer; white-space:nowrap;
}
.ms-capture-form button:hover{background:var(--ms-paper);}
.ms-capture-form button:disabled{opacity:0.6; cursor:default;}
.ms-capture-form.is-hidden{display:none;}

.ms-capture-note{font-size:11px; color:rgba(250,244,230,0.55); margin-bottom:26px;}
.ms-capture-note.is-hidden{display:none;}

.ms-capture-success, .ms-capture-error{
  display:none; padding:14px 18px; font-size:13px; max-width:420px; margin:0 auto 26px;
}
.ms-capture-success{background:rgba(30,86,49,0.3); border:1px solid #1E5631;}
.ms-capture-error{background:rgba(166,38,57,0.25); border:1px solid #A62639;}
.ms-capture-success.show, .ms-capture-error.show{display:block;}

.ms-capture-perks{
  display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:rgba(250,244,230,0.15);
  max-width:560px; margin:0 auto 24px;
}
.ms-capture-perk{background:rgba(26,20,16,0.55); padding:14px 10px;}
.ms-capture-perk__icon{font-size:18px; margin-bottom:6px;}
.ms-capture-perk__text{font-size:11px; color:rgba(250,244,230,0.85); line-height:1.4;}

.ms-capture-countdown-label{
  font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--ms-gold); margin-bottom:10px;
}
.ms-capture-countdown{display:flex; justify-content:center; gap:16px; flex-wrap:wrap;}
.ms-capture-countdown__unit{min-width:48px;}
.ms-capture-countdown__num{font-family:'Fraunces',serif; font-weight:600; font-size:22px; color:var(--ms-paper);}
.ms-capture-countdown__unit-label{font-size:9px; letter-spacing:0.05em; text-transform:uppercase; color:rgba(250,244,230,0.55); margin-top:1px;}

.ms-capture-footer{
  position:relative; margin-top:18px; text-align:center;
  font-family:'IBM Plex Mono',monospace; font-size:9.5px; color:rgba(250,244,230,0.45); z-index:2;
}

@media (max-height:640px){
  .ms-capture-perks{display:none;}
  .ms-capture-lead{margin-bottom:16px;}
}

@media (max-width:600px){
  .ms-capture-form{flex-direction:column;}
  .ms-capture-form button{width:100%;}
  .ms-capture-perk__text{font-size:9.5px;}
}

#msInAppWarning{
  position: relative;
  z-index: 10;
  background: var(--ms-gold);
  color: var(--ms-ink);
  padding: 12px 20px;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.5;
}

#msInAppWarning p{
  margin: 0;
}

#msInAppWarning .msInAppWarning__how{
  font-size: 11px;
  opacity: 0.85;
  margin-top: 4px;
}