/* Paris Adresse — composants */

/* ================= En-tete ================= */
.site-head{
  background:var(--plaque-deep); color:#fff;
  position:sticky; top:0; z-index:60;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.site-head__in{
  display:flex; align-items:center; gap:1.5rem;
  min-height:62px;
}
.brand{
  font-family:var(--serif); font-size:1.18rem; font-weight:600;
  text-decoration:none; color:#fff; letter-spacing:.005em;
  margin-right:auto; white-space:nowrap;
}
.brand span{ font-style:italic; }
.nav{ display:flex; align-items:center; gap:1.55rem; }
.nav a{
  color:rgba(255,255,255,.86); text-decoration:none; font-size:.93rem;
  padding:.35rem 0; border-bottom:1px solid transparent;
}
.nav a:hover, .nav a[aria-current="page"]{ color:#fff; border-bottom-color:var(--brass); }
.nav-toggle{
  display:none; background:none; border:1px solid rgba(255,255,255,.35);
  color:#fff; border-radius:3px; padding:.4rem .6rem; cursor:pointer;
}

@media (max-width:860px){
  .nav-toggle{ display:block; }
  .nav{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--plaque-deep); padding:.5rem var(--gut) 1.1rem;
    border-bottom:1px solid rgba(255,255,255,.14);
  }
  .nav.is-open{ display:flex; }
  .nav a{ padding:.72rem 0; border-bottom:1px solid rgba(255,255,255,.09); }
}

/* ================= Hero : le mur de plaques ================= */
.hero{ background:var(--plaque-deep); color:#fff; padding:clamp(3rem,7vw,5.5rem) 0 0; }
.hero h1{ color:var(--stone); max-width:15ch; margin-bottom:.35em; }
.hero__lede{
  font-size:clamp(1.05rem,1.7vw,1.22rem); color:rgba(255,255,255,.8);
  max-width:52ch; margin-bottom:1.9rem;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:.75rem; margin-bottom:clamp(2.5rem,5vw,3.6rem); }

/* Le mur : toutes les adresses, d'emblee. C'est le portefeuille lui-meme. */
.wall{
  display:flex; flex-wrap:wrap; gap:.55rem;
  padding-bottom:clamp(2.5rem,5vw,3.8rem);
  border-top:1px solid rgba(255,255,255,.14); padding-top:1.6rem;
}
.wall__label{
  width:100%; font-size:.95rem; color:rgba(255,255,255,.62);
  margin-bottom:.55rem; max-width:46ch;
}
.wall .plaque{
  background:rgba(255,255,255,.055);
  transition:background-color .16s ease, transform .16s ease;
}
.wall .plaque:hover{ background:var(--plaque-soft); transform:translateY(-2px); }

/* ================= Sections ================= */
.section{ padding:clamp(3.2rem,6vw,5rem) 0; }
.section--paper{ background:var(--paper); }
.section--stone{ background:var(--stone-warm); }
.section--dark{ background:var(--plaque); color:#fff; }
.section--dark h2{ color:var(--stone); }
.section__head{ max-width:58ch; margin-bottom:2.4rem; }
.section__head p{ color:var(--zinc); }
.section--dark .section__head p{ color:rgba(255,255,255,.76); }

/* ================= Filtres ================= */
.filters{
  display:flex; flex-wrap:wrap; gap:.9rem 1.2rem; align-items:flex-end;
  padding:1.2rem 1.3rem; background:var(--paper);
  border:1px solid var(--zinc-line); border-radius:4px; margin-bottom:2rem;
}
.field{ display:flex; flex-direction:column; gap:.3rem; min-width:9.5rem; flex:1 1 9.5rem; }
.field label{ font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--zinc); }
.field select, .field input{
  font:inherit; font-size:.95rem; padding:.55rem .6rem;
  border:1px solid var(--zinc-line); border-radius:3px;
  background:var(--paper); color:var(--ink);
}
.filters__count{ font-size:.92rem; color:var(--zinc); flex:0 0 auto; padding-bottom:.6rem; }

/* ================= Grille d'appartements ================= */
.grid{
  display:grid; gap:2rem 1.6rem;
  grid-template-columns:repeat(auto-fill, minmax(295px,1fr));
}
.card{ display:flex; flex-direction:column; text-decoration:none; color:inherit; }
.card__media{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--stone-warm); }
.card__media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.card:hover .card__media img{ transform:scale(1.035); }
.card__plaque{ position:absolute; left:.85rem; bottom:.85rem; }
.card__body{ padding-top:.95rem; }
.card__name{ font-family:var(--serif); font-size:1.28rem; font-weight:600; margin:0 0 .18rem; }
.card__area{ font-size:.9rem; color:var(--zinc); margin:0 0 .7rem; }
.card__foot{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  border-top:1px solid var(--zinc-line); padding-top:.65rem;
  font-size:.9rem; color:var(--zinc);
}
.card__price strong{ color:var(--ink); font-size:1.02rem; font-weight:600; }
.card__flag{
  display:inline-block; margin-top:.55rem; font-size:.82rem;
  color:var(--brass); border-left:2px solid var(--brass); padding-left:.55rem;
}
.empty{ padding:2.5rem 0; color:var(--zinc); }

/* ================= Arguments ================= */
.reasons{ display:grid; gap:2rem 2.6rem; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); }
.reason h3{ font-family:var(--sans); font-size:1.06rem; font-weight:600; margin-bottom:.45rem; }
.reason p{ font-size:.97rem; color:var(--zinc); margin:0; }
.section--dark .reason p{ color:rgba(255,255,255,.76); }
.reason{ border-top:2px solid var(--plaque); padding-top:1rem; }
.section--dark .reason{ border-top-color:var(--brass); }

