/* ─────────────────────────────────────────
   TEMPLATE PAGE PROJET (partagé)
───────────────────────────────────────── */

body {
  background: #F6F2F1;
}

/* ─────────────────────────────────────────
   TITRE PAGE
───────────────────────────────────────── */
.project-page-title {
  padding-top: 12rem;
  padding-left: var(--px);
  padding-right: var(--px);
  padding-bottom: 2rem;
}

.project-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(3.5rem, 10vw, 9rem);
  line-height: 0.9;
  letter-spacing: 0.10em;
  color: var(--dark);
}

/* ─────────────────────────────────────────
   HERO : photo gauche / texte droite
───────────────────────────────────────── */
.project-hero {
  display: grid;
  grid-template-columns: 58% 1fr;
  align-items: start;
  gap: 3rem;
  padding: 0 var(--px) 0.5rem;
}

.project-hero__img-wrap {
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 3 / 2;
}

.project-hero__img {
  width: 100%;
  display: block;
  object-fit: cover;
}

.project-hero__text {
  display: flex;
  flex-direction: column;
  padding-top: 0.5rem;
  min-width: 0;
}

/* Logo dans le hero */
.project-hero__logo {
  width: 230px;
  height: auto;
  margin-top: 2rem;
  object-fit: contain;
  align-self: center;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Pas de border-radius sur photos pleine page */
.project-img--no-radius {
  border-radius: 0 !important;
}


.project-hero__text .project-section__text {
  word-break: break-word;
  overflow-wrap: break-word;
}

/* ─────────────────────────────────────────
   SECTIONS
───────────────────────────────────────── */
.project-section {
  padding: 1.5rem var(--px);
}

/* Pleine largeur — bord à bord */
.project-section--full {
  padding-left: 0;
  padding-right: 0;
}

/* Centré (texte + CTA) — avec encadré pleine largeur */
.project-section--centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 2rem var(--px);
  padding: 4rem 4rem;
  border: 1px solid rgba(50, 52, 33, 0.3);
  border-radius: 10px;
}

/* Grille 2 colonnes égales */
.project-section--grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  padding: 1.5rem var(--px) 0;
}

/* Pleine largeur avec marges */
.project-section--margined {
  padding: 1.5rem var(--px) 0;
}

/* Grille 3 colonnes égales */
.project-section--grid3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.5rem;
  padding: 1.5rem var(--px) 0;
}

/* Grille asymétrique : droite plus large */
.project-section--grid-asym-r {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 1.5rem;
  padding: 1.5rem var(--px) 0;
}

.project-section--grid-asym-r .project-img--grid {
  height: 65vh;
}

/* Grille asymétrique : gauche plus large */
.project-section--grid-asym {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 1.5rem;
  padding: 1.5rem var(--px) 0;
  align-items: stretch;
}

.project-section--grid-asym .project-img--grid {
  aspect-ratio: unset;
  height: 65vh;
}

/* ─────────────────────────────────────────
   GRILLE ASYMÉTRIQUE GAUCHE (Via Dream)
───────────────────────────────────────── */
.vd-grid-asym-left {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: stretch;
}

.vd-photo-left {
  width: 100%;
  height: calc(46vh * 2 + 1.5rem); /* = hauteur des 2 photos de droite + leur gap */
  object-fit: cover;
  border-radius: 10px;
  display: block;
  align-self: stretch;
}

.vd-right-stack {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Hauteur fixe pour chaque photo de droite → contrôle la hauteur totale */
.vd-right-stack .project-img--grid {
  height: 46vh;
  flex: none;
}

/* ─────────────────────────────────────────
   SECTION SALON
───────────────────────────────────────── */
.project-salon {
  padding: 4rem var(--px) 0;
}

/* Grille haut : col gauche flex / col droite photo haute */
.salon-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: stretch;
}

.salon-left-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 80vh;
}

