/* ==========================================================================
   O DESIGN — HUB DES RÉALISATIONS, nouvelle présentation
   Chargée après refonte-realisation.css, seulement par
   gabarit-realisations-hub.php. Ne contient que ce qui est propre au hub :
   la grille de cartes, la bannière, les portraits de l'équipe dans la
   clôture, et quelques ajustements de rythme. Le reste (ouverture, polices,
   témoignages, appel à l'action) vient de la feuille des pages projet.
   ========================================================================== */

/* étiquettes et titres de cartes (la feuille projet ne stylise que h1 et h2) */
.ppHub .ppEtiquette {
  font-family: var(--pp-sans);
  font-size: var(--pp-etiquette);
  font-weight: 500;
  letter-spacing: 0.15em;
  line-height: 1.4;
  text-transform: uppercase;
}
.ppHub h3 {
  font-family: var(--pp-serif);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--pp-encre);
  margin: 0;
}
.ppHub .ppSurtitre {
  display: block;
  margin-bottom: clamp(16px, 2.6vh, 30px);
  opacity: 0.6;
}

/* --------------------------------------------------------------------------
   1. LES PROJETS : cartes par trois, le nom puis les services sous la photo
   -------------------------------------------------------------------------- */
.ppProjets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(44px, 4.4vw, 64px) var(--pp-ecart);
  padding: clamp(56px, 6.9vw, 100px) var(--pp-marge) 0;
}
.ppHub .ppProjets > a {
  display: block;
}
.ppCarteImage {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #EFEDE7;
}
.ppCarteImage img {
  transition: transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ppHub .ppProjets > a:hover .ppCarteImage img {
  transform: scale(1.03);
}
/* le thème impose h3 { font-size: 32px !important } */
.ppHub .ppProjets h3 {
  margin-top: clamp(14px, 1.4vw, 20px);
  font-size: clamp(17px, 1.4vw, 21px) !important;
  line-height: 1.2 !important;
  /* pas de mot coupé par un trait d'union (« Gati-neau ») ; un mot plus long que la carte se replie quand même */
  overflow-wrap: anywhere;
  -webkit-hyphens: manual;
  hyphens: manual;
  text-wrap: pretty;
}
/* la première partie du titre (« Projet », « Salle de bain »…) en italique, comme sur la page projet */
.ppHub .ppProjets h3 em {
  font-style: italic;
  font-weight: 400;
}
.ppHub .ppCarteServices {
  display: block;
  margin-top: 6px;
  /* les services en italique du titrage, sans capitales : trois services
     tiennent sur une ligne et restent discrets sous le nom du projet */
  font-family: var(--pp-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(14px, 1.08vw, 16px);
  letter-spacing: 0;
  line-height: 1.35;
  text-transform: none;
  text-wrap: balance;
  opacity: 0.62;
}

/* --------------------------------------------------------------------------
   2. TÉMOIGNAGES : plus d'air au-dessus, la section suit la grille
   -------------------------------------------------------------------------- */
.ppHub .blocTemoignages {
  padding-top: clamp(80px, 9.7vw, 140px);
}
.ppHub .ppTemoinCadre .blocTemoignagesListe {
  margin-right: calc(var(--pp-marge) * -1);
  padding-right: var(--pp-marge);
}

/* --------------------------------------------------------------------------
   3. BANNIÈRE : une photo sur toute la largeur
   -------------------------------------------------------------------------- */
.ppBanniere {
  margin-top: clamp(40px, 4.4vw, 64px);
  aspect-ratio: 16 / 7;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   4. CLÔTURE : l'appel à l'action des pages projet, tel quel ; les deux
   portraits de l'équipe reprennent la nav .ppAutres des projets voisins
   (photos à droite, voile sombre, étiquette et légende), rien à redéfinir.
   -------------------------------------------------------------------------- */
.ppHub .ppFin {
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   5. TABLETTE ET MOBILE
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1100px) and (min-width: 900px) {
  .ppProjets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media screen and (max-width: 899px) {
  .ppProjets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px 16px;
  }
  .ppHub .ppProjets h3 {
    font-size: 16px !important;
    margin-top: 10px;
  }
  .ppHub .ppCarteServices {
    font-size: 13px;
  }
  .ppBanniere {
    aspect-ratio: 4 / 3;
  }
}

/* --------------------------------------------------------------------------
   6. BLOGUE : exactement la grille de cartes des projets (photos en portrait 4/5)
   -------------------------------------------------------------------------- */
.ppBlogue .ppProjets h3 {
  text-wrap: pretty;
}

/* pages de catégorie et d'étiquette : le nom du terme peut être long */
.ppBlogue .ppTitre span { text-wrap: balance; }

/* page introuvable : un bouton et un lien sous le texte de l'ouverture, la clôture collée dessous */
.pp .ppErreurLiens {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 30px;
  margin-top: clamp(22px, 3.4vh, 36px);
}
.pp .ppErreurLiens .ppBouton { margin-top: 0; }
.ppErreur .ppTitre, .ppErreur .ppIntro { text-wrap: balance; }
.ppErreur .ppFin { margin-top: 0; }


/* --------------------------------------------------------------------------
   7. ESSAI (retour 63 de la cliente, oct. 2026) : quatre cartes par rangée sur
   grand écran, pour Réalisations, le Blogue et ses catégories. Pour revenir à
   trois, supprimer ce bloc. Les articles suggérés au bas d'un article (trois
   cartes, dans un <div>) ne sont pas concernés.
   -------------------------------------------------------------------------- */
@media screen and (min-width: 1101px) {
  section.ppProjets {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   8. OUVERTURE SUR FOND FONCÉ (page Réalisations, oct. 2026), pour la
   distinguer des autres pages. Bandeau brun, texte à gauche, une grande photo
   verticale en retrait à droite, une petite photo d'accent en haut à gauche.
   Activée par la case « Ouverture sur fond foncé » de la fiche.
   -------------------------------------------------------------------------- */
.ppOuvertureSombre .ppOuverture {
  grid-template-columns: minmax(0, 1fr) minmax(0, 41%);
  gap: clamp(40px, 6vw, 96px);
  height: auto;
  min-height: max(560px, 100svh);
  padding: calc(96px + clamp(28px, 4.4vh, 52px)) var(--pp-marge) clamp(36px, 6vh, 64px);
  background: var(--pp-brun);
  color: #F4F1EA;
}
.ppOuvertureSombre .ppOuvertureImage {
  order: 2;
  contain: none;
  min-height: 0;
}
.ppOuvertureSombre .ppOuvertureTexte {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  padding: 0;
}
.ppOuvertureSombre .ppOuvertureAccent {
  position: relative;
  width: clamp(120px, 12vw, 176px);
  aspect-ratio: 4 / 5;
  margin-bottom: auto;
  overflow: hidden;
}
.ppOuvertureSombre .ppOuvertureAccent img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ppOuvertureSombre .ppOuvertureTexte .ppSurtitre { margin-top: clamp(32px, 6vh, 72px); opacity: 0.7; }
.ppOuvertureSombre .ppOuverture .ppSurtitre,
.ppOuvertureSombre .ppOuverture .ppTitre,
.ppOuvertureSombre .ppOuverture .ppTitre em,
.ppOuvertureSombre .ppOuverture .ppTitre span,
.ppOuvertureSombre .ppOuverture .ppIntro {
  color: #F4F1EA !important;
}
.ppOuvertureSombre .ppOuverture .ppIntro { opacity: 0.88; }
/* la grille de projets garde son air sous le bandeau */
@media screen and (max-width: 899px) {
  .ppOuvertureSombre .ppOuverture {
    min-height: 0;
    padding: calc(91px + 28px) var(--pp-marge) 28px;
    gap: 28px;
  }
  .ppOuvertureSombre .ppOuvertureTexte { order: -1; padding: 0; }
  .ppOuvertureSombre .ppOuvertureAccent { display: none; }
  .ppOuvertureSombre .ppOuvertureTexte .ppSurtitre { margin-top: 0; }
  .ppOuvertureSombre .ppOuvertureImage { order: 2; aspect-ratio: 4 / 5; }
}

/* --------------------------------------------------------------------------
   9. OUVERTURE « PANORAMA » (troisième présentation proposée, oct. 2026) :
   une grande photo horizontale sur toute la largeur, puis le titre à gauche
   et le texte à droite, sur fond blanc, séparés de la grille par un filet.
   -------------------------------------------------------------------------- */
.ppOuverturePanorama .ppOuverture {
  display: block;
  height: auto;
  padding: 96px 0 0; /* l'en-tête fixe */
}
.ppOuverturePanorama .ppOuvertureImage {
  contain: none;
  height: clamp(320px, 62svh, 720px);
}
/* le cadrage descend vers le mobilier plutôt que vers le plafond */
.ppOuverturePanorama .ppOuvertureImage img { object-position: 50% 78%; }
.ppOuverturePanorama .ppOuvertureTexte {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 40%);
  column-gap: clamp(40px, 6vw, 96px);
  align-items: end;
  margin: 0 var(--pp-marge);
  padding: clamp(32px, 4.6vw, 64px) 0 clamp(32px, 4.2vw, 56px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.18);
}
.ppOuverturePanorama .ppOuvertureTexte .ppSurtitre { grid-column: 1 / -1; }
.ppOuverturePanorama .ppOuvertureTexte .ppTitre { grid-column: 1; }
/* le titre sur une seule ligne : « Nos réalisations » */
.ppOuverturePanorama .ppOuvertureTexte .ppTitre em,
.ppOuverturePanorama .ppOuvertureTexte .ppTitre span { display: inline; }
.ppOuverturePanorama .ppOuvertureTexte .ppIntro { grid-column: 2; margin: 0; max-width: none; }
@media screen and (max-width: 899px) {
  .ppOuverturePanorama .ppOuverture { display: flex; padding: 91px 0 0; }
  .ppOuverturePanorama .ppOuvertureImage { order: -2; height: auto; aspect-ratio: 3 / 2; }
  .ppOuverturePanorama .ppOuvertureTexte {
    display: block;
    order: 0;
    margin: 0 var(--pp-marge);
    padding: 28px 0 32px;
  }
  .ppOuverturePanorama .ppOuvertureTexte .ppIntro { margin-top: 18px; }
}

/* --------------------------------------------------------------------------
   10. MOSAÏQUE DES RÉALISATIONS (retour 74 de la cliente, oct. 2026) : éviter
   l'allure de liste d'articles. La grille va presque jusqu'aux bords, les
   photos sont plus hautes, le nom du projet est en blanc au bas de la photo
   (les services ne sont plus affichés) et, sur grand écran, une colonne sur
   deux est décalée vers le bas ; js/refonte-hub.js fait glisser légèrement les
   colonnes au défilement (--derive). INACTIVE depuis le 13 oct. 2026 : la
   cliente a finalement choisi les cartes (bloc 7) ; remettre la classe
   ppMosaique sur la section dans gabarit-realisations-hub.php pour la revoir.
   -------------------------------------------------------------------------- */
/* 13 oct. 2026 : les règles de taille et de marge partagées avec le Blogue
   (bloc 11) s'appliquent aussi à la grille de cartes des Réalisations */
section.ppProjets {
  padding-left: 16px;
  padding-right: 16px;
}
section.ppProjets.ppMosaique {
  gap: 12px;
}
section.ppProjets .ppCarteImage {
  aspect-ratio: 387 / 591;
}
.ppHub .ppMosaique > a {
  position: relative;
  color: #fff;
}
.ppMosaique .ppCarteImage {
  position: relative;
}
.ppMosaique .ppCarteImage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(29, 26, 21, 0) 60%, rgba(29, 26, 21, 0.62));
}
.ppHub .ppMosaique h3 {
  position: absolute;
  z-index: 1;
  left: clamp(12px, 1.7vw, 26px);
  right: clamp(12px, 1.7vw, 26px);
  bottom: clamp(9px, 0.85vw, 13px);
  margin: 0;
  padding: 0;
  color: #fff;
  text-wrap: balance;
}
.ppHub .ppMosaique .ppCarteServices {
  display: none;
}
@media screen and (min-width: 1101px) {
  section.ppProjets {
    padding-left: 40px;
    padding-right: 40px;
  }
  section.ppProjets.ppMosaique {
    gap: 20px;
    padding-bottom: 140px;
  }
  .ppHub .ppMosaique > a {
    transform: translate3d(0, calc(var(--derive, 0) * -1px), 0);
  }
  .ppHub .ppMosaique > a:nth-child(even) {
    transform: translate3d(0, calc(110px + var(--derive, 0) * 1px), 0);
  }
}

/* --------------------------------------------------------------------------
   11. RÉALISATIONS, BLOGUE ET SES ARCHIVES (depuis le 13 oct. 2026, choix de
   la cliente) : grandes photos 387/591 presque jusqu'aux bords, écart serré
   entre les colonnes, quatre par rangée (bloc 7) ; le titre (et la date du
   blogue) restent sous la photo.
   -------------------------------------------------------------------------- */
@media screen and (min-width: 1101px) {
  section.ppProjets {
    gap: clamp(40px, 3.4vw, 52px) 20px;
  }
}
@media screen and (max-width: 1100px) {
  section.ppProjets {
    column-gap: 12px;
  }
}

/* --------------------------------------------------------------------------
   12. RÉALISATIONS, TROIS PAR RANGÉE (retour 74 de la cliente, 29 oct. 2026) :
   quatre cartes faisaient trop chargé. Trois cartes centrées, chacune de la
   taille exacte d'une carte du Blogue (même proportion 387/591, même largeur,
   même écart), pour que les deux pages se ressemblent. Le sous-titre est collé
   au titre (le thème ajoute 15 px sous chaque h3).
   -------------------------------------------------------------------------- */
@media screen and (min-width: 1101px) {
  section.ppProjets.ppRealisations {
    /* largeur d'une colonne du Blogue : (contenu - 3 écarts de 20 px) / 4 */
    grid-template-columns: repeat(3, calc((100% - 60px) / 4));
    justify-content: center;
  }
}
.ppHub .ppRealisations h3 {
  padding-bottom: 0 !important;
  line-height: 1.15 !important;
}
.ppHub .ppRealisations .ppCarteServices {
  margin-top: 4px;
}