/* Contact : hero sombre avec portrait, coordonnées, orientation des demandes
   et formulaire, dans la palette et la typographie du site. */
.refined-site[data-page="contact"] { background: var(--monastery-charcoal); }
.refined-site[data-page="contact"] .contact-wrap { width: min(1180px, calc(100% - 2 * clamp(20px, 5vw, 64px))); margin-inline: auto; }
.refined-site[data-page="contact"] .contact-kicker {
    margin: 0 0 22px;
    color: var(--monastery-gold);
    font: 500 12px/1.4 'Inter', sans-serif;
    letter-spacing: .32em;
    text-transform: uppercase;
}
.refined-site[data-page="contact"] .contact-h2 { margin: 0; color: var(--monastery-cream); font: 400 clamp(32px, 3.4vw, 44px)/1.2 var(--font-display); }
.refined-site[data-page="contact"] :is(.contact-paths, .contact-message) {
    color: var(--monastery-cream);
    border-top: 1px solid color-mix(in srgb, var(--monastery-gold) 18%, transparent);
}

/* Hero : la barre de navigation est fixe, d’où le décalage --header-height. */
.refined-site[data-page="contact"] .contact-hero {
    box-sizing: border-box;
    padding: calc(var(--header-height) + clamp(48px, 7vw, 96px)) 0 clamp(64px, 8vw, 104px);
    color: var(--monastery-cream);
}
.refined-site[data-page="contact"] .contact-hero .contact-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: clamp(32px, 6vw, 96px);
    align-items: center;
}
.refined-site[data-page="contact"] .contact-title { margin: 0 0 24px; color: var(--monastery-cream); font: 400 clamp(52px, 6vw, 84px)/1.02 var(--font-display); }
.refined-site[data-page="contact"] .contact-lead {
    max-width: 34ch;
    margin: 0 0 40px;
    color: var(--color-secondary-dark);
    font: 400 clamp(20px, 1.6vw, 23px)/1.6 var(--font-body);
    text-wrap: pretty;
}
.refined-site[data-page="contact"] .contact-coords {
    margin: 0 0 36px;
    padding: 0;
    list-style: none;
    border-top: 1px solid color-mix(in srgb, var(--monastery-gold) 22%, transparent);
}
.refined-site[data-page="contact"] .contact-coords li {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: 1rem;
    align-items: baseline;
    padding: 15px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--monastery-gold) 22%, transparent);
}
.refined-site[data-page="contact"] .contact-coords span {
    color: color-mix(in srgb, var(--monastery-cream) 55%, transparent);
    font: 500 11px/1.4 'Inter', sans-serif;
    letter-spacing: .2em;
    text-transform: uppercase;
}
.refined-site[data-page="contact"] .contact-coords :is(a, p) {
    justify-self: start;
    margin: 0;
    color: var(--monastery-cream);
    font: 400 21px/1.4 var(--font-body);
    text-decoration: none;
}
.refined-site[data-page="contact"] .contact-coords a {
    background: linear-gradient(var(--monastery-gold), var(--monastery-gold)) left bottom / 0 1px no-repeat;
    transition: background-size var(--duration-normal) var(--ease-out), color var(--duration-normal) var(--ease-out);
}
.refined-site[data-page="contact"] .contact-coords a:is(:hover, :focus-visible) { color: var(--monastery-gold); background-size: 100% 1px; }
.refined-site[data-page="contact"] .contact-signature {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    color: var(--monastery-gold);
    font: italic 400 20px/1.4 var(--font-display);
}
.refined-site[data-page="contact"] .contact-signature::before { content: ''; width: 40px; height: 1px; background: currentColor; }
.refined-site[data-page="contact"] .contact-portrait {
    margin: 0;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--monastery-gold) 30%, transparent);
    border-radius: var(--radius-md);
}
.refined-site[data-page="contact"] .contact-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }

