/*******************
  PAGES PERSONAE (P5, 16/10/2026)
  Maquette BAT-SHOOLDY-PERSONAE.jpg (1920 px, desktop seul), cotes à 90 % (décision 4),
  relevées dans personae-desktop-calques.txt. Un bloc par disposition ACF (page-personae.php,
  parts/personae/) ; chaque bloc se suffit à lui-même (marges propres), pour rester juste
  quand on en retire ou en déplace un.
  Composants de l'accueil réutilisés : bande de réassurance, photo annotée, comparatif,
  30 nuits, emplacement des avis (home.css, comparatif.css, home.js) ; rail (rail.css).
  Mobile dérivé des planches de l'accueil et de la fiche (décision 17) ; seuils par bloc,
  proposés à Antoine (VERDICT de P5) :
  - Bandeau : photo au-dessus du texte sous 900 px.
  - Douleurs : photo au-dessus des causes sous 900 px.
  - Maladies : 2 colonnes sous 1200 px, 1 sous 640 px.
  - Innovation : zone d'achat sous la photo sous 1000 px (photo annotée en portrait sous
    760 px, celle de l'accueil).
  - Positions : texte au-dessus du rail sous 900 px ; tirets sous 760 px (rail.css).
  - Étapes : 2 × 2 sous 1000 px, pointillé retiré ; ronds réduits sous 500 px.
*******************/

.pe {
  color: var(--c-ink);
  text-align: left;
}
.pe p {
  margin: 0;
}
.pe section {
  scroll-margin-top: calc(var(--hdr-bar-h, 60px) + var(--hdr-top, 20px) + 16px);
}
/* Couloir commun des blocs sans fond : 1660 px comme le comparatif. */
.pe-dl,
.pe-in,
.pe-et {
  max-width: 1660px;
  margin: 0 auto;
  padding: 0 var(--side) var(--sp-xl);
}
/* Blocs en carte beige bord à bord (--page-edge) : maladies, positions, FAQ. */
.pe-ml,
.pe-po,
.pe-faq {
  padding: 0 var(--page-edge) var(--sp-xl);
}
.pe-ml-box,
.pe-po-box,
.pe-faq-box {
  max-width: calc(var(--tunnel) - 2 * var(--page-edge));
  margin: 0 auto;
  border-radius: var(--r-bloc);
  background: var(--c-beige);
}
/* Tête centrée (titre + texte) : maladies, innovation, étapes. */
.pe-head {
  max-width: 1020px;
  margin: 0 auto;
  text-align: center;
}
.pe-head-lead {
  margin-top: clamp(14px, 1.2vw, 22px) !important;
  font-size: var(--fs-lead);
  line-height: 1.35;
}
/* Coches turquoise (comme la fiche produit). */
.pe-checks {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pe-checks li {
  position: relative;
  padding-left: 1.5em;
}
.pe-checks li::before {
  content: '';
  position: absolute;
  top: 0.2em;
  left: 0;
  width: 1em;
  height: 1em;
  background-color: var(--c-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.6l3.6 3.6L14 3.8' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.6l3.6 3.6L14 3.8' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------------------------------------------------------------- Bandeau (groupe BANDEAU)
   Fil d'Ariane, puis carte beige (1872 px) : texte à gauche, photo de 874 × 677 à droite
   (34 px du haut, 40 de la droite, 56 du bas), tampon de 181 px sur son coin haut gauche. */
.pe-ban {
  padding: clamp(16px, 2.1vw, 40px) var(--page-edge) var(--sp-xl);
}
.pe-crumbs {
  max-width: calc(var(--tunnel) - 2 * var(--page-edge));
  margin: 0 auto clamp(14px, 1.5vw, 28px);
  padding: 0 clamp(8px, 3.2vw, 76px);
  font-size: calc(var(--fs-small) * 1.1); /* fil d'Ariane de la fiche produit (.pp-crumbs) */
  line-height: 1.7;
}
.pe-crumbs [aria-current] {
  font-weight: 600;
}
.pe-crumbs a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.pe-crumbs a:hover {
  color: var(--c-accent);
}
.pe-ban-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 874fr);
  grid-template-columns: minmax(0, 958fr) minmax(0, 874fr);
  align-items: center;
  gap: clamp(20px, 2vw, 40px);
  max-width: calc(var(--tunnel) - 2 * var(--page-edge));
  margin: 0 auto;
  padding: clamp(16px, 1.8vw, 34px) clamp(16px, 2.1vw, 40px) clamp(16px, 2.9vw, 56px) clamp(20px, 6.2vw, 119px);
  border-radius: var(--r-bloc);
  background: var(--c-beige);
}
.pe-ban-text {
  max-width: 780px;
}
.pe-ban-lead {
  margin-top: clamp(16px, 2.3vw, 45px) !important;
  font-size: var(--fs-lead);
  line-height: 1.4;
}
.pe-ban-avis {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin-top: clamp(16px, 2vw, 38px) !important;
  font-size: var(--fs-small);
  font-weight: 500;
}
.pe-ban-text .btn {
  margin-top: clamp(20px, 2.4vw, 46px);
}
/* Mise en garde (page chirurgie, 30/10) : texte réduit, filet rouge d'alerte (profil « opéré »). */
.pe-ban-alerte {
  max-width: 40em;
  margin-top: clamp(14px, 1.6vw, 30px);
  padding: 0.2em 0 0.2em 1em;
  border-left: 3px solid var(--c-alerte);
  font-size: var(--fs-small);
  line-height: 1.45;
}
.pe-ban-alerte p + p {
  margin-top: 0.35em !important;
}
.pe-ban-alerte .pe-ban-alerte-t {
  color: var(--c-alerte);
  font-weight: 700;
}
.pe-ban-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(20px, 2.4vw, 46px);
}
.pe-ban-text .pe-ban-btns .btn {
  margin-top: 0;
}
.pe-ban-media {
  container-type: inline-size; /* tampon « En cours de création » à la taille de la photo */
  position: relative;
  aspect-ratio: 874 / 677;
  overflow: hidden;
  border-radius: var(--r-card-lg);
  clip-path: inset(0 round var(--r-card-lg)); /* le tampon se retourne en 3D */
}
.pe .pe-ban-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--x, 50%) 50%;
}
.pe-ban-badge.badge-nuits,
.pe-ban-badge.home-nu-flip {
  position: absolute;
  top: 4.6%;
  left: 4.4%;
  width: clamp(84px, 9.4vw, 163px);
}
@media (max-width: 900px) {
  .pe-ban-card {
    grid-template-columns: minmax(0, 1fr);
    padding: clamp(12px, 2vw, 20px);
  }
  .pe-ban-media {
    grid-row: 1;
    aspect-ratio: 1.15;
  }
  .pe-ban-text {
    padding: 8px clamp(4px, 2vw, 20px) clamp(12px, 3vw, 24px);
  }
}

