/* ==========================================================================
   Pages de services : nouvelle présentation (gabarit-service.php).
   Chargée après refonte-realisation.css, refonte-hub.css et
   refonte-apropos.css : l'ouverture, les en-têtes de section, les cartes de
   projets, les témoignages et la clôture viennent de ces feuilles. On ne
   définit ici que ce qui est propre aux services : la citation, les étapes
   du processus, les emplacements de photo réservés et la foire aux questions.
   ========================================================================== */

.ppService section[id] { scroll-margin-top: 96px; }

/* ----- ouverture : le titre est une phrase, plus longue que sur les autres pages ----- */
.pp.ppService .ppTitre {
  font-size: clamp(30px, min(3.5vw, 6.2vh), 50px) !important;
  line-height: 1.06 !important;
}
.ppService .ppOuverture .ppIntro { text-wrap: pretty; }
.ppService .ppOuverture .ppFiche { margin-top: clamp(22px, 3.6vh, 40px); }

/* ----- ouverture « duo » (d'après la page Services de Lively Haus) : une moitié vidéo,
   une moitié photo, le titre par-dessus ; le texte passe dans l'introduction dessous ----- */
.ppOuvertureDuo {
  position: relative;
  /* plein écran, comme les autres ouvertures : l'en-tête fixe (96 px) recouvre le haut */
  height: 100vh;
  height: max(560px, 100svh);
  color: #fff;
}
.ppDuoMedias {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ppDuoMedia { position: relative; overflow: hidden; background: #2B211C; }
.ppDuoMedia video,
.ppDuoMedia img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* un voile léger, pour que le titre reste lisible sur les deux moitiés */
.ppDuoMedias::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(29, 26, 21, 0.32);
}
.ppDuoTitre {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 96px var(--pp-marge) 0;
  text-align: center;
}
.ppService .ppDuoTitre .ppSurtitre { color: #fff; opacity: 0.85; }
.pp.ppService .ppDuoTitre .ppTitre {
  /* un cran sous le titre des autres ouvertures : ce titre-ci est une phrase sur deux lignes,
     en blanc sur une image, et paraissait plus gros à taille égale */
  font-size: clamp(30px, min(3.4vw, 6.2vh), 50px) !important;
  line-height: 1.05 !important;
  color: #fff !important;
  text-wrap: balance;
}
.pp.ppService .ppDuoTitre .ppTitre em,
.pp.ppService .ppDuoTitre .ppTitre span { color: #fff !important; }
/* l'introduction sous le duo : la présentation de « La firme » (titre à gauche, texte à droite) */
.ppService .ppDuoIntro .ppFirmeTexte .ppBouton { margin-top: clamp(10px, 1.2vw, 18px); }
.ppService .ppDuoIntro .ppFiche { margin-top: clamp(32px, 3.6vw, 52px); }
/* bouton en fin d'étape (page générale Nos services : « Découvrir ce service ») */
.pp .ppEtapeDetail .ppEtapeBouton { margin-top: clamp(18px, 2vw, 28px); }
/* sur une bande brune, le bouton s'inverse : fond lin, texte brun */
.pp .ppProcessusBandes .ppEtapeSombre .ppEtapeBouton { background: #EFEDE7 !important; color: var(--pp-brun) !important; }
/* garanties et accréditations : logos alignés sous les repères (Garantie GCR, APCHQ, numéro RBQ) */
.ppService .ppGaranties { margin-top: clamp(24px, 2.8vw, 40px); }
.ppService .ppGaranties > .ppEtiquette { display: block; margin-bottom: 14px; opacity: 0.55; }
.ppService .ppGaranties ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px clamp(28px, 3vw, 44px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pp.ppService .ppGaranties li { margin: 0; padding: 0; list-style: none; }
.ppService .ppGaranties li,
.ppService .ppGaranties li a { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; color: inherit; text-decoration: none; }
.ppService .ppGaranties img { display: block; width: auto; height: 44px; max-width: 160px; object-fit: contain; }
.ppService .ppGaranties strong {
  font-family: var(--pp-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(19px, 1.6vw, 24px);
  line-height: 44px;
  white-space: nowrap;
}
.ppService .ppGaranties span { max-width: 24ch; font-size: 12px; line-height: 1.4; opacity: 0.6; text-wrap: balance; }
/* les étapes suivent directement l'introduction */
.ppService .ppProcessusSansTete { padding-top: clamp(48px, 5.6vw, 88px); }
.ppService .ppProcessusSansTete.ppProcessusBandes .ppEtape:first-child { margin-top: 0; }

/* ----- emplacement réservé : la photo n'est pas encore fournie ----- */
.ppReserve {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  background: #EFEDE7;
  outline: 1px dashed rgba(91, 73, 65, 0.4);
  outline-offset: -14px;
  color: var(--pp-brun);
}
.ppReserve .ppEtiquette { opacity: 0.75; }
.ppReserve em {
  max-width: 26ch;
  font-family: var(--pp-serif);
  font-style: italic;
  font-size: clamp(17px, 1.5vw, 22px);
  line-height: 1.3;
  text-wrap: balance;
}

/* ----- la citation : une respiration entre l'ouverture et le processus ----- */
.ppServiceCitation {
  margin: 0;
  padding: var(--pp-souffle) var(--pp-marge) 0;
  text-align: center;
}
.ppServiceCitation blockquote { margin: 0; padding: 0; border: 0; }
.pp .ppServiceCitation blockquote p {
  max-width: 24em;
  margin: 0 auto;
  font-family: var(--pp-serif);
  font-style: italic;
  font-size: clamp(22px, 2.3vw, 34px);
  line-height: 1.3;
  text-wrap: balance;
}
.ppServiceCitation figcaption { display: block; margin-top: 18px; opacity: 0.6; }

/* ----- en-tête de section : étiquette, titre, chapeau ----- */
.ppServiceProcessus,
.ppServiceRealisations { padding: var(--pp-souffle) var(--pp-marge) 0; }
.ppService .ppServiceTete > p {
  max-width: 46ch;
  margin-top: clamp(14px, 1.6vw, 22px);
  text-wrap: pretty;
}

/* ----- le processus : une rangée par étape, photo et texte en alternance ----- */
.ppEtape {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--pp-ecart);
  align-items: start;
  margin-top: clamp(48px, 5.4vw, 80px);
}
.ppEtapePhotos {
  grid-column: 1 / 6;
  /* la colonne de photos prend exactement la hauteur du texte : pas de blanc à côté */
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--pp-ecart);
}
.ppEtapePhoto {
  position: relative;
  overflow: hidden;
  /* la première photo occupe la hauteur qui reste ; une étape courte donne une photo
     horizontale, une étape longue une photo verticale */
  flex: 1 1 auto;
  min-height: clamp(260px, 24vw, 360px);
}
.ppEtapePhoto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pp-foyer, 50% 50%);
}
.ppEtapePhotos { grid-row: 1 / span 2; }
.ppEtapeTexte { grid-column: 7 / 13; grid-row: 1; }
.ppEtapeDetail { grid-column: 7 / 13; grid-row: 2; }
.ppEtapeInverse .ppEtapePhotos { grid-column: 8 / 13; }
.ppEtapeInverse .ppEtapeTexte,
.ppEtapeInverse .ppEtapeDetail { grid-column: 1 / 7; }

/* étape au texte long : des photos de formats différents, décalées l'une par
   rapport à l'autre comme sur les pages projet */
.ppEtapePhotoPlus { flex: none; min-height: 0; }
.ppEtapePhotoPlus1 { width: 76%; margin-left: auto; aspect-ratio: 3 / 2; }
.ppEtapePhotoPlus2 { width: 58%; aspect-ratio: 4 / 5; }
.ppEtapeInverse .ppEtapePhotoPlus1 { margin-left: 0; }
.ppEtapeInverse .ppEtapePhotoPlus2 { margin-left: auto; }

.ppEtapeNumero {
  display: block;
  font-family: var(--pp-serif);
  font-style: italic;
  font-size: clamp(54px, 6vw, 88px);
  line-height: 0.9;
  color: var(--pp-brun);
  opacity: 0.38;
}
.pp.ppService .ppEtapeTexte h3 {
  margin: clamp(10px, 1.2vw, 16px) 0 clamp(16px, 1.8vw, 26px);
  padding: 0;
  font-family: var(--pp-serif);
  font-weight: 400;
  font-size: clamp(24px, 2.3vw, 34px) !important;
  line-height: 1.15 !important;
  letter-spacing: 0;
  text-transform: none;
  color: var(--pp-encre);
  text-wrap: balance;
}
.pp.ppService .ppEtapeDetail h4 {
  margin: clamp(28px, 3vw, 44px) 0 14px;
  padding: clamp(20px, 2.2vw, 30px) 0 0;
  border-top: 1px solid rgba(0, 0, 0, 0.18);
  font-family: var(--pp-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(19px, 1.6vw, 23px) !important;
  line-height: 1.3 !important;
  letter-spacing: 0;
  text-transform: none;
  color: var(--pp-encre);
  text-wrap: balance;
}
.pp .ppEtapeTexte p,
.pp .ppEtapeDetail p { margin: 0 0 1em; max-width: 58ch; text-wrap: pretty; }
.pp .ppEtapeTexte p:last-child,
.pp .ppEtapeDetail p:last-child { margin-bottom: 0; }

/* la liste en vignettes : de petites cases à filets */
.pp .ppEtapeVignettes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--pp-ecart);
  margin: clamp(16px, 1.8vw, 24px) 0 clamp(18px, 2vw, 28px);
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(0, 0, 0, 0.18);
}
.pp .ppEtapeVignettes li {
  margin: 0;
  padding: 12px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  font-family: var(--pp-serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.4;
  list-style: none;
  text-wrap: pretty;
}
.pp .ppEtapeVignettes li::before { content: none; }

/* la ligne d'étiquettes */
.pp .ppEtapeEtiquettes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 clamp(18px, 2vw, 26px);
  padding: 0;
  list-style: none;
}
.pp .ppEtapeEtiquettes li {
  margin: 0;
  padding: 7px 12px;
  border: 1px solid rgba(0, 0, 0, 0.22);
  font-size: clamp(10px, 0.76vw, 11.5px);
  line-height: 1.4;
  list-style: none;
  white-space: nowrap;
}
.pp .ppEtapeEtiquettes li::before { content: none; }

/* ----- dépliants (étapes) et foire aux questions : details et summary, sans JavaScript ----- */
.ppService details > summary {
  list-style: none;
  cursor: pointer;
}
.ppService details > summary::-webkit-details-marker { display: none; }
.ppDepliant { margin: clamp(16px, 1.8vw, 24px) 0 clamp(20px, 2.2vw, 30px); }
.ppDepliant > summary .ppLien::after { content: " +"; }
.ppDepliant[open] > summary .ppLien::after { content: " −"; }
.pp .ppDepliant > p { margin: 18px 0 8px; }
.pp .ppDepliant ul {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(0, 0, 0, 0.18);
}
.pp .ppDepliant li {
  margin: 0;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  list-style: none;
}
.pp .ppDepliant li::before { content: none; }

/* ----- la carte du membre de la direction ----- */
.ppServiceExpert {
  display: grid;
  grid-template-columns: clamp(96px, 9vw, 132px) minmax(0, 1fr);
  gap: clamp(16px, 1.8vw, 26px);
  align-items: center;
  margin-top: clamp(26px, 2.8vw, 40px);
  padding-top: clamp(22px, 2.4vw, 32px);
  border-top: 1px solid rgba(0, 0, 0, 0.18);
}
.ppServiceExpertPhoto { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.ppServiceExpertPhoto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 12%;
}
.ppServiceExpertTexte strong {
  display: block;
  font-family: var(--pp-serif);
  font-weight: 400;
  font-size: clamp(22px, 1.9vw, 27px);
  line-height: 1.15;
}
.ppServiceExpertTexte .ppEtiquette {
  display: block;
  margin-top: 6px;
  font-size: clamp(10px, 0.76vw, 11.5px);
  line-height: 1.5;
  opacity: 0.6;
}
.ppServiceExpertTexte dl { margin: 12px 0 0; }
.ppServiceExpertTexte dt { display: none; }
.ppServiceExpertTexte dd { margin: 0; font-family: var(--pp-serif); font-style: italic; font-size: 16px; line-height: 1.4; }

/* ----- l'équipe : le titre à gauche et le texte à droite (comme « La firme »),
   puis les portraits de la direction (comme sur À propos) et le bandeau d'appel ----- */
/* section « suite » avec photo : la composition Carrière d'À propos, après les étapes */
.ppServiceSuitePhoto { padding: var(--pp-souffle) var(--pp-marge) 0; background: #fff; }
.ppServiceSuiteGrille {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--pp-ecart);
  align-items: center;
}
/* un portrait modeste (4/5), pas une photo à fond perdu */
.ppServiceSuiteImage { grid-column: 1 / 5; position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #EFEDE7; }
.ppServiceSuiteImage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.ppServiceSuiteTexte { grid-column: 6 / 12; }
.ppServiceSuiteTexte .ppSurtitre { display: block; margin-bottom: 14px; opacity: 0.6; }
.pp.ppService .ppServiceSuiteTexte h2 { margin-bottom: clamp(16px, 1.8vw, 26px); }
.pp .ppServiceSuiteTexte p { margin: 0 0 1.1em; font-size: 17px; line-height: 1.8; max-width: 52ch; text-wrap: pretty; }
.pp .ppServiceSuiteTexte .ppBouton { margin-top: clamp(14px, 1.6vw, 22px); }
/* les étapes en colonnes numérotées, sous un filet */
.pp .ppServiceSuiteEtapes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 44px) var(--pp-ecart);
  margin: clamp(40px, 4.6vw, 64px) 0 0;
  padding: clamp(22px, 2.4vw, 34px) 0 0;
  border-top: 1px solid rgba(0, 0, 0, 0.22);
  list-style: none;
}
.pp .ppServiceSuiteEtapes li { margin: 0; padding: 0; list-style: none; }
.ppServiceSuiteNumero { display: block; margin-bottom: 10px; font-family: var(--pp-serif); font-style: italic; font-size: clamp(26px, 2.4vw, 36px); line-height: 1; color: var(--pp-brun); opacity: 0.55; }
.pp .ppServiceSuiteEtapes h3 { margin: 0 0 10px; font-family: var(--pp-serif); font-style: normal; font-weight: 400; font-size: clamp(20px, 1.6vw, 24px) !important; line-height: 1.2 !important; letter-spacing: 0; text-transform: none; color: var(--pp-encre); }
.pp .ppServiceSuiteEtapes p { margin: 0; font-size: 16px; line-height: 1.7; max-width: 34ch; text-wrap: pretty; }
.pp .ppServiceSuiteAction { margin: clamp(28px, 3vw, 44px) 0 0; }
@media screen and (max-width: 899px) {
  .ppServiceSuiteGrille { display: block; }
  .ppServiceSuiteImage { width: 70%; max-width: 320px; margin-bottom: 28px; }
  .pp .ppServiceSuiteEtapes { grid-template-columns: 1fr; gap: 28px; }
}
.ppServiceEquipe { padding-top: 0; }
.ppService .ppServiceEquipeTete { align-items: end; }
.ppService .ppServiceEquipeTete .ppFirmeTitre { position: static; grid-column: 1 / 8; }
.ppService .ppServiceEquipeTete .ppFirmeTexte { grid-column: 8 / 13; justify-self: end; }
.ppService .ppServiceEquipeListe { margin: clamp(40px, 4.6vw, 64px) var(--pp-marge) 0; }
.ppService .ppServiceEquipeListe .ppDirigeant { grid-row: span 4; }
.pp .ppServiceEquipeTete .ppServiceLiens { padding-top: clamp(8px, 1vw, 14px); }
.ppServiceAppel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  margin: clamp(48px, 5.4vw, 80px) var(--pp-marge) 0;
  padding: clamp(24px, 2.8vw, 40px) clamp(24px, 3vw, 44px);
  background: #EFEDE7;
}
.pp .ppServiceAppel p {
  margin: 0;
  max-width: none;
  font-family: var(--pp-serif);
  font-style: italic;
  font-size: clamp(20px, 1.9vw, 28px);
  line-height: 1.25;
}
.pp .ppServiceAppel .ppBouton { margin-top: 0; }