/* ================= Page appartement ================= */
.apt-head{ background:var(--plaque-deep); color:#fff; padding:2.2rem 0 2rem; }
.crumbs{ font-size:.87rem; color:rgba(255,255,255,.6); margin-bottom:1.1rem; }
.crumbs a{ color:rgba(255,255,255,.82); text-decoration:none; border-bottom:1px solid transparent; }
.crumbs a:hover{ border-bottom-color:currentColor; }
.apt-head h1{ color:var(--stone); font-size:clamp(2.1rem,4.6vw,3.4rem); margin:.7rem 0 .3rem; }
.apt-head__area{ color:rgba(255,255,255,.72); margin:0; }

.gallery{ display:grid; gap:.4rem; grid-template-columns:2fr 1fr 1fr; grid-auto-rows:170px; }
.gallery a{ display:block; overflow:hidden; background:var(--stone-warm); }
.gallery a:first-child{ grid-row:span 2; grid-column:span 1; }
.gallery img{ width:100%; height:100%; object-fit:cover; }
.gallery a:nth-child(n+6){ display:none; }
@media (max-width:760px){
  .gallery{ grid-template-columns:1fr 1fr; grid-auto-rows:140px; }
  .gallery a:nth-child(n+5){ display:none; }
}

.apt-layout{ display:grid; gap:2.8rem 3.2rem; grid-template-columns:minmax(0,1.62fr) minmax(0,1fr); }
@media (max-width:920px){ .apt-layout{ grid-template-columns:1fr; } }

/* En flex plutot qu'en grille : avec 5 caracteristiques, une grille laissait
   des cellules vides sur la derniere ligne, remplies par le gris du fond. */
.facts{
  display:flex; flex-wrap:wrap; gap:1px;
  background:var(--zinc-line); border:1px solid var(--zinc-line);
  margin:0 0 2.2rem;
}
.facts div{ background:var(--paper); padding:.85rem .9rem; flex:1 1 118px; }
.facts dt{ font-size:.74rem; letter-spacing:.07em; text-transform:uppercase; color:var(--zinc); }
.facts dd{ margin:.2rem 0 0; font-size:1.02rem; font-weight:600; }

.prose h2{ font-size:1.5rem; margin:2.2rem 0 .7rem; }
.prose h2:first-child{ margin-top:0; }
.prose p{ color:#28332f; }

.amenities{ columns:2 168px; column-gap:2rem; list-style:none; padding:0; font-size:.95rem; }
.amenities li{ break-inside:avoid; padding-left:1.05rem; position:relative; color:#28332f; }
.amenities li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:.42rem; height:.42rem; background:var(--plaque-soft); border-radius:50%;
}

.notice{
  border-left:3px solid var(--brass); background:var(--paper);
  padding:.95rem 1.1rem; margin:0 0 1.6rem; font-size:.96rem;
}
.notice strong{ display:block; margin-bottom:.15rem; }

/* Panneau de reservation */
.book{ position:sticky; top:86px; align-self:start; }
.book__card{ background:var(--paper); border:1px solid var(--zinc-line); padding:1.5rem; }
.book__price{ font-family:var(--serif); font-size:2.1rem; font-weight:600; line-height:1; }
.book__price small{ font-family:var(--sans); font-size:.9rem; font-weight:400; color:var(--zinc); }
.book__from{ font-size:.85rem; color:var(--zinc); margin:.45rem 0 1.25rem; }
.book__list{ list-style:none; padding:0; margin:1.3rem 0 0; font-size:.92rem; color:var(--zinc); }
.book__list li{ display:flex; justify-content:space-between; gap:1rem;
                padding:.5rem 0; border-top:1px solid var(--zinc-line); }
.book__list li span:last-child{ color:var(--ink); text-align:right; }
@media (max-width:920px){ .book{ position:static; } }

/* ================= FAQ ================= */
.faq{ max-width:74ch; }
.faq details{ border-top:1px solid var(--zinc-line); padding:1.05rem 0; }
.faq details:last-of-type{ border-bottom:1px solid var(--zinc-line); }
.faq summary{ cursor:pointer; font-weight:600; font-size:1.03rem; list-style:none; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; float:right; color:var(--brass); font-weight:400; font-size:1.3rem; line-height:1; }
.faq details[open] summary::after{ content:"\2013"; }
.faq details p{ margin:.75rem 0 0; color:var(--zinc); }

/* ================= Formulaire ================= */
.form{ display:grid; gap:1rem; max-width:34rem; }
.form label{ font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:var(--zinc); }
.form input, .form textarea, .form select{
  font:inherit; width:100%; padding:.68rem .75rem; margin-top:.3rem;
  border:1px solid var(--zinc-line); border-radius:3px; background:var(--paper); color:var(--ink);
}
.form textarea{ min-height:8rem; resize:vertical; }
.form__gotcha{ position:absolute; left:-9999px; }
.form__msg{ font-size:.95rem; padding:.8rem 1rem; border-left:3px solid var(--plaque-soft);
            background:var(--paper); }
.form__msg[data-state="error"]{ border-left-color:#a33; }

/* ================= Quartiers ================= */
.areas{ display:grid; gap:1.4rem; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); }
.area-card{
  display:block; text-decoration:none; color:inherit; background:var(--paper);
  border:1px solid var(--zinc-line); padding:1.15rem 1.25rem;
  transition:border-color .16s ease;
}
.area-card:hover{ border-color:var(--plaque); }
.area-card h2{ font-size:1.16rem; margin:0 0 .2rem; }
.area-card p{ margin:0; font-size:.89rem; color:var(--zinc); }

/* ================= Pied de page ================= */
.site-foot{ background:var(--plaque-deep); color:rgba(255,255,255,.72); padding:3.2rem 0 1.8rem; font-size:.93rem; }
.foot-grid{ display:grid; gap:2rem 2.5rem; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.site-foot h2{ color:#fff; font-size:.78rem; letter-spacing:.11em; text-transform:uppercase; margin:0 0 .8rem; }
.site-foot a{ color:rgba(255,255,255,.78); text-decoration:none; }
.site-foot a:hover{ color:#fff; text-decoration:underline; }
.site-foot ul{ list-style:none; padding:0; margin:0; }
.site-foot li{ margin-bottom:.4rem; }
.foot-bottom{
  margin-top:2.6rem; padding-top:1.3rem; border-top:1px solid rgba(255,255,255,.13);
  display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; justify-content:space-between; font-size:.85rem;
}

/* ================= Bandeau cookies ================= */
.cookies{
  position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:90;
  max-width:33rem; background:var(--plaque-deep); color:#fff;
  padding:1rem 1.15rem; border-radius:4px; font-size:.9rem;
  box-shadow:0 10px 34px rgba(7,37,32,.32);
}
.cookies[hidden]{ display:none; }
.cookies p{ margin:0 0 .8rem; max-width:none; color:rgba(255,255,255,.82); }
.cookies__row{ display:flex; gap:.6rem; flex-wrap:wrap; }
.cookies .btn{ padding:.5rem 1rem; font-size:.88rem; }

/* ================= Calendrier de disponibilite ================= */
/* Donnees figees au moment du build : la fiche le date explicitement et
   renvoie au moteur Guesty, qui reste la source vivante. */
.cal{
  display:grid; gap:1.4rem 1.8rem;
  grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  margin:1.1rem 0 .9rem;
}
.cal__month h3{
  font-family:var(--sans); font-size:.92rem; font-weight:600;
  margin:0 0 .5rem; color:var(--ink);
}
.cal__dow, .cal__grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.cal__dow{ margin-bottom:3px; }
.cal__dow span{
  text-align:center; font-size:.63rem; color:var(--zinc);
  letter-spacing:.04em;
}
.cal__d{
  display:flex; align-items:center; justify-content:center;
  aspect-ratio:1; font-size:.72rem; border-radius:2px;
}
.cal__d abbr{ text-decoration:none; border:0; }
.cal__d--free{ background:var(--paper); color:var(--ink); box-shadow:inset 0 0 0 1px var(--zinc-line); }
.cal__d--busy{ background:var(--plaque); color:rgba(255,255,255,.45); }
.cal__d--past{ background:transparent; color:var(--zinc-line); }
.cal__pad{ aspect-ratio:1; }
.cal__key{
  display:flex; align-items:center; gap:.4rem; flex-wrap:wrap;
  font-size:.83rem; color:var(--zinc);
}
.cal__key .cal__d{ width:1.05rem; height:1.05rem; aspect-ratio:auto; }
.cal__key .cal__d + *{ margin-left:.15rem; }

/* ================= Accueil : la recherche instantanee ================= */
/* Le visiteur ne cherche pas, il repond a une question deja posee. Les
   raccourcis passent avant les champs de date : un clic suffit. */
.hero--find{ padding-bottom:clamp(2.4rem,5vw,3.4rem); }
.hero--find h1{ max-width:18ch; margin-bottom:.25em; }
.hero--find .hero__lede{ margin-bottom:1.5rem; min-height:1.6em; }

.when{ display:flex; flex-wrap:wrap; gap:.55rem; margin-bottom:1.3rem; }
.when__btn{
  font:inherit; font-size:.95rem; color:rgba(255,255,255,.86); cursor:pointer;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.22);
  border-radius:999px; padding:.55rem 1.2rem;
  transition:background-color .16s ease, border-color .16s ease, color .16s ease;
}
.when__btn:hover{ background:rgba(255,255,255,.14); color:#fff; }
.when__btn.is-on{ background:var(--stone); border-color:var(--stone); color:var(--plaque-deep); font-weight:600; }

.pick{ display:flex; flex-wrap:wrap; gap:.7rem; }
.pick__f{ display:flex; flex-direction:column; gap:.3rem; }
.pick__f span{ font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
               color:rgba(255,255,255,.6); }
.pick__f input, .pick__f select{
  font:inherit; font-size:1rem; padding:.6rem .7rem; min-width:9.5rem;
  color:#fff; background:rgba(255,255,255,.08); border-radius:4px;
  border:1px solid rgba(255,255,255,.26); color-scheme:dark;
}
.pick__note{ font-size:.85rem; color:rgba(255,255,255,.52); margin:1rem 0 0; max-width:56ch; }

/* Le prix affiche est le total du sejour : c'est lui qui evite de reflechir. */
.card__per{ margin:.4rem 0 0; font-size:.85rem; color:var(--zinc); }
.linkish{
  font:inherit; font-size:inherit; color:var(--plaque); cursor:pointer;
  background:none; border:0; border-bottom:2px solid var(--brass);
  padding:0 0 1px;
}
.linkish:hover{ color:var(--plaque-soft); }