/* ---------------------------------------------------------------- Douleurs (groupe DOULEURS)
   Photo de 666 × 337 à gauche (moitié de la maquette, Antoine 02/11), qui reste à l'écran le long des causes ;
   titre et 3 causes de 872 px à droite (écart 100 px). */
.pe-dl {
  display: grid;
  grid-template-columns: minmax(0, 666fr) minmax(0, 872fr);
  column-gap: clamp(28px, 5.2vw, 100px);
  align-items: stretch;
}
/* Titre calé sur le haut de la photo, causes sur son bas (maquette). */
.pe-dl-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.pe-dl-media {
  position: sticky;
  top: calc(var(--hdr-bar-h, 60px) + var(--hdr-top, 20px) + 16px);
  align-self: start;
  height: clamp(225px, 26.33vw, 506px); /* ×1,5 (Antoine, 03/11) */
  overflow: hidden;
  border-radius: var(--r-card-lg);
}
.pe .pe-dl-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%; /* cadre deux fois moins haut : les visages sont dans le haut des photos */
}
.pe-dl-list {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 0.75vw, 14px);
  margin: clamp(24px, 4.2vw, 82px) 0 0;
  padding: 0;
  list-style: none;
}
.pe-dl-item {
  display: flex;
  align-items: center;
  gap: clamp(16px, 1.9vw, 36px);
  padding: clamp(16px, 1.4vw, 26px) clamp(16px, 2vw, 38px) clamp(16px, 1.4vw, 26px) clamp(16px, 1.8vw, 34px);
  border: 1.5px solid rgba(48, 49, 67, 0.12);
  border-radius: var(--r-card-lg);
  background: var(--c-white);
  font-size: clamp(13px, 11.6px + 0.36vw, 18px);
  font-weight: 500;
  line-height: 1.45;
}
.pe-dl-num {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: clamp(40px, 2.8vw, 54px);
  height: clamp(40px, 2.8vw, 54px);
  border-radius: 50%;
  background: var(--c-accent);
  color: var(--c-white);
  font-family: var(--f-italic);
  font-size: clamp(20px, 1.5vw, 28.8px);
  font-style: italic;
  font-weight: 600;
  line-height: 1;
}
.pe-dl-t {
  margin-bottom: 0.45em !important;
  color: var(--c-ink);
  font-size: clamp(15px, 12.8px + 0.46vw, 21.6px);
  font-weight: 700;
}
@media (max-width: 900px) {
  .pe-dl {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--sp-l);
  }
  .pe-dl-media {
    position: relative;
    top: auto;
    height: auto;
    aspect-ratio: 1.733; /* 2.6 / 1.5 : hauteur ×1,5 (Antoine, 03/11) */
  }
}

/* ---------------------------------------------------------------- Maladies (groupe MALADIES)
   Carte beige ; 4 cartes blanches de 441 × 438 (écart 22 px). */
