/* =================================================================
   FLORIAN GRAVAUD — pages.css
   Styles propres aux PAGES INTERNES (squelettes multi-pages).
   Réutilise toute la charte de style.css (palette, polices, nav,
   footer, .label/.display/.lede/.btn/.reveal). N'ajoute QUE le
   layout du hero d'intro, l'état de lien actif et le flag TODO.
   style.css n'est pas modifié.
   ================================================================= */

/* Hero d'intro : plein écran sobre, contenu centré verticalement,
   dégage la nav fixe (même padding de section que l'accueil + marge). */
.page-hero {
  min-height: 82vh;
  display: flex;
  align-items: center;
  padding-top: calc(clamp(5rem, 14vh, 11rem) + 1.5rem);
}
.page-hero .container {
  width: 100%;
}
.page-hero .lede {
  max-width: 640px;
}
.page-hero__actions {
  margin-top: 2.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

/* Capture email (guide) : réutilise .field / .btn ; largeur contenue. */
.page-form {
  max-width: 480px;
  margin-top: 2rem;
}
.page-form .field {
  margin-bottom: 1.1rem;
}
.page-form .page-form__row {
  display: flex;
  gap: 0.8rem;
  align-items: flex-end;
  flex-wrap: wrap;
}
.page-form .field {
  flex: 1 1 240px;
  margin-bottom: 0;
}
/* Le formulaire d'origine est pensé pour fond vert (texte crème). Sur les
   pages internes (fond crème), on repasse le champ en vert foncé lisible. */
.page-form .field label {
  color: var(--green);
}
.page-form .field input {
  color: var(--ink);
  border-bottom-color: rgba(28, 83, 69, 0.35);
}
.page-form .field input:focus {
  border-bottom-color: var(--gold);
}

/* ---------- Grille de biens dense (façon Carolwood) ----------
   Partagée par mes-biens.html (grille principale) et le teaser de
   l'accueil. Plein cadre, peu de texte, grandes photos, hover sobre.
   Reveal au scroll piloté en JS (ScrollTrigger.batch). */
.biens-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.5rem, 0.9vw, 0.85rem);
  padding: 0 clamp(0.5rem, 2vw, 1.4rem);
  margin: clamp(2rem, 5vh, 3.5rem) auto 0;
}
.biens-tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 3px;
  background: var(--cream-soft);
  aspect-ratio: 4 / 5;
}
.biens-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.9s var(--ease);
  will-change: transform;
}
.biens-tile:hover img { transform: scale(1.05); }
/* Légende sobre, révélée au survol (jamais de prix inventé). */
.biens-tile__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1rem 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream);
  background: linear-gradient(to top, rgba(19, 58, 48, 0.62), rgba(19, 58, 48, 0));
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.biens-tile:hover .biens-tile__cap { opacity: 1; transform: translateY(0); }

/* Tuile placeholder : même format, clairement marquée. */
.biens-tile--todo {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgba(28, 83, 69, 0.25);
}
.biens-tile--todo span {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(28, 83, 69, 0.45);
}

/* Anti-FOUC + état d'entrée (révélé en JS au scroll). */
html.has-js .biens-tile { opacity: 0; transform: translateY(24px); }

@media (max-width: 900px) { .biens-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .biens-grid { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  html.has-js .biens-tile { opacity: 1; transform: none; }
  .biens-tile img,
  .biens-tile__cap { transition: none; }
}

/* CTA du header en contour ambre (plus léger, plus chic) : fond transparent,
   bordure et texte ambre ; au survol seulement, plein ambre sur texte foncé.
   La nav étant partagée, le style s'applique à tout le site (voulu). Le
   .btn de base réserve déjà 1px de bordure -> aucun décalage (anti-CLS). */
.nav__cta.btn--gold {
  background: transparent;
  color: var(--gold);
  border-color: var(--gold);
}
.nav__cta.btn--gold:hover {
  background: var(--gold);
  color: var(--green-deep);
}

/* Lien de nav de la page courante. */
.nav__links a[aria-current="page"],
.menu__links a[aria-current="page"] {
  color: var(--gold);
}
.nav__links a[aria-current="page"]::after {
  transform: scaleX(1);
}

/* Marqueur TODO : visible et explicite (squelette), à remplacer par
   le vrai contenu. Même langage visuel que les badges or du site. */
.todo-flag {
  display: inline-block;
  margin-top: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(212, 157, 30, 0.55);
  border-radius: 2px;
  padding: 0.45rem 0.75rem;
  line-height: 1;
}
.page-hero__actions .todo-flag {
  margin-top: 0;
}