:root{
  --primary: #8B3D4C;
  --primary-dark: #6E2F3B;
  --rose: #C79098;
  --rose-light: #E9C7CB;
  --bg-1: #FCEFEC;
  --bg-2: #F6E2E1;
  --ink: #4A2530;
  --paper: #FFFFFF;
}
*{box-sizing:border-box;}
body{
  margin:0;
  min-height:100vh;
  font-family:'Montserrat', sans-serif;
  background:
          radial-gradient(circle at 85% 8%, rgba(139,61,76,0.06) 0%, transparent 45%),
          linear-gradient(160deg, var(--bg-1) 0%, var(--bg-2) 55%, #F3D9D8 100%);
  color:var(--ink);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2rem 1rem;
}

.vcard{
  position:relative;
  width:100%;
  max-width:440px;
  background:var(--paper);
  border-radius:22px;
  box-shadow:0 25px 60px rgba(107,45,58,0.18), 0 4px 14px rgba(107,45,58,0.08);
  padding:2.75rem 2.25rem 2.25rem;
  text-align:center;
  overflow:hidden;
  border:1px solid rgba(139,61,76,0.08);
}

.vcard::before{
  content:"";
  position:absolute;
  inset:10px;
  border:1px solid rgba(139,61,76,0.16);
  border-radius:16px;
  pointer-events:none;
}

.logo{
  width:9rem;
  height:9rem;
  margin:0 auto 0.75rem;
  display:block;
}

h1{
  font-family:'Cormorant Garamond', serif;
  font-weight:600;
  font-size:2.5rem;
  color:var(--primary);
  margin:0.25rem 0 0.15rem;
  letter-spacing:0.5px;
}

.title{
  font-size:0.72rem;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:var(--rose);
  font-weight:600;
  margin:0 0 1.1rem;
}
.title .dot{ color:var(--primary); margin:0 0.4em; }

.divider{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0.7rem;
  margin:0 0 1.15rem;
}
.divider .line{
  height:1px;
  width:56px;
  background:linear-gradient(90deg, transparent, var(--rose-light) 50%, transparent);
}
.divider svg{ width:20px; height:20px; flex-shrink:0; }

.tagline{
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-size:1.28rem;
  color:var(--primary);
  margin:0 0 0.2rem;
  line-height:1.3;
}
.subtagline{
  font-size:0.68rem;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--rose);
  font-weight:600;
  margin:0 0 1.6rem;
}

.contact-preview{
  background:linear-gradient(160deg, #FCEFEC, #F7E2E1);
  border:1px solid rgba(139,61,76,0.1);
  border-radius:16px;
  padding:1.35rem 1.4rem;
  text-align:left;
  margin-bottom:1.6rem;
}

.contact-item{
  display:flex;
  align-items:flex-start;
  gap:0.85rem;
  padding:0.5rem 0;
}
.contact-item + .contact-item{
  border-top:1px solid rgba(139,61,76,0.09);
}

.icon-badge{
  flex-shrink:0;
  width:32px;
  height:32px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--primary), var(--primary-dark));
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 10px rgba(139,61,76,0.28);
}
.icon-badge svg{ width:15px; height:15px; fill:#fff; }

.contact-text{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-top:0.05rem;
}
.contact-text strong{
  font-size:0.92rem;
  font-weight:600;
  color:var(--ink);
  line-height:1.35;
}
.contact-text a{
  color:var(--ink);
  text-decoration:none;
}
.contact-text a:hover{ color:var(--primary); }
.contact-text small{
  display:block;
  font-size:0.72rem;
  color:var(--rose);
  font-weight:600;
  margin-top:0.15rem;
  letter-spacing:0.2px;
}
.contact-text small a{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:2px;
  text-decoration-color:rgba(139,61,76,0.35);
}
.contact-text small a:hover{
  color:var(--primary);
  text-decoration-color:var(--primary);
}

.btn-download{
  width:100%;
  background:linear-gradient(45deg, var(--primary), var(--primary-dark));
  color:#fff;
  border:none;
  padding:1rem 1.5rem;
  border-radius:50px;
  font-family:'Montserrat', sans-serif;
  font-size:0.85rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.65rem;
  box-shadow:0 10px 25px rgba(139,61,76,0.32);
  transition:transform 0.25s ease, box-shadow 0.25s ease;
}
.btn-download:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 32px rgba(139,61,76,0.4);
}
.btn-download:active{ transform:translateY(0); }
.btn-download svg{ width:16px; height:16px; fill:#fff; }

.info-note{
  margin-top:1.35rem;
  background:rgba(139,61,76,0.06);
  border-left:3px solid var(--primary);
  border-radius:10px;
  padding:0.85rem 1rem;
  font-size:0.74rem;
  line-height:1.5;
  color:var(--ink);
  text-align:left;
}
.info-note strong{ color:var(--primary); }

.rdv-note{
  margin-top:0.6rem;
  font-size:0.72rem;
  color:var(--primary);
  font-weight:600;
  letter-spacing:0.3px;
}

@media (max-width:480px){
  .vcard{ padding:2.1rem 1.4rem 1.8rem; }
  h1{ font-size:2.1rem; }
  .tagline{ font-size:1.1rem; }
}

/* ---- Page "en construction" ---- */
.status-badge{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  background:linear-gradient(160deg, #FCEFEC, #F7E2E1);
  border:1px solid rgba(139,61,76,0.15);
  border-radius:50px;
  padding:0.45rem 1rem;
  font-size:0.68rem;
  font-weight:700;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--primary);
  margin:0 0 1.5rem;
}
.status-badge .dot-pulse{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--primary);
  animation:pulse 1.8s ease-in-out infinite;
}
@keyframes pulse{
  0%, 100%{ opacity:1; transform:scale(1); }
  50%{ opacity:0.45; transform:scale(1.3); }
}

.construction-icon{
  width:64px;
  height:64px;
  margin:0 auto 1.4rem;
  display:block;
}
.construction-icon svg{ width:100%; height:100%; }

.construction-text{
  font-size:0.9rem;
  line-height:1.7;
  color:var(--ink);
  margin:0 0 1.8rem;
}

.divider-simple{
  height:1px;
  width:100%;
  background:linear-gradient(90deg, transparent, var(--rose-light) 50%, transparent);
  margin:1.6rem 0;
}

.contact-mini{
  display:flex;
  flex-direction:column;
  gap:0.6rem;
  margin-top:0.4rem;
}
.contact-mini a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.55rem;
  color:var(--ink);
  text-decoration:none;
  font-size:0.88rem;
  font-weight:600;
  transition:color 0.2s ease;
}
.contact-mini a:hover{ color:var(--primary); }
.contact-mini svg{ width:15px; height:15px; fill:var(--primary); flex-shrink:0; }