/* Orientation : trois portes numérotées comme les chapitres de la biographie. */
.refined-site[data-page="contact"] .contact-paths { padding: clamp(64px, 8vw, 112px) 0; }
.refined-site[data-page="contact"] .contact-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 44px; }
.refined-site[data-page="contact"] .contact-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 32px 28px 28px;
    border: 1px solid color-mix(in srgb, var(--monastery-gold) 26%, transparent);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--monastery-cream) 3%, transparent);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out);
}
.refined-site[data-page="contact"] .contact-card:is(:hover, :focus-visible) { border-color: var(--monastery-gold); transform: translateY(-2px); }
.refined-site[data-page="contact"] .contact-card-num { color: var(--monastery-gold); font: italic 400 17px/1 var(--font-display); }
.refined-site[data-page="contact"] .contact-card h3 { margin: 0; color: var(--monastery-cream); font: 400 25px/1.3 var(--font-display); }
.refined-site[data-page="contact"] .contact-card p { margin: 0; color: var(--color-secondary-dark); font: 400 19px/1.55 var(--font-body); }
.refined-site[data-page="contact"] .contact-card-link { margin-top: auto; padding-top: 18px; color: var(--monastery-gold); font: 500 13px/1.4 'Inter', sans-serif; }

/* Formulaire : champs soulignés, le filet passe à l’or au focus. */
.refined-site[data-page="contact"] .contact-message { padding: clamp(64px, 8vw, 112px) 0 clamp(88px, 10vw, 136px); }
.refined-site[data-page="contact"] .contact-message .contact-wrap {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: clamp(32px, 6vw, 96px);
}
.refined-site[data-page="contact"] .contact-message-note { max-width: 30ch; margin: 20px 0 0; color: var(--color-secondary-dark); font: 400 20px/1.6 var(--font-body); }
.refined-site[data-page="contact"] .contact-honeypot { display: none; }
.refined-site[data-page="contact"] .contact-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.refined-site[data-page="contact"] .contact-field { display: grid; gap: 6px; margin-bottom: 30px; }
.refined-site[data-page="contact"] .contact-field label {
    color: color-mix(in srgb, var(--monastery-cream) 70%, transparent);
    font: 500 11px/1.4 'Inter', sans-serif;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.refined-site[data-page="contact"] .contact-field :is(input, textarea, select) {
    width: 100%;
    min-height: 48px;
    padding: 10px 0;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--monastery-cream) 28%, transparent);
    border-radius: 0;
    background: transparent;
    color: var(--monastery-cream);
    font: 400 21px/1.4 var(--font-body);
    -webkit-appearance: none;
    appearance: none;
    transition: border-color var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);
}
.refined-site[data-page="contact"] .contact-field textarea { min-height: 150px; resize: vertical; }
.refined-site[data-page="contact"] .contact-field select {
    padding-right: 28px;
    background:
        linear-gradient(45deg, transparent 50%, var(--monastery-gold) 50%) calc(100% - 12px) 55% / 6px 6px no-repeat,
        linear-gradient(135deg, var(--monastery-gold) 50%, transparent 50%) calc(100% - 6px) 55% / 6px 6px no-repeat;
}
.refined-site[data-page="contact"] .contact-field select option { color: var(--monastery-charcoal); }
.refined-site[data-page="contact"] .contact-field :is(input, textarea, select):focus {
    outline: none;
    border-bottom-color: var(--monastery-gold);
    box-shadow: 0 1px 0 var(--monastery-gold);
}
.refined-site[data-page="contact"] .contact-submit {
    min-height: 54px;
    margin-top: 8px;
    padding: 18px 36px;
    border: 0;
    border-radius: 2px;
    background: var(--monastery-gold);
    color: var(--monastery-charcoal);
    font: 500 13px/1 'Inter', sans-serif;
    letter-spacing: .2em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color var(--duration-normal) var(--ease-out);
}
.refined-site[data-page="contact"] .contact-submit:is(:hover, :focus-visible) { background: var(--monastery-cream); }
.refined-site[data-page="contact"] .contact-form-note { margin: 18px 0 0; color: color-mix(in srgb, var(--monastery-cream) 55%, transparent); font: 400 13px/1.5 'Inter', sans-serif; }

@media (max-width: 900px) {
    .refined-site[data-page="contact"] :is(.contact-hero, .contact-message) .contact-wrap { grid-template-columns: minmax(0, 1fr); }
    .refined-site[data-page="contact"] .contact-portrait { order: -1; aspect-ratio: 4 / 3; }
    .refined-site[data-page="contact"] .contact-cards { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 32px; }
    .refined-site[data-page="contact"] .contact-row { grid-template-columns: minmax(0, 1fr); }
    .refined-site[data-page="contact"] .contact-coords li { grid-template-columns: 6.5rem minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .refined-site[data-page="contact"] .contact-card:is(:hover, :focus-visible) { transform: none; }
}