/* ==========================================================================
   O DESIGN — PAGES PROJET (réalisations), nouvelle présentation
   Chargée seulement par gabarit-realisation.php, donc seulement sur les
   projets dont la case « Utiliser la nouvelle présentation » est cochée.
   Fond blanc, grandes photos de formats variés, même vocabulaire que
   l'accueil (Caslon, étiquettes Clash, rangée défilante des projets).
   Les polices sont déclarées dans refonte-accueil.css, chargée partout.
   ========================================================================== */
.pp {
  --pp-serif: "ACaslon Pro", "Hoefler Text", Garamond, "Times New Roman", serif;
  --pp-sans: "Clash Grotesk", "Montserrat", sans-serif;
  --pp-brun: #5B4941;
  --pp-encre: #000;
  --pp-marge: 8.333vw;                       /* la marge de l'accueil (.container10) */
  --pp-ecart: clamp(16px, 2.8vw, 40px);      /* l'écart entre les vignettes de l'accueil */
  --pp-titre: clamp(28px, 3.05vw, 45px);     /* « Projets récents » */
  --pp-etiquette: clamp(11px, 0.88vw, 13px);
  --pp-souffle: clamp(72px, 9.7vw, 140px);   /* respiration entre les sections */
  background: #fff;
  color: var(--pp-encre);
  font-family: var(--pp-serif);
  font-size: 15px;
  line-height: 1.8;
  overflow-x: clip;
}
.pp *,
.pp *::before,
.pp *::after {
  box-sizing: border-box;
}
.pp p {
  margin: 0;
  font-family: var(--pp-serif);
  font-size: 15px;
  line-height: 1.8;
}
.pp img {
  display: block;
  margin: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pp a {
  color: inherit;
  text-decoration: none;
}
.pp a::before,
.pp a::after {
  display: none;
}
.pp h1,
.pp h2 {
  font-family: var(--pp-serif);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--pp-encre);
  margin: 0;
}
.pp h1 em,
.pp h1 span {
  display: block;
}
.pp em {
  font-style: italic;
}
/* le thème arrondit et habille tous les boutons : on repart de zéro */
.pp button,
.ppVisionneuse button {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-height: 0;
  line-height: inherit;
}
.pp .ppPhoto {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  overflow: hidden;
}
.pp .ppPhoto img {
  transition: transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.pp .ppPhoto:hover img {
  transform: scale(1.025);
}
.ppEtiquette,
.pp .ppLien {
  font-family: var(--pp-sans);
  font-size: var(--pp-etiquette);
  font-weight: 500;
  letter-spacing: 0.15em;
  line-height: 1.4;
  text-transform: uppercase;
}
.pp .ppLien {
  display: inline-block;
  padding: 0 0 8px;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: none;
  color: var(--pp-encre);
  cursor: pointer;
  transition: opacity 0.25s ease;
}
.pp .ppLien:hover {
  opacity: 0.55;
}

/* --------------------------------------------------------------------------
   1. OUVERTURE : photo du salon à gauche, titre et fiche d'identité à droite
   -------------------------------------------------------------------------- */
.ppOuverture {
  display: grid;
  /* la répartition de la section « Un accompagnement clé en main » de
     l'accueil : photo à gauche, colonne de texte de 40 % à droite */
  grid-template-columns: minmax(0, 1fr) minmax(0, 40%);
  gap: clamp(40px, 5.4vw, 88px);
  padding-right: clamp(24px, 8.1vw, 120px);
  /* exactement la hauteur de l'écran, pas plus */
  height: 100vh;
  height: max(560px, 100svh);
}
.ppOuvertureImage {
  position: relative;
  contain: size;
}
.ppOuvertureImage img {
  position: absolute;
  inset: 0;
}
.ppOuvertureTexte {
  align-self: center;
  /* l'en-tête fixe (96 px) recouvre le haut de la section, comme sur l'accueil */
  padding: calc(96px + clamp(16px, 3vh, 40px)) 0 clamp(32px, 6vh, 72px);
}
.pp .ppRetour {
  display: inline-block;
  margin-bottom: clamp(20px, 3.4vh, 40px);
  opacity: 0.6;
}
.pp .ppRetour:hover {
  opacity: 1;
}
.pp .ppTitre {
  /* « Villa de la Montagne » tient sur une ligne dans la colonne de 40 % */
  font-size: clamp(34px, min(4.3vw, 7.6vh), 62px) !important;
  line-height: 1 !important;
}
.pp .ppIntro {
  margin-top: clamp(20px, 3.4vh, 38px);
  max-width: 46ch;
}
/* fiche d'identité : trois colonnes sous un seul filet */
.ppFiche {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: space-between;
  gap: 16px;
  margin: clamp(28px, 5vh, 56px) 0 0;
  padding: clamp(16px, 2.4vh, 24px) 0 0;
  border-top: 1px solid rgba(0, 0, 0, 0.22);
}
.ppFiche dt {
  margin: 0 0 8px;
  font-family: var(--pp-sans);
  font-size: var(--pp-etiquette);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.55;
}
.ppFiche dd {
  margin: 0;
  font-family: var(--pp-serif);
  font-style: italic;
  font-size: clamp(16px, 1.32vw, 19px);
  line-height: 1.35;
}

/* --------------------------------------------------------------------------
   2. TOUTES LES PHOTOS : la rangée défilante de l'accueil (« Projets récents »)
   Trois vignettes visibles, la rangée déborde des deux côtés.
   -------------------------------------------------------------------------- */
.ppRangeeSection {
  padding: clamp(40px, 4vw, 60px) var(--pp-marge) 0;
}
.ppRangeeTete {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: clamp(24px, 2.8vw, 42px);
}
.pp .ppRangeeTete h2,
.pp .ppCleTexte h2 {
  font-size: var(--pp-titre) !important;
  line-height: 1.15 !important;
}
.ppRangee {
  display: flex;
  gap: var(--pp-ecart);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  margin: 0 calc(var(--pp-marge) * -1);
  padding: 0 var(--pp-marge);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ppRangee::-webkit-scrollbar {
  display: none;
}
.pp .ppRangee > .ppPhoto {
  flex: 0 0 calc((83.334vw - 80px) / 3);
  aspect-ratio: 387 / 591;
  scroll-snap-align: start;
}

/* --------------------------------------------------------------------------
   3. PIÈCES CLÉS : un texte court et des photos de formats différents.
   Chaque section a sa propre composition, sur la même grille de 12 colonnes.
   -------------------------------------------------------------------------- */
.ppCle {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--pp-ecart);
  padding: var(--pp-souffle) var(--pp-marge) 0;
  scroll-margin-top: 96px;
}
.pp .ppCleTexte p {
  margin-top: clamp(14px, 1.6vw, 22px);
}
.pp .ppCleTexte .ppLien {
  margin-top: clamp(20px, 2.2vw, 32px);
}

/* Grande verticale : une grande verticale à fond perdu à gauche, le texte en
   haut à droite, deux petites verticales en bas à droite */
.ppCleVerticale .ppGrande {
  grid-column: 1 / 7;
  grid-row: 1 / 3;
  margin-left: calc(var(--pp-marge) * -1);
  aspect-ratio: 4 / 5;
}
.ppCleVerticale .ppCleTexte {
  grid-column: 8 / 13;
  grid-row: 1;
  padding-top: clamp(8px, 3vw, 48px);
}
.ppCleVerticale .ppPaire {
  grid-column: 8 / 13;
  grid-row: 2;
  align-self: end;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.7vw, 24px);
}
.ppCleVerticale .ppPaire .ppPhoto {
  aspect-ratio: 2 / 3;
}

