/* ==========================================================================
   Polynimaux : « la feuille de ferme au pochoir ».
   Papier quadrillé, titre écrit à la main et souligné au crayon, pochoirs en
   carrés (formes originales) où les empreintes se dessinent une à une, crayon
   qui griffonne, cases de la feuille et tampon pour la distinction.
   L'illustration de la boîte est affichée entière, sans aucun effet ni rien par-dessus.
   ========================================================================== */

.pn {
  --papier-pn: #fdf8e8;
  --quadrillage-pn: rgba(99, 140, 170, 0.22);
  --encre-pn: #33221d;
  --doux-pn: #5c463c;
  --rouge-pn: #8a3a2c;
  --rouge-fonce-pn: #5e2219;
  --crayon-pn: #4a4a52;
  --vert-pn: #4e7a2f;
  background: var(--papier-pn);
  color: var(--encre-pn);
}
.pn .fil-ariane, .pn .fil-ariane a { color: var(--doux-pn); }

/* ---------- La feuille (ouverture) ---------- */
.pn-feuille {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-bottom: clamp(2.5rem, 6vw, 4rem);
  background:
    linear-gradient(90deg, transparent 0 3.2rem, rgba(200, 70, 60, 0.4) 3.2rem 3.35rem, transparent 3.35rem),
    linear-gradient(var(--quadrillage-pn) 1px, transparent 1px) 0 0 / 1.6rem 1.6rem,
    linear-gradient(90deg, var(--quadrillage-pn) 1px, transparent 1px) 0 0 / 1.6rem 1.6rem,
    var(--papier-pn);
}
.pn-scene { position: relative; }
.pn-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; padding-top: clamp(1rem, 3vw, 2rem); }
.pn-entete {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin: 0 0 0.8rem;
  font-weight: 700; font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--doux-pn);
}
.pn-entete span:first-child { padding: 0.15rem 0.6rem; border: 2px solid var(--encre-pn); }
.pn h1 {
  margin: 0;
  font-family: "Caveat", var(--titre);
  font-weight: 700;
  font-size: clamp(3.8rem, 11vw, 7.6rem);
  line-height: 0.9;
  color: var(--encre-pn);
}
.pn-trait { display: block; width: min(22rem, 80%); height: 1.3rem; margin-top: 0.2rem; }
.pn-trait path { fill: none; stroke: var(--rouge-pn); stroke-width: 5; stroke-linecap: round; }
.pn-accroche { margin: 1rem 0 0; max-width: 30ch; font-family: "Caveat", var(--titre); font-weight: 600; font-size: clamp(1.6rem, 3vw, 2rem); line-height: 1.15; color: var(--doux-pn); }

.pn-plan { position: relative; display: grid; place-items: center; }

