/* Thème « Nature » : fond feuillage (bokeh), palette de bois sous les produits, animations douces.
   Palette tirée des affiches : vert profond, vert vif, jaune, rouge, blanc. */
:root {
  --pf-green: #3fae49; --pf-green-dark: #2a8f3a; --pf-green-deep: #0f4f26; --pf-green-soft: #e4f4d8;
  --pf-blue: #0f5a2a; --pf-blue-deep: #0a3d1c; --pf-yellow: #ffd21f; --pf-red: #d8232a;
  --pf-ink: #17321f; --pf-text: #35503c; --pf-line: #cfe3c2; --pf-gray-band: rgba(255, 255, 255, .55);
  --pf-wood-l: #dba76a; --pf-wood-m: #b97d41; --pf-wood-d: #84562a;
}
body {
  background:
    radial-gradient(380px 380px at 6% 10%, rgba(255, 246, 160, .6), transparent 70%),
    radial-gradient(520px 520px at 94% 26%, rgba(255, 255, 255, .75), transparent 70%),
    radial-gradient(360px 360px at 72% 90%, rgba(255, 238, 140, .5), transparent 70%),
    radial-gradient(300px 300px at 18% 72%, rgba(110, 195, 85, .35), transparent 70%),
    linear-gradient(160deg, #dcf1cb 0%, #c6e6ae 45%, #e6f5d4 100%);
  background-attachment: fixed;
}
.pf-header { background: rgba(255, 255, 255, .86); backdrop-filter: blur(8px); border-bottom: 3px solid var(--pf-green); }
.pf-nav a:hover, .pf-nav a.active { color: var(--pf-green-dark); }
.pf-nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; border-radius: 3px; background: var(--pf-yellow); transform: scaleX(0); transition: transform .3s; }
.pf-nav a:hover::after, .pf-nav a.active::after { transform: scaleX(1); }
.pf-hero, .pf-alt, .pf-benefits { background: transparent; }
.pf-page-head { background: linear-gradient(120deg, #0f5a2a, #2a8f3a); border-bottom: 4px solid var(--pf-yellow); }
.pf-page-head h1 { color: #fff; }
.pf-section-title h2 { display: inline-block; background: var(--pf-blue); color: #fff; padding: .45rem 1.8rem; border-radius: 999px; box-shadow: 0 8px 18px rgba(15, 90, 42, .25); }
.pf-section-title h2::after { display: none; }
.pf-section-title p { color: var(--pf-text); }
.pf-hero h1 { color: var(--pf-blue-deep); }
.pf-hero .btn-primary, .pf-card .btn-primary { background: linear-gradient(180deg, #46b94f, #2a8f3a); border-color: #2a8f3a; position: relative; overflow: hidden; }
.pf-hero .btn-primary:hover, .pf-card .btn-primary:hover { background: linear-gradient(180deg, #2a8f3a, #1f7a2e); border-color: #1f7a2e; }
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::before { content: ''; position: absolute; top: 0; left: -80%; width: 50%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-20deg); pointer-events: none; }
.btn-primary:hover::before { animation: pfShine .9s; }
@keyframes pfShine { to { left: 130%; } }
.pf-box, .pf-summary, .pf-benefit { background: rgba(255, 255, 255, .9); border: 1px solid var(--pf-line); border-radius: 16px; }

/* ----- Carte produit posée sur une planche de bois ----- */
.pf-card { background: rgba(255, 255, 255, .92); border: 1px solid #d6e8c9; border-radius: 18px; padding: 12px 12px 14px; }
.pf-card:hover { transform: translateY(-8px); box-shadow: 0 22px 40px rgba(15, 79, 38, .2); }
.pf-card-img { overflow: visible; margin-bottom: 20px; background: none; aspect-ratio: auto; height: auto; }
.pf-card-img img { position: relative; z-index: 1; display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; border-radius: 12px; background: linear-gradient(160deg, #f6fbef, #ecf6e3); transition: transform .45s ease; }
.pf-card:hover .pf-card-img img { transform: translateY(-4px) scale(1.02); }
.pf-card-img::after, .pf-gal-view::after {
  content: ''; position: absolute; z-index: 0; left: -3%; right: -3%; bottom: -14px; height: 26px; border-radius: 7px;
  background:
    repeating-linear-gradient(90deg, rgba(60, 30, 5, .10) 0 2px, transparent 2px 11px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .10) 0 1px, transparent 1px 23px),
    linear-gradient(180deg, var(--pf-wood-l), var(--pf-wood-m) 55%, var(--pf-wood-d));
  box-shadow: 0 10px 14px rgba(60, 35, 10, .35), inset 0 2px 0 rgba(255, 255, 255, .4), inset 0 -3px 0 rgba(50, 25, 5, .3);
}
.pf-card-title a { color: var(--pf-blue-deep); }
.pf-price { background: linear-gradient(180deg, #ee3a40, #c81d24); transform: rotate(-2deg); animation: pfPulse 3.2s ease-in-out infinite; }
@keyframes pfPulse { 0%, 100% { transform: rotate(-2deg) scale(1); } 50% { transform: rotate(-2deg) scale(1.06); } }
.pf-dispo { background: #fff; border-color: #bfe3b0; }
.pf-dispo .dot { animation: pfDot 1.8s infinite; }
@keyframes pfDot { 0% { box-shadow: 0 0 0 0 rgba(47, 179, 68, .5); } 100% { box-shadow: 0 0 0 9px rgba(47, 179, 68, 0); } }

/* ----- Slider d'accueil / galerie : posés sur du bois ----- */
.pf-ad-slide { border-radius: 22px; box-shadow: 0 22px 50px rgba(15, 79, 38, .28); background: transparent; position: relative; z-index: 1; }
.pf-ad-slide img { background: transparent; }
.pf-slide.on .pf-ad-slide img, .pf-slide.on .pf-hero-img img { animation: pfZoom 9s ease-out both; }
@keyframes pfZoom { from { transform: scale(1.04); } to { transform: scale(1); } }
.pf-ad-cap .btn { background: var(--pf-yellow); color: var(--pf-blue-deep); animation: pfBounce 2.4s ease-in-out infinite; }
@keyframes pfBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.pf-hero-img .pf-frame { background: linear-gradient(160deg, #f6fbef, #e8f4de); }
.pf-hero-img::after { display: none; }
.pf-dots button.on { background: var(--pf-yellow); }
.pf-gal-view { position: relative; }
.pf-gal-view::after { bottom: -16px; }
.pf-benefit .pf-ico { background: var(--pf-blue); color: var(--pf-yellow); }
.pf-benefit:hover .pf-ico { animation: pfBounce .8s; }

/* ----- Pied de page ----- */
.pf-footer { background: linear-gradient(180deg, #0f5a2a, #0a3d1c); color: #d8efc9; border-top: 6px solid var(--pf-wood-m); }
.pf-footer h5, .pf-footer a, .pf-footer p { color: #fff; }
.pf-footer a:hover { color: var(--pf-yellow); }
.pf-footer li i { color: var(--pf-yellow); }
.pf-footer-bottom { border-top-color: rgba(255, 255, 255, .15); color: #b9dba4; }
.pf-promo-bar { background: linear-gradient(90deg, #0a3d1c, #1f7a2e); }

/* ----- Feuilles qui flottent (décor) ----- */
.pf-leaves { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.pf-leaves i { position: absolute; top: -60px; width: 34px; height: 34px; opacity: .55;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path d='M8 56C8 28 28 8 58 6c0 30-18 50-46 50z' fill='%2342b04a'/><path d='M10 54L50 14' stroke='%23c9f0b0' stroke-width='2' fill='none'/></svg>") center / contain no-repeat;
  animation: pfLeaf 18s linear infinite; }
.pf-leaves i:nth-child(1) { left: 6%;  animation-duration: 19s; animation-delay: -2s; }
.pf-leaves i:nth-child(2) { left: 22%; animation-duration: 23s; animation-delay: -9s; width: 26px; height: 26px; }
.pf-leaves i:nth-child(3) { left: 41%; animation-duration: 17s; animation-delay: -5s; width: 40px; height: 40px; opacity: .4; }
.pf-leaves i:nth-child(4) { left: 58%; animation-duration: 25s; animation-delay: -14s; }
.pf-leaves i:nth-child(5) { left: 76%; animation-duration: 21s; animation-delay: -7s; width: 28px; height: 28px; }
.pf-leaves i:nth-child(6) { left: 91%; animation-duration: 27s; animation-delay: -11s; width: 36px; height: 36px; opacity: .4; }
@keyframes pfLeaf {
  0%   { transform: translate3d(0, -60px, 0) rotate(0deg); }
  25%  { transform: translate3d(40px, 25vh, 0) rotate(90deg); }
  50%  { transform: translate3d(-30px, 50vh, 0) rotate(190deg); }
  75%  { transform: translate3d(35px, 78vh, 0) rotate(280deg); }
  100% { transform: translate3d(-10px, 110vh, 0) rotate(380deg); }
}
main, .pf-footer { position: relative; z-index: 1; }
.pf-header { z-index: 20; }
@media (prefers-reduced-motion: reduce) {
  .pf-leaves { display: none; }
  .pf-price, .pf-dispo .dot, .pf-ad-cap .btn, .pf-slide.on .pf-ad-slide img, .pf-slide.on .pf-hero-img img { animation: none !important; }
  .btn-primary:hover::before { animation: none; }
}

/* Pied de page foncé : nom de la marque en blanc */
.pf-footer .pf-brand-text strong { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
.pf-footer .pf-brand-text small { color: var(--pf-yellow); }