/* Grande horizontale : une grande horizontale à fond perdu à droite, le texte en haut
   à gauche, une petite verticale en bas à gauche */
.ppCleHorizontale .ppGrande {
  grid-column: 6 / 13;
  grid-row: 1 / 3;
  margin-right: calc(var(--pp-marge) * -1);
  aspect-ratio: 4 / 3;
}
.ppCleHorizontale .ppCleTexte {
  grid-column: 1 / 5;
  grid-row: 1;
}
.ppCleHorizontale .ppPetite {
  grid-column: 2 / 5;
  grid-row: 2;
  align-self: end;
  margin-top: clamp(28px, 4vw, 56px);
  aspect-ratio: 2 / 3;
}

/* Entre deux : le texte entre deux verticales de tailles différentes */
.ppCleEntre {
  align-items: center;
}
.ppCleEntre .ppGauche {
  grid-column: 1 / 5;
  aspect-ratio: 2 / 3;
}
.ppCleEntre .ppCleTexte {
  grid-column: 5 / 9;
  padding: 0 clamp(8px, 2vw, 32px);
}
.ppCleEntre .ppDroite {
  grid-column: 9 / 13;
  margin-right: calc(var(--pp-marge) * -1);
  margin-top: clamp(40px, 8vw, 120px);
  aspect-ratio: 4 / 5;
}