/* Bande de pochoirs, bien visible sous le titre et la boîte */
.pn-pochoirs {
  list-style: none; margin: clamp(1.5rem, 4vw, 2.5rem) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: clamp(0.8rem, 3vw, 2.2rem);
}
.pn-pochoir {
  width: clamp(8.5rem, 15vw, 11.5rem);
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.6);
  border: 2px solid rgba(51, 34, 29, 0.18);
  border-radius: 0.4rem;
}
.pn-pochoir:nth-child(odd) { rotate: -3deg; }
.pn-pochoir:nth-child(even) { rotate: 2.5deg; }
.pn-pochoir svg, .pn-crayon svg { display: block; width: 100%; height: auto; }
.pn-pochoir__forme { fill: #fff; stroke: var(--crayon-pn); stroke-width: 3; stroke-dasharray: 9 6; }
.pn-empreinte { fill: var(--encre-pn); }
.pn-trace { fill: none; stroke: var(--encre-pn); stroke-width: 5; stroke-linecap: round; }
.pn-oeuf { fill: #fff3d6; stroke: var(--rouge-pn); stroke-width: 4; }
.pn-crayon { width: clamp(4rem, 9vw, 6rem); }
.pn-crayon__bois { fill: #f2b632; stroke: var(--encre-pn); stroke-width: 2; }
.pn-crayon__mine { fill: #e9c9a0; stroke: var(--encre-pn); stroke-width: 2; }
.pn-crayon__gomme { fill: #e48b8b; stroke: var(--encre-pn); stroke-width: 2; }
.pn-boite { position: relative; z-index: 1; width: min(19rem, 62vw); }
.pn-boite picture { display: contents; }
.pn-boite img { width: 100%; height: auto; object-fit: contain; filter: drop-shadow(0 20px 18px rgba(51, 34, 29, 0.4)); }

/* ---------- La ferme (contenu) ---------- */
.pn-ferme { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.pn-ferme__grille { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.pn-carte {
  padding: clamp(1.6rem, 4vw, 2.4rem);
  background: #fff;
  border: 2px solid var(--encre-pn);
  box-shadow: 6px 6px 0 var(--encre-pn);
}
.pn-carte h2, .pn-cote__titre { font-family: "Caveat", var(--titre); font-weight: 700; color: var(--rouge-fonce-pn); line-height: 1; }
.pn-carte h2 { font-size: clamp(2.2rem, 5vw, 2.9rem); margin: 0 0 0.8rem; }
.pn-description { font-size: 1.12rem; line-height: 1.7; max-width: 60ch; }
.pn .bouton { background: var(--rouge-pn); border-color: var(--rouge-fonce-pn); color: #fff; border-radius: 0.3rem; }
.pn .bouton:hover { background: var(--rouge-fonce-pn); color: #fff; }
.pn .bouton--clair { background: transparent; color: var(--rouge-fonce-pn); border-color: var(--rouge-fonce-pn); }
.pn .liens-secondaires a { color: var(--rouge-fonce-pn); font-weight: 600; }

.pn-cote__titre { font-size: 2.1rem; margin: 0 0 0.6rem; }
.pn-cases { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 2px solid var(--encre-pn); background: #fff; }
.pn-cases div { padding: 0.7rem 0.9rem; border: 1px solid rgba(51, 34, 29, 0.35); }
.pn-cases dt { font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--doux-pn); }
.pn-cases dd { margin: 0.1rem 0 0; font-family: "Caveat", var(--titre); font-weight: 700; font-size: 1.8rem; line-height: 1.1; color: #26408a; }

.pn-tampons { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; gap: 1rem; }
.pn-tampon {
  display: flex; align-items: center; gap: 0.8rem;
  width: fit-content; max-width: 100%;
  padding: 0.7rem 1rem;
  color: var(--rouge-pn);
  border: 3px double var(--rouge-pn);
  border-radius: 0.4rem;
  rotate: -2deg;
}
.pn-tampon strong { display: block; font-size: 1.05rem; letter-spacing: 0.12em; text-transform: uppercase; }
.pn-tampon span { font-size: 0.98rem; color: var(--rouge-fonce-pn); }
.pn-equipe { margin-top: 1.8rem; }
.pn-credits { margin: 0; }
.pn-credits div { padding: 0.55rem 0; border-top: 1px dashed rgba(51, 34, 29, 0.35); }
.pn-credits dt { font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--doux-pn); }
.pn-credits dd { margin: 0.15rem 0 0; font-size: 1.02rem; }

.pn-cliche {
  position: relative;
  margin: clamp(3rem, 6vw, 4rem) auto 0; max-width: 58rem;
  padding: 0.9rem 0.9rem 0;
  background: #fff;
  border: 2px solid var(--encre-pn);
  box-shadow: 6px 6px 0 var(--encre-pn);
}
.pn-cliche img { width: 100%; height: auto; }
.pn-cliche figcaption { font-family: "Caveat", var(--titre); font-weight: 700; font-size: 1.5rem; text-align: center; padding: 0.4rem 0 0.6rem; }

@media (max-width: 52rem) {
  .pn-grille, .pn-ferme__grille { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: no-preference) {
  .pn-trait path { stroke-dasharray: 460; stroke-dashoffset: 460; animation: pn-trait 1.4s 0.4s ease-out forwards; }
  @keyframes pn-trait { to { stroke-dashoffset: 0; } }
  .pn-empreinte { opacity: 0; animation: pn-empreinte 10s ease-out infinite; }
  .pn-empreinte--2 { animation-delay: 0.6s; }
  .pn-empreinte--3 { animation-delay: 1.2s; }
  .pn-pochoir--2 .pn-empreinte { animation-delay: 2.4s; }
  .pn-pochoir--2 .pn-empreinte--2 { animation-delay: 3s; }
  .pn-pochoir--2 .pn-empreinte--3 { animation-delay: 3.6s; }
  .pn-pochoir--3 .pn-empreinte { animation-delay: 4.8s; }
  .pn-pochoir--3 .pn-empreinte--2 { animation-delay: 5.4s; }
  .pn-pochoir--4 .pn-empreinte { animation-delay: 6.6s; }
  .pn-pochoir--4 .pn-empreinte--2 { animation-delay: 7.2s; }
  .pn-pochoir--4 .pn-empreinte--3 { animation-delay: 7.8s; }
  @keyframes pn-empreinte { 0% { opacity: 0; scale: 0.6; } 3% { opacity: 1; scale: 1.08; } 5%, 85% { opacity: 1; scale: 1; } 95%, 100% { opacity: 0; } }
  .pn-empreinte { transform-box: fill-box; transform-origin: center; }
  .pn-crayon svg { animation: pn-crayon 0.9s ease-in-out infinite; transform-origin: 10% 90%; }
  @keyframes pn-crayon { 0%, 100% { translate: 0 0; rotate: 0deg; } 25% { translate: 0.4rem -0.3rem; rotate: -5deg; } 50% { translate: -0.2rem 0.2rem; rotate: 3deg; } 75% { translate: 0.3rem 0.3rem; rotate: -2deg; } }
}