.pe-ml-box {
  padding: clamp(36px, 4vw, 77px) clamp(12px, 1.56vw, 30px) clamp(36px, 5vw, 98px);
}
.pe-ml-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.15vw, 22px);
  margin: clamp(28px, 3.4vw, 66px) 0 0;
  padding: 0;
  list-style: none;
}
.pe-ml-card {
  padding: clamp(18px, 1.8vw, 34px) clamp(18px, 2vw, 40px) clamp(20px, 2vw, 40px);
  border-radius: var(--r-card-lg);
  background: var(--c-white);
  font-size: clamp(14px, 13.3px + 0.18vw, 16px);
  line-height: 1.45;
}
.pe-ml-top {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.1vw, 20px);
}
.pe .pe-ml-img {
  flex: 0 0 auto;
  width: clamp(64px, 4.8vw, 92px);
  height: clamp(64px, 4.8vw, 92px);
  border-radius: 50%;
  object-fit: cover;
}
.pe-ml-t {
  margin: 0;
  color: var(--c-ink);
  font-size: clamp(18px, 14.5px + 0.55vw, 24.9px);
  font-weight: 600;
  line-height: 1.12;
}
.pe-ml-hook {
  margin-top: clamp(14px, 1.2vw, 22px) !important;
  font-weight: 400;
}
.pe-ml-card .pe-checks {
  margin-top: clamp(14px, 1.3vw, 24px);
}
@media (max-width: 1199px) {
  .pe-ml-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .pe-ml-cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------------------------------------------------------------- Avis : emplacement de l'accueil. */
/* .pe-avis : pas de marge basse, .home-avis a déjà son padding (doublon vu le 22/10 quand le bloc maladies est masqué). */

/* ---------------------------------------------------------------- Innovation (groupe INNOVATION)
   Photo annotée de 959 × 811 (la photo de 1330 px y est décalée de 71 px à gauche et 73 px
   en haut) ; étiquettes placées en % de la photo d'après la maquette personae. Zone d'achat
   de 670 px à droite (écart 76 px). Sous 761 px : composition mobile de l'accueil. */
.pe-in-row {
  display: grid;
  grid-template-columns: minmax(0, 959fr) minmax(0, 700fr);
  column-gap: clamp(28px, 4vw, 76px);
  align-items: center;
  margin-top: clamp(28px, 5.4vw, 112px);
}
.pe-in .home-av-main {
  aspect-ratio: 959 / 811;
}
@media (min-width: 761px) {
  .pe-in .home-av-stage {
    top: -9%;
    left: -7.4%;
    width: 138.69%;
  }
  .pe-in .home-av-label {
    --x: 19.77%;
    --y: 16.9%;
  }
  .pe-in .home-av-label:nth-child(2) {
    --x: 47.1%;
    --y: 14.9%;
  }
  .pe-in .home-av-label:nth-child(3) {
    --x: 50.2%;
    --y: 78.7%;
  }
  .pe-in .home-av-label:nth-child(4) {
    --x: 8%; /* tissu : en bas à gauche, même ligne que les microbilles */
    --y: 78.7%;
  }
}
/* Étiquettes propres au bloc (is-own, landing de la nuit, 30/10) : la 3ᵉ (rotation) sous le coussin
   de l'avant-bras, à droite, avec son pointillé et son point ; en mobile elle passe donc à droite
   et la 4ᵉ (microbilles) à gauche, à l'inverse de l'accueil. */
.pe-in .pe-in-dot {
  fill: var(--c-white);
  stroke: none;
}
.pe-in .pe-head-lead a { /* source citée dans le texte (lien ameli, 30/10) */
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.pe-in .pe-head-lead a:hover {
  color: var(--c-accent);
}
@media (max-width: 760px) {
  .pe-in.is-own .home-av-label:nth-child(3) {
    left: auto;
    right: 34.1%;
  }
  .pe-in.is-own .home-av-label:nth-child(4) {
    left: 15.58%;
    right: auto;
  }
  .pe-in.is-own .home-av-label:nth-child(n+3) { /* même ligne : 8 px de chevauchement à 390 (mesuré le 02/11) */
    padding-right: 0.8em;
  }
}
/* Photo libre (is-libre, autre coussin que le Confort, 02/11) : photo entière dans son cadre, sans
   pointillés ; étiquettes aux quatre coins, dans l'ordre haut gauche, haut droite, bas droite, bas gauche. */
.pe-in.is-libre .home-av-stage {
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}
.pe-in.is-libre .tampon-creation {
  left: 38%; /* à côté du visage sur la photo allongée */
}
.pe-in.is-libre .home-av-label {
  top: 3%;
  right: auto;
  bottom: auto;
  left: 2.5%;
  font-size: clamp(11px, 1.75cqw, 18px);
}
.pe-in.is-libre .home-av-label:nth-child(2) {
  right: 2.5%;
  left: auto;
}
.pe-in.is-libre .home-av-label:nth-child(3) {
  top: auto;
  right: 2.5%;
  bottom: 3%;
  left: auto;
}
.pe-in.is-libre .home-av-label:nth-child(4) {
  top: auto;
  bottom: 3%;
}
/* Pointillés de la photo Relax allongée (is-relax, 02/11) : trait de même épaisseur à toutes les largeurs ;
   en mobile les étiquettes passent au-dessus et au-dessous de la photo, tous les points restent visibles. */
.pe-in.is-relax .home-av-lines {
  overflow: visible;
}
.pe-in.is-relax .home-av-lines line {
  vector-effect: non-scaling-stroke;
}
@media (min-width: 1001px) and (max-width: 1199px) { /* photo étroite, à côté de l'achat : l'étiquette du bas cachait le coude */
  .pe-in.is-relax .home-av-label {
    gap: 0.5em;
    padding: 0.5em 0.8em 0.5em 0.6em;
  }
  .pe-in.is-relax .home-av-ico {
    width: 3em;
    height: 3em;
  }
}
@media (max-width: 760px) {
  .pe-in.is-libre .home-av-main {
    aspect-ratio: 1 / 1;
  }
  /* Deux étiquettes par ligne : elles se partagent la largeur, le texte passe à la ligne de lui-même. */
  .pe-in.is-libre .home-av-label {
    top: 1.5%;
    left: 1.5%;
    gap: 0.45em;
    max-width: 47.5%;
    padding: 0.5em 0.6em;
    font-size: 11px;
    white-space: normal;
  }
  .pe-in.is-libre .home-av-label:nth-child(2) {
    right: 1.5%;
    left: auto;
  }
  .pe-in.is-libre .home-av-label:nth-child(3) {
    top: auto;
    right: 1.5%;
    bottom: 1.5%;
    left: auto;
  }
  .pe-in.is-libre .home-av-label:nth-child(4) {
    top: auto;
    right: auto;
    bottom: 1.5%;
    left: 1.5%;
  }
  .pe-in.is-relax .home-av-main {
    aspect-ratio: auto;
    padding-block: clamp(64px, calc(130px - 8.5vw), 110px) clamp(64px, calc(116px - 7.5vw), 96px);
  }
  .pe-in.is-relax .home-av-stage {
    position: relative;
    inset: auto;
    height: auto;
    aspect-ratio: 1 / 1;
  }
  .pe-in.is-relax .home-av-label {
    background: var(--c-white);
  }
  .pe-in.is-relax .home-av-label:nth-child(-n+2) {
    top: auto;
    bottom: calc(100% + 8px);
  }
  .pe-in.is-relax .home-av-label:nth-child(n+3) {
    top: calc(100% + 8px);
    bottom: auto;
  }
  .pe-in.is-libre .home-av-label br {
    display: none;
  }
  .pe-in.is-libre .home-av-ico {
    flex: none;
    width: 2.2em;
    height: 2.2em;
  }
  .pe-in.is-libre .tampon-creation {
    left: 50%;
    font-size: 14px;
  }
}
.pe-buy {
  font-size: var(--fs-text);
  font-weight: 500;
  line-height: 1.45;
}
.pe-buy-title {
  margin: 0;
  color: var(--c-black);
  font-size: clamp(26px, 23px + 0.85vw, 41.9px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.005em;
}
.pe-buy-title i {
  display: block;
  font-family: var(--f-italic);
  font-weight: 300;
  letter-spacing: 0;
}
.pe-buy-note {
  max-width: 34em;
  margin-top: clamp(8px, 0.8vw, 14px) !important;
  color: var(--c-ink-soft);
  font-size: var(--fs-small);
  line-height: 1.4;
}
.pe-buy-rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em;
  margin-top: clamp(12px, 1.1vw, 20px) !important;
  font-size: var(--fs-text);
}
.pe-buy-rating strong {
  font-weight: 700;
}
.pe-buy-rating a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.pe-buy-rating a:hover {
  color: var(--c-accent);
}
.pe-buy-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3em 1em;
  margin-top: clamp(14px, 1.3vw, 26px);
}
.pe-buy-amount {
  color: var(--c-black);
  font-size: clamp(30px, 26px + 1vw, 44.4px);
  font-weight: 800;
  line-height: 1;
}
.pe-buy-eco,
.pe-buy-eco p {
  margin: 0;
  color: rgba(48, 49, 67, 0.7);
}
.pe-buy-lead {
  margin-top: clamp(16px, 1.7vw, 34px) !important;
}
.pe-buy-checks {
  display: grid;
  gap: 0.6em;
  margin-top: clamp(14px, 1.2vw, 24px);
}
.pe-buy-form {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(10px, 0.9vw, 16px);
  margin-top: clamp(20px, 2vw, 40px);
}
.pe-qty {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  width: clamp(110px, 7.6vw, 155px);
  min-height: calc(var(--btn-h) * 1.25);
  padding: 0 0.4em;
  border: 2px solid rgba(48, 49, 67, 0.15);
  border-radius: var(--r-card);
}
.pe-qty-btn {
  width: 1.8em;
  height: 1.8em;
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.pe .pe-qty-input {
  width: 2.2em;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-ink);
  font-family: var(--f-base);
  font-size: var(--fs-text);
  font-weight: 700;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}
.pe .pe-qty-input::-webkit-outer-spin-button,
.pe .pe-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.pe-buy-btn.btn {
  flex: 0 1 auto;
  min-width: clamp(190px, 15vw, 290px);
  white-space: nowrap;
  min-height: calc(var(--btn-h) * 1.25);
  border-radius: var(--r-card);
  font-size: clamp(15px, 13.5px + 0.4vw, 21.6px);
  font-weight: 700;
}
.pe-buy-soon {
  margin-top: clamp(20px, 2vw, 40px) !important;
  margin-bottom: 0.7em !important; /* au-dessus du bouton « Découvrir » */
  font-weight: 700;
}
.pe-buy-pay {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  max-width: 560px;
  margin-top: clamp(16px, 1.6vw, 30px);
}
.pe-buy-pay img {
  width: auto;
  height: clamp(22px, 1.6vw, 31px);
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(48, 49, 67, 0.12);
}
.pe-buy-mention {
  margin-left: clamp(8px, 1.2vw, 24px);
  padding: 0.25em 1.2em;
  border: 1px solid var(--c-ink);
  border-radius: 6px;
  font-size: var(--fs-small);
  font-weight: 500;
  white-space: nowrap;
}
.pe-buy-ship {
  max-width: 30em;
  margin-top: clamp(16px, 1.5vw, 28px) !important;
}
@media (max-width: 999px) {
  .pe-in-row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--sp-l);
  }
}
@media (max-width: 760px) {
  .pe-in {
    padding-inline: 0;
  }
  .pe-in .pe-head,
  .pe-buy {
    padding-inline: 16px;
  }
  .pe-in .home-av-main {
    aspect-ratio: 747 / 864;
    margin-inline: var(--page-edge);
  }
}