/* Panorama : titre et texte côte à côte, puis une photo pleine largeur */
.ppClePanorama .ppCleTexte {
  grid-column: 1 / 13;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--pp-ecart);
  align-items: start;
  padding-bottom: clamp(28px, 3.4vw, 48px);
}
.ppClePanorama .ppCleTexte h2 {
  grid-column: 1 / 6;
}
.ppClePanorama .ppCleTexte div {
  grid-column: 7 / 13;
}
.pp .ppClePanorama .ppCleTexte p {
  margin-top: 0.5em;
}
.ppClePanorama .ppPanorama {
  grid-column: 1 / 13;
  margin: 0 calc(var(--pp-marge) * -1);
  aspect-ratio: 12 / 5;
}
/* --------------------------------------------------------------------------
   4. CLÔTURE : appel à l'action et passage aux autres projets
   -------------------------------------------------------------------------- */
.ppFin {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--pp-ecart);
  align-items: end;
  margin-top: var(--pp-souffle);
  padding: clamp(48px, 6vw, 96px) var(--pp-marge);
  background: #EFEDE7; /* le lin de l'accueil */
}
.ppFin > div {
  grid-column: 1 / 6;
}
.pp .ppFin h2 {
  font-size: var(--pp-titre) !important;
  line-height: 1.15 !important;
}
/* Demande de la cliente (2 oct. 2026) : « Vous avez un » en italique sur la
   première ligne, « projet en tête ? » en romain sur la seconde (champ
   « titre, partie en italique » de l'accueil, comme le H1 des pages). */
.pp .ppFin h2 em,
.pp .ppFin h2 span {
  display: block;
}
.pp .ppFin h2 em {
  font-style: italic;
}
/* sans partie italique : on force quand même la coupure après « un »
   (« Vous avez un projet » = 7,8 em, « projet en tête ? » = 5,9 em) */
.pp .ppFin h2:not(:has(em)) {
  max-width: 6.5em;
  text-wrap: balance;
}
.pp .ppFin p {
  margin-top: clamp(14px, 1.6vw, 22px);
  max-width: 44ch;
}
.pp .ppBouton {
  display: inline-block;
  margin-top: clamp(20px, 2.2vw, 32px);
  padding: 12px 28px;
  font-family: var(--pp-serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1.2;
  color: #fff;
  background: var(--pp-brun);
  transition: opacity 0.3s ease;
}
.pp .ppBouton:hover {
  color: #fff;
  opacity: 0.78;
}
/* projets précédent et suivant : deux photos verticales (le format des
   vignettes de l'accueil), le nom du projet et le sens de la navigation
   écrits en blanc par-dessus */
.ppAutres {
  grid-column: 7 / 13;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pp-ecart);
}
.pp .ppAutres a {
  position: relative;
  display: block;
  aspect-ratio: 387 / 591;
  overflow: hidden;
  color: #fff;
}
.pp .ppAutres img {
  transition: transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.pp .ppAutres a:hover img {
  transform: scale(1.03);
}
/* voile sombre en bas de la photo, pour que le blanc reste lisible */
.pp .ppAutres a::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(29, 26, 21, 0) 45%, rgba(29, 26, 21, 0.66));
}
.ppAutreTexte {
  position: absolute;
  left: clamp(14px, 1.5vw, 22px);
  right: clamp(14px, 1.5vw, 22px);
  bottom: clamp(16px, 1.7vw, 26px);
  z-index: 1;
}
.ppAutres a:last-child .ppAutreTexte {
  text-align: right;
}
.ppAutreTexte .ppEtiquette {
  display: block;
  margin-bottom: 8px;
}
.ppAutreTexte strong {
  display: block;
  font-family: var(--pp-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(19px, 1.7vw, 25px);
  line-height: 1.15;
}

/* --------------------------------------------------------------------------
   5. VISIONNEUSE : une photo en grand, flèches et clavier
   -------------------------------------------------------------------------- */
.ppVisionneuse {
  position: fixed;
  inset: 0;
  z-index: 100000; /* au-dessus de l'en-tête fixe (9999) */
  display: none;
  grid-template-rows: auto minmax(0, 1fr);
  background: rgba(29, 26, 21, 0.97);
  color: #fff;
}
.ppVisionneuse.ouverte {
  display: grid;
}
.ppVisionneuseBarre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px clamp(20px, 3vw, 44px);
  font-family: "Clash Grotesk", "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.ppVisionneuse button {
  background: none;
  border: 0;
  color: #fff;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  opacity: 0.8;
}
.ppVisionneuse button:hover {
  opacity: 1;
}
.ppVisionneuseScene {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 0 clamp(56px, 7vw, 110px) clamp(24px, 3vw, 44px);
}
.ppVisionneuseScene img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.ppVisionneuseFleche {
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(56px, 7vw, 110px);
  font-family: "ACaslon Pro", Garamond, serif !important;
  font-size: 34px !important;
  letter-spacing: 0 !important;
}
.ppVisionneuseFleche.precedente {
  left: 0;
}
.ppVisionneuseFleche.suivante {
  right: 0;
}