/* ----- réalisations : la rangée défilante de l'accueil (« Projets récents ») ----- */
.ppService .ppServiceRealisations.ppRangeeSection { padding-top: var(--pp-souffle); }
.ppService .ppRangeeTete > div > .ppEtiquette { display: block; margin-bottom: 14px; opacity: 0.6; }
.pp.ppService .ppRangeeTete h2 em, .pp.ppService .ppRangeeTete h2 span { display: inline; }
.ppService .ppRangeeTete .ppLien { flex: none; }
.pp .ppRangee > .ppVignette {
  position: relative;
  display: block;
  flex: 0 0 calc((83.334vw - 80px) / 3);
  aspect-ratio: 387 / 591;
  overflow: hidden;
  scroll-snap-align: start;
  color: #fff;
}
.pp .ppVignette img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.pp .ppVignette:hover img { transform: scale(1.025); }
/* le nom du projet, centré sur un voile : au survol sur ordinateur, comme sur l'accueil */
.ppVignetteTitre {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  background: rgba(29, 26, 21, 0.42);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.pp .ppVignette:hover .ppVignetteTitre,
.pp .ppVignette:focus-visible .ppVignetteTitre { opacity: 1; }
.pp.ppService .ppVignetteTitre h3 {
  margin: 0;
  padding: 0;
  font-family: var(--pp-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 19px !important;
  line-height: 1.35 !important;
  letter-spacing: 0;
  text-transform: none;
  text-align: center;
  color: #fff;
  text-wrap: balance;
}
.pp .ppServiceLiens {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 40px;
  margin: 0;
  padding-top: clamp(28px, 3.2vw, 44px);
}

/* ----- témoignages : la bande de trois repères, puis le bloc de l'accueil ----- */
.ppServiceTemoignages { padding-top: var(--pp-souffle); }
.ppService .ppServiceReperes {
  margin: 0 var(--pp-marge);
  justify-content: start;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--pp-ecart);
}
.ppService .ppServiceTemoignages .blocTemoignages { padding-top: clamp(40px, 4.6vw, 64px); }
/* le titre du bloc n'est pas en deux temps : il garde la taille des autres pages */
.pp.ppService .blocTemoignagesTitre { font-size: clamp(22px, 2.05vw, 30px) !important; }

/* ----- bannière photo avant les questions : celle du hub Réalisations, avec plus d'air au-dessus ----- */
.ppService .ppServiceBanniere { margin-top: var(--pp-souffle); }

/* ----- foire aux questions : le titre reste en vue à gauche, les questions à droite ----- */
.ppFaq {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--pp-ecart);
  align-items: start;
  padding: var(--pp-souffle) var(--pp-marge) 0;
}
.ppFaqTitre { grid-column: 1 / 5; position: sticky; top: calc(96px + 40px); }
.ppService .ppFaqTitre > .ppEtiquette { display: block; margin-bottom: 14px; opacity: 0.6; }
/* le titre de la foire aux questions est long : un cran plus petit que les autres titres de section */
.pp.ppService .ppFaqTitre h2 { font-size: clamp(24px, 2.3vw, 34px) !important; line-height: 1.2 !important; text-wrap: balance; }
.ppFaqAppel { margin-top: clamp(22px, 2.6vw, 36px); }
.pp .ppFaqAppel p { margin: 0; max-width: 30ch; text-wrap: pretty; }
.pp .ppFaqAppel p a { border-bottom: 1px solid currentColor; white-space: nowrap; }
.ppFaqListe { grid-column: 6 / 13; border-top: 1px solid rgba(0, 0, 0, 0.22); }
.ppFaqListe details { border-bottom: 1px solid rgba(0, 0, 0, 0.14); }
.ppFaqListe summary {
  position: relative;
  padding: clamp(18px, 1.9vw, 26px) 44px clamp(18px, 1.9vw, 26px) 0;
}
.pp.ppService .ppFaqListe summary h3 {
  margin: 0;
  padding: 0;
  font-family: var(--pp-serif);
  font-weight: 400;
  font-size: clamp(19px, 1.6vw, 23px) !important;
  line-height: 1.3 !important;
  letter-spacing: 0;
  text-transform: none;
  color: var(--pp-encre);
  text-wrap: pretty;
}
/* le signe plus, qui devient moins à l'ouverture */
.ppFaqListe summary::before,
.ppFaqListe summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 15px;
  height: 1px;
  background: currentColor;
  transition: transform 0.25s ease;
}
.ppFaqListe summary::after { transform: rotate(90deg); }
.ppFaqListe details[open] > summary::after { transform: rotate(0deg); }
.pp .ppFaqListe details > p {
  margin: 0;
  padding: 0 44px clamp(20px, 2.2vw, 30px) 0;
  max-width: 62ch;
  text-wrap: pretty;
}
.ppFaqListe summary:focus-visible { outline: 1px solid var(--pp-brun); outline-offset: 4px; }

