/* =========================================================
   MIRI48 — Styles spécifiques aux pages
   ========================================================= */

/* ====== Bandeau de page (sous-hero) ====== */
.page-hero{ position:relative; isolation:isolate; color:#fff; overflow:hidden; }
.page-hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.page-hero::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(11,74,84,.45), rgba(11,74,84,.7)); }
.page-hero .inner{ padding-top:calc(var(--header-h) + 3.2rem); padding-bottom:3.4rem; }
.page-hero h1{ color:#fff; font-size:clamp(2.2rem,5.5vw,4rem); }
.page-hero .lead{ color:rgba(255,255,255,.92); max-width:50ch; margin-top:.8rem; font-size:1.1rem; }
.page-hero .kicker{ color:var(--hibiscus); }

/* ====== Le logement ====== */
.spec-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1rem; }
.spec{
  background:var(--ivoire); border:1px solid var(--ligne); border-radius:var(--radius-sm);
  padding:1.3rem; text-align:center; box-shadow:var(--shadow-sm);
}
.spec .ic{ color:var(--corail); margin-bottom:.6rem; display:flex; justify-content:center; }
.spec .ic svg{ width:28px; height:28px; }
.spec b{ display:block; font-family:var(--serif); font-size:1.35rem; color:var(--lagon-dark); }
.spec span{ font-size:.86rem; color:var(--encre-doux); text-transform:uppercase; letter-spacing:.08em; font-weight:700; }

.prose{ max-width:68ch; font-size:1.08rem; color:var(--encre); }
.prose p{ margin-bottom:1.1em; }
.prose .drop::first-letter{ font-family:var(--serif); font-size:3.4rem; float:left; line-height:.8; padding:.05em .12em 0 0; color:var(--corail); }

/* Équipements */
.amen-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:.7rem 1.6rem; list-style:none; padding:0; margin:0; }
.amen-grid li{ display:flex; gap:.75rem; align-items:center; padding:.55rem 0; border-bottom:1px solid var(--ligne); color:var(--encre); }
.amen-grid li svg{ flex:none; width:22px; height:22px; color:var(--lagon-deep); }

/* Encadré "à savoir" */
.notice{
  background:#fff7ec; border:1px solid #f3dcb0; border-left:4px solid var(--hibiscus);
  border-radius:var(--radius-sm); padding:1.4rem 1.6rem;
}
.notice h3{ font-family:var(--sans); font-weight:800; font-size:1rem; color:var(--bois); text-transform:uppercase; letter-spacing:.06em; margin-bottom:.7rem; }
.notice ul{ margin:0; padding-left:1.1rem; color:var(--encre); }
.notice li{ margin-bottom:.4rem; }

/* Infos pratiques + carte */
.practical{ display:grid; grid-template-columns:1fr 1.3fr; gap:clamp(1.5rem,4vw,3rem); align-items:start; }
@media (max-width:820px){ .practical{ grid-template-columns:1fr; } }
.info-rows{ display:grid; gap:0; }
.info-row{ display:flex; justify-content:space-between; gap:1rem; padding:1rem 0; border-bottom:1px solid var(--ligne); }
.info-row .k{ display:flex; gap:.7rem; align-items:center; color:var(--encre-doux); font-weight:700; }
.info-row .k svg{ width:20px; height:20px; color:var(--lagon-deep); }
.info-row .v{ text-align:right; font-weight:700; color:var(--lagon-dark); }
.map-card{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--ligne); background:#fff; }
.map-card iframe{ width:100%; height:380px; border:0; display:block; }
.map-card .addr{ padding:1.1rem 1.3rem; display:flex; gap:.7rem; align-items:flex-start; }
.map-card .addr svg{ width:22px; height:22px; color:var(--corail); flex:none; margin-top:.1rem; }

.price-tag{
  display:inline-flex; align-items:baseline; gap:.5rem;
  background:var(--sable-2); border:1px dashed var(--bois); border-radius:14px;
  padding:.9rem 1.3rem; margin-top:.4rem;
}
.price-tag b{ font-family:var(--serif); font-size:2rem; color:var(--corail); }
.price-tag span{ color:var(--encre-doux); font-weight:600; }

/* ====== Galerie ====== */
.masonry{ columns: 3 280px; column-gap:1rem; }
.masonry figure{ margin:0 0 1rem; break-inside:avoid; border-radius:var(--radius-sm); overflow:hidden; box-shadow:var(--shadow-sm); cursor:zoom-in; position:relative; background:var(--sable-2); }
.masonry img{ width:100%; height:auto; transition:transform .5s ease, filter .3s; }
.masonry figure:hover img{ transform:scale(1.04); }
.masonry figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:1.4rem 1rem .9rem;
  background:linear-gradient(180deg,transparent,rgba(11,74,84,.82));
  color:#fff; font-size:.9rem; font-weight:700; opacity:0; transform:translateY(8px); transition:.3s;
}
.masonry figure:hover figcaption{ opacity:1; transform:none; }