/* ---------------------------------------------------------------- Réassurance (groupe REASSURANCE)
   Bande de l'accueil, éléments resserrés au centre (maquette : 239 → 1593 px). */
.pe-reass {
  margin-bottom: var(--sp-xl);
}
.pe-reass:not(.is-scrolling) .home-reass-track {
  justify-content: center;
  gap: clamp(20px, 2.1vw, 40px);
}
.pe-reass .home-reass-track img {
  width: 1.4em;
  height: 1.4em;
}

/* ---------------------------------------------------------------- Positions (groupe POSITIONS)
   Carte beige ; à gauche titre, texte, photo de 276 px ; rail de cartes de 535 × 640 qui
   part à 592 px et se coupe au bord de la carte. */
.pe-po-box {
  display: grid;
  grid-template-columns: minmax(220px, 448fr) minmax(0, 1303fr);
  column-gap: clamp(20px, 2.1vw, 40px);
  overflow: hidden;
  padding: clamp(24px, 3.4vw, 64px) 0 clamp(28px, 4.1vw, 78px) clamp(16px, 6.3vw, 121px);
}
.pe-po-side {
  display: flex;
  flex-direction: column;
  padding-top: clamp(0px, 1.7vw, 32px);
}
.pe-po-text {
  max-width: 21em;
  margin-top: clamp(14px, 1.6vw, 30px) !important;
  font-size: var(--fs-lead);
  line-height: 1.32;
}
.pe .pe-po-img {
  display: block;
  width: clamp(140px, 13vw, 249px);
  height: auto;
  aspect-ratio: 1;
  margin-top: clamp(20px, 2.6vw, 50px);
  object-fit: cover;
  border-radius: var(--r-card-lg);
}
.pe .pe-po-img > img { /* photo tamponnée : le cadre porte les cotes */
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.pe .pe-po-vid {
  position: relative;
  overflow: hidden;
}
.pe-po-vid video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pe-po-vid .home-av-pause:not([hidden]) { /* home.css la centre en mobile tant que la vidéo n’a pas démarré ; ici elle joue d’elle-même */
  display: block;
  right: 8px;
  bottom: 8px;
  width: 28px;
  height: 28px;
}
.pe-po-rail {
  --rail-pad: 0px;
  min-width: 0;
}
.pe-po-rail .rail-nav {
  padding-right: clamp(16px, 2vw, 40px);
}
.pe-po-track {
  padding-right: clamp(16px, 2vw, 40px);
}
.pe-po-card {
  flex: 0 0 clamp(250px, 25vw, 482px);
  overflow: hidden;
  border-radius: var(--r-card-lg);
  background: var(--c-white);
}
.pe .pe-po-cimg {
  display: block;
  width: 100%;
  aspect-ratio: 535 / 418;
  height: auto;
  object-fit: cover;
}
.pe-po-body {
  padding: clamp(16px, 1.6vw, 32px) clamp(16px, 1.7vw, 33px) clamp(20px, 2vw, 40px);
  font-size: clamp(14px, 13.2px + 0.2vw, 17.7px);
  font-weight: 500;
  line-height: 1.45;
}
.pe-po-t {
  margin: 0 0 0.6em;
  color: var(--c-ink);
  font-size: clamp(17px, 15.6px + 0.36vw, 24.8px);
  font-weight: 700;
  line-height: 1.2;
}
@media (max-width: 900px) {
  .pe-po-box {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--sp-l);
    padding-left: 0;
  }
  .pe-po-side {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 16px;
    padding: 0 16px;
  }
  .pe-po-side .title,
  .pe-po-text {
    grid-column: 1;
  }
  .pe .pe-po-img {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    margin: 0;
    width: clamp(96px, 22vw, 160px);
  }
  .pe-po-rail {
    --rail-pad: 16px;
  }
  .pe-po-track {
    padding-right: 16px;
  }
}