.salon-text {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 0.8rem;
  padding-top: 1.2rem;
  padding-right: 5rem;
}

.salon-img-left {
  flex: 1;
  min-height: 0;
  width: 100%;
  object-fit: cover;
  object-position: 60% 80%;
  border-radius: 10px;
}

.salon-img-right {
  width: 100%;
  height: 80vh;
  object-fit: cover;
  object-position: center 92%;
  border-radius: 10px;
}

/* Grille bas : 3 photos égales */
.salon-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.5rem;
  margin-top: 1.5rem; /* même gap que entre les photos */
  padding-bottom: 0;
}

.salon-bottom .project-img {
  height: 65vh;
  object-fit: cover;
  border-radius: 10px;
}

/* ─────────────────────────────────────────
   PICTOGRAMMES VIA DREAM
───────────────────────────────────────── */
.vd-pictos {
  padding: 3rem var(--px) 0;
  background: #F6F2F1;
}

/* Rangée haute : MÊME 3 colonnes que le bas → photo aligne avec picto 4 */
.vd-top {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.5rem;
  align-items: stretch;
  margin-bottom: 1.5rem;
}

/* Colonne gauche : occupe col 1, flex avec gaps égaux */
.vd-left {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.vd-text {
  font-family: var(--mono);
  font-size: 1.15rem;
  color: var(--dark);
  line-height: 1.75;
  padding-top: 1.5rem;
}

/* Pictos */
.vd-picto-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}

/* Pousse les pictos 1+2 vers le bas (espace auto entre texte et pictos) */
.vd-picto-push {
  margin-top: auto;
}

/* Grande photo : spans cols 2-3 */
.vd-main-photo {
  grid-column: 2 / 4;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 10px;
}

/* Rangée basse : 3 colonnes */
.vd-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.5rem;
  padding-bottom: 5rem;
}

/* ─────────────────────────────────────────
   TEXTES
───────────────────────────────────────── */
.project-section__label {
  font-family: var(--mono);
  font-size: 1.3rem;
  font-weight: 400;
  -webkit-text-stroke: 0.3px var(--dark);
  color: var(--dark);
  margin-bottom: 1.8rem;
}

.project-section__text {
  font-family: var(--mono);
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--dark);
}

.project-section__text--center {
  text-align: center;
  max-width: 780px;
}

/* ─────────────────────────────────────────
   CTA BOUTON
───────────────────────────────────────── */
.project-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2rem;
  padding: 1rem 3.5rem;
  background: #374025;
  color: #ffffff;
  font-family: var(--mono);
  font-size: 1.2rem;
  border-radius: 8px;
  text-decoration: none;
  transition: opacity 0.2s;
}

.project-cta:hover { opacity: 0.75; }

/* ─────────────────────────────────────────
   ANIMATIONS SCROLL
───────────────────────────────────────── */

/* ─────────────────────────────────────────
   IMAGES
───────────────────────────────────────── */
.project-img {
  width: 100%;
  display: block;
  object-fit: cover;
  border-radius: 10px;
}

.project-section--full .project-img {
  max-height: 100vh;
  object-fit: cover;
  border-radius: 10px;
}

.project-img--grid {
  height: 65vh;
  object-fit: cover;
}

/* ─────────────────────────────────────────
   PLACEHOLDERS (à supprimer quand les images sont prêtes)
───────────────────────────────────────── */
.project-img-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #ddd8d0;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.project-img-placeholder::after {
  content: attr(data-label);
  font-family: var(--mono);
  font-size: 0.75rem;
  color: rgba(50, 52, 33, 0.45);
  text-align: center;
  padding: 1rem;
}

/* ─────────────────────────────────────────
   FOOTER (via about.css)
───────────────────────────────────────── */
.footer-wrap {
  background: #ffffff;
  border-radius: 100px 100px 0 0;
  margin-top: -15px;
  padding-top: 15px;
  position: relative;
  z-index: 1;
}