/* ==========================================================================
   Page « À propos » : nouvelle présentation (gabarit-apropos.php).
   Fusion de À propos, La firme, Équipe et Carrière.
   Chargée après refonte-realisation.css et refonte-hub.css : l'ouverture est
   celle des autres pages ; on définit ici la firme, la devise, la direction,
   l'équipe, la fiche de bio, l'expertise et la section carrière.
   ========================================================================== */

/* les ancres (#equipe, #carriere) s'arrêtent sous l'en-tête fixe */
.ppApropos section[id] { scroll-margin-top: 96px; }
.ppApropos .ppTitre, .ppApropos .ppIntro { text-wrap: balance; }
/* ouverture : la photo d'équipe remplit toute la hauteur comme ailleurs ; on la cadre sur le centre du groupe */
.ppApropos .ppOuvertureImage img { object-position: 50% 50%; }

/* ----- titres de section : étiquette, puis titre en deux temps (italique, romain) ----- */
.ppApropos .ppFirmeTitre .ppEtiquette,
.ppApropos .ppValeursTete .ppEtiquette,
.ppApropos .ppSectionTete > .ppEtiquette,
.ppApropos .ppCarriereTexte > .ppEtiquette { display: block; margin-bottom: 14px; opacity: 0.6; }
.pp.ppApropos h2 { font-size: var(--pp-titre) !important; line-height: 1.15 !important; }
.pp.ppApropos h2 em, .pp.ppApropos h2 span { display: block; }
.pp.ppApropos h2 em { font-style: italic; }

/* ----- la firme : le titre reste en vue à gauche, le texte se lit à droite ----- */
.ppFirme {
  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;
}
.ppFirmeTitre { grid-column: 1 / 5; position: sticky; top: calc(96px + 40px); }
.ppFirmeTexte { grid-column: 6 / 12; }
.pp .ppFirmeTexte p { margin: 0 0 1.1em; font-size: 17px; line-height: 1.8; text-wrap: pretty; }
.pp .ppFirmeTexte .ppLien { margin-top: 12px; }

/* ----- la devise : trois colonnes typographiques sous un filet ----- */
.ppValeurs { padding: var(--pp-souffle) var(--pp-marge) 0; }
.ppValeursListe {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--pp-ecart);
  margin-top: clamp(28px, 3.4vw, 48px);
  padding-top: clamp(22px, 2.4vw, 34px);
  border-top: 1px solid rgba(0, 0, 0, 0.22);
}
.pp .ppValeursListe h3 {
  margin: 0 0 12px;
  font-family: var(--pp-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 1.9vw, 28px) !important;
  line-height: 1.2 !important;
  letter-spacing: 0;
  text-transform: none;
  color: var(--pp-encre);
}
.pp .ppValeursListe p { max-width: 38ch; text-wrap: pretty; }

/* essai (retour 52 de la cliente, oct. 2026) : la devise sur un fond foncé, le brun
   du pied de page, pour couper dans le blanc de la page. Pour revenir au fond
   blanc, supprimer ce bloc. */
.ppApropos .ppValeurs {
  margin-top: var(--pp-souffle);
  padding-top: clamp(56px, 7vw, 104px);
  padding-bottom: clamp(56px, 7vw, 104px);
  background: var(--pp-brun);
  color: #F4F1EA;
}
.ppApropos .ppValeurs h2,
.ppApropos .ppValeurs h2 em,
.ppApropos .ppValeurs h2 span,
.ppApropos .ppValeurs .ppEtiquette,
.ppApropos .ppValeurs .ppValeursListe h3,
.ppApropos .ppValeurs .ppValeursListe p {
  color: #F4F1EA !important;
}
.ppApropos .ppValeurs .ppValeursListe { border-top-color: rgba(244, 241, 234, 0.32); }
.ppApropos .ppValeurs .ppValeursListe p { opacity: 0.86; }