/* --------------------------------------------------------------------------
   7. TÉMOIGNAGE : la section « Témoignages » de l'accueil, avec un seul avis.
   Les règles ci-dessous sont celles de refonte-accueil.css, recopiées telles
   quelles (sur l'accueil elles sont limitées à body.home) : toute retouche
   de la section de l'accueil est à reporter ici.
   -------------------------------------------------------------------------- */
.pp {
  --od-serif: var(--pp-serif);
  --od-sans: var(--pp-sans);
  --od-lin: #EFEDE7;
  --od-encre: #000;
  --od-blanc: #fff;
  --od-titre: var(--pp-titre);
  --od-lien: var(--pp-etiquette);
}
.pp .blocTemoignages {
  background-color: var(--od-blanc);
  padding: clamp(46px, 5vw, 74px) 0 clamp(50px, 5.4vw, 80px);
}
.pp .blocTemoignages .container10 {
  vertical-align: top;
}
.pp .blocTemoignagesTitre {
  margin: 0 0 clamp(28px, 3.2vw, 46px) !important;
  font-family: var(--od-serif);
  font-size: var(--od-titre) !important;
  line-height: 1.15 !important;
  font-weight: 400;
  color: var(--od-encre);
  text-transform: none;
}
.pp .blocTemoignagesListe {
                                                                              
  display: flex;
  gap: clamp(30px, 3.4vw, 52px);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  margin: 0 -8.333vw 0 0;
  padding: 0 8.333vw 0 0;
  list-style: none;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.pp .blocTemoignagesListe::-webkit-scrollbar {
  display: none;
}
.pp .blocTemoignagesListe > li {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0 40px;
  align-items: stretch;
  flex: 0 0 83.334vw;
  scroll-snap-align: start;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pp .temoignagePhoto {
                                                     
  grid-column: 1 / span 4;
  grid-row: 1;
  aspect-ratio: 387 / 591;
  overflow: hidden;
}
.pp .temoignagePhoto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
}
.pp .temoignageCitation {
  grid-column: 6 / span 7;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  border: 0;
}
.pp .temoignageCitation p {
  margin: 0;
  font-family: var(--od-serif);
  font-style: italic;
  font-size: clamp(19px, 1.85vw, 28px);
  line-height: 1.5;
  color: var(--od-encre);
}
.pp .temoignageCitation footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
  margin-top: clamp(20px, 2.2vw, 32px);
  padding-top: clamp(16px, 1.8vw, 26px);
  border-top: 1px solid #E3DED5;
  font-family: var(--od-sans);
  font-size: clamp(10px, 0.82vw, 12px);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.pp .temoignageAvatar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--od-lin);
  font-family: var(--od-serif);
  font-size: 14px;
  font-style: normal;
  letter-spacing: 0.04em;
  color: #6B5F56;
}
.pp .temoignageAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
}
.pp .temoignageIdentite {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 10px;
}
.pp .temoignageSource {
  margin-left: auto;
  color: #8C8178;
  letter-spacing: 0.16em;
}
.pp .temoignageNom {
  color: var(--od-encre);
}
.pp .temoignagePrecision {
  color: #6B5F56;
}
.pp .temoignageCitation .blocTemoignagesLien {
  margin: auto 0 0;
  padding-top: clamp(24px, 2.6vw, 38px);
  font-family: var(--od-sans);
  font-style: normal;
  font-size: var(--od-lien);
  line-height: 1.2;
  text-align: left;
}
.pp .temoignageCitation .blocTemoignagesLien a {
  display: inline-block;
  font-family: var(--od-sans);
  font-size: var(--od-lien);
  font-weight: 500 !important;
  line-height: 1.2;
  letter-spacing: 0.15em;
  text-transform: uppercase !important;
  text-decoration: none;
  color: var(--od-encre);
  padding-bottom: 8px;
  border-bottom: 1px solid currentColor;
  transition: opacity 0.25s ease;
}
.pp .temoignageCitation .blocTemoignagesLien a:hover {
  opacity: 0.55;
  color: var(--od-encre);
}
@media screen and (max-width: 899px) {
  .pp .blocTemoignagesListe > li {
    display: block;
    flex-basis: 84vw;
  }
  .pp .temoignagePhoto {
    margin-bottom: clamp(20px, 3.6vw, 30px);
    aspect-ratio: 3 / 2;
    grid-column: auto;
  }
}
@media screen and (max-width: 768px) {
  .pp .blocTemoignagesListe {
    gap: 24px;
  }
  .pp .blocTemoignagesListe > li {
    flex-basis: 84vw;
  }
}
/* un seul témoignage : pas de défilement, il occupe toute la largeur */
.pp .ppTemoinCadre {
  padding: 0 var(--pp-marge);
}
.pp .blocTemoignagesListe {
  overflow: visible;
  margin: 0;
  padding: 0;
}
.pp .blocTemoignagesListe > li {
  flex: 0 0 100%;
}
.pp .blocTemoignagesListe > li.sansPhoto .temoignageCitation {
  grid-column: 1 / -1;
}

