/*
 * =====================================================
 *   SUD WINE CLUB — Styles page Contact
 *   /swc/css/contact.css
 *   Auteur  : WebRégis
 *   Dépend de public.css (variables :root, classes communes)
 * =====================================================
 *
 *  TABLE DES MATIÈRES
 *  ------------------
 *  1.  Hero contact
 *  2.  Section principale (layout)
 *  3.  Colonne coordonnées
 *  4.  Formulaire — champs
 *  5.  Alertes & succès
 *  6.  Utilitaires locaux
 * =====================================================
 */


/* =============================================
   1. HERO CONTACT
   — Reprend exactement le style de #contact
     (fond parr.jpg + overlay bordeaux gradient)
     défini dans public.css section 13.
============================================= */
#contact-hero {
    position: relative;
    background: url('../images/parr.jpg') center / cover no-repeat;
    padding: 0;
}

/* Overlay bordeaux dégradé — identique à .contact-inner */
.contact-hero-inner {
    position: relative;
    background: linear-gradient(
        135deg,
        rgba(26, 10, 12, .82) 0%,
        rgba(60, 20, 28, .75) 50%,
        rgba(26, 10, 12, .85) 100%
    );
    padding: 8rem 2rem 6rem;
}

/* Trait doré en haut — cohérence avec les autres sections sombres */
#contact-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(to right, transparent, var(--gold), transparent);
    z-index: 1;
}

/* ---- Typographie hero ---- */

/* Eyebrow (surtitre doré encadré de tirets) — identique au .contact-eyebrow de public.css */
.contact-eyebrow {
    font-family: var(--font-body);
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .35em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1.4rem;
}
.contact-eyebrow::before,
.contact-eyebrow::after {
    content: '—';
    display: inline-block;
    margin: 0 .8em;
    opacity: .6;
}

/* Titre h1 — reprend .contact-title de public.css */
.contact-title {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 4vw, 3.8rem);
    font-weight: 500;
    color: #fff;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    font-feature-settings: "liga" 1, "onum" 1;
}

/* Description sous le titre */
.contact-desc {
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 300;
    color: rgba(255, 255, 255, .72);
    line-height: 1.8;
    max-width: 520px;
    margin: 0 auto 0;
    letter-spacing: .01em;
}


/* =============================================
   2. SECTION PRINCIPALE
============================================= */
#contact-main {
    padding: 6rem 0 7rem;
}


/* =============================================
   3. COLONNE COORDONNÉES (gauche)
============================================= */

/* Titre de la colonne — cohérent avec .section-title mais plus compact */
.contact-info-title {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 500;
    color: var(--dark);
    margin-bottom: 2rem;
    line-height: 1.2;
}
/* Trait doré sous le titre — reprend .section-title::after */
.contact-info-title::after {
    content: '';
    display: block;
    width: 30px;
    height: 2px;
    background: var(--gold);
    margin-top: .7rem;
}

/* Item de coordonnée : icône + texte */
.coord-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.6rem;
}

/* Icône dans un carré bordeaux subtil */
.coord-icon {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(155, 92, 99, .25);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--primary);
    font-size: .85rem;
    transition: background .3s, border-color .3s;
}
.coord-item:hover .coord-icon {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* Texte de la coordonnée */
.coord-text {
    font-size: .9rem;
    line-height: 1.7;
    color: var(--gray-mid);
}
.coord-text strong {
    display: block;
    font-weight: 500;
    font-size: .78rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--dark);
    margin-bottom: .2rem;
}

/* Lien de coordonnée (tel, email) */
.coord-link {
    color: var(--gray-mid);
    text-decoration: none;
    transition: color .3s;
}
.coord-link:hover {
    color: var(--primary);
}

/* Séparateur positionné à gauche (pas centré) */
.contact-divider-left {
    margin-left: 0 !important;
    justify-content: flex-start;
    max-width: 120px;
}
.contact-divider-left::before {
    background: linear-gradient(to right, var(--gold), transparent) !important;
}
.contact-divider-left::after {
    display: none; /* Un seul côté pour le flush gauche */
}

/* Label "Suivez-nous" */
.coord-reseaux-label {
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gray-mid);
    margin-bottom: .8rem;
}


/* =============================================
   4. FORMULAIRE — CHAMPS
   Cohérent avec les inputs de public.css (login)
   Adaptés au contexte "fond blanc / page claire"
============================================= */
.contact-form {
    /* Pas de fond spécial : hérite du fond blanc de body */
}

/* Label — style unifié avec .login-label */
.contact-label {
    display: block;
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gray-mid);
    margin-bottom: .4rem;
}

/* Astérisque champ obligatoire */
.contact-required {
    color: var(--primary);
    margin-left: .15em;
}

/* Mention facultatif */
.contact-optional {
    font-size: .72rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: #aaa;
    margin-left: .3em;
}