/* ---------------------------------------------------------------- Comparatif et 30 nuits :
   composants de l'accueil (comparatif.css, home.css). 30 nuits à un seul coussin : la
   pastille reste affichée (nom et prix) mais ne se clique pas. */
.home-nu.is-single .home-nu-pick {
  pointer-events: none;
}
/* Photo et titre propres au bloc (landings du 02/11) : voile sous le titre blanc, photo claire de bord à bord ;
   titre long plus petit, la suite en italique sur sa ligne. */
.pe-nu.has-own-photo .home-nu-media {
  position: relative;
}
.pe-nu.has-own-photo .home-nu-media::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 62%;
  background: linear-gradient(rgb(35 34 35 / 0.6), rgb(35 34 35 / 0));
  pointer-events: none;
}
.pe-nu.is-titre-long .home-nu-title.display > * {
  font-size: clamp(24px, 19px + 1.2vw, 44px);
}
.pe-nu.is-titre-long .home-nu-title.display > * > i {
  display: block;
}
.pe-nu .home-nu-btn.btn {
  gap: 0.3em; /* le nom du coussin suit le verbe comme un mot */
  width: auto;
  min-width: clamp(236px, 16vw, 300px);
}

/* ---------------------------------------------------------------- Conseils (page chirurgie, 30/10)
   Une étape du parcours : tête (titre + idée directrice), constat, photo facultative, trois cartes
   (conseils, nuit, journée). Deux dispositions à présenter à la graphiste (parts/personae/conseils.php) :
   A photo à gauche + cartes blanches dessous ; B carte beige, cartes empilées à droite. */
