/* ==========================================================================
   D&L IMMOBILIER — V4, LA FICHE DE PRÉSENTATION D'UN BIEN
   --------------------------------------------------------------------------
   Remplace la galerie en grille de la première tentative, écartée : elle
   lisait comme une planche-contact, pas comme la présentation d'une
   propriété. Ici la fiche raconte le bien — couverture plein cadre avec le
   nom posé dessus, chapô, informations, puis un reportage rythmé.

   `styles.css`, `app.js`, `page-unique.css` et `page-unique.js` restent
   repris de la V3 sans une modification.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. LA LIGNE DE BIEN DEVIENT UN BOUTON
   Il n'y a pas d'URL à atteindre : un <a> qui ne mène nulle part est un
   mensonge pour un lecteur d'écran. Le <button> hérite du dessin de `.ligne`,
   on ne neutralise que l'apparence native.
   -------------------------------------------------------------------------- */
.ligne--bouton{
  width:100%;
  background:none; border:0;
  font:inherit; color:inherit;
  text-align:left; cursor:pointer;
  -webkit-appearance:none; appearance:none;
}
.ligne--bouton:focus-visible{ outline:1px solid var(--laiton); outline-offset:4px }

/* --------------------------------------------------------------------------
   2. LE VOILE
   -------------------------------------------------------------------------- */
.voile{
  position:fixed; inset:0; z-index:120;
  /* Opaque, pas rgba(...,.97) : à 3 % de transparence on lisait encore les
     titres de la page derrière les photos. Constaté à l'écran le 31/07. */
  background:var(--encre);
  overflow-y:auto;
  overscroll-behavior:contain;
  opacity:0;
  transition:opacity .38s ease;
}
.voile[hidden]{ display:none }
.voile.est-ouvert{ opacity:1 }
.voile__contenu{ min-height:100% }

.fiche[hidden]{ display:none }

/* --------------------------------------------------------------------------
   3. LA COUVERTURE
   Plein cadre, nom posé dessus : c'est le geste des références qu'Ugo a
   données (Kononenko, Kretz). Hauteur bornée pour qu'on devine la suite et
   qu'on ait envie de faire défiler.
   -------------------------------------------------------------------------- */
.fiche__couv{
  position:relative;
  height:min(78vh, 760px);
  overflow:hidden;
}
.fiche__couv-img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  /* Le lent zoom donne la vie qui manquait — même geste que le héros. */
  transform:scale(1.04);
  animation:fiche-respire 24s ease-in-out infinite alternate;
}
@keyframes fiche-respire{ from{ transform:scale(1.04) } to{ transform:scale(1.13) } }

/* Voile dégradé : sans lui le texte blanc devient illisible dès qu'une photo
   est claire (piège déjà rencontré sur le héros de la V2). */
.fiche__couv::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(14,14,13,.55) 0%,
    rgba(14,14,13,.10) 34%,
    rgba(14,14,13,.30) 62%,
    rgba(14,14,13,.88) 100%);
}
.fiche__couv-texte{
  position:absolute; z-index:2;
  left:clamp(16px,5vw,72px); right:clamp(16px,5vw,72px);
  bottom:clamp(26px,4.5vw,58px);
}
.fiche__couv-texte .caps{ color:var(--gris-clair); margin-bottom:14px }
.fiche__couv-texte h3{
  font-family:var(--display); font-weight:200;
  font-size:clamp(2.4rem,6.4vw,5.4rem);
  line-height:1.02; letter-spacing:-.01em;
  color:var(--craie); margin:0;
}

/* Le bouton reste À L'ÉCRAN pendant toute la lecture de la fiche.
   Posé en haut de la couverture, il disparaissait dès qu'on descendait :
   il fallait remonter toute la fiche pour fermer, ou deviner qu'Échap marche.
   `fixed` et non `absolute` — et il est sorti de `.fiche__couv`, qui est en
   `overflow:hidden` et l'aurait rogné. */
.fiche__fermer{
  position:fixed; z-index:135;
  top:clamp(74px,8vw,96px); right:clamp(16px,5vw,72px);
  border:0; cursor:pointer;
  padding:10px 16px;
  font-family:var(--texte);
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--craie);
  /* Un fond très sombre translucide : sans lui le mot devient illisible dès
     qu'il passe au-dessus d'une photo claire (ciel, façade blanche). */
  background:rgba(14,14,13,.55);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.fiche__fermer::after{ left:16px; right:16px; bottom:6px }
.fiche__fermer::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:1px; background:currentColor;
  transform-origin:right; transition:transform .4s ease;
}
.fiche__fermer:hover::after{ transform:scaleX(0) }
.fiche__fermer:focus-visible{ outline:1px solid var(--laiton); outline-offset:5px }

/* --------------------------------------------------------------------------
   4. CHAPÔ + INFORMATIONS
   Deux colonnes : le texte respire à gauche, les faits s'alignent à droite.
   Les valeurs disent « Sur demande » / « Non communiquée » — rien n'est
   inventé, et l'absence se voit.
   -------------------------------------------------------------------------- */
