/* Page Packaging : l'étui qui se plie sur un tapis de découpe vert (quadrillage, règle graduée). */
.pack-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); }
.pack 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; }
.pack .intro { margin: 18px 0 0; max-width: 36em; font-size: 18px; line-height: 28px; }

/* Composant 1 : le héros. */
.pack-heros { max-width: 1440px; margin: 0 auto; padding: var(--espace-5) max(var(--espace-7), env(safe-area-inset-right, 0px)) var(--espace-8) max(var(--espace-7), env(safe-area-inset-left, 0px));
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--espace-7); align-items: center; }
.pack-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; }
.pack-heros .chapo { margin: 24px 0 0; max-width: 32em; font-size: 19px; line-height: 29px; }
.pack-heros__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 34px; margin-top: 34px; }

.tapis { position: relative; margin: 0; aspect-ratio: 1.18; overflow: hidden; border-radius: 6px;
  background-color: #1f5a47;
  background-image: linear-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.16) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px; box-shadow: inset 0 0 0 10px #1a4c3c; }
.tapis::after { content: ""; position: absolute; left: 10px; right: 10px; top: 10px; height: 22px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.75) 0 1px, transparent 1px 20px), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.4) 0 1px, transparent 1px 4px);
  background-size: 100% 22px, 100% 9px; background-repeat: no-repeat; }
.tapis figcaption { position: absolute; left: 18px; bottom: 14px; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12.5px; color: rgba(255, 255, 255, 0.85); }
.tapis figcaption span { display: inline-flex; align-items: center; gap: 8px; }
.tapis figcaption i { width: 22px; height: 0; border-top: 2px solid #fff; }
.tapis figcaption i.pli { border-top-style: dashed; }
.tapis figcaption i.colle { height: 8px; border: 0; background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.7) 0 2px, transparent 2px 5px); }

.boite { position: absolute; inset: 0; perspective: 1400px; display: grid; place-items: center; }
.boite__pivot { --W: 240px; --D: 165px; --H: 185px; position: relative; width: var(--W); height: var(--D); transform-style: preserve-3d; transform: rotateX(58deg) rotateZ(-28deg); }
.boite__pivot > *, .boite__pivot .face > .face { transform-style: preserve-3d; }
.face { position: absolute; background: #f7f1e6; box-shadow: inset 0 0 0 1.5px rgba(10, 10, 11, 0.7); backface-visibility: visible; }
.face::before { content: ""; position: absolute; pointer-events: none; }
.f-fond { inset: 0; background: #efe7d8; }
.f-avant { left: 0; top: 100%; width: var(--W); height: var(--H); transform-origin: top; }
.f-arriere { left: 0; bottom: 100%; width: var(--W); height: var(--H); transform-origin: bottom; }
.f-gauche { right: 100%; top: 0; width: var(--H); height: var(--D); transform-origin: right; }
.f-droite { left: 100%; top: 0; width: var(--H); height: var(--D); transform-origin: left; }
.f-couvercle { left: 0; bottom: 100%; width: var(--W); height: var(--D); transform-origin: bottom; background: #0c4ddb; }
.f-patte { position: absolute; left: 100%; top: 12px; bottom: 12px; width: 22px; background: repeating-linear-gradient(45deg, rgba(10, 10, 11, 0.2) 0 2px, transparent 2px 5px), #efe7d8; clip-path: polygon(0 0, 100% 14%, 100% 86%, 0 100%); }
/* Plis : les arêtes communes, en pointillés. */
.f-avant::before { left: 0; right: 0; top: 0; border-top: 1.5px dashed rgba(10, 10, 11, 0.75); }
.f-arriere::before, .f-couvercle::before { left: 0; right: 0; bottom: 0; border-bottom: 1.5px dashed rgba(10, 10, 11, 0.75); }
.f-gauche::before { top: 0; bottom: 0; right: 0; border-right: 1.5px dashed rgba(10, 10, 11, 0.75); }
.f-droite::before { top: 0; bottom: 0; left: 0; border-left: 1.5px dashed rgba(10, 10, 11, 0.75); }
/* L'impression de l'étui d'exemple. */
/* Le panneau avant se voit par son verso une fois relevé : son texte est retourné pour se lire à l endroit sur la boîte montée. */
.f-avant { display: flex; flex-direction: column-reverse; align-items: center; justify-content: center; gap: 6px; background: #f7f1e6; }
.f-avant b, .f-avant span { transform: scaleY(-1); }
.f-avant b { font-family: var(--font-titre); font-size: 16px; letter-spacing: 3px; color: #1d2a29; }
.f-avant span { font-size: 10.5px; color: #4a4f4b; }
.f-avant::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34px; background: radial-gradient(circle, #1f6e66 0 4px, transparent 4.5px) 0 0 / 16px 16px, #e7dccb; }
.f-gauche, .f-droite { background: radial-gradient(circle, #1f6e66 0 4px, transparent 4.5px) 0 0 / 16px 16px, #e7dccb; }
.f-arriere { background: #f7f1e6; }
.f-arriere::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: 26px; height: 34px; background: repeating-linear-gradient(90deg, #111 0 2px, transparent 2px 4px, #111 4px 5px, transparent 5px 8px); }
.f-couvercle::after { content: ""; position: absolute; left: 18px; right: 18px; top: 50%; height: 6px; margin-top: -3px; background: #fff; box-shadow: 0 12px 0 -1px rgba(255, 255, 255, 0.5); }

/* Composant 2 : ce que nous fabriquons, chaque objet avec sa forme de découpe dessinée au trait. */
.formes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; margin: var(--espace-7) 0 0; padding: 0; list-style: none; }
.formes li { display: grid; gap: 14px; }
.formes svg { width: 100%; height: auto; aspect-ratio: 4 / 3; padding: 16px; background: var(--fond-releve); border: 1px solid var(--filet); color: var(--texte); }
.formes .coupe { fill: none; stroke: currentColor; stroke-width: 1.6; }
.formes .pli { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-dasharray: 5 4; opacity: 0.8; }
.formes .colle { fill: url(#hachures); stroke: none; }
.formes h3 { margin: 0; font-family: var(--font-titre); font-weight: 700; font-size: 21px; line-height: 26px; }
.formes p { margin: 0; font-size: 15.5px; line-height: 23px; color: var(--texte-doux); }

@media (max-width: 1000px) {
  .pack-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)); }
  .pack-heros { grid-template-columns: 1fr; gap: var(--espace-5); padding: var(--espace-4) max(var(--espace-4), env(safe-area-inset-right, 0px)) var(--espace-7) max(var(--espace-4), env(safe-area-inset-left, 0px)); }
  .tapis { order: -1; aspect-ratio: 1; }
  .boite__pivot { --W: 150px; --D: 104px; --H: 116px; }
  .f-avant b { font-size: 12px; letter-spacing: 2px; }
  .formes { grid-template-columns: 1fr; gap: 26px; }
}