/* ====================== CONTACT : MOTION (meme langage que l'accueil) ====================== */
/* Courbes de l'accueil : sortie douce (0.22,1,0.36,1) pour l'apparition, symetrique (0.65,0,0.35,1) pour les traces.
   introRise / introFade sont definies dans style.css. */

@keyframes contactLayerBuild {
    from { clip-path: inset(100% 0 0 0); }
    to { clip-path: inset(0 0 0 0); }
}

@keyframes contactScan {
    0% { top: 0; opacity: 0; }
    12% { opacity: 1; }
    88% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

@keyframes contactPing {
    0% { box-shadow: 0 0 0 0 rgba(5, 117, 230, 0.4); }
    100% { box-shadow: 0 0 0 9px rgba(5, 117, 230, 0); }
}

@keyframes contactDraw {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@keyframes contactFaqBar {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
}

/* Fond : strates d'impression qui se construisent de bas en haut */
body:has(.contact-page-v3) .contact-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: repeating-linear-gradient(180deg, rgba(36, 92, 255, 0.055) 0, rgba(36, 92, 255, 0.055) 1px, transparent 1px, transparent 14px);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 55%, #000 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 55%, #000 100%);
    pointer-events: none;
    animation: ccFadeIn 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

/* Contact direct : arrivee apres l'intro */
body:has(.contact-page-v3) .contact-direct-card,
body:has(.contact-page-v3) .contact-direct-links a {
    animation: introFade 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

body:has(.contact-page-v3) .contact-direct-card { animation-delay: 0.2s; }
body:has(.contact-page-v3) .contact-direct-links a:nth-child(1) { animation-delay: 0.3s; }
body:has(.contact-page-v3) .contact-direct-links a:nth-child(2) { animation-delay: 0.4s; }
body:has(.contact-page-v3) .contact-direct-links a:nth-child(3) { animation-delay: 0.5s; }

/* Contact direct : l'icone passe au Bleu Atelier au survol */
body:has(.contact-page-v3) .contact-link-icon {
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

body:has(.contact-page-v3) .contact-direct-links a:hover .contact-link-icon,
body:has(.contact-page-v3) .contact-direct-links a:focus-visible .contact-link-icon {
    transform: translateY(-2px);
    background: #245cff;
    border-color: #245cff;
    color: #ffffff;
}

body:has(.contact-page-v3) .contact-direct-links a[href*="wa.me"]:hover .contact-link-icon,
body:has(.contact-page-v3) .contact-direct-links a[href*="wa.me"]:focus-visible .contact-link-icon {
    background: #168c46;
    border-color: #168c46;
    color: #ffffff;
}

/* FAQ : questions en cascade, filet bleu qui se trace sous les titres de section */

body:has(.contact-page-v3) .contact-location h2::after {
    content: "";
    display: block;
    width: 48px;
    height: 2px;
    margin-top: 16px;
    border-radius: 2px;
    background: #0575e6;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1) 0.25s;
}

body:has(.contact-page-v3) .contact-location.is-visible h2::after {
    transform: scaleX(1);
}

/* Reponse FAQ : ouverture fluide quand le navigateur sait animer details */

/* Localisation : la carte se devoile comme une coupe */
body:has(.contact-page-v3) .contact-location .contact-map-wrapper {
    clip-path: inset(0 0 100% 0);
    transition: clip-path 1.1s cubic-bezier(0.65, 0, 0.35, 1) 0.2s;
}

body:has(.contact-page-v3) .contact-location.is-visible .contact-map-wrapper {
    clip-path: inset(0 0 0 0);
}

body:has(.contact-page-v3) .contact-location-link {
    transition: color 0.2s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

body:has(.contact-page-v3) .contact-location-link:hover {
    transform: translateX(4px);
}

/* Accessibilite : tout est visible et immobile si l'utilisateur reduit les animations */
@media (prefers-reduced-motion: reduce) {
    body:has(.contact-page-v3) *,
    body:has(.contact-page-v3) *::before,
    body:has(.contact-page-v3) *::after {
        animation: none !important;
        transition: none !important;
    }

    body:has(.contact-page-v3) .contact-location .contact-map-wrapper {
        clip-path: none;
    }

    body:has(.contact-page-v3) .contact-location h2::after {
        transform: scaleX(1);
    }

}