/* PPE Print, by MPS : le jaune haute visibilité, le gris argent des bandes, le noir du marquage. */
.ppe { --fluo: #dceb1e; --fluo-fonce: #b8c414; --argent: #c9cdd2; }
.ppe h2 { margin: 0; font-family: var(--font-titre); font-weight: 700; font-size: clamp(34px, 3.6vw, 48px); line-height: 1.08; letter-spacing: -0.01em; text-wrap: balance; }
.ppe .intro { margin: 18px 0 0; max-width: 36em; font-size: 18px; line-height: 28px; }
.ppe-section { max-width: 1440px; margin: 0 auto; padding: var(--espace-9) max(var(--espace-7), env(safe-area-inset-right, 0px)) var(--espace-9) max(var(--espace-7), env(safe-area-inset-left, 0px)); border-top: 1px solid var(--filet); }

/* Composant 1 : le héros. À droite, le tissu du gilet ; à gauche, le texte. Une bande réfléchissante sépare les deux. */
.ppe-heros { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); min-height: clamp(600px, calc(100vh - 84px), 860px); }
.ppe-heros__texte { align-self: center; padding: var(--espace-6) var(--espace-7) var(--espace-8) max(var(--espace-7), env(safe-area-inset-left, 0px)); max-width: 680px; justify-self: end; width: 100%; }
.ppe-heros h1 { margin: 0; font-family: var(--font-titre); font-weight: 700; font-size: clamp(40px, 4.4vw, 66px); line-height: 1.04; letter-spacing: -0.012em; text-wrap: balance; }
.ppe-heros h1 em { font-style: normal; background: linear-gradient(transparent 58%, var(--fluo) 58% 92%, transparent 92%); }
.ppe-heros .chapo { margin: 24px 0 0; font-size: 19px; line-height: 29px; }
.ppe-heros__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; margin-top: 34px; }
.ppe-heros__scene { position: relative; background: #1a1b16; overflow: hidden; }
.ppe-heros__scene::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 18px; z-index: 1;
  background: linear-gradient(90deg, #9ea3a8, #f4f6f8 45%, #8c9196); box-shadow: 2px 0 8px rgba(0, 0, 0, 0.35); }
.ppe-heros__scene canvas, .ppe-heros__repli { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.ppe-heros__scene.a-3d .ppe-heros__repli { display: none; }
/* Téléphone : le tissu 3D, monté après l'affichage de la page, remplace la photo en fondu (ppe.js). */
.ppe-heros__scene.fondu canvas { opacity: 0; transition: opacity 0.6s ease; }
.ppe-heros__scene.fondu.a-3d canvas { opacity: 1; }
.ppe-heros__scene.fondu.a-3d .ppe-heros__repli { display: block; }

/* Composant 2 : où placer le marquage. Le dessin technique du gilet, devant et dos ; on choisit l'emplacement. */
.placement { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--espace-8); align-items: center; }
.placement__choix { display: grid; gap: 10px; margin: 30px 0 0; padding: 0; list-style: none; }
.placement__choix button { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 14px; align-items: start; width: 100%; padding: 14px 16px; border: 1px solid var(--filet); background: var(--fond-releve); font: inherit; text-align: left; cursor: pointer; color: var(--texte); }
.placement__choix button b { display: block; font-family: var(--font-titre); font-size: 17px; line-height: 22px; }
.placement__choix button span { display: block; margin-top: 3px; font-size: 14.5px; line-height: 21px; color: var(--texte-doux); }
.placement__choix button i { width: 18px; height: 18px; margin-top: 2px; border: 1.6px solid var(--texte); }
.placement__choix button[aria-pressed="true"] { border-color: var(--texte); box-shadow: inset 4px 0 0 var(--fluo-fonce); }
.placement__choix button[aria-pressed="true"] i { background: var(--fluo); box-shadow: inset 0 0 0 3px var(--fond-releve); }
.placement__dessin { margin: 0; padding: 24px; background-color: var(--fond-releve); border: 1px solid var(--filet);
  background-image: linear-gradient(rgba(10, 10, 11, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(10, 10, 11, 0.045) 1px, transparent 1px); background-size: 20px 20px; }
.placement__dessin svg { display: block; width: 100%; height: auto; }
.placement__dessin figcaption { display: flex; justify-content: space-around; margin-top: 8px; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texte-doux); }
.gilet { fill: var(--fluo); stroke: #2a2b2f; stroke-width: 2; stroke-linejoin: round; }
.gilet-bande { fill: var(--argent); }
.gilet-trait { fill: none; stroke: #2a2b2f; stroke-width: 1.4; }
.gilet-couture { fill: none; stroke: #2a2b2f; stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.55; }
.zone rect { fill: none; stroke: #2a2b2f; stroke-width: 1.2; stroke-dasharray: 4 3; opacity: 0.45; transition: opacity 0.3s; }
.zone text { font: 700 11px var(--font-titre); fill: #121318; letter-spacing: 0.5px; opacity: 0; transition: opacity 0.35s; }
.zone .cote { font: 500 9.5px var(--font-texte); fill: #55575d; letter-spacing: 0; }
.zone.active rect { opacity: 1; stroke-dasharray: none; fill: rgba(18, 19, 24, 0.07); }
.zone.active text { opacity: 1; }

/* Composant 3 : ce que nous marquons, sur des étiquettes tissées de vêtement, avec leur couture et leur pli. */
.tissees { margin: var(--espace-7) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.tissee { position: relative; padding: 30px 28px 28px 52px; color: #f4f3ee; transform: rotate(var(--r, 0deg));
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.12) 0 1px, transparent 1px 3px), var(--fond-tissu, #1d2230);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 14px 26px -16px rgba(0, 0, 0, 0.55); }
.tissee::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 26px; background: rgba(0, 0, 0, 0.28); box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.12); }
.tissee::after { content: ""; position: absolute; inset: 9px 9px 9px 35px; border: 1.5px dashed rgba(255, 255, 255, 0.4); pointer-events: none; }
.tissee h3 { margin: 0; font-family: var(--font-titre); font-weight: 700; font-size: 22px; line-height: 27px; letter-spacing: 0.02em; }
.tissee p { margin: 10px 0 0; font-size: 15.5px; line-height: 23px; color: rgba(244, 243, 238, 0.86); }

/* Composant 4 : les questions. Une petite bande réfléchissante s'allume quand la question est ouverte. */
.ppe-faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--espace-8); align-items: start; }
.ppe-faq ol { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--texte); }
.ppe-faq li { border-bottom: 1px solid var(--filet); }
.ppe-faq summary { display: grid; grid-template-columns: minmax(0, 1fr) 20px; gap: 18px; align-items: center; padding: 20px 4px; cursor: pointer; list-style: none; font-family: var(--font-titre); font-weight: 700; font-size: 19px; line-height: 25px; }
.ppe-faq summary::-webkit-details-marker { display: none; }
.ppe-faq summary i { width: 20px; height: 12px; background: linear-gradient(var(--fluo) 0 28%, var(--argent) 28% 40%, #f6f8fa 40% 60%, var(--argent) 60% 72%, var(--fluo) 72%); opacity: 0.35; transition: opacity 0.3s; }
.ppe-faq details[open] summary i { opacity: 1; }
.ppe-faq .reponse p { margin: 0; padding: 0 44px 22px 4px; max-width: 44em; font-size: 16.5px; line-height: 26px; color: #2a2b2f; }

@media (max-width: 1000px) {
  .ppe-section { padding: var(--espace-8) max(var(--espace-4), env(safe-area-inset-right, 0px)) var(--espace-8) max(var(--espace-4), env(safe-area-inset-left, 0px)); }
  .ppe-heros { grid-template-columns: 1fr; min-height: 0; }
  .ppe-heros__scene { order: -1; height: 58vw; }
  .ppe-heros__scene::before { left: 0; right: 0; top: auto; bottom: 0; width: auto; height: 12px; background: linear-gradient(#9ea3a8, #f4f6f8 45%, #8c9196); }
  .ppe-heros__texte { padding: var(--espace-5) max(var(--espace-4), env(safe-area-inset-right, 0px)) var(--espace-8) max(var(--espace-4), env(safe-area-inset-left, 0px)); justify-self: stretch; }
  .ppe-heros .chapo { font-size: 17px; line-height: 26px; }
  .placement, .ppe-faq { grid-template-columns: 1fr; gap: var(--espace-6); }
  .placement__dessin { padding: 12px; margin: 0 -4px; }
  .tissees { grid-template-columns: 1fr; gap: 22px; }
  .ppe-faq summary { font-size: 17px; line-height: 23px; }
}