.pe-cs {
  max-width: 1660px;
  margin: 0 auto;
  padding: 0 var(--side) var(--sp-xl);
}
.pe-cs-box {
  display: grid;
  column-gap: clamp(28px, 4.2vw, 80px);
  row-gap: clamp(18px, 2vw, 38px);
}
.pe-cs-head {
  grid-area: head;
}
.pe-cs-media {
  grid-area: media;
}
.pe-cs-constat {
  grid-area: constat;
}
.pe-cs-cards {
  grid-area: cards;
  display: grid;
  gap: clamp(12px, 1.2vw, 22px);
}
.pe-cs-intro {
  max-width: 44em;
  margin-top: clamp(12px, 1.2vw, 22px) !important;
  font-size: var(--fs-lead);
  line-height: 1.4;
}
.pe-cs-intro + .pe-cs-intro {
  margin-top: 0.5em !important;
}
.pe-cs-k {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin-bottom: 0.8em !important;
  color: var(--c-ink);
  font-size: clamp(15px, 12.8px + 0.46vw, 21.6px);
  font-weight: 700;
  line-height: 1.2;
}
.pe-cs-constat .pe-cs-k,
.pe-cs-tag { /* « Le constat », « Ce que Shooldy peut vous apporter » (Antoine, 30/10) */
  margin-bottom: 0.4em !important;
  color: var(--c-accent);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
}
.pe-cs-quote {
  color: var(--c-ink);
  font-family: var(--f-italic);
  font-size: clamp(22px, 17px + 1.1vw, 38px);
  font-weight: 300;
  line-height: 1.2;
}
.pe-cs-ico {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2.1em;
  height: 2.1em;
  border-radius: 50%;
  background: var(--c-accent);
  color: var(--c-white);
}
.pe-cs-ico svg {
  width: 58%;
  height: 58%;
}
.pe-cs-card {
  padding: clamp(18px, 1.8vw, 34px);
  border-radius: var(--r-card-lg);
  font-size: var(--fs-text);
  line-height: 1.45;
}
.pe-cs-apport {
  margin-bottom: 0.8em !important;
  font-weight: 600;
}
.pe-cs-list {
  gap: 0.6em;
}
.pe-cs-media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-card-lg);
}
.pe-cs-media > .pe-cs-img,
.pe-cs-media > .pe-cs-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.pe .pe-cs-img {
  display: block;
  object-fit: cover;
}
.pe-cs-frame > .pe-cs-img {
  width: 100%;
  height: 100%;
}

/* Onglets (conseils-onglets.php) : barre de pastilles numérotées centrée au-dessus des panneaux ; avec
   JavaScript (is-js), seul le panneau actif s'affiche ; sans, les blocs restent empilés. */
.pe-cs-tablist {
  display: flex;
  justify-content: center;
  gap: clamp(8px, 1vw, 16px);
  max-width: 1660px;
  margin: 0 auto clamp(24px, 2.6vw, 50px);
  padding: 0 var(--side);
}
.pe-cs-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.55em 1.4em 0.55em 0.6em;
  border: 1.5px solid rgba(48, 49, 67, 0.12);
  border-radius: 999px;
  background: var(--c-beige);
  color: var(--c-ink);
  font: inherit;
  font-size: var(--fs-text);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.pe-cs-tab:hover {
  border-color: var(--c-accent);
}
.pe-cs-tab:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
}
.pe-cs-tab[aria-selected="true"],
.pe-cs-tab[aria-current="step"] {
  border-color: var(--c-accent);
  background: var(--c-accent);
  color: var(--c-white);
}
.pe-cs-tabnum {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  background: var(--c-white);
  color: var(--c-accent);
  font-weight: 700;
}
.pe-cs-tabs.is-js > .pe-cs:not(.is-active) {
  display: none;
}
.pe-cs-tabs {
  scroll-margin-top: 150px; /* la barre du bas remonte à celle du haut, sous l'en-tête fixe */
}
/* Rappel des étapes sous le panneau (client, 04/11), à la place du lien « Étape suivante ». */
.pe-cs-tablist.is-bas {
  margin: clamp(24px, 2.6vw, 50px) auto var(--sp-xl);
}
.pe-cs-tabs.is-js > .pe-cs {
  padding-bottom: 0; /* l'espace de fin de bloc passe sous la barre du bas */
}
.pe-cs-tabs:not(.is-js) .pe-cs-tablist.is-bas {
  display: none;
}
/* Idée directrice en mise en garde (case `intro_alerte`) : filet rouge et intitulé du bandeau. */
.pe-cs-garde {
  max-width: 44em;
  margin-top: clamp(12px, 1.2vw, 22px);
  padding: 0.2em 0 0.2em 1em;
  border-left: 3px solid var(--c-alerte);
}
.pe-cs-garde .pe-cs-garde-t {
  color: var(--c-alerte);
  font-weight: 700;
}
.pe-cs-garde .pe-cs-garde-t + .pe-cs-intro {
  margin-top: 0.35em !important;
}
.pe-cs-list li.is-alerte {
  color: var(--c-alerte);
  font-weight: 600;
}
.pe-cs-tabs .pe-cs:focus-visible {
  outline: none;
}
@media (max-width: 760px) {
  .pe-cs-tablist {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 0 16px;
  }
  .pe-cs-tab {
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.4em;
    padding: 0.7em 0.4em;
    border-radius: var(--r-card);
    font-size: var(--fs-small);
    text-align: center;
  }
}

/* A — photo à gauche sur toute la hauteur de la tête et du constat, cartes blanches dessous. */
.pe-cs--a .pe-cs-box {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas: "media head" "media constat" "cards cards";
}
.pe-cs--a.is-nophoto .pe-cs-box {
  grid-template-areas: "head head" "constat constat" "cards cards";
}
.pe-cs--a .pe-cs-head {
  align-self: end;
}
.pe-cs--a .pe-cs-media {
  min-height: clamp(280px, 24vw, 460px);
}
.pe-cs--a .pe-cs-constat {
  align-self: start;
  padding: clamp(16px, 1.6vw, 30px) clamp(18px, 2vw, 38px);
  border-radius: var(--r-card-lg);
  background: var(--c-beige);
}
.pe-cs--a .pe-cs-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.pe-cs--a .pe-cs-card {
  border: 1.5px solid rgba(48, 49, 67, 0.12);
  background: var(--c-white);
}