/* Lightbox */
.lightbox{ position:fixed; inset:0; z-index:200; background:rgba(13,40,46,.94); display:none; align-items:center; justify-content:center; padding:clamp(1rem,4vw,3rem); }
.lightbox.open{ display:flex; }
.lightbox img{ max-width:92vw; max-height:82vh; border-radius:10px; box-shadow:0 30px 80px -20px rgba(0,0,0,.7); }
.lightbox .lb-cap{ position:absolute; bottom:max(1.4rem, env(safe-area-inset-bottom)); left:0; right:0; text-align:center; color:#fff; font-size:.95rem; font-weight:600; }
.lightbox button{ position:absolute; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.28); color:#fff; width:52px; height:52px; border-radius:50%; cursor:pointer; display:grid; place-items:center; transition:background .2s; }
.lightbox button:hover{ background:rgba(255,255,255,.26); }
.lightbox button svg{ width:24px; height:24px; }
.lb-close{ top:1.4rem; right:1.4rem; }
.lb-prev{ left:1.4rem; top:50%; transform:translateY(-50%); }
.lb-next{ right:1.4rem; top:50%; transform:translateY(-50%); }
@media (max-width:600px){ .lb-prev{ left:.6rem; } .lb-next{ right:.6rem; } .lightbox button{ width:46px; height:46px; } }

/* ====== Contact ====== */
.contact-grid{ display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(1.6rem,4vw,3.2rem); align-items:start; }
@media (max-width:880px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-cards{ display:grid; gap:1rem; }
.contact-card{ background:var(--ivoire); border:1px solid var(--ligne); border-radius:var(--radius); padding:1.4rem 1.5rem; box-shadow:var(--shadow-sm); display:flex; gap:1rem; align-items:flex-start; }
.contact-card .ic{ width:46px; height:46px; flex:none; border-radius:12px; background:var(--sable-2); color:var(--lagon-deep); display:grid; place-items:center; }
.contact-card .ic svg{ width:24px; height:24px; }
.contact-card h3{ font-family:var(--sans); font-weight:800; font-size:.95rem; letter-spacing:.04em; text-transform:uppercase; color:var(--encre-doux); margin-bottom:.3rem; }
.contact-card a, .contact-card p{ color:var(--lagon-dark); font-weight:700; font-size:1.05rem; margin:0; line-height:1.4; }
.contact-card a:hover{ color:var(--corail); }

.host-card{ background:linear-gradient(135deg,var(--lagon-deep),var(--lagon-dark)); color:#fff; border:none; }
.host-card h3{ color:rgba(255,255,255,.75); }
.host-card a, .host-card p, .host-card b{ color:#fff; }
.host-card .badge-sh{ display:inline-flex; align-items:center; gap:.4em; background:rgba(255,255,255,.15); padding:.3em .8em; border-radius:999px; font-size:.8rem; font-weight:800; margin-top:.5rem; }

/* Sélecteur d'objet de la demande (2 modes) */
.fm-label{ display:block; font-weight:800; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:var(--encre-doux); margin-bottom:.55rem; }
.form-modes{ display:flex; background:var(--sable-2); border:1px solid var(--ligne); border-radius:999px; padding:4px; gap:4px; margin-bottom:1.6rem; }
.fm-btn{
  flex:1 1 0; border:none; background:transparent; cursor:pointer;
  font-family:var(--sans); font-weight:800; font-size:.9rem; color:var(--encre-doux);
  padding:.7em 1em; border-radius:999px; transition:background-color .18s, color .18s, box-shadow .18s;
  white-space:nowrap;
}
.fm-btn:hover{ color:var(--lagon-dark); }
.fm-btn.active{ background:#fff; color:var(--lagon-dark); box-shadow:var(--shadow-sm); }
#availFields{ animation:fm-fade .35s ease; }
@keyframes fm-fade{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
@media (max-width:480px){
  .form-modes{ flex-direction:column; border-radius:16px; }
  .fm-btn{ border-radius:12px; }
}

/* Formulaire */
.form-card{ background:var(--ivoire); border:1px solid var(--ligne); border-radius:var(--radius); padding:clamp(1.5rem,4vw,2.6rem); box-shadow:var(--shadow); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
@media (max-width:540px){ .form-row{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:.4rem; margin-bottom:1.1rem; }
.field label{ font-weight:800; font-size:.85rem; color:var(--lagon-dark); letter-spacing:.02em; }
.field label .req{ color:var(--corail); }
.field input, .field select, .field textarea{
  font-family:var(--sans); font-size:1rem; color:var(--encre);
  padding:.8em .9em; border:1.5px solid var(--ligne); border-radius:12px; background:#fff;
  transition:border-color .15s, box-shadow .15s; width:100%;
}
.field textarea{ resize:vertical; min-height:120px; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--lagon); box-shadow:0 0 0 3px rgba(17,163,172,.18);
}
.field .hint{ font-size:.8rem; color:var(--encre-doux); }
.form-note{ font-size:.85rem; color:var(--encre-doux); margin-top:.4rem; }
.form-status{ margin-top:1rem; padding:.9rem 1.1rem; border-radius:12px; font-weight:700; display:none; }
.form-status.show{ display:block; }
.form-status.ok{ background:#e7f6ee; color:var(--vert-deep); border:1px solid #b7e0c6; }
.form-status.err{ background:#fdeceA; color:#b23a22; border:1px solid #f3c4b6; }
.btn-block{ width:100%; justify-content:center; font-size:1.05rem; padding:1em; }