/* ── FORMS-PAGE.CSS — Styles spécifiques à cv/forms/index.html ── */

/* ── HERO ── */
.hero {
    padding-top: calc(122px + var(--safe-top));
    padding-bottom: 34px;
    padding-left: 40px; padding-right: 40px;
    max-width: 1200px; margin: 0 auto;
    position: relative; z-index: 1;
}

.hero h1 {
    font-family: 'DM Serif Display', serif;
    font-size: clamp(2.6rem, 7vw, 5rem);
    line-height: 1.07; color: var(--dark);
    letter-spacing: -0.02em; margin-bottom: 14px;
}
.hero h1 em { font-style: italic; color: var(--accent); }

.hero p {
    font-size: 1rem; color: var(--text-light); font-weight: 300;
    line-height: 1.8; max-width: 540px; margin-bottom: 0;
}

/* ── FORMULAIRE ── */
.form-shell {
    background: var(--card-bg); border: 1px solid var(--border);
    border-radius: 24px; padding: 28px;
    margin-bottom: 70px; backdrop-filter: blur(10px);
}

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.field-group { display: flex; flex-direction: column; gap: 6px; }
.field-group.full { grid-column: 1 / -1; }

.field-label {
    font-size: 0.78rem; font-weight: 600;
    color: var(--warm-gray); text-transform: uppercase; letter-spacing: 0.07em;
}

.field,
.textarea {
    width: 100%; padding: 12px 16px;
    background: var(--cream); border: 1px solid var(--border);
    border-radius: 14px; font-family: 'DM Sans', sans-serif;
    font-size: 0.95rem; color: var(--text);
    outline: none; transition: border-color 0.18s, box-shadow 0.18s;
    -webkit-appearance: none;
}
.field { min-height: 48px; }
.textarea { min-height: 170px; resize: vertical; }

.field:focus,
.textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(200,168,130,0.18);
}

.field::placeholder,
.textarea::placeholder { color: var(--warm-gray); opacity: 0.7; }

/* Redéfinit le padding des boutons pour ce formulaire */
.form-shell .btn-primary { padding: 13px 24px; }

/* ── STATUT ── */
.status { font-size: 0.92rem; margin-top: 10px; }
.status.ok   { color: #3c8b59; }
.status.error { color: #c45f5f; }

/* ── MODE SOMBRE ── */
body[data-theme='dark'] .hero h1 { color: var(--text); }
body[data-theme='dark'] .field,
body[data-theme='dark'] .textarea {
    background: rgba(255,255,255,0.06);
    /* border-color is inherited via common.css var */
    color: var(--text);
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
    .hero {
        padding-top: calc(100px + var(--safe-top));
        padding-left: 20px; padding-right: 20px;
    }
    .form-grid { grid-template-columns: 1fr; }
    .form-shell { padding: 20px 18px; }
}