/* ═══════════════════════════════════════════════════════
   MAEV'ART Beauty Center · contact.css
   Styles spécifiques à la page Contact
═══════════════════════════════════════════════════════ */

/* ── Nav sur fond clair ───────────────────────────────── */
.nav-lnk          { color: #1A1A1A; }
.nav-lnk:hover    { color: #8B2346; }
.nav-lnk-active   { color: #8B2346 !important; }

/* ═══════════════════════════════════════════════════════
   SECTION 1 · HERO (light + portrait arrondi)
═══════════════════════════════════════════════════════ */
.contact-hero-blob-a {
    width: 500px; height: 500px;
    top: -120px; left: -150px;
    opacity: 0.07;
}
.contact-hero-blob-b {
    width: 420px; height: 420px;
    bottom: -120px; right: -120px;
    opacity: 0.08;
    animation-delay: -3s;
}
.contact-h1 {
    font-size: clamp(2.8rem, 6vw, 4.8rem);
    font-weight: 300;
}
.contact-h1-accent { color: #8B2346; }

.contact-live-dot {
    position: relative;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #22c55e;
    flex-shrink: 0;
}
.contact-live-dot::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: #22c55e;
    opacity: 0.4;
    animation: contact-live-pulse 2s infinite;
}
@keyframes contact-live-pulse {
    0%   { transform: scale(1);   opacity: 0.4; }
    70%  { transform: scale(2);   opacity: 0; }
    100% { transform: scale(1);   opacity: 0; }
}

.contact-portrait-wrap {
    position: relative;
    aspect-ratio: 4 / 5;
    max-width: 440px;
    margin-inline: auto;
}
.contact-portrait {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 32px;
    box-shadow: 0 30px 60px rgba(139, 35, 70, 0.20);
}
.contact-rating-card {
    position: absolute;
    bottom: -28px;
    left: -18px;
    padding: 14px 18px;
    border-radius: 18px;
    z-index: 10;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.10);
}
@media (min-width: 1024px) {
    .contact-rating-card { left: -32px; }
}

/* ═══════════════════════════════════════════════════════
   SECTION 2 · 3 ÉTAPES BOOKING
═══════════════════════════════════════════════════════ */
.booking-steps { position: relative; }
.booking-step {
    position: relative;
    padding: 32px 24px 28px;
    border-radius: 24px;
    background: #F5EFE6;
    border: 1px solid rgba(200, 169, 126, 0.30);
    transition: transform 300ms ease, box-shadow 300ms ease;
}
.booking-step:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(139, 35, 70, 0.12);
}
.booking-step-num {
    position: absolute;
    top: 18px; right: 22px;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 44px;
    line-height: 1;
    color: #C8A97E;
    opacity: 0.45;
}
.booking-step-icon {
    width: 52px; height: 52px;
    border-radius: 16px;
    background: rgba(139, 35, 70, 0.08);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 20px;
}
.booking-step-title {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 500;
    font-size: 22px;
    color: #1A1A1A;
    line-height: 1.2;
    margin-bottom: 10px;
}
.booking-step-desc {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #8C7B6E;
    line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════
   SECTION 3 · PRESTATIONS CHIPS
═══════════════════════════════════════════════════════ */
.presta-chip {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 22px;
    background: white;
    border: 1px solid rgba(200, 169, 126, 0.35);
    border-radius: 18px;
    transition: all 300ms ease;
}
.presta-chip:hover {
    transform: translateY(-3px);
    border-color: rgba(139, 35, 70, 0.45);
    box-shadow: 0 14px 30px rgba(139, 35, 70, 0.12);
}
.presta-chip-icon {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(200, 169, 126, 0.15);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.presta-chip-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: #1A1A1A;
    line-height: 1.1;
    margin-bottom: 4px;
}
.presta-chip-desc {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 12px;
    color: #8C7B6E;
}
.presta-chip-arrow {
    width: 18px; height: 18px;
    color: #8B2346;
    margin-left: auto;
    flex-shrink: 0;
    transition: transform 300ms ease;
}
.presta-chip:hover .presta-chip-arrow { transform: translateX(4px); }

/* Variant dark (Autre demande) */
.presta-chip-dark {
    background: #1A1A1A;
    border-color: #1A1A1A;
}
.presta-chip-dark:hover {
    background: #8B2346;
    border-color: #8B2346;
    box-shadow: 0 14px 30px rgba(139, 35, 70, 0.35);
}
.presta-chip-icon-dark { background: rgba(255, 255, 255, 0.10); }
.presta-chip-title-dark { color: white; }
.presta-chip-desc-dark { color: rgba(255, 255, 255, 0.55); }
.presta-chip-arrow-dark { color: #C8A97E; }
.presta-chip-dark:hover .presta-chip-arrow-dark { color: white; }

/* ═══════════════════════════════════════════════════════
   SECTION 4 · MAP + INFO
═══════════════════════════════════════════════════════ */
.contact-map-block {
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
    min-height: 420px;
    background: rgba(201, 185, 154, 0.15);
}
.contact-map-iframe {
    width: 100%;
    height: 100%;
    min-height: 420px;
    border: 0;
    display: block;
}

/* ═══════════════════════════════════════════════════════
   SECTION 5 · FAQ CARDS
═══════════════════════════════════════════════════════ */
.faq-item {
    background: white;
    border: 1px solid rgba(200, 169, 126, 0.30);
    border-radius: 18px;
    overflow: hidden;
    transition: border-color 300ms ease, box-shadow 300ms ease;
}
.faq-item:hover {
    border-color: rgba(139, 35, 70, 0.30);
    box-shadow: 0 6px 18px rgba(139, 35, 70, 0.06);
}
.faq-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    text-align: left;
    background: transparent;
    border: none;
    cursor: pointer;
}
.faq-q-row {
    display: flex;
    align-items: center;
    gap: 16px;
}
.faq-q-num {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 22px;
    color: #C8A97E;
    line-height: 1;
    flex-shrink: 0;
}
.faq-q-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 15px;
    color: #1A1A1A;
    line-height: 1.4;
}
.faq-icon-wrap {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(139, 35, 70, 0.08);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: background 300ms ease;
}
.faq-trigger:hover .faq-icon-wrap { background: rgba(139, 35, 70, 0.15); }
.faq-icon {
    color: #8B2346;
    transition: transform 300ms ease;
}
.faq-answer {
    overflow: hidden;
    max-height: 0;
    transition: max-height 500ms ease-in-out;
}
.faq-a-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #8C7B6E;
    line-height: 1.7;
    padding: 0 24px 20px 62px;
}

/* ── Icônes spécifiques ───────────────────────────────── */
.icon-wa      { width: 48px; height: 48px; color: white; }
.icon-maps-sm { width: 12px; height: 12px; }

/* ── Delays additionnels ──────────────────────────────── */
.delay-50  { transition-delay: 50ms; }
.delay-400 { transition-delay: 400ms; }