.fiche__intro{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(30px,5vw,90px);
  align-items:start;
  padding:clamp(40px,6vw,86px) clamp(16px,5vw,72px) clamp(22px,3vw,34px);
  max-width:1500px; margin-inline:auto;
}
.fiche__chapo{
  font-family:var(--serif);
  font-size:clamp(1.25rem,2.3vw,1.85rem);
  line-height:1.5; color:var(--craie);
  margin:0; max-width:34ch;
}
.fiche__faits{ margin:0; display:grid; gap:0 }
.fiche__faits > div{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:20px; align-items:baseline;
  padding:15px 0;
  border-bottom:1px solid var(--trait-sombre);
}
.fiche__faits > div:first-child{ border-top:1px solid var(--trait-sombre) }
.fiche__faits dt{
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gris);
}
.fiche__faits dd{
  margin:0; text-align:right;
  color:var(--craie); font-size:1rem; font-weight:300;
}

.fiche__reserve{
  max-width:1500px; margin-inline:auto;
  padding:0 clamp(16px,5vw,72px) clamp(34px,5vw,64px);
  color:var(--gris); font-size:.82rem; line-height:1.6;
  max-width:min(1500px, 100%);
}
.fiche__reserve::before{
  content:""; display:inline-block;
  width:22px; height:1px; background:var(--laiton);
  vertical-align:middle; margin-right:12px;
}

/* --------------------------------------------------------------------------
   5. LE REPORTAGE — UNE PLANCHE DE PETITES VIGNETTES
   Deux versions ont été écartées avant celle-ci :
     - une grille en colonnes (masonry), qui lisait comme une planche-contact ;
     - un grand bloc alterné avec des paires, qui donnait « une photo par
       écran » et obligeait à défiler indéfiniment.
   Ici trois par rang, toutes au même format : la présentation est portée par
   ce qui entoure (couverture, chapô, informations, pied), les photos ne sont
   qu'un reportage d'appoint.
   -------------------------------------------------------------------------- */
.fiche__suite{
  max-width:1500px; margin-inline:auto;
  padding:0 clamp(16px,5vw,72px);
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(10px,1.5vw,20px);
}
.fiche__vignette{ margin:0; overflow:hidden }

.fiche__img{
  width:100%; height:auto;
  /* Format unique : une planche ne se lit d'un coup d'œil que si toutes les
     vignettes ont la même hauteur. Le recadrage est assumé. */
  aspect-ratio:3/2;
  object-fit:cover;
  display:block;
  background:var(--encre-2);
  transition:transform .9s cubic-bezier(.2,.7,.3,1), opacity .5s ease;
}
.fiche__vignette:hover .fiche__img{ transform:scale(1.05) }

/* Chaque bloc monte en entrant dans l'écran : c'est ce qui donne le
   sentiment de parcourir un reportage plutôt qu'une planche. */
[data-monte]{
  opacity:0; transform:translateY(34px);
  transition:opacity .85s ease, transform .85s cubic-bezier(.2,.7,.3,1);
}
[data-monte].monte{ opacity:1; transform:none }

.fiche__note{
  max-width:1500px; margin:clamp(30px,4vw,54px) auto 0;
  padding:16px clamp(16px,5vw,72px);
  color:var(--gris-clair); font-size:.82rem; line-height:1.6;
}

/* --------------------------------------------------------------------------
   6. LE PIED DE FICHE
   Une fiche qui se termine sur une photo laisse le visiteur sans issue.
   -------------------------------------------------------------------------- */
.fiche__pied{
  max-width:1500px; margin-inline:auto;
  padding:clamp(54px,8vw,120px) clamp(16px,5vw,72px) clamp(70px,9vw,140px);
  border-top:1px solid var(--trait-sombre);
  margin-top:clamp(48px,7vw,100px);
  display:flex; flex-wrap:wrap; gap:22px 48px;
  align-items:baseline; justify-content:space-between;
}
.fiche__pied-titre{
  font-family:var(--display); font-weight:200;
  font-size:clamp(1.6rem,3.4vw,2.8rem);
  color:var(--craie); margin:0;
}
.fiche__pied-lien{ color:var(--craie) }

/* --------------------------------------------------------------------------
   7. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width:900px){
  .fiche__intro{ grid-template-columns:1fr; gap:34px }
  .fiche__couv{ height:min(70vh,560px) }
  .fiche__suite{ grid-template-columns:repeat(2, 1fr) }
}
@media (max-width:620px){
  /* Trois vignettes de front sur un téléphone seraient des timbres-poste :
     on garde deux colonnes, c'est encore lisible et ça reste une planche. */
  .fiche__suite{ grid-template-columns:repeat(2, 1fr); gap:8px }
  .fiche__fermer{ top:clamp(66px,16vw,86px) }
}

@media (prefers-reduced-motion:reduce){
  .voile{ transition:none }
  .fiche__couv-img{ animation:none; transform:none }
  .fiche__img{ transition:none }
  [data-monte]{ opacity:1; transform:none; transition:none }
}