/* =====================================================
   MAACO INVEST — contact.css  (v3 premium dark)
   Palette : Noir #020202 (65%) · Violet #61398F (25%) · Blanc #F0EEEE (10%)
   ===================================================== */

/* =====================================================
   1. HERO — identique à about-hero / srvd-hero
   ===================================================== */
.contact-hero {
    position: relative;
    min-height: 90vh;
    background: var(--noir);
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 120px 0 100px;
}

/* Orbs d'ambiance */
.contact-hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(130px);
    z-index: 0;
    pointer-events: none;
}
.contact-hero-orb-1 { top: -10%; right: 0;    width: 480px; height: 480px; background: radial-gradient(circle, rgba(122,77,176,0.30), transparent 70%); }
.contact-hero-orb-2 { bottom: 0;  left: -60px; width: 380px; height: 380px; background: radial-gradient(circle, rgba(232,61,77,0.18),  transparent 70%); }

.contact-hero-inner {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Eyebrow — pill identique à about / srvd */
.contact-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 22px;
    background: rgba(2,2,2,0.07);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(2,2,2,0.12);
    border-radius: var(--radius-full);
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(2,2,2,0.65);
    margin-bottom: var(--space-6);
}
.contact-hero-eyebrow .pulse-dot {
    width: 8px; height: 8px;
    background: var(--vert);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(34,197,94,0.2);
    animation: pulseDot 2s infinite;
}
@keyframes pulseDot {
    0%,100% { box-shadow: 0 0 0 4px rgba(34,197,94,0.2); }
    50%      { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
}

/* Titre — même taille que about-hero-title / srvd-hero-title */
.contact-hero-title {
    font-size: clamp(36px, 5.5vw, 80px);
    line-height: 1.08;
    letter-spacing: -0.035em;
    font-weight: 800;
    color: #020202;
    margin-bottom: var(--space-5);
}
/* Accent violet — même police que le reste du titre */
.contact-hero-accent {
    color: var(--violet-300);
}

.contact-hero-sub {
    font-size: clamp(16px, 1.5vw, 18px);
    color: rgba(2,2,2,0.55);
    line-height: 1.7;
    max-width: 540px;
    margin: 0 0 var(--space-7);
    text-align: center;
}
.contact-hero-sub strong { color: #020202; font-weight: 700; }

.contact-hero-cta { display: flex; justify-content: center; }

@media (max-width: 700px) {
    .contact-hero { min-height: auto; padding: 90px 0 70px; }
}

/* =====================================================
   2. SHOWCASE — image pleine largeur
   ===================================================== */
.contact-showcase {
    background: var(--noir);
    position: relative;
    line-height: 0;
}
.contact-showcase-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 21 / 9;
    overflow: hidden;
}
.contact-showcase-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 8s ease;
}
.contact-showcase-wrap:hover .contact-showcase-img {
    transform: scale(1.03);
}
.contact-showcase-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(2,2,2,0.25) 0%,
        transparent 35%,
        transparent 55%,
        rgba(2,2,2,0.6) 100%
    );
    pointer-events: none;
}
.contact-showcase-badge {
    position: absolute;
    bottom: var(--space-5);
    right: var(--space-6);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background: rgba(2,2,2,0.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(97,57,143,0.45);
    border-radius: 40px;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #020202;
}
.contact-showcase-badge .pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34,197,94,0.2);
    animation: pulseDot 2s infinite;
    flex-shrink: 0;
}
@keyframes pulseDot {
    0%,100% { box-shadow: 0 0 0 4px rgba(34,197,94,0.2); }
    50%      { box-shadow: 0 0 0 9px rgba(34,197,94,0); }
}
@media (max-width: 700px) {
    .contact-showcase-wrap { aspect-ratio: 4/3; }
    .contact-showcase-badge { bottom: var(--space-3); right: var(--space-3); font-size: 11px; }
}

/* =====================================================
   3. CANAUX — 4 cards dark
   ===================================================== */
.contact-channels {
    background: var(--noir);
    padding: var(--space-9) 0;
}
.contact-channels-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}
@media (max-width: 700px) {
    .contact-channels-grid { grid-template-columns: 1fr; }
}

