/* ==========================================================================
   D&L IMMOBILIER — V3, complement pour la PAGE UNIQUE
   --------------------------------------------------------------------------
   Ce fichier ne fait qu'AJOUTER a `styles.css` (la V2). Tout le vocabulaire
   visuel — couleurs, typos, filets, animations, lignes de biens — vient de la.
   Ici : uniquement ce que la mise en page d'une seule page longue exige,
   plus l'apercu photo, qui remplace l'ancien apercu textuel.
   Raison du fichier separe : la V2 reste intacte et comparable.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. APERCU PHOTO AU SURVOL D'UNE LIGNE
   En V2 l'apercu affichait « PHOTO A FOURNIR » sur un degrade : on n'avait
   aucune image. On a desormais les vraies photos des biens, donc on montre
   la photo. Le cadre garde exactement la meme geometrie qu'en V2.
   -------------------------------------------------------------------------- */
.apercu__photo{
  width:100%; height:100%; object-fit:cover;
  background:linear-gradient(150deg,#26251f,#3a3830 60%,#22211c);
}

/* --------------------------------------------------------------------------
   2. ANCRES ET DEFILEMENT
   L'en-tete est fixe et le bandeau de maquette occupe 31 px : sans marge de
   defilement, un clic sur « Nos biens » cale le titre SOUS l'en-tete.
   -------------------------------------------------------------------------- */
html{ scroll-behavior:smooth; scroll-padding-top:118px }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }

/* --------------------------------------------------------------------------
   3. RESPIRATION ENTRE SECTIONS
   Sur une page unique, deux sections claires qui se suivent se confondent.
   Un filet fin les separe — pas une bordure lourde, pas un fond alterne.
   -------------------------------------------------------------------------- */
.section + .section{ border-top:1px solid var(--trait) }
.section + .chiffres, .chiffres + .section{ border-top:0 }

/* --------------------------------------------------------------------------
   4. METIERS — la 4e colonne (fleche) n'a pas de cible sur une page unique
   Les metiers ne sont plus des liens vers des pages : la fleche resterait
   un signal trompeur. On la garde comme repere visuel mais elle ne bouge
   qu'au survol de la ligne entiere.
   -------------------------------------------------------------------------- */
.metier{ cursor:default }
.metier__fleche{ opacity:.45 }
.metier:hover .metier__fleche{ opacity:1 }

/* --------------------------------------------------------------------------
   5. LE TITRE DE SECTION DANS `.declaration`
   `styles.css` cible `.declaration h2` : on garde, mais la page unique
   enchaine plusieurs h2 « titre », qui ont besoin d'un peu d'air en dessous.
   -------------------------------------------------------------------------- */
.titre + .chapo{ margin-top:24px }

/* --------------------------------------------------------------------------
   6. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width:900px){
  /* la ligne de bien passe sur deux niveaux : nom au-dessus, chiffres dessous */
  .ligne{
    grid-template-columns:40px minmax(0,1fr) auto;
    grid-template-areas:
      "num nom nom"
      ".   det prix";
    gap:8px 18px; padding:24px 4px;
  }
  .ligne__numero{ grid-area:num }
  .ligne__nom{ grid-area:nom }
  .ligne__detail{ grid-area:det }
  .ligne__prix{ grid-area:prix; text-align:right }
  .ligne__voir{ display:none }        /* le survol n'existe pas au doigt */
  .ligne:hover{ padding-left:4px }    /* et le decalage au survol non plus */

  .metier{
    grid-template-columns:44px minmax(0,1fr);
    grid-template-areas:
      "num titre"
      ".   texte";
    gap:6px 18px; padding:28px 4px;
  }
  .metier__num{ grid-area:num }
  .metier h3{ grid-area:titre }
  .metier p{ grid-area:texte; margin-top:8px }
  .metier__fleche{ display:none }
  .metier:hover{ padding-left:4px }

  .contact{ grid-template-columns:1fr }
  .pied__grille{ grid-template-columns:1fr 1fr; gap:36px }
}

@media (max-width:620px){
  .chiffres{ grid-template-columns:repeat(2,1fr) }
  .pied__grille{ grid-template-columns:1fr }
  .duo{ grid-template-columns:1fr }
}