/* ----- la direction : trois grands portraits, la bio en points saillants ----- */
.ppDirection { padding: var(--pp-souffle) var(--pp-marge) 0; }
.ppDirectionListe {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--pp-ecart);
  margin-top: clamp(28px, 3.4vw, 48px);
}
/* les trois profils partagent les mêmes rangées (photo, rôle, nom, phrase, deux points saillants, lien) :
   un texte plus long chez l'un ne décale plus ce qui suit chez les autres */
.ppDirigeant {
  display: grid;
  grid-row: span 7;
  grid-template-rows: subgrid;
  align-content: start;
}
.ppDirigeant dl { display: contents; }
.ppDirigeantPhoto { aspect-ratio: 4 / 5; overflow: hidden; }
.ppDirigeantPhoto img { object-position: 50% 12%; }
/* un point saillant ou un lien absent garde sa rangée, pour que les trois profils restent alignés */
.ppDirigeant .ppVide { visibility: hidden; }
/* le rôle vient sous le nom, en plus petit (retour 53 de la cliente, oct. 2026) */
.ppDirigeant > .ppEtiquette { display: block; margin-top: 6px; font-size: clamp(10px, 0.76vw, 11.5px); line-height: 1.5; opacity: 0.6; text-wrap: balance; }
.pp .ppDirigeant h3,
.pp .ppEquipeGroupe h3 {
  font-family: var(--pp-serif);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--pp-encre);
}
.pp .ppDirigeant h3 { margin: clamp(16px, 1.6vw, 22px) 0 0; padding-bottom: 0; font-size: clamp(24px, 2.1vw, 30px) !important; line-height: 1.15 !important; }
.pp .ppDirigeant p { margin-top: 16px; text-wrap: pretty; }
/* le filet du haut de la liste : la première ligne le porte, avec l'écart qui précédait la liste */
.ppDirigeant dl > div:first-child { margin-top: clamp(16px, 1.7vw, 24px); border-top: 1px solid rgba(0, 0, 0, 0.22); }
.ppDirigeant dl > div {
  display: grid;
  grid-template-columns: 122px minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.ppDirigeant dt {
  margin: 0;
  font-family: var(--pp-sans);
  font-size: clamp(10px, 0.82vw, 12px);
  font-weight: 500;
  letter-spacing: 0.15em;
  line-height: 1.5;
  text-transform: uppercase;
  opacity: 0.55;
}
.ppDirigeant dd { margin: 0; font-family: var(--pp-serif); font-style: italic; font-size: 16px; line-height: 1.4; text-wrap: pretty; }
.pp .ppDirigeant .ppBioOuvrir { margin-top: clamp(18px, 1.9vw, 26px); justify-self: start; align-self: start; }
.pp .ppBioOuvrir { border-radius: 0; } /* le thème arrondit tous les boutons */

/* ----- l'équipe : de grands portraits, trois par rangée, beaucoup d'air -----
   Sans photo, la case garde sa place avec les initiales : la grille tient en attendant les portraits.
   La marge du bas sépare la dernière rangée (boutique, marketing) de la section carrière. */
.ppEquipe { padding: var(--pp-souffle) var(--pp-marge) var(--pp-souffle); }
.pp .ppEquipeTitre p { margin-top: clamp(14px, 1.6vw, 22px); max-width: 46ch; text-wrap: pretty; }
.ppEquipeGroupes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(64px, 7vw, 104px) clamp(28px, 4.4vw, 64px);
  margin-top: clamp(40px, 4.6vw, 68px);
}
.ppEquipeGroupe { grid-column: 1 / -1; }
/* les petits métiers partagent une rangée : boutique (2) et marketing (1) côte à côte */
.ppEquipeGroupe2 { grid-column: span 2; }
.ppEquipeGroupe1 { grid-column: span 1; }
.ppEquipeMetier { display: block; margin-bottom: clamp(18px, 2vw, 28px); opacity: 0.6; }
.ppEquipeGroupe ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(48px, 5.2vw, 76px) clamp(28px, 4.4vw, 64px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.ppEquipeGroupe2 ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ppEquipeGroupe1 ul { grid-template-columns: minmax(0, 1fr); }
.pp .ppEquipeGroupe li { margin: 0; padding: 0; list-style: none; }
.ppEquipePortrait {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #EFEDE7;
}
.ppEquipePortrait img { object-position: 50% 18%; }
/* portrait en pied avec le champ « Cadrage du visage » : on resserre sur le buste */
.ppEquipeCadre img { transform: scale(1.6); transform-origin: var(--pp-visage, 50% 28%); }
.ppEquipeSansPhoto > span { font-family: var(--pp-serif); font-style: italic; font-size: clamp(36px, 4vw, 58px); color: var(--pp-brun); opacity: 0.45; }
/* nom et rôle : exactement les mêmes tailles et les mêmes écarts que pour la direction */
.pp .ppEquipeGroupe h3 { margin: clamp(16px, 1.6vw, 22px) 0 0; padding-bottom: 0; font-size: clamp(24px, 2.1vw, 30px) !important; line-height: 1.15 !important; }
.ppEquipeGroupe li > .ppEtiquette { display: block; margin-top: 6px; font-size: clamp(10px, 0.76vw, 11.5px); line-height: 1.5; opacity: 0.6; text-wrap: balance; }
.pp .ppEquipeGroupe .ppBioOuvrir { margin-top: clamp(14px, 1.5vw, 20px); }

/* ----- domaines d'expertise et territoire : le titre reste en vue à gauche, le détail à droite -----
   En un coup d'œil (projets, secteurs, formule), puis les deux listes d'espaces, puis les régions. */
.ppExpertise {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--pp-ecart);
  align-items: start;
  padding: 0 var(--pp-marge) var(--pp-souffle);
}
/* sans section équipe au-dessus, la section retrouve sa respiration du haut */
.ppExpertise.ppExpertiseSeule { padding-top: var(--pp-souffle); }
.ppExpertiseTitre { grid-column: 1 / 5; position: sticky; top: calc(96px + 40px); }
.ppExpertiseTitre > .ppEtiquette { display: block; margin-bottom: 14px; opacity: 0.6; }
.pp .ppExpertiseTitre p { margin-top: clamp(14px, 1.6vw, 22px); max-width: 40ch; text-wrap: pretty; }
.ppExpertiseContenu { grid-column: 6 / 13; }
.pp .ppExpertise .ppFiche {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-content: start;
  gap: var(--pp-ecart);
  margin-top: 0;
}
.pp .ppExpertise .ppFiche dd { text-wrap: balance; }
.ppExpertiseDomaines {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--pp-ecart);
  margin-top: clamp(44px, 5vw, 72px);
}
/* les deux listes démarrent à la même hauteur, même si un titre tient sur deux lignes */
.ppExpertiseDomaine { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
.pp .ppExpertiseDomaine h3 {
  align-self: end;
  margin: 0 0 16px;
  font-family: var(--pp-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(21px, 1.8vw, 26px) !important;
  line-height: 1.2 !important;
  letter-spacing: 0;
  text-transform: none;
  color: var(--pp-encre);
  text-wrap: balance;
}
.pp .ppExpertiseDomaine ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(0, 0, 0, 0.22); }
.pp .ppExpertiseDomaine li {
  margin: 0;
  padding: 11px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  list-style: none;
  font-family: var(--pp-serif);
  font-size: 17px;
  line-height: 1.4;
}
.ppTerritoire { margin-top: clamp(48px, 5.4vw, 80px); }
.ppTerritoire > .ppEtiquette { display: block; margin-bottom: 14px; opacity: 0.6; }
.pp .ppTerritoireLieux {
  font-style: italic;
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1.35;
  text-wrap: balance;
}
.ppTerritoireLieux span { white-space: nowrap; }
.pp .ppTerritoire p + p { margin-top: clamp(14px, 1.6vw, 22px); max-width: 58ch; font-size: 17px; line-height: 1.8; text-wrap: pretty; }

/* ----- la fiche de bio : photo à gauche, texte à droite, sur un voile sombre ----- */
dialog.ppBio {
  width: min(1040px, calc(100vw - 48px));
  max-height: min(760px, calc(100vh - 48px));
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: #000;
  overflow: hidden;
}
dialog.ppBio[open] { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); }
dialog.ppBio::backdrop { background: rgba(29, 26, 21, 0.6); }
.ppBioPhoto { background: #EFEDE7; min-height: 420px; }
.ppBioPhoto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
/* sans portrait : les initiales de la carte, à la même taille que sur la grille */
.ppBioSansPhoto { display: flex; align-items: center; justify-content: center; }
.ppBioSansPhoto > span { font-family: var(--pp-serif); font-style: italic; font-size: clamp(48px, 5.5vw, 80px); color: var(--pp-brun); opacity: 0.45; }
.ppBioContenu { padding: clamp(48px, 5vw, 72px) clamp(28px, 4vw, 56px) clamp(32px, 4vw, 56px); overflow-y: auto; }
.ppBioContenu .ppEtiquette { display: block; margin-bottom: 12px; opacity: 0.6; }
.pp.ppBioContenu h2 { font-size: clamp(28px, 3.05vw, 45px) !important; line-height: 1.1 !important; margin: 0 0 clamp(18px, 2vw, 28px); }
.pp.ppBioContenu p { margin: 0 0 1.1em; font-size: 16px; line-height: 1.8; text-wrap: pretty; }
.ppBioFermer {
  position: absolute;
  top: 18px;
  right: 22px;
  z-index: 1;
  padding: 6px 0;
  border: 0;
  border-radius: 0;
  /* le thème donne un fond noir à tous les boutons */
  background: none !important;
  font-family: "Clash Grotesk", "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #000 !important;
  cursor: pointer;
}
.ppBioFermer:hover { opacity: 0.55; }

/* ----- carrière : la composition de l'ouverture (photo pleine hauteur à gauche, texte à droite),
   sur le lin, un peu moins haute que l'écran puisqu'elle ferme la page ----- */
.ppOuverture.ppCarriere {
  height: clamp(560px, 86vh, 860px);
  background: #EFEDE7;
}
.ppCarriere .ppOuvertureImage img { object-position: 50% 30%; }
/* pas d'en-tête fixe à dégager ici : le texte se centre simplement */
.ppCarriere .ppCarriereTexte { padding: clamp(40px, 6vh, 72px) 0; }
.pp .ppCarriereTexte p { margin-top: clamp(14px, 1.6vw, 22px); max-width: 44ch; text-wrap: pretty; }

/* ----- tablette / mobile ----- */
@media screen and (max-width: 899px) {
  .ppFirme { display: block; }
  .ppFirmeTitre { position: static; margin-bottom: 28px; }
  .ppValeursListe { grid-template-columns: 1fr; gap: 28px; }
  .ppDirectionListe { grid-template-columns: 1fr; row-gap: 0; }
  .ppDirigeant { display: block; margin-bottom: 56px; }
  /* sur mobile l'équipe est sur deux colonnes : à 20 px, aucun nom ne passe sur deux lignes ;
     la direction prend la même taille pour rester identique */
  .pp .ppDirigeant h3, .pp .ppEquipeGroupe h3 { font-size: 20px !important; }
  .ppDirigeant dl { display: block; margin-top: 18px; }
  .ppDirigeant dl > div:first-child { margin-top: 0; }
  .ppEquipeGroupes { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .ppEquipeGroupe, .ppEquipeGroupe2, .ppEquipeGroupe1 { grid-column: 1 / -1; }
  .ppEquipeGroupe ul, .ppEquipeGroupe2 ul, .ppEquipeGroupe1 ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 16px; }
  .ppExpertise { display: block; }
  .ppExpertiseTitre { position: static; margin-bottom: 32px; }
  .pp .ppExpertise .ppFiche { grid-template-columns: 1fr; gap: 14px; }
  .ppExpertiseDomaines { grid-template-columns: minmax(0, 1fr); }
  .ppExpertiseDomaine { display: block; margin-bottom: 36px; }
  .ppOuverture.ppCarriere { height: auto; }
  .ppCarriere .ppCarriereTexte { padding: 56px var(--pp-marge) 40px; }
  dialog.ppBio { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; margin: 0; overflow-y: auto; }
  dialog.ppBio[open] { display: block; }
  .ppBioPhoto { min-height: 0; aspect-ratio: 4 / 5; max-height: 52vh; }
  .ppBioFermer { background: rgba(255, 255, 255, 0.86) !important; padding: 6px 10px; right: 12px; top: 12px; }
}

/* ----- l'équipe en texte seul (3 nov. 2026) -----
   En attendant les photos de tout le monde, seule la direction a ses portraits ;
   l'équipe devient un annuaire : un filet fin, le nom, le métier, le lien vers la bio.
   Activé par $equipe_portraits = false dans gabarit-apropos.php (classe ppEquipeTexte). */
.ppEquipeTexte .ppEquipeGroupes { gap: clamp(48px, 5vw, 76px) clamp(28px, 4.4vw, 64px); }
.ppEquipeTexte .ppEquipeGroupe ul { gap: 0 clamp(28px, 4.4vw, 64px); }
.pp .ppEquipeTexte .ppEquipeGroupe li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(18px, 1.8vw, 24px) 0 clamp(26px, 2.6vw, 36px);
  border-top: 1px solid rgba(0, 0, 0, 0.16);
}
.pp .ppEquipeTexte .ppEquipeGroupe h3 { margin-top: 0; font-size: clamp(22px, 1.9vw, 27px) !important; }
.ppEquipeTexte .ppEquipeMetier { margin-bottom: clamp(12px, 1.3vw, 18px); }
.pp .ppEquipeTexte .ppEquipeGroupe .ppBioOuvrir { margin-top: auto; padding-top: clamp(14px, 1.5vw, 20px); }