/* Input texte / email / tel — reprend .login-input */
.contact-input {
    width: 100%;
    padding: .65rem .9rem;
    border: 1px solid var(--border);
    border-radius: 2px;
    font-family: var(--font-body);
    font-size: .95rem;
    color: var(--dark);
    background: #fff;
    transition: border-color .25s, box-shadow .25s;
    outline: none;
}
.contact-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(155, 92, 99, .12);
}
.contact-input::placeholder {
    color: #bbb;
}

/* Select sujet */
.contact-select {
    width: 100%;
    padding: .65rem .9rem;
    border: 1px solid var(--border);
    border-radius: 2px;
    font-family: var(--font-body);
    font-size: .95rem;
    color: var(--dark);
    background: #fff;
    cursor: pointer;
    appearance: auto; /* laisse le chevron natif du navigateur */
    outline: none;
    transition: border-color .25s, box-shadow .25s;
}
.contact-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(155, 92, 99, .12);
}

/* Textarea message */
.contact-textarea {
    width: 100%;
    padding: .75rem .9rem;
    border: 1px solid var(--border);
    border-radius: 2px;
    font-family: var(--font-body);
    font-size: .95rem;
    color: var(--dark);
    background: #fff;
    resize: vertical;
    min-height: 140px;
    outline: none;
    transition: border-color .25s, box-shadow .25s;
    line-height: 1.6;
}
.contact-textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(155, 92, 99, .12);
}
.contact-textarea::placeholder {
    color: #bbb;
}

/* Compteur de caractères */
.contact-counter {
    font-size: .76rem;
    color: #aaa;
    text-align: right;
    margin-top: .3rem;
}

/* Checkbox RGPD */
.contact-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    cursor: pointer;
    font-size: .88rem;
    color: var(--gray-mid);
    line-height: 1.6;
}
.contact-checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: .2rem;
    accent-color: var(--primary);
    cursor: pointer;
}
.contact-link {
    color: var(--primary);
    text-decoration: underline;
    transition: color .25s;
}
.contact-link:hover {
    color: var(--primary-dark);
}

/* Honeypot — totalement masqué (pas display:none pour éviter l'alerte Chrome) */
.contact-hp {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    tabindex: -1;
}


/* =============================================
   5. ALERTES & MESSAGE DE SUCCÈS
============================================= */

/* Alerte générique */
.contact-alert {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .85rem 1.1rem;
    border-radius: 2px;
    margin-bottom: 1.5rem;
    font-size: .875rem;
    line-height: 1.6;
}

/* Erreur validation — rouge bordeaux doux */
.contact-alert-error {
    background: #fdf2f3;
    color: #a33040;
    border-left: 3px solid var(--primary);
}
.contact-alert-error ul {
    list-style: disc;
}

/* Erreur technique — orange doux */
.contact-alert-warning {
    background: #fffbf0;
    color: #7a5c00;
    border-left: 3px solid #c9a84c;
}

/* Bloc de succès — centré, sobre */
.contact-success {
    text-align: center;
    padding: 3rem 2rem;
    border: 1px solid var(--border);
    background: var(--success-bg);
}

/* Icône check dans un cercle bordeaux */
.contact-success-icon {
    width: 64px;
    height: 64px;
    background: var(--primary);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin: 0 auto 1.5rem;
}

.contact-success-title {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 500;
    color: var(--dark);
    margin-bottom: .75rem;
}

.contact-success-text {
    color: var(--gray-mid);
    font-size: .95rem;
    line-height: 1.7;
    max-width: 380px;
    margin: 0 auto 1.5rem;
}


/* =============================================
   6. UTILITAIRES LOCAUX
============================================= */

/* Surcharge du .btn-contact (défini dans public.css pour fond sombre)
   — Sur fond blanc, le texte blanc est invisible ; on le passe en sombre */
.contact-form .btn-contact {
    color: var(--dark);
    border-color: var(--primary);
}
.contact-form .btn-contact span,
.contact-form .btn-contact i {
    color: var(--dark);
}
.contact-form .btn-contact:hover,
.contact-form .btn-contact:hover span,
.contact-form .btn-contact:hover i {
    color: #fff;
}

/* Bouton "Mon compte" dans la navbar — style cohérent avec le site */
.nav-link-compte {
    border: 1px solid var(--primary) !important;
    color: var(--primary) !important;
    padding: .4rem 1rem !important;
    transition: background .3s, color .3s !important;
}
.nav-link-compte:hover {
    background: var(--primary) !important;
    color: #fff !important;
}

/* Scroll-margin pour la navbar sticky */
#contact-hero,
#contact-main {
    scroll-margin-top: 80px;
}

/* Responsive : réduire le padding hero sur mobile */
@media (max-width: 767px) {
    .contact-hero-inner {
        padding: 6rem 1rem 4rem;
    }
    #contact-main {
        padding: 4rem 0 5rem;
    }
}