/* ==========================================================
   C'Privé : surcouche de la page d'accueil
   À charger APRÈS style.css (les variables --noir, --sauge… viennent de style.css)
   ========================================================== */
:root {
  --v2-sauge: var(--sauge, #B7BD95);
  --v2-sauge-fonce: var(--sauge-fonce, #8E9568);
  --v2-taupe: var(--taupe, #C8C2C0);
  --v2-noir: var(--noir, #1b1b1b);
  --v2-radius: 18px;
}

/* ---------- Hero ---------- */
.hero.v2-hero {
  position: relative;
  overflow: hidden;
  padding: calc(90px + clamp(28px, 4vw, 64px)) 0 clamp(48px, 6vw, 96px);
}
.hero.v2-hero::before {
  content: "";
  position: absolute;
  right: -12%;
  bottom: -30%;
  width: 62%;
  aspect-ratio: 1;
  background: radial-gradient(circle, var(--v2-sauge) 0, transparent 65%);
  opacity: .30;
  pointer-events: none;
}
.hero.v2-hero .hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}

.v2-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 22px 0 0;
  padding: 0;
}
.v2-chips li {
  font-size: .82rem;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .8);
  border: 1px solid var(--v2-taupe);
  color: var(--v2-noir);
}

/* Composition de photos */
.v2-hero-visual {
  position: relative;
  padding: 0 0 14% 10%;
}
.v2-photo {
  margin: 0;
  border-radius: var(--v2-radius);
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .14);
  background: var(--v2-taupe);
}
.v2-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.v2-photo-main { aspect-ratio: 6 / 5; }
.v2-photo-main img { object-position: 30% 50%; }
.v2-photo-plans {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40%;
  aspect-ratio: 1;
  border: 6px solid #fff;
}
.v2-badge {
  position: absolute;
  right: -2%;
  top: 6%;
  margin: 0;
  padding: 12px 18px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .12);
  font-family: 'Caveat', cursive;
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--v2-noir);
  border-left: 5px solid var(--v2-sauge);
}

@media (prefers-reduced-motion: no-preference) {
  .v2-photo-plans { animation: v2-float 7s ease-in-out infinite; }
  .v2-badge { animation: v2-float 6s ease-in-out -2s infinite; }
}
@keyframes v2-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

/* ---------- Apparition au défilement ---------- */
.v2-js .v2-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s ease, transform .7s ease;
}
.v2-js .v2-reveal.is-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .v2-js .v2-reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Façon de travailler ---------- */
.v2-ways { padding: clamp(56px, 8vw, 104px) 0; }
.v2-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 34px);
  margin-top: 40px;
}
.v2-card h3 { margin: 18px 0 8px; }
.v2-card p { margin: 0; color: var(--gris, #666); line-height: 1.65; }
.v2-card-img {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--v2-radius);
  overflow: hidden;
  background: var(--v2-taupe);
}
.v2-card-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s ease;
}
/* Voile sauge : adoucit les photos très sombres pour rester dans la charte claire */
.v2-card-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(183, 189, 149, .12), rgba(183, 189, 149, .38));
  pointer-events: none;
}
.v2-card:hover .v2-card-img img { transform: scale(1.05); }

/* ---------- Bandeau chantier ---------- */
.v2-banner {
  position: relative;
  color: #fff;
  background: #6b5a48 url("images/plans-chantier.jpg") center / cover no-repeat;
  padding: clamp(64px, 10vw, 128px) 0;
}
.v2-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(60, 48, 36, .82) 0%, rgba(60, 48, 36, .45) 55%, rgba(60, 48, 36, .15) 100%);
}
.v2-banner .container { position: relative; max-width: 1100px; }
.v2-banner .eyebrow { color: var(--v2-sauge); }
.v2-banner h2 { color: #fff; margin: 8px 0 16px; }
.v2-banner p { max-width: 540px; color: rgba(255, 255, 255, .92); line-height: 1.7; }
.v2-banner-btn { margin-top: 22px; background: #fff; color: var(--v2-noir); border-color: #fff; }
.v2-banner-btn:hover { background: var(--v2-sauge); border-color: var(--v2-sauge); }

/* ---------- Présentation courte ---------- */
.v2-about { padding: clamp(48px, 7vw, 88px) 0; background: #fff; }
.v2-about-inner {
  display: flex;
  align-items: center;
  gap: clamp(22px, 4vw, 48px);
  max-width: 900px;
}
.v2-portrait {
  flex: 0 0 auto;
  width: clamp(110px, 16vw, 160px);
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: 0 0 0 6px var(--v2-sauge);
}
.v2-about h2 { margin: 4px 0 10px; }
.v2-about p { line-height: 1.7; }
.v2-about .more { display: inline-block; margin-top: 8px; font-weight: 600; }

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
  .hero.v2-hero .hero-grid { grid-template-columns: 1fr; }
  .v2-hero-visual { padding: 0 0 16% 0; max-width: 560px; margin: 0 auto; }
  .v2-badge { right: 0; font-size: 1.1rem; }
  .v2-cards { grid-template-columns: 1fr; }
  .v2-about-inner { flex-direction: column; text-align: center; }
}