/* =====================================================================
   Bellevue Villas — Secondary pages
   (experiences, contacts, blog listing, article, legal)
   ===================================================================== */

/* ---------- Page banner (interior pages) ---------- */
.page-hero{
  position:relative; color:#fff; text-align:center;
  padding:calc(var(--header-h) + 70px) 0 70px;
  background:var(--navy) center/cover no-repeat;
}
.page-hero.has-image::before{
  content:""; position:absolute; inset:0; background:rgba(20,32,48,.6);
}
.page-hero .container{ position:relative; z-index:2; }
.page-hero .breadcrumb{ font-size:.85rem; letter-spacing:.05em; color:rgba(255,255,255,.78); margin-bottom:14px; }
.page-hero .breadcrumb a{ color:rgba(255,255,255,.78); }
.page-hero .breadcrumb a:hover{ color:#fff; }
.page-hero h1{ color:#fff; margin:0 auto; max-width:22ch; }
.page-hero p{ color:rgba(255,255,255,.9); max-width:60ch; margin:18px auto 0; font-size:1.1rem; }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(36px,5vw,70px); align-items:start; }
.contact-form{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(28px,3.5vw,48px); box-shadow:var(--shadow-sm); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field{ margin-bottom:18px; }
.field label{ display:block; font-weight:600; font-size:.85rem; color:var(--ink); margin-bottom:8px; letter-spacing:.02em; }
.field input, .field textarea{
  width:100%; border:1px solid var(--line); border-radius:12px; padding:14px 16px;
  font-family:inherit; font-size:.98rem; color:var(--ink); background:var(--light); transition:var(--transition);
}
.field textarea{ min-height:150px; resize:vertical; }
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--navy); background:#fff; box-shadow:0 0 0 3px rgba(51,85,127,.12); }
.contact-form .btn{ width:100%; margin-top:6px; }
.form-note{ font-size:.82rem; color:var(--muted); margin-top:14px; text-align:center; }
/* Message d'état du formulaire (succès / erreur) après envoi */
.form-status{ margin-top:14px; padding:12px 16px; border-radius:var(--radius-md,10px); font-size:.9rem; text-align:center; }
.form-status.is-ok{ background:#eef7ef; border:1px solid #cfe6d2; color:#256d33; }
.form-status.is-error{ background:#fdeeee; border:1px solid #f3cccc; color:#a2312b; }

.contact-aside .contact-illustration{ border-radius:var(--radius-lg); overflow:hidden; margin-bottom:26px; }
.contact-aside .contact-illustration img{ width:100%; display:block; }
.contact-info-card{ background:var(--navy); color:#eaf0f7; border-radius:var(--radius-lg); padding:32px 30px; }
.contact-info-card + .contact-info-card{ margin-top:18px; }
.info-item{ display:flex; gap:16px; align-items:flex-start; padding:16px 0; border-bottom:1px solid rgba(255,255,255,.14); }
.info-item:last-child{ border-bottom:0; padding-bottom:0; }
.info-item:first-child{ padding-top:0; }
.info-item .ic{ flex:0 0 auto; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; }
.info-item .ic svg{ width:20px; height:20px; stroke:var(--gold); fill:none; }
.info-item .label{ font-size:.8rem; text-transform:uppercase; letter-spacing:.1em; color:#9fb0c6; margin-bottom:3px; }
.info-item .value{ font-size:1.02rem; color:#fff; }
.info-item .value a{ color:#fff; }
.info-item .value a:hover{ color:var(--gold); }

/* ---------- Blog listing ---------- */
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }

/* ---------- Article ---------- */
.article{ max-width:800px; margin:0 auto; }
.article .article-meta{ color:var(--muted); font-size:.9rem; margin-bottom:18px; letter-spacing:.03em; }
.article-figure{ border-radius:var(--radius-lg); overflow:hidden; margin:0 0 40px; box-shadow:var(--shadow); }
.article-figure img{ width:100%; display:block; }
.article-body{ font-size:1.08rem; line-height:1.85; color:var(--text); }
.article-body h2{ font-size:clamp(1.6rem,2.6vw,2.1rem); margin:44px 0 16px; }
.article-body h3{ font-size:1.4rem; margin:32px 0 12px; }
.article-body p{ margin:0 0 1.3em; }
.article-body ul{ margin:0 0 1.3em; padding-left:0; }
.article-body ul li{ position:relative; padding-left:28px; margin-bottom:10px; }
.article-body ul li::before{ content:""; position:absolute; left:4px; top:11px; width:8px; height:8px; border-radius:50%; background:var(--gold); }
.article-body blockquote{ margin:32px 0; padding:20px 28px; border-left:3px solid var(--gold); background:var(--light); border-radius:0 12px 12px 0; font-family:var(--font-display); font-size:1.3rem; color:var(--ink); }
.article-share{ margin-top:48px; padding-top:28px; border-top:1px solid var(--line); }
.back-link{ display:inline-flex; align-items:center; gap:8px; font-weight:600; color:var(--navy); font-size:.9rem; }
.back-link svg{ width:18px; height:18px; }

/* ---------- Legal ---------- */
.legal{ max-width:840px; margin:0 auto; }
.legal h2{ font-size:1.7rem; margin:40px 0 14px; }
.legal h3{ font-size:1.3rem; margin:28px 0 10px; }
.legal p, .legal li{ color:var(--text); }
.legal ul{ padding-left:22px; margin:0 0 1.2em; list-style:disc; }
.legal a{ color:var(--navy); text-decoration:underline; }
.legal table{ width:100%; border-collapse:collapse; margin:18px 0; font-size:.92rem; }
.legal th, .legal td{ border:1px solid var(--line); padding:10px 12px; text-align:left; }
.legal th{ background:var(--light); }
.legal-updated{ color:var(--muted); font-size:.9rem; margin-bottom:30px; }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .contact-grid{ grid-template-columns:1fr; }
  .blog-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  .form-row{ grid-template-columns:1fr; }
  .blog-grid{ grid-template-columns:1fr; }
}