/* ====================================================================================================================================
   CONTACT (design V2) — même identité "papier / registre" que l'accueil,
   le hub Créer un document, la FAQ et Mon compte : mêmes tokens, pour que
   la page ne fasse plus "ancien site". Le vert reste réservé aux
   confirmations (message envoyé) - jamais un accent générique.
   ==================================================================================================================================== */

:root {
    --paper: #faf7f2;
    --paper-surface: #ffffff;
    --paper-line: #e8e2d8;
    --paper-line-soft: #f1ede5;
    --paper-ink-line: #cfc7b8;
    --paper-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 10px 24px -10px rgba(15, 23, 42, .18);
    --confirm: #0f8a68;
    --danger: #b91c1c;
    --ink-soft: #55606f;
}

body {
    background: var(--paper);
}

.section-eyebrow {
    display: block;
    font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--primary);
    font-weight: 600;
    margin-bottom: 10px;
}

/* .main-content (base.css) centre ses enfants avec align-items:center -
   largeur explicite pour un comportement de grille normal en dessous. */
.contact-hero, .contact-section {
    width: 100%;
}

/* ============================================================ EN-TÊTE ============================================================ */

.contact-hero {
    padding: 4.5rem 2rem 2.5rem;
    text-align: center;
}

.contact-hero-container {
    max-width: 640px;
    margin: 0 auto;
}

.contact-hero-title {
    font-size: clamp(28px, 4vw, 38px);
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.contact-hero-subtitle {
    font-size: 15.5px;
    line-height: 1.5;
    color: var(--ink-soft);
    margin-top: 12px;
}

/* ============================================================ FORMULAIRE + AIDE ============================================================ */

.contact-section {
    padding: 0 2rem 5.5rem;
}

.contact-container {
    max-width: 1080px;
    margin: 0 auto;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 64px;
    align-items: start;
}

.contact-form-block {
    background: var(--paper-surface);
    border: 1px solid var(--paper-line);
    border-radius: 16px;
    padding: 36px;
}

.contact-form-title {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    margin-bottom: 24px;
}

.contact-field {
    margin-bottom: 18px;
}

.contact-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.contact-field input,
.contact-field select,
.contact-field textarea {
    width: 100%;
    font: inherit;
    font-size: 15px;
    color: var(--text-primary);
    background: var(--paper);
    border: 1px solid var(--paper-line);
    border-radius: 10px;
    padding: 11px 14px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.contact-field textarea {
    resize: vertical;
    min-height: 96px;
}

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, .15);
}

.contact-field select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355606f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 38px;
}

.contact-submit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--primary);
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    border: none;
    padding: 13px 26px;
    border-radius: 10px;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}

.contact-submit:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
}

.contact-form-note {
    font-size: 12.5px;
    color: var(--paper-ink-line);
    margin-top: 12px;
}

/* ---------------------------------- Colonne latérale ---------------------------------- */

.contact-aside {
    display: flex;
    flex-direction: column;
    gap: 36px;
}

.contact-aside-block h3 {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.contact-aside-lede {
    font-size: 13.5px;
    color: var(--ink-soft);
    margin-bottom: 12px;
}

/* FAQ repliable - même mécanique que la page FAQ (grid-template-rows),
   présentée en version compacte ici, jamais en carte. */
.faq-item {
    border-bottom: 1px solid var(--paper-line);
}

.faq-item:first-of-type {
    border-top: 1px solid var(--paper-line);
}

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: none;
    border: none;
    padding: 0.85rem 0.05rem;
    text-align: left;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
}

.faq-question i {
    color: var(--paper-ink-line);
    font-size: 0.75rem;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.faq-item.open .faq-question i {
    transform: rotate(180deg);
    color: var(--primary);
}

.faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows 0.2s ease;
}

.faq-answer p {
    min-height: 0;
    overflow: hidden;
    margin: 0 0 0.85rem;
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink-soft);
}

.faq-item.open .faq-answer {
    grid-template-rows: 1fr;
}

.contact-aside-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 14px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--primary);
    text-decoration: none;
}

.contact-aside-link i {
    font-size: 11px;
    transition: transform .15s ease;
}

@media (hover: hover) and (pointer: fine) {
    .contact-aside-link:hover i {
        transform: translateX(3px);
    }
}

/* ---------------------------------- Autres canaux ---------------------------------- */

.contact-channel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--paper-line);
}

.contact-channel:first-of-type {
    border-top: 1px solid var(--paper-line);
}

.contact-channel-label {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-primary);
}

.contact-channel-meta {
    display: block;
    font-size: 12px;
    color: var(--ink-soft);
    margin-top: 2px;
}

.contact-channel a {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
}

.contact-channel a i {
    font-size: 11px;
    transition: transform .15s ease;
}

@media (hover: hover) and (pointer: fine) {
    .contact-channel a:hover i {
        transform: translateX(3px);
    }
}

/* ============================================================ MESSAGES (succès / erreur) ============================================================ */

.messages-container {
    position: fixed;
    top: 90px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1200;
    width: auto;
    max-width: 90%;
    pointer-events: none;
}

.alert {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    padding: 12px 20px;
    border-radius: 10px;
    margin-bottom: 10px;
    font-weight: 600;
    font-size: 14px;
    text-align: center;
    box-shadow: var(--paper-shadow);
    animation: contactAlertIn 0.25s ease, contactAlertOut 0.4s ease 4.5s forwards;
}

/* Succès = seul usage légitime du vert ici : confirmation d'envoi. */
.alert-success { background: var(--confirm); }
.alert-error { background: var(--danger); }
.alert-warning { background: #b45309; }
.alert-info { background: var(--primary); }

@keyframes contactAlertIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes contactAlertOut {
    to { opacity: 0; visibility: hidden; }
}

/* ============================================================ RESPONSIVE ============================================================ */

@media (max-width: 900px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

@media (max-width: 640px) {
    .contact-hero { padding: 2.75rem 1.25rem 1.75rem; }
    .contact-section { padding: 0 1rem 3.5rem; }

    /* Pousser UNIQUEMENT la carte du formulaire vers les bords, sans
       toucher à la colonne "Besoin d'aide" à côté : comme les deux
       partagent le même padding de .contact-section (le levier habituel),
       on ne peut pas réduire ce padding sans déplacer aussi l'aside. La
       marge négative ici ne tire que la carte du formulaire, en sens
       inverse du padding du conteneur. */
    .contact-form-block {
        padding: 22px;
        margin: 0 -18px;
    }
}

/* ============================================================ CTA PIED DE PAGE ============================================================ */
/* Même bloc que sur l'accueil ({% block footer_cta %}, dans le <footer>
   partagé de base.html) - dupliqué ici plutôt que dans base.css, pour
   suivre le même principe que le reste du site : chaque page charge ses
   propres styles, base.css ne connaît que la structure du footer. */

.footer-cta {
    text-align: center;
    padding-bottom: 40px;
    margin-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.footer-cta-title {
    font-size: 26px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.01em;
}

.footer-cta-subtitle {
    font-size: 15.5px;
    line-height: 1.5;
    color: #94a3b8;
    margin-top: 10px;
    max-width: 52ch;
    margin-left: auto;
    margin-right: auto;
}

.footer-cta-button-wrapper {
    margin-top: 22px;
}

.footer-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--primary);
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    padding: 12px 22px;
    border-radius: 10px;
    text-decoration: none;
}