/* fiche de bio sans photo : une seule colonne, plus étroite */
dialog.ppBio.ppBioTexteSeul { width: min(720px, calc(100vw - 48px)); }
dialog.ppBio.ppBioTexteSeul[open] { grid-template-columns: minmax(0, 1fr); }
.ppBioTexteSeul .ppBioPhoto { display: none; }

@media screen and (max-width: 899px) {
  .ppEquipeTexte .ppEquipeGroupe ul,
  .ppEquipeTexte .ppEquipeGroupe2 ul,
  .ppEquipeTexte .ppEquipeGroupe1 ul { gap: 0 16px; }
  .pp .ppEquipeTexte .ppEquipeGroupe h3 { font-size: 20px !important; }
  dialog.ppBio.ppBioTexteSeul { width: 100vw; }
  .ppBioTexteSeul .ppBioContenu { padding-top: 76px; } /* dégage le bouton Fermer */
}
/* sur téléphone, une personne par ligne : les métiers longs restent lisibles */
@media screen and (max-width: 599px) {
  .ppEquipeTexte .ppEquipeGroupe ul,
  .ppEquipeTexte .ppEquipeGroupe2 ul,
  .ppEquipeTexte .ppEquipeGroupe1 ul { grid-template-columns: minmax(0, 1fr); }
  .pp .ppEquipeTexte .ppEquipeGroupe li { padding: 16px 0 20px; }
  .pp .ppEquipeTexte .ppEquipeGroupe .ppBioOuvrir { padding-top: 12px; }
}