/* ----- clôture : la mention sous le bouton ----- */
.ppService .ppServiceReassurance { display: block; margin-top: 18px; opacity: 0.6; }
.pp.ppService .ppFin h2 { max-width: 12em; text-wrap: balance; }
.pp.ppService .ppFin h2 em, .pp.ppService .ppFin h2 span { display: inline; }

/* ----- tablette et mobile ----- */
@media screen and (max-width: 899px) {
  .pp.ppService .ppTitre { font-size: clamp(30px, 8.4vw, 38px) !important; }
  .ppOuvertureDuo { height: max(520px, 100svh); }
  .ppDuoTitre { padding-top: 91px; }
  /* sur mobile, seule la vidéo (première moitié) reste, plein écran, le titre par-dessus ; la photo est cachée */
  .ppDuoMedias { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .ppDuoMedia + .ppDuoMedia { display: none; }

  .ppService .ppOuvertureImage .ppReserve { position: relative; inset: auto; aspect-ratio: 4 / 5; }
  .ppEtape { display: block; margin-top: 56px; }
  /* la photo passe au-dessus du texte à chaque étape ; les photos supplémentaires restent sur ordinateur */
  .ppEtapePhotos { display: block; margin-bottom: 26px; }
  .ppEtapePhoto { aspect-ratio: 4 / 5; min-height: 0; }
  .ppEtapePhotoPlus { display: none; }
  .ppEtapeNumero { font-size: 54px; }
  .pp .ppEtapeVignettes { grid-template-columns: minmax(0, 1fr); }
  .pp .ppEtapeEtiquettes li { white-space: normal; }
  .ppService .ppServiceEquipeListe .ppDirigeant { margin-bottom: 40px; }
  .ppServiceAppel { margin-top: 16px; }
  .ppService .ppRangeeTete { display: block; }
  .ppService .ppRangeeTete .ppLien { margin-top: 18px; }
  /* sans survol, le nom du projet reste lisible en bas de la vignette */
  .pp .ppRangee > .ppVignette { flex-basis: 72vw; }
  .ppVignetteTitre { align-items: flex-end; justify-content: flex-start; padding: 0 16px 16px; opacity: 1; background: linear-gradient(rgba(29, 26, 21, 0) 55%, rgba(29, 26, 21, 0.6)); }
  .pp.ppService .ppVignetteTitre h3 { text-align: left; }
  .ppService .ppServiceReperes { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .ppFaq { display: block; }
  .ppFaqTitre { position: static; margin-bottom: 28px; }
  .ppFaqListe summary { padding-right: 36px; }
  .pp .ppFaqListe details > p { padding-right: 0; }
}

/* ==========================================================================
   PRÉSENTATION « BANDEAUX » (au choix dans la fiche) : un bandeau photo par étape.
   Une seule règle pour tout le processus : une photo horizontale sur toute la
   largeur, toujours au même format, puis le texte dessous sur deux colonnes,
   entièrement visible. Plus d'alternance ni de formats mélangés.
   ========================================================================== */
@media screen and (min-width: 900px) {
  .ppProcessusBandeaux .ppEtapePhotos {
    grid-column: 1 / -1;
    grid-row: 1;
    display: block;
    margin: 0 calc(var(--pp-marge) * -1) clamp(32px, 3.6vw, 52px);
  }
  .ppProcessusBandeaux .ppEtapePhotos .ppEtapePhoto { height: clamp(260px, 42vh, 440px); min-height: 0; }
  .ppProcessusBandeaux .ppEtapePhotoPlus { display: none; }
  /* le texte : l'étape à gauche, son détail à droite */
  .ppProcessusBandeaux .ppEtapeTexte,
  .ppProcessusBandeaux .ppEtapeInverse .ppEtapeTexte { grid-column: 1 / 7; grid-row: 2; }
  .ppProcessusBandeaux .ppEtapeDetail,
  .ppProcessusBandeaux .ppEtapeInverse .ppEtapeDetail { grid-column: 7 / 13; grid-row: 2; }
  .pp.ppService .ppProcessusBandeaux .ppEtapeDetail h4 { margin-top: 0; padding-top: 0; border-top: 0; }
  .ppProcessusBandeaux .ppEtapeNumero { font-size: clamp(44px, 4.6vw, 68px); }
}

.ppEtapeAccent { display: none; }

/* ==========================================================================
   PRÉSENTATION « BANDES DE COULEUR » (au choix dans la fiche), d'après la page
   Services de Lively Haus : chaque étape est une bande pleine largeur, brune ou
   lin en alternance, avec une grande photo en retrait d'un côté et, de
   l'autre, une petite photo d'accent, l'étiquette « Étape 01 », le titre et
   le texte.
   ========================================================================== */
.ppProcessusBandes .ppEtape {
  margin: 0 calc(var(--pp-marge) * -1);
  padding: clamp(48px, 5.6vw, 88px) var(--pp-marge);
  background: #EFEDE7;
}
.ppProcessusBandes .ppSectionTete + .ppEtape { margin-top: clamp(40px, 4.6vw, 64px); }
.ppProcessusBandes .ppEtapeSombre { background: var(--pp-brun); color: #F4F1EA; }
.ppProcessusBandes .ppEtapePhotoPlus { display: none; }
/* le numéro de l'étape : un grand chiffre en italique, dans la teinte de la bande */
.ppProcessusBandes .ppEtapeNumero {
  font-family: var(--pp-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(72px, 8.4vw, 128px);
  line-height: 0.82;
  letter-spacing: -0.01em;
  color: var(--pp-brun);
  opacity: 0.5;
}
.ppProcessusBandes .ppEtapeSombre .ppEtapeNumero { color: #F4F1EA; opacity: 0.55; }
.pp.ppService .ppProcessusBandes .ppEtapeTexte h3 { margin-top: clamp(14px, 1.6vw, 22px); font-size: clamp(28px, 2.9vw, 44px) !important; line-height: 1.1 !important; }
/* sur fond brun : textes, filets et étiquettes en crème */
.pp.ppService .ppProcessusBandes .ppEtapeSombre h3,
.pp.ppService .ppProcessusBandes .ppEtapeSombre h4,
.pp .ppProcessusBandes .ppEtapeSombre p,
.pp .ppProcessusBandes .ppEtapeSombre li,
.pp .ppProcessusBandes .ppEtapeSombre .ppLien { color: #F4F1EA !important; }
.pp.ppService .ppProcessusBandes .ppEtapeSombre h4,
.pp .ppProcessusBandes .ppEtapeSombre .ppEtapeVignettes,
.pp .ppProcessusBandes .ppEtapeSombre .ppEtapeVignettes li,
.pp .ppProcessusBandes .ppEtapeSombre .ppDepliant ul,
.pp .ppProcessusBandes .ppEtapeSombre .ppDepliant li,
.pp .ppProcessusBandes .ppEtapeSombre .ppEtapeEtiquettes li { border-color: rgba(244, 241, 234, 0.3); }
@media screen and (min-width: 900px) {
  /* première rangée : la grande photo d'un côté ; de l'autre, la petite photo en haut,
     puis l'étiquette, le titre et le texte de l'étape calés en bas, à la hauteur de la photo */
  .ppProcessusBandes .ppEtapePhotos {
    grid-column: 7 / 13;
    grid-row: 1;
    display: block;
    align-self: start;
  }
  /* la même photo carrée à toutes les étapes */
  .ppProcessusBandes .ppEtapePhotos .ppEtapePhoto { aspect-ratio: 1 / 1; min-height: 0; }
  .ppProcessusBandes .ppEtapeTexte {
    grid-column: 1 / 6;
    grid-row: 1;
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }
  .ppProcessusBandes .ppEtapeInverse .ppEtapePhotos { grid-column: 1 / 7; }
  .ppProcessusBandes .ppEtapeInverse .ppEtapeTexte { grid-column: 8 / 13; }
  .ppProcessusBandes .ppEtapeAccent {
    display: block;
    flex: none;
    position: relative;
    width: clamp(110px, 10vw, 152px);
    aspect-ratio: 1 / 1;
    margin-bottom: clamp(28px, 3vw, 44px);
    overflow: hidden;
  }
  .ppProcessusBandes .ppEtapeInverse .ppEtapeAccent { margin-left: auto; }
  .ppProcessusBandes .ppEtapeAccent img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .ppProcessusBandes .ppEtapeNumero { margin-top: auto; }
  /* seconde rangée : le détail de l'étape sur toute la largeur, sous un filet, en deux colonnes */
  .ppProcessusBandes .ppEtapeDetail,
  .ppProcessusBandes .ppEtapeInverse .ppEtapeDetail {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: clamp(40px, 4.6vw, 68px);
    padding-top: clamp(28px, 3vw, 44px);
    border-top: 1px solid rgba(0, 0, 0, 0.18);
    columns: 2;
    column-gap: calc(var(--pp-ecart) * 2.4);
  }
  .ppProcessusBandes .ppEtapeSombre .ppEtapeDetail { border-top-color: rgba(244, 241, 234, 0.3); }
  .ppProcessusBandes .ppEtapeDetail > * { break-inside: avoid; }
  .pp.ppService .ppProcessusBandes .ppEtapeDetail h4 {
    column-span: all;
    margin: 0 0 clamp(18px, 2vw, 28px);
    padding: 0;
    border: 0;
    font-size: clamp(22px, 2vw, 28px) !important;
  }
  .pp .ppProcessusBandes .ppEtapeDetail p { max-width: none; }
  .pp .ppProcessusBandes .ppEtapeDetail .ppDepliant { margin-top: 0; }
  .pp .ppProcessusBandes .ppEtapeDetail .ppEtapeVignettes { margin-top: 0; }
}
@media screen and (max-width: 899px) {
  .ppProcessusBandes .ppEtape { margin-top: 0; padding: 40px var(--pp-marge); }
  .ppProcessusBandes .ppSectionTete + .ppEtape { margin-top: 36px; }
}

/* Retour 100 (29 oct. 2026) : les trois accréditations sur la même ligne et
   calées en haut (le texte d'APCHQ, sur trois lignes, faisait monter son
   logo ; la RBQ passait à la ligne). */
.ppService .ppGaranties ul { align-items: flex-start; }
@media screen and (min-width: 900px) {
  .ppService .ppGaranties ul {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    column-gap: clamp(20px, 2.4vw, 40px);
  }
  .ppService .ppGaranties img { max-width: 140px; }
  .ppService .ppGaranties strong { font-size: clamp(17px, 1.4vw, 22px); }
  .ppService .ppGaranties span { max-width: 20ch; }
}