/* --------------------------------------------------------------------------
   6. TABLETTE ET MOBILE : tout s'empile, le texte d'abord
   -------------------------------------------------------------------------- */
@media screen and (max-width: 899px) {
  .pp {
    --pp-marge: 24px;
    --pp-souffle: clamp(64px, 16vw, 96px);
  }
  .ppOuverture {
    display: flex;
    flex-direction: column;
    height: auto;
    padding: 0;
  }
  .ppOuvertureTexte {
    order: -1;
    align-self: stretch;
    /* sur mobile l'en-tête fixe (91 px) recouvre le haut de la page */
    padding: calc(91px + 28px) var(--pp-marge) 36px;
  }
  .ppOuvertureImage {
    contain: none;
    aspect-ratio: 4 / 5;
  }
  .ppFiche {
    gap: 14px;
  }
  .pp .ppRangee > .ppPhoto {
    flex-basis: 72vw;
  }
  .ppCle {
    display: flex;
    flex-direction: column;
  }
  .ppCle .ppCleTexte {
    order: -1;
    padding: 0 0 28px;
  }
  .ppCleVerticale .ppGrande,
  .ppCleHorizontale .ppGrande {
    margin-left: calc(var(--pp-marge) * -1);
    margin-right: calc(var(--pp-marge) * -1);
  }
  .ppCleVerticale .ppPaire {
    margin-top: var(--pp-ecart);
  }
  .ppCleHorizontale .ppPetite {
    width: 62%;
    margin-top: var(--pp-ecart);
    align-self: flex-end;
  }
  .ppCleEntre {
    align-items: stretch;
  }
  .ppCleEntre .ppGauche {
    width: 78%;
  }
  .ppCleEntre .ppDroite {
    width: 78%;
    align-self: flex-end;
    margin: var(--pp-ecart) calc(var(--pp-marge) * -1) 0 0;
  }
  .ppClePanorama .ppCleTexte {
    display: block;
  }
  .pp .ppClePanorama .ppCleTexte p {
    margin-top: 14px;
  }
  .ppClePanorama .ppPanorama {
    aspect-ratio: 4 / 3;
  }
  .ppFin {
    display: block;
  }
  .ppAutres {
    margin-top: 48px;
    gap: 14px;
  }
  .ppVisionneuseScene {
    padding: 0 12px 20px;
  }
  .ppVisionneuseFleche {
    width: 25%;
    opacity: 0 !important;
  }
}