/* ============================================
   WAB. — Fenêtre de contact
   Le site n'a pas de page Contact : le lien ouvre un grand panneau
   blanc à feuille décalée au-dessus de la page en cours, floutée
   derrière un voile d'encre. Champs : contact-form.css ; gabarit :
   js/contact/markup.js.
   ============================================ */

/* La page derrière ne défile plus. La gouttière de la barre de
   défilement est conservée : sans elle, sur Windows, tout le site
   glisserait de quelques pixels vers la droite à l'ouverture. */
html.has-modal {
    overflow: hidden;
    scrollbar-gutter: stable;
}

.contact-modal {
    /* Marge propre à la fenêtre : la gouttière de la page s'élargit
       sur grand écran pour centrer le contenu, et la carte, qui en
       dépendait, s'y écrasait jusqu'à une simple ligne. */
    --modal-gap: clamp(18px, 4vw, 32px);
    width: min(620px, 100% - 2 * var(--modal-gap));
    max-width: none;
    max-height: none;
    margin: auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ink);
    overflow: visible;
}

/* ::backdrop n'hérite des variables de :root que dans les navigateurs
   récents : les valeurs y sont écrites en clair. */
.contact-modal::backdrop {
    background: rgba(16, 18, 20, 0.3);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
    animation: contact-fade-in 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.contact-modal__card {
    max-height: calc(100vh - 2 * var(--modal-gap));
    max-height: calc(100dvh - 2 * var(--modal-gap));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: clamp(14px, 2.5vw, 20px) clamp(24px, 5vw, 44px) clamp(28px, 5vw, 44px);
    border: var(--hair) solid var(--edge);
    border-radius: var(--r-panel);
    /* Un grand panneau blanc, comme ceux d'agentcard : liseré d'un
       pixel, relief éclairé d'en haut, et une seconde feuille décalée
       dessous (--sheet) qui le pose sur la page floutée. */
    background: var(--paper);
    box-shadow: var(--relief), var(--sheet), var(--shadow-lift);
    animation: contact-rise 0.5s var(--ease);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .contact-modal__card {
        background: var(--paper);
    }
}

.contact-modal__card:focus {
    outline: none;
}

/* ── Visages et Fermer ──
   Sur leur propre ligne, au-dessus du titre : sur un téléphone, le
   titre garde toute la largeur au lieu de se replier autour. Les
   visages de l'équipe à gauche occupent une ligne qui existait déjà. */
.contact-modal__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-right: calc(-1 * clamp(10px, 3vw, 24px));
    margin-bottom: 14px;
}

.contact-faces {
    display: flex;
    list-style: none;
}

/* Les portraits se chevauchent comme une petite pile ; un anneau de
   la couleur du verre les détache l'un de l'autre. */
.contact-faces li + li {
    margin-left: -9px;
}

.contact-faces__img {
    display: block;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 2.5px var(--paper);
    background: var(--paper);
    transition: transform 0.3s var(--ease-out);
}

@media (hover: hover) {
    .contact-faces li:hover .contact-faces__img {
        transform: translateY(-3px);
    }
}

/* ── Envol ── l'oiseau traverse la carte ; pixel art net. */
.contact-flight {
    display: block;
    width: 100%;
    height: 120px;
    margin-bottom: 8px;
    image-rendering: pixelated;
}

.contact-modal__close {
    min-height: 44px;
    padding: 0 14px;
    border-radius: var(--r-key);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: var(--w-regular);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-muted);
    transition: color 0.2s var(--ease-out), background-color 0.2s var(--ease-out);
}

.contact-modal__close:hover {
    color: var(--ink);
    background: var(--hover-tint);
}

/* ── Titre ── */
.contact-modal__title {
    max-width: 14ch;
    font-size: clamp(1.9rem, 5vw, 2.7rem);
    font-weight: var(--w-strong);
    letter-spacing: -0.035em;
    line-height: 1.08;
    text-wrap: balance;
}

.contact-modal__title:focus {
    outline: none;
}

.contact-modal__lede {
    margin-top: 12px;
    max-width: 42ch;
    font-size: 0.975rem;
    line-height: 1.55;
    text-wrap: pretty;
    color: var(--ink-muted);
}

.contact-modal__done {
    width: 100%;
    margin-top: clamp(26px, 4vw, 34px);
}

/* ── Mouvement ──
   La carte monte doucement en entrant, et repart plus vite qu'elle
   n'est venue : on attend l'ouverture, pas la fermeture. Sous
   « réduire les animations », base.css ramène tout à l'instant. */
.contact-modal.is-closing .contact-modal__card {
    animation: contact-sink 0.2s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

.contact-modal.is-closing::backdrop {
    animation: contact-fade-out 0.2s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

@keyframes contact-rise {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.98);
    }
}

@keyframes contact-sink {
    to {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }
}

@keyframes contact-fade-in {
    from {
        opacity: 0;
    }
}

@keyframes contact-fade-out {
    to {
        opacity: 0;
    }
}