/* /css/style_contact.css */

/* Importation des polices */
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400&family=Open+Sans:wght@400;600&display=swap');

/* style_contact.css — cohérent, boutons arrondis, hero inchangé, infos centrées */

:root{
  --em-primary:#BAA883;
  --em-text:#0f172a;
  --em-muted:#6b7280;
  --em-border:#e5e7eb;
  --em-shadow:0 8px 20px rgba(15,23,42,.06);
  --btn-bg:#111111; --btn-bg-hover:#333333; --btn-text:#ffffff;
  --ring:0 0 0 .2rem rgba(204,192,166,.25);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--em-text);background:#fff;margin:0}
.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* Cards / tiles */
.card{background:#fff;border-radius:1rem;box-shadow:var(--em-shadow);padding:1.25rem}
.tile{display:flex;flex-direction:column;min-height:100%}
.tile-head{display:flex;align-items:center;gap:.6rem;padding:.25rem 0 1rem;border-bottom:1px solid var(--em-border)}
.tile-head h2{margin:0;font-size:1.15rem;font-weight:600}
.tile-icon{width:38px;height:38px;border-radius:999px;background:rgba(186,168,131,.14);color:#6b5e43;display:flex;align-items:center;justify-content:center;font-size:1.05rem}
.tile-body{padding:1rem 0 0;flex:1}

/* Centrage vertical spécifique aux infos de contact */
.tile.v-center .tile-body{display:flex;flex-direction:column;justify-content:center}

/* Section Hero */
.hero-section {
    position: relative;
    background-image: url('https://www.ecomelio.fr/images/londres.jpg'); /* Mettez le chemin correct vers votre image */
    background-size: cover;
    background-position: center;
    padding: 100px 20px;
    text-align: center;
    color: #ffffff;
}

/* Sous-titre de la section */
.hero-subtitle {
    font-size: clamp(0.875rem, 0.38vw + 0.8rem, 1.125rem);
    font-weight: 400;
    letter-spacing: 0.08em;
    font-family: 'Futura PT', system-ui, 'Helvetica Neue', sans-serif;
    line-height: 1.24;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.hero-content {
    max-width: 800px;
    margin: 0 auto;
}

.hero-title {
    font-size: clamp(3.5rem, 2.63vw + 2.99rem, 5.25rem);
    font-weight: 400;
    letter-spacing: 0.01em;
    font-family: 'Tiempos Headline', 'Lucida', Georgia, serif;
    line-height: 1.08;
    margin-bottom: 20px;
}

.hero-description {
    font-size: clamp(1.125rem, 0.56vw + 1.02rem, 1.5rem);
    font-weight: 400;
    letter-spacing: -0.005em;
    font-family: 'Futura PT', system-ui, 'Helvetica Neue', sans-serif;
    line-height: 1.24;
    margin-bottom: 40px;
}

/* Grid infos + carte */
.info-map-section{margin:28px auto}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width: 900px){ .grid-2{grid-template-columns:1fr} }

.contact-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.contact-list li{display:flex;gap:.9rem;align-items:flex-start}
.contact-list i{color:#6b5e43;background:rgba(186,168,131,.14);width:36px;height:36px;border-radius:999px;display:flex;align-items:center;justify-content:center}
.contact-list .label{font-size:.85rem;color:var(--em-muted)}
.contact-list .value{font-weight:600}
.contact-list .link{color:inherit;text-decoration:none;border-bottom:1px dashed rgba(0,0,0,.2)}
.contact-list .link:hover{opacity:.85}

.map-embed{width:100%;height:340px;border-radius:.9rem;overflow:hidden}

/* Alertes brand */
.alert.brand{border-radius:.9rem;padding:12px 14px;margin:14px 0;display:flex;align-items:center;gap:.5rem}
.alert.brand.success{background:#d4edda;border:1px solid #c3e6cb;color:#155724}
.alert.brand.error{background:#f8d7da;border:1px solid #f5c6cb;color:#721c24}

/* Formulaire */
.contact-form-section{margin:28px auto}
.contact-form .form-grid{display:grid;gap:16px;grid-template-columns:1fr 1fr}
.contact-form .form-span-2{grid-column:1 / -1}
@media (max-width: 768px){ .contact-form .form-grid{grid-template-columns:1fr} }

.form-group{display:flex;flex-direction:column;gap:6px}
.form-group label{font-weight:600;font-size:.95rem}
.form-group input,.form-group textarea{
  border:1px solid var(--em-border);border-radius:.75rem;padding:.8rem .9rem;font-size:1rem;background:#fff;
  transition:border-color .2s, box-shadow .2s
}
.form-group input:focus,.form-group textarea:focus{outline:none;border-color:#CCC0A6;box-shadow:var(--ring)}

/* Boutons arrondis (cohérents simulation) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:1px solid transparent;cursor:pointer;
  font-weight:600;text-decoration:none;transition:transform .15s ease, background .2s ease, border-color .2s ease, color .2s ease}
.btn:focus{outline:none;box-shadow:var(--ring)}
.btn-lg{padding:.9rem 1.35rem;border-radius:9999px;font-size:1rem}
.btn-brand{background:var(--btn-bg);color:var(--btn-text);border-color:var(--btn-bg)}
.btn-brand:hover{background:var(--btn-bg-hover);transform:translateY(-1px)}
.submit-wrap{display:flex;justify-content:center;margin-top:4px}

/* Helpers */
.text-muted{color:var(--em-muted)}
.me-2{margin-right:.5rem}