.contact-channel {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    background: rgba(2,2,2,0.04);
    border: 1px solid rgba(2,2,2,0.08);
    border-radius: var(--radius-xl);
    padding: var(--space-5) var(--space-6);
    text-decoration: none;
    color: #020202;
    transition: all var(--transition-smooth);
    position: relative;
    overflow: hidden;
}
.contact-channel:hover {
    border-color: rgba(97,57,143,0.5);
    background: rgba(97,57,143,0.1);
    transform: translateY(-4px);
    color: #020202;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

.contact-channel-icon {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-smooth);
}
.contact-channel-icon svg { width: 26px; height: 26px; }
.contact-channel:hover .contact-channel-icon { transform: scale(1.12) rotate(-6deg); }

/* WhatsApp */
.contact-channel--wa .contact-channel-icon { background: rgba(34,197,94,0.15); color: #4ade80; }
.contact-channel--wa:hover .contact-channel-icon { background: #25d366; color: white; }
/* Téléphone */
.contact-channel--tel .contact-channel-icon { background: rgba(96,165,250,0.15); color: #60a5fa; }
.contact-channel--tel:hover .contact-channel-icon { background: #3b82f6; color: white; }
/* Email */
.contact-channel--email .contact-channel-icon { background: rgba(251,146,60,0.15); color: #fb923c; }
.contact-channel--email:hover .contact-channel-icon { background: #f97316; color: white; }
/* RDV */
.contact-channel--rdv {
    background: rgba(97,57,143,0.15);
    border-color: rgba(97,57,143,0.35);
}
.contact-channel--rdv:hover {
    background: rgba(97,57,143,0.28);
    border-color: rgba(97,57,143,0.65);
}
.contact-channel--rdv .contact-channel-icon { background: rgba(97,57,143,0.3); color: var(--violet-300); }
.contact-channel--rdv:hover .contact-channel-icon { background: #61398F; color: white; }

.contact-channel-body { flex: 1; min-width: 0; }

.contact-channel-tag {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--violet-300);
    margin-bottom: 4px;
}
.contact-channel--rdv .contact-channel-tag { color: var(--violet-300); }

.contact-channel-body h3 {
    font-size: 18px;
    font-weight: 800;
    color: #020202;
    margin: 0 0 4px;
    letter-spacing: -0.01em;
}
.contact-channel-value {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    color: rgba(2,2,2,0.85);
    margin: 0 0 3px;
}
.contact-channel-meta {
    font-size: 12px;
    color: rgba(2,2,2,0.4);
    margin: 0;
    line-height: 1.4;
}
.contact-channel-arrow {
    flex-shrink: 0;
    font-size: 22px;
    color: var(--violet-300);
    transition: transform var(--transition-base);
    opacity: 0.7;
}
.contact-channel:hover .contact-channel-arrow {
    transform: translateX(6px);
    opacity: 1;
}

/* =====================================================
   4. FORMULAIRE + INFOS — violet sombre
   ===================================================== */
.contact-main {
    background: #efe9f9;
    padding: var(--space-10) 0;
}

.contact-main-header {
    margin-bottom: var(--space-8);
}
.contact-main-title {
    font-size: clamp(30px, 4vw, 48px);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: #020202;
    margin: var(--space-3) 0 var(--space-3);
}
.contact-main-accent { color: var(--violet-300); }
.contact-main-sub {
    font-size: 16px;
    color: rgba(2,2,2,0.5);
    line-height: 1.6;
}

.contact-main-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: var(--space-7);
    align-items: start;
}
@media (max-width: 1000px) {
    .contact-main-grid { grid-template-columns: 1fr; gap: var(--space-5); }
}

/* --- Formulaire --- */
.contact-form-wrapper {
    background: rgba(2,2,2,0.04);
    border: 1px solid rgba(2,2,2,0.08);
    border-radius: var(--radius-xl);
    padding: var(--space-7);
}
@media (max-width: 600px) { .contact-form-wrapper { padding: var(--space-5); } }

.contact-alert {
    padding: 14px 18px;
    border-radius: var(--radius-md);
    margin-bottom: var(--space-5);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.contact-alert-error {
    background: rgba(239,68,68,0.15);
    border: 1px solid rgba(239,68,68,0.3);
    color: #fca5a5;
}

.contact-form { display: flex; flex-direction: column; gap: var(--space-4); }

.contact-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}
@media (max-width: 600px) { .contact-form-row { grid-template-columns: 1fr; } }

.contact-form-group { display: flex; flex-direction: column; }
.contact-form-group label {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(2,2,2,0.6);
    margin-bottom: 8px;
}
.contact-form-group .required { color: #f87171; }

.contact-input,
.contact-textarea {
    width: 100%;
    padding: 13px 16px;
    border: 1.5px solid rgba(2,2,2,0.1);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 15px;
    color: #020202;
    background: rgba(2,2,2,0.05);
    transition: all var(--transition-base);
    box-sizing: border-box;
}
.contact-input::placeholder,
.contact-textarea::placeholder {
    color: rgba(2,2,2,0.28);
}
.contact-input:focus,
.contact-textarea:focus {
    outline: none;
    border-color: rgba(97,57,143,0.7);
    background: rgba(97,57,143,0.1);
    box-shadow: 0 0 0 3px rgba(97,57,143,0.2);
}
.contact-input.is-invalid,
.contact-textarea.is-invalid {
    border-color: rgba(248,113,113,0.6);
    background: rgba(248,113,113,0.08);
}
.contact-textarea {
    resize: vertical;
    min-height: 140px;
    font-family: inherit;
    line-height: 1.55;
}

.contact-form-error {
    color: #f87171;
    font-size: 12px;
    margin-top: 4px;
    font-weight: 600;
}

.contact-form-legal {
    font-size: 11.5px;
    color: rgba(2,2,2,0.35);
    line-height: 1.55;
    margin: var(--space-2) 0 0;
}
.contact-form-legal a {
    color: var(--violet-300);
    text-decoration: underline;
}

.contact-form-submit {
    width: 100%;
    padding: 16px;
    margin-top: var(--space-2);
    background: #61398F;
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all var(--transition-base);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.contact-form-submit svg { width: 20px; height: 20px; transition: transform var(--transition-base); }
.contact-form-submit:hover {
    background: #7a4db0;
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(97,57,143,0.4);
}
.contact-form-submit:hover svg { transform: translateX(4px); }

/* --- Sidebar infos --- */
.contact-info-wrapper {
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
@media (max-width: 1000px) { .contact-info-wrapper { position: static; } }

.contact-info-card {
    background: rgba(97,57,143,0.12);
    border: 1px solid rgba(97,57,143,0.28);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    color: #020202;
}
.contact-info-card h3 {
    color: #020202;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid rgba(2,2,2,0.1);
}

.contact-info-list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.contact-info-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}
.contact-info-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: rgba(97,57,143,0.28);
    border: 1px solid rgba(97,57,143,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}
.contact-info-list li > div:last-child { flex: 1; min-width: 0; }
.contact-info-list strong {
    display: block;
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--violet-300);
    margin-bottom: 3px;
}
.contact-info-list span,
.contact-info-list a {
    color: rgba(2,2,2,0.82);
    font-size: 14px;
    line-height: 1.5;
    text-decoration: none;
    word-break: break-word;
}
.contact-info-list a:hover { color: var(--violet-300); }

.contact-info-cta {
    padding: var(--space-4);
    background: rgba(2,2,2,0.05);
    border: 1px solid rgba(2,2,2,0.1);
    border-radius: var(--radius-md);
    text-align: center;
}
.contact-info-cta p {
    font-family: var(--font-display);
    font-size: 13px;
    color: rgba(2,2,2,0.65);
    margin: 0 0 var(--space-3);
}
.contact-info-cta-btn {
    display: inline-block;
    background: #61398F;
    color: white;
    padding: 10px 22px;
    border-radius: var(--radius-full);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    transition: all var(--transition-base);
}
.contact-info-cta-btn:hover {
    background: #7a4db0;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(97,57,143,0.4);
}

.contact-info-guarantee {
    background: rgba(2,2,2,0.03);
    border: 1px solid rgba(2,2,2,0.08);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    text-align: center;
}
.contact-info-guarantee-icon { font-size: 28px; margin-bottom: var(--space-2); }
.contact-info-guarantee strong {
    display: block;
    font-family: var(--font-display);
    font-size: 14px;
    color: #020202;
    margin-bottom: 8px;
}
.contact-info-guarantee p {
    font-size: 13px;
    color: rgba(2,2,2,0.45);
    line-height: 1.6;
    margin: 0;
}
.contact-info-guarantee p strong {
    display: inline;
    font-size: 13px;
    font-family: inherit;
    color: var(--violet-300);
}

/* =====================================================
   5. FAQ — blanc diagonal ↗
   ===================================================== */
.contact-faq {
    background: #F0EEEE;
    padding: calc(var(--space-10) + 52px) 0 var(--space-10);
    clip-path: polygon(0 52px, 100% 0, 100% 100%, 0 100%);
    margin-top: -52px;
    z-index: 1;
    position: relative;
}

.contact-faq .section-eyebrow { color: #61398F; }
.contact-faq .section-title { color: #020202; }
.contact-faq .section-title .script { color: #61398F; }

.contact-faq-list {
    max-width: 900px;
    margin: var(--space-7) auto 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.contact-faq-item {
    background: white;
    border: 1px solid rgba(2,2,2,0.08);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition-smooth);
}
.contact-faq-item:hover { border-color: rgba(97,57,143,0.25); }
.contact-faq-item[open] {
    border-color: rgba(97,57,143,0.4);
    box-shadow: 0 6px 24px rgba(97,57,143,0.08);
}
.contact-faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: var(--space-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 17px;
    color: #020202;
    letter-spacing: -0.01em;
    transition: color var(--transition-base);
}
.contact-faq-item summary::-webkit-details-marker { display: none; }
.contact-faq-item summary:hover { color: #61398F; }

.contact-faq-toggle {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(97,57,143,0.1);
    color: #61398F;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 20px;
    line-height: 1;
    transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
}
.contact-faq-item[open] .contact-faq-toggle {
    background: #61398F;
    color: white;
    transform: rotate(45deg);
}

.contact-faq-answer {
    padding: var(--space-4) var(--space-5) var(--space-5);
    color: rgba(2,2,2,0.65);
    font-size: 15px;
    line-height: 1.72;
    border-top: 1px solid rgba(2,2,2,0.06);
}
.contact-faq-answer p { margin-bottom: var(--space-3); }
.contact-faq-answer p:last-child { margin-bottom: 0; }
.contact-faq-answer strong { color: #020202; }
.contact-faq-answer a { color: #61398F; text-decoration: underline; }

/* =====================================================
   6. LOCALISATION — blanc (continuation sans clip-path)
   ===================================================== */
.contact-location {
    background: #F0EEEE;
    padding: 0 0 var(--space-10);
    position: relative;
    z-index: 1;
}

.contact-location .section-eyebrow { color: #61398F; }
.contact-location .section-title { color: #020202; }
.contact-location .section-title .accent { color: #61398F; }
.contact-location .section-subtitle { color: rgba(2,2,2,0.6); }
.contact-location .section-subtitle strong { color: #020202; }

.contact-location .section-header {
    padding-top: var(--space-8);
    border-top: 1px solid rgba(2,2,2,0.08);
}

.contact-location-wrapper {
    position: relative;
    margin-top: var(--space-7);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0,0,0,0.12);
    aspect-ratio: 21 / 9;
    max-height: 60vh;
}
@media (max-width: 700px) {
    .contact-location-wrapper { aspect-ratio: 4/3; }
}
.contact-location-map {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.contact-location-card {
    position: absolute;
    bottom: var(--space-5);
    left: var(--space-5);
    max-width: 320px;
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(2,2,2,0.1);
    box-shadow: 0 12px 30px rgba(0,0,0,0.15);
}
@media (max-width: 600px) {
    .contact-location-card {
        position: relative;
        bottom: auto;
        left: auto;
        max-width: none;
        margin-top: var(--space-4);
        border-radius: var(--radius-md);
    }
}

.contact-location-tag {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #61398F;
    background: rgba(97,57,143,0.1);
    padding: 4px 10px;
    border-radius: var(--radius-full);
    margin-bottom: var(--space-3);
}
.contact-location-card h3 {
    font-size: 18px;
    font-weight: 800;
    color: #020202;
    margin-bottom: 6px;
    letter-spacing: -0.01em;
}
.contact-location-card p {
    font-size: 13px;
    color: rgba(2,2,2,0.6);
    line-height: 1.5;
    margin: 0 0 var(--space-3);
}
.contact-location-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #61398F;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    transition: gap var(--transition-base);
}
.contact-location-link:hover { gap: 9px; }

/* =====================================================
   7. CTA FINAL — violet sombre, diagonal ↘
   (Copie des styles home-cta-final pour isolation CSS)
   ===================================================== */
.home-cta-final {
    background: #efe9f9;
    color: #020202;
    position: relative;
    overflow: hidden;
    clip-path: polygon(0 0, 100% 52px, 100% 100%, 0 100%);
    padding: calc(var(--space-9) + 52px) 0 var(--space-9);
    margin-top: -52px;
    z-index: 2;
}
.cta-bg-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    z-index: 0;
}
.cta-bg-orb-1 {
    width: 500px; height: 500px;
    top: -100px; right: -150px;
    background: radial-gradient(circle, rgba(97,57,143,0.45), transparent 65%);
}
.cta-bg-orb-2 {
    width: 400px; height: 400px;
    bottom: -80px; left: -100px;
    background: radial-gradient(circle, rgba(97,57,143,0.25), transparent 65%);
}
.home-cta-final > .container { position: relative; z-index: 1; }

.home-cta-final .section-eyebrow { color: var(--violet-300); }
.home-cta-final .section-title  { color: #020202; }

.cta-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
    margin-top: var(--space-8);
}
@media (max-width: 900px) { .cta-cards { grid-template-columns: 1fr; max-width: 500px; margin-left: auto; margin-right: auto; } }

.cta-card {
    background: rgba(2,2,2,0.05);
    border: 1px solid rgba(2,2,2,0.1);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    transition: all var(--transition-smooth);
    position: relative;
}
.cta-card:hover {
    background: rgba(2,2,2,0.09);
    border-color: rgba(97,57,143,0.5);
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}
.cta-card--primary {
    background: rgba(97,57,143,0.3);
    border-color: rgba(97,57,143,0.55);
}
.cta-card--primary:hover {
    background: rgba(97,57,143,0.45);
    border-color: rgba(97,57,143,0.8);
}
.cta-card-icon {
    width: 52px; height: 52px;
    border-radius: var(--radius-md);
    background: rgba(97,57,143,0.25);
    border: 1px solid rgba(97,57,143,0.35);
    display: flex; align-items: center; justify-content: center;
    color: var(--violet-300);
}
.cta-card-icon svg { width: 24px; height: 24px; }
.cta-card--primary .cta-card-icon { background: rgba(2,2,2,0.12); border-color: rgba(2,2,2,0.2); color: white; }

.cta-card-badge {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    padding: 4px 12px;
    background: #61398F;
    color: white;
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: var(--radius-full);
}
.cta-card-title {
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #020202;
    margin: 0;
}
.cta-card-desc {
    font-size: 14px;
    color: rgba(2,2,2,0.55);
    line-height: 1.6;
    margin: 0;
    flex: 1;
}
.cta-card-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--space-3);
    color: var(--violet-300);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: gap var(--transition-base), color var(--transition-base);
}
.cta-card-btn:hover { gap: 10px; color: #020202; }
.cta-card--primary .cta-card-btn { color: white; }

.cta-reassurance {
    text-align: center;
    margin-top: var(--space-8);
    font-family: var(--font-display);
    font-size: 13px;
    color: rgba(2,2,2,0.4);
    letter-spacing: 0.5px;
}

/* =====================================================
   LIGHT THEME — CONTACT · charte (4 contextes)
   A) blanc · C) cartes violettes (channels + infos) · D) showcase image
   B) CTA final violet. Formulaire = panneau blanc (lisibilité).
   ===================================================== */

/* ---- Fonds blancs purs (les sections utilisaient var(--noir)/teintes) ---- */
.contact-hero,
.contact-channels,
.contact-main,
.contact-faq,
.contact-location { background: #FFFFFF; }

/* ---- Séparations droites ---- */
.contact-channels,
.contact-main,
.contact-location { border-top: 1px solid rgba(27,23,38,0.08); }

/* ===================== HERO (A) ===================== */
.contact-hero-orb-1 { background: radial-gradient(circle, rgba(97,57,143,0.10), transparent 70%); }
.contact-hero-orb-2 { display: none; }
.contact-hero-eyebrow { background: rgba(97,57,143,0.07); border-color: rgba(97,57,143,0.20); color: var(--violet); }
.contact-hero-title { color: #1B1726; }
.contact-hero-accent { color: var(--violet); }

/* ===================== CANAUX (C — cartes violettes) ===================== */
.contact-channel { background: #61398F; border-color: rgba(255,255,255,0.12); }
.contact-channel:hover { background: #61398F; border-color: rgba(255,255,255,0.28); box-shadow: 0 18px 44px rgba(97,57,143,0.30); }
.contact-channel--rdv { background: #61398F; }
.contact-channel--rdv:hover { background: #61398F; }
.contact-channel--rdv .contact-channel-icon { background: rgba(255,255,255,0.15); color: #fff; }
.contact-channel-tag,
.contact-channel--rdv .contact-channel-tag { color: #D4BFEC; }
.contact-channel-body h3 { color: #F0EEEE; }
.contact-channel-value { color: rgba(240,238,238,0.88); }
.contact-channel-meta { color: rgba(240,238,238,0.60); }
.contact-channel-arrow { color: #D4BFEC; }

/* ===================== FORMULAIRE (A — panneau blanc, lisibilité) ===================== */
.contact-main-title { color: #1B1726; }
.contact-main-accent { color: var(--violet); }
.contact-main-sub { color: #56525F; }
.contact-form-wrapper {
    background: #FFFFFF;
    border: 1px solid rgba(27,23,38,0.08);
    box-shadow: 0 4px 24px rgba(27,23,38,0.05);
}
.contact-form-legal a { color: var(--violet); }

/* ===================== SIDEBAR INFOS (C — violet) ===================== */
.contact-info-card { background: #61398F; border-color: rgba(255,255,255,0.18); color: #F0EEEE; }
.contact-info-card h3 { color: #F0EEEE; border-bottom-color: rgba(255,255,255,0.15); }
.contact-info-icon { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.22); }
.contact-info-list strong { color: #D4BFEC; }
.contact-info-list span,
.contact-info-list a { color: rgba(240,238,238,0.88); }
.contact-info-list a:hover { color: #FFFFFF; }
.contact-info-cta { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.18); }
.contact-info-cta p { color: rgba(240,238,238,0.85); }
.contact-info-cta-btn { background: #FFFFFF; color: var(--violet); }
.contact-info-cta-btn:hover { background: #F0EEEE; color: var(--violet); }
/* Garantie → carte violette aussi (colonne cohérente) */
.contact-info-guarantee { background: #61398F; border-color: rgba(255,255,255,0.18); }
.contact-info-guarantee strong { color: #F0EEEE; }
.contact-info-guarantee p { color: rgba(240,238,238,0.65); }
.contact-info-guarantee p strong { color: #D4BFEC; }

/* ===================== FAQ (A — panneaux blancs, séparation droite) ===================== */
.contact-faq { background: #FFFFFF; clip-path: none; margin-top: 0; padding: var(--space-10) 0; }
.contact-faq .section-eyebrow { color: var(--violet); }
.contact-faq .section-title { color: #1B1726; }
.contact-faq .section-title .script {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1em;
    letter-spacing: -0.02em;
    color: var(--violet);
}
.contact-faq-item summary { color: #1B1726; }
.contact-faq-answer { color: #56525F; }
.contact-faq-answer strong { color: #1B1726; }

/* ===================== LOCALISATION (A) ===================== */
.contact-location { padding: var(--space-10) 0; }
.contact-location .section-title { color: #1B1726; }
.contact-location .section-title .accent { color: var(--violet); }
.contact-location .section-subtitle { color: #56525F; }
.contact-location .section-subtitle strong { color: #1B1726; }
.contact-location .section-header { border-top: none; padding-top: 0; }

/* ===================== CTA FINAL (B — violet, séparation droite) ===================== */
.home-cta-final {
    background: linear-gradient(160deg, #6A3F9C 0%, #4A2C72 100%);
    color: #F0EEEE;
    clip-path: none;
    margin-top: 0;
    padding: var(--space-9) 0;
}
.home-cta-final .section-eyebrow { color: #D4BFEC; }
.home-cta-final .section-title { color: #F0EEEE; }
.contact-faq + .home-cta-final,
.home-cta-final { border-top: none; }
.cta-card { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); }
.cta-card:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.28); }
.cta-card--primary { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.30); }
.cta-card-icon { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.20); color: #D4BFEC; }
.cta-card--primary .cta-card-icon { background: #FFFFFF; border-color: #FFFFFF; color: var(--violet); }
.cta-card-badge { background: #FFFFFF; color: var(--violet); }
.cta-card-title { color: #F0EEEE; }
.cta-card-desc { color: rgba(240,238,238,0.60); }
.cta-card-btn { color: #D4BFEC; }
.cta-card-btn:hover { color: #FFFFFF; }
.cta-card--primary .cta-card-btn { color: #FFFFFF; }
.cta-reassurance { color: rgba(240,238,238,0.50); }