/* B — carte beige : tête, constat et photo à gauche ; cartes blanches empilées à droite. */
.pe-cs--b {
  max-width: none;
  padding: 0 var(--page-edge) var(--sp-xl);
}
.pe-cs--b .pe-cs-box {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-rows: auto auto 1fr;
  grid-template-areas: "head cards" "constat cards" "media cards";
  max-width: calc(var(--tunnel) - 2 * var(--page-edge));
  margin: 0 auto;
  padding: clamp(24px, 3.4vw, 64px) clamp(16px, 4vw, 80px) clamp(28px, 4.1vw, 78px) clamp(16px, 6.3vw, 121px);
  border-radius: var(--r-bloc);
  background: var(--c-beige);
}
.pe-cs--b .pe-cs-constat {
  padding-left: 1em;
  border-left: 3px solid var(--c-accent);
}
.pe-cs--b .pe-cs-media {
  align-self: start;
  aspect-ratio: 4 / 3;
}
.pe-cs--b .pe-cs-cards {
  align-content: start;
}
.pe-cs--b .pe-cs-card {
  background: var(--c-white);
}

@media (max-width: 900px) {
  .pe-cs--a .pe-cs-box,
  .pe-cs--b .pe-cs-box {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "head" "media" "constat" "cards";
  }
  .pe-cs.is-nophoto .pe-cs-box {
    grid-template-areas: "head" "constat" "cards";
  }
  .pe-cs--a .pe-cs-media,
  .pe-cs--b .pe-cs-media {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
  .pe-cs--a .pe-cs-cards {
    grid-template-columns: minmax(0, 1fr);
  }
  .pe-cs--b .pe-cs-box {
    padding: clamp(20px, 5vw, 32px) 16px;
  }
}

/* ---------------------------------------------------------------- Étapes (groupe ETAPES)
   4 étapes centrées sur 405 px ; rond de 312 px, pastille de 137 × 51 qui en chevauche le
   bas, pointillé turquoise d'un rond à l'autre ; étiquette « le bon réflexe » penchée. */
.pe-et-list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
  --et-gx: clamp(16px, 1.9vw, 36px);
  gap: var(--et-gx);
  max-width: 1460px;
  margin: clamp(32px, 4.3vw, 82px) auto 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
/* Pointillé : un segment par étape, d'un rond au suivant, sans passer sur les ronds. */
@media (min-width: 1000px) {
  .pe-et-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: calc(var(--et-d) / 2 - 1px);
    left: calc(50% + var(--et-d) / 2 + 10px);
    width: calc(100% + var(--et-gx) - var(--et-d) - 20px);
    border-top: 2px dashed var(--c-accent);
    opacity: 0.6;
  }
}
.pe-et-list {
  --et-d: clamp(150px, 14.6vw, 281px);
}
.pe-et-step {
  position: relative;
  text-align: center;
}
.pe-et-media {
  position: relative;
  width: var(--et-d);
  height: var(--et-d);
  margin: 0 auto;
}
.pe .pe-et-img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--c-beige);
  object-fit: cover;
}
.pe-et-pill {
  position: absolute;
  left: 50%;
  bottom: calc(var(--et-d) * -0.05);
  transform: translateX(-50%);
  padding: 0.55em 1.4em;
  border-radius: var(--r-pill);
  background: var(--c-accent);
  color: var(--c-white);
  font-size: clamp(13px, 12px + 0.3vw, 18px);
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
}
.pe-et-tag {
  position: absolute;
  top: 9%;
  left: -7%;
  padding: 0.75em 1.5em;
  border: 1.5px solid var(--c-ink);
  border-radius: var(--r-pill);
  background: var(--c-white);
  color: var(--c-ink);
  font-size: clamp(11px, 10.5px + 0.34vw, 17px);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  transform: rotate(-20deg);
  transform-origin: 0 100%;
}
.pe-et-t {
  max-width: 11em;
  margin: clamp(22px, 2.2vw, 42px) auto 0;
  color: var(--c-ink);
  font-size: clamp(17px, 15.6px + 0.36vw, 25.2px);
  font-weight: 700;
  line-height: 1.2;
}
.pe-et-text {
  max-width: 15em;
  margin: 0.7em auto 0 !important;
  font-size: var(--fs-text);
  line-height: 1.4;
}
@media (max-width: 999px) {
  .pe-et-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--sp-l);
  }
}
@media (max-width: 500px) {
  .pe-et-list {
    --et-d: 132px;
    column-gap: 12px;
  }
  .pe-et-tag {
    left: -14%;
    font-size: 10px;
  }
  .pe-et-pill {
    font-size: 12px;
  }
  .pe-et-t {
    font-size: 16px;
  }
  .pe-et-text {
    font-size: 13px;
  }
}

/* Pointillé tracé à l'apparition de la frise (personae.js pose data-anim puis .is-in ;
   sans JS ou sous prefers-reduced-motion, il reste affiché d'emblée). */
.pe-et-list[data-anim] {
  --et-pas: 0.9s; /* écart entre deux étapes */
}
.pe-et-list[data-anim] .pe-et-step {
  opacity: 0;
  transform: translateY(24px);
}
/* Transitions posées à l'apparition seulement : l'état caché s'applique sans délai. */
.pe-et-list[data-anim].is-in .pe-et-step {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s ease-out, transform 0.9s ease-out;
  transition-delay: calc(var(--i, 0) * var(--et-pas));
}
/* Desktop : chaque segment se trace une fois son étape affichée, avant l'étape suivante. */
.pe-et-list[data-anim] .pe-et-step::after {
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.pe-et-list[data-anim].is-in .pe-et-step::after {
  transform: none;
  transition: transform calc(var(--et-pas) * 0.6) linear calc(var(--i, 0) * var(--et-pas) + var(--et-pas) * 0.4);
}

/* Mobile : frise verticale. Pointillé à gauche qui relie les pastilles ; photo, titre et
   texte à droite de chaque étape. */
@media (max-width: 760px) {
  .pe-et {
    padding-top: var(--sp-l);
  }
  .pe-et-list {
    --et-d: 112px;
    --et-col: 92px;
    --et-gap: 28px;
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--et-gap);
  }
  .pe-et-list::before {
    display: none;
  }
  .pe-et-step {
    display: grid;
    grid-template-columns: var(--et-col) minmax(0, 1fr);
    grid-template-areas: "pill media" "pill t" "pill x";
    grid-template-rows: auto auto 1fr;
    column-gap: 14px;
    text-align: left;
  }
  .pe-et-media {
    display: contents;
  }
  .pe .pe-et-img {
    grid-area: media;
    width: var(--et-d);
    height: var(--et-d);
  }
  .pe-et-pill {
    grid-area: pill;
    position: relative;
    z-index: 1;
    left: auto;
    bottom: auto;
    align-self: start;
    justify-self: center;
    margin-top: calc(var(--et-d) / 2 - 1em);
    padding: 0.55em 0.8em;
    transform: none;
    font-size: 11px;
    text-align: center;
    white-space: normal;
  }
  .pe-et-tag {
    top: 2px;
    left: calc(var(--et-col) + 14px + var(--et-d) * 0.55);
    font-size: 10px;
    transform: rotate(-12deg);
  }
  .pe-et-t {
    grid-area: t;
    max-width: none;
    margin: 0.7em 0 0;
    font-size: 17px;
  }
  .pe-et-text {
    grid-area: x;
    max-width: none;
    margin: 0.4em 0 0 !important;
    font-size: 14px;
  }
  /* Un segment par étape, du bas de sa pastille au haut de la suivante (pastille d'environ
     25 px centrée sur le rond). */
  .pe-et-step:not(:last-child)::before {
    content: '';
    position: absolute;
    top: calc(var(--et-d) / 2 + 18px);
    bottom: calc(-1 * var(--et-gap) - var(--et-d) / 2 + 18px);
    left: calc(var(--et-col) / 2 - 1px);
    border-left: 2px dashed var(--c-accent);
    opacity: 0.6;
  }
  /* La frise dépasse l'écran : chaque étape apparaît à sa propre entrée à l'écran
     (.is-in posé sur l'étape), puis trace le segment qui mène à la suivante. */
  .pe-et-list[data-anim] .pe-et-step,
  .pe-et-list[data-anim].is-in .pe-et-step:not(.is-in) {
    opacity: 0;
    transform: translateY(24px);
    transition: none;
  }
  .pe-et-list[data-anim] .pe-et-step.is-in {
    opacity: 1;
    transform: none;
    transition: opacity 0.9s ease-out, transform 0.9s ease-out;
  }
  .pe-et-list[data-anim] .pe-et-step::before {
    transform: scaleY(0);
    transform-origin: 50% 0;
  }
  .pe-et-list[data-anim] .pe-et-step.is-in::before {
    transform: none;
    transition: transform 0.9s linear 0.6s;
  }
}

/* ---------------------------------------------------------------- FAQ (groupe FAQ)
   Carte beige, titre centré, questions de 1307 px en cartes blanches de 89 px. */
.pe-faq-box {
  padding: clamp(32px, 3.2vw, 61px) var(--side) clamp(40px, 6vw, 115px);
  text-align: center;
}
.pe-faq-list {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 0.4vw, 7px);
  max-width: 1176px;
  margin: clamp(24px, 3.3vw, 64px) auto 0;
  text-align: left;
}
.pe-faq-item {
  border-radius: clamp(12px, 1vw, 18px);
  background: var(--c-white);
}
.pe-faq-item summary {
  position: relative;
  display: block;
  padding: clamp(16px, 1.45vw, 28px) clamp(48px, 4.5vw, 86px) clamp(16px, 1.45vw, 28px) clamp(18px, 3.1vw, 60px);
  color: var(--c-ink);
  font-size: clamp(15px, 13.6px + 0.36vw, 21.6px);
  font-weight: 700;
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
}
.pe-faq-item summary::-webkit-details-marker {
  display: none;
}
.pe-faq-item summary::after {
  content: '+';
  position: absolute;
  top: 50%;
  right: clamp(18px, 1.9vw, 36px);
  color: var(--c-accent);
  font-size: 1.4em;
  font-weight: 700;
  line-height: 1;
  transform: translateY(-50%);
  transition: transform 0.2s;
}
.pe-faq-item[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}
.pe-faq-item summary:hover {
  color: var(--c-accent);
}
.pe-faq-item summary:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: inherit;
}
.pe-faq-body {
  padding: 0 clamp(18px, 4.5vw, 86px) clamp(18px, 1.6vw, 30px) clamp(18px, 3.1vw, 60px);
  font-size: var(--fs-text);
  line-height: 1.5;
}
.pe-faq-body > :first-child {
  margin-top: 0;
}
.pe-faq-body > :last-child {
  margin-bottom: 0;
}
@media (max-width: 760px) {
  .pe-faq-box {
    padding-inline: 12px;
  }
}