:root{
    --forest:#1F3A2A; --forest-deep:#122318;
    --amber:#E0932E; --coral:#D9542E;
    --cream:#E9DDC2; --moss:#5C7A54;
    --ink:#1A1410;
    --line: rgba(26,20,16,0.12);
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  body{background:var(--cream); color:var(--ink); font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; line-height:1.6; overflow-x:hidden;}
  h1,h2,h3{font-family:Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', Palatino, serif; font-weight:700; line-height:1.02;}
  a{color:inherit;}
  :focus-visible{outline:2px solid var(--coral); outline-offset:3px;}

  .reveal{opacity:0; transform:translateY(30px) scale(0.98); transition:opacity .7s ease, transform .7s ease;}
  .reveal.in-view{opacity:1; transform:none;}

  header{
    display:flex;justify-content:space-between;align-items:center;
    padding:0.85rem 1.8rem;
    position:sticky; top:0; z-index:60;
    background:var(--cream);
    border-bottom:2px solid var(--ink);
  }
  .brand{font-family:Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', Palatino, serif; font-weight:700; font-size:1rem;}
  .brand span{color:var(--coral);}

  .hamburger{
    background:var(--ink); border:none; border-radius:0;
    width:40px;height:40px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    cursor:pointer;
    flex-shrink:0;
  }
  .hamburger span{width:17px;height:2px;background:var(--cream);display:block;transition:transform .25s ease, opacity .25s ease;}
  .hamburger.open span:nth-child(1){transform:translateY(6px) rotate(45deg);}
  .hamburger.open span:nth-child(2){opacity:0;}
  .hamburger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

  nav.drawer{
    position:fixed; top:0; right:0; height:100%;
    width:min(360px,88vw);
    background:var(--forest-deep);
    transform:translateX(100%);
    transition:transform .45s cubic-bezier(.7,0,.3,1);
    z-index:55;
    padding:7rem 2.6rem 2rem;
    display:flex;flex-direction:column;
  }
  nav.drawer.open{transform:translateX(0);}
  nav.drawer a{
    font-family:Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', Palatino, serif; font-weight:700; font-size:1.25rem;
    text-decoration:none; color:var(--cream);
    padding:0.55rem 0;
    border-bottom:1px solid rgba(246,239,223,0.14);
  }
  .drawer-contact{
    margin-top:auto; padding-top:1.8rem;
    display:flex; flex-direction:column; gap:0.5rem;
  }
  .drawer-contact a, .drawer-contact span{
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-size:0.92rem;
    color:#C9C2AA; text-decoration:none;
  }
  .scrim{position:fixed;inset:0;background:rgba(10,15,10,0.5);opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:50;}
  .scrim.open{opacity:1;pointer-events:auto;}

  /* kinetic hero */
  .hero{max-width:none; margin:0; padding:0;}
  .hero.hero--bg{
    position:relative;
    min-height:600px;
    display:flex; align-items:center;
    background-size:cover; background-position:center right;
    padding:4rem 2.2rem;
  }
  .hero.hero--bg::before{
    content:''; position:absolute; inset:0;
    background:linear-gradient(90deg, var(--cream) 0%, rgba(233,221,194,0.92) 32%, rgba(233,221,194,0.35) 55%, rgba(233,221,194,0.05) 72%);
  }
  .hero-content{position:relative; z-index:2; max-width:1280px; margin:0 auto; width:100%;}
  .hero-content > *{max-width:640px;}
  .hero-kicker{font-weight:800; letter-spacing:0.05em; text-transform:uppercase; font-size:0.85rem; color:var(--coral); margin-bottom:1rem;}
  .kinetic-title{
    font-size:clamp(2.6rem,8vw,6.2rem);
    letter-spacing:-0.02em;
    will-change:transform;
  }
  .kinetic-title .line{display:block; transform:translateX(-16px); opacity:0; transition:transform .8s cubic-bezier(.2,.8,.2,1), opacity .8s ease;}
  .kinetic-title.in-view .line{transform:translateX(0); opacity:1;}
  .kinetic-title .line:nth-child(2){transition-delay:.12s; color:var(--forest);}
  .kinetic-title .line:nth-child(3){transition-delay:.24s;}
  .hero p{margin-top:1.6rem; max-width:46ch; font-size:1.15rem; color:#3a3226;}
  .hero-actions{margin-top:2rem; display:flex; gap:1rem; flex-wrap:wrap;}
  .btn{padding:0.95rem 1.8rem; border-radius:0; text-decoration:none; display:inline-block; font-weight:800; font-size:0.95rem; border:2px solid var(--ink);}
  .btn.primary{background:var(--ink); color:var(--cream);}
  .btn.ghost{background:transparent; color:var(--ink);}

  /* bento grid */
  .bento{
    max-width:1280px; margin:0 auto; padding:3rem 2.2rem 5rem;
    display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:160px;
    gap:1rem;
  }
  .bento > div{
    border-radius:20px; padding:1.6rem;
    display:flex; flex-direction:column; justify-content:flex-end;
    position:relative; overflow:hidden;
    transition:transform .3s ease;
    background-size:cover; background-position:center;
    background-blend-mode:multiply;
  }
  .bento > div:hover{transform:translateY(-6px);}
  .bento h3{font-size:1.3rem; color:inherit;}
  .bento p{font-size:0.88rem; margin-top:0.4rem;}
  .bento .tag{position:absolute; top:1.2rem; left:1.6rem; font-size:0.75rem; font-weight:800; text-transform:uppercase; letter-spacing:0.04em;}

  .b-apropos{grid-column:span 3; grid-row:span 2; background:var(--forest); color:var(--cream);}
  .b-produits{grid-column:span 3; grid-row:span 2; background:var(--amber); color:var(--ink);}
  .b-galerie{grid-column:span 2; grid-row:span 2; background:var(--ink); color:var(--cream);}
  .b-evenements{grid-column:span 2; grid-row:span 2; background:var(--coral); color:var(--cream);}
  .b-contact{grid-column:span 2; grid-row:span 2; background:var(--moss); color:var(--cream);}

  section.chapter{max-width:1280px; margin:0 auto; padding:5rem 2.2rem;}
  .chapter-inner{display:grid; grid-template-columns:0.6fr 1.4fr; gap:3rem; align-items:start;}
  .chapter-inner--photo{grid-template-columns:0.5fr 1.5fr;}
  .chapter-label{font-weight:800; text-transform:uppercase; letter-spacing:0.05em; font-size:0.85rem; color:var(--coral);}
  .chapter h2{font-size:2.4rem; margin-top:0.5rem;}
  .chapter-text p{max-width:60ch; font-size:1.06rem; color:#3a3226;}
  .band{background:var(--forest); color:var(--cream);}
  .band .chapter-label{color:var(--amber);}

  .info-badges{display:flex; gap:0.8rem; flex-wrap:wrap; margin-top:1.6rem;}
  .info-badge{
    display:flex; align-items:center; gap:0.6rem;
    padding:0.7rem 1.1rem; border-radius:999px;
    background:rgba(26,20,16,0.06); border:1px solid var(--line);
    font-size:0.88rem; font-weight:700;
  }
  .info-badge .dot{width:9px;height:9px;border-radius:50%;}
  .info-badge:nth-child(1) .dot{background:var(--forest);}
  .info-badge:nth-child(2) .dot{background:var(--amber);}
  .info-badge:nth-child(3) .dot{background:var(--coral);}
  .info-badge:nth-child(4) .dot{background:var(--moss);}
  .info-badge:nth-child(5) .dot{background:var(--forest);}

  .hex{clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);}
  .apropos-photo{
    width:100%; aspect-ratio:1;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    background-size:cover; background-position:center;
  }
  
  /* --- Product catalog (filterable/sortable) --- */
  .product-toolbar{
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;
    margin-top:1.8rem; margin-bottom:1.6rem;
  }
  .filter-bar{display:flex; gap:0.6rem; flex-wrap:wrap;}
  .filter-btn{
    padding:0.5rem 1.1rem; border-radius:999px; border:1px solid var(--line);
    background:rgba(26,20,16,0.04); color:var(--ink); font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-weight:700; font-size:0.85rem; cursor:pointer; transition:background .15s ease, color .15s ease;
  }
  .filter-btn:hover{background:rgba(26,20,16,0.08);}
  .filter-btn.active{background:var(--forest); color:#fff; border-color:var(--forest);}
  .sort-select-wrap{font-size:0.85rem; font-weight:700; color:#6b5d47; display:flex; align-items:center; gap:0.6rem;}
  .sort-select-wrap select{
    padding:0.5rem 0.8rem; border-radius:8px; border:1px solid var(--line);
    background:#fff; font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-size:0.85rem; font-weight:600; color:var(--ink);
  }

  .product-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:1.4rem;}
  .product-card{
    border-radius:18px; overflow:hidden; border:1px solid var(--line); background:#fff;
    display:flex; flex-direction:column; transition:transform .2s ease, box-shadow .2s ease;
  }
  .product-card:hover{transform:translateY(-4px); box-shadow:0 16px 30px -18px rgba(26,20,16,0.35);}
  .product-card-photo{aspect-ratio:4/3; background-size:cover; background-position:center;}
  .product-card-body{padding:1.2rem; display:flex; flex-direction:column; gap:0.5rem; flex:1;}
  .product-tag{
    align-self:flex-start; font-size:0.72rem; font-weight:800; text-transform:uppercase; letter-spacing:0.04em;
    color:var(--forest); background:rgba(31,58,42,0.1); padding:0.25rem 0.6rem; border-radius:999px;
  }
  .product-card-body h3{font-size:1.1rem; margin:0;}
  .product-card-body p{font-size:0.88rem; color:#5a4c38; margin:0;}
  .product-card-footer{display:flex; justify-content:space-between; align-items:center; margin-top:0.3rem;}
  .product-price{font-weight:800; color:var(--coral); font-size:1rem;}
  .product-delivery{font-size:0.78rem; color:#5a7a56; font-weight:600;}
  .product-card-body .link{margin-top:0.3rem; font-size:0.85rem; color:var(--amber); font-weight:800; text-decoration:none;}


  /* --- Gallery photo grid + lightbox --- */
  .photo-grid{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:1rem;
  }
  .photo-tile{
    position:relative; padding:0; border:none; border-radius:16px; overflow:hidden;
    aspect-ratio:4/3; cursor:pointer; background:none;
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .photo-tile:hover{transform:translateY(-3px); box-shadow:0 16px 28px -16px rgba(26,20,16,0.4);}
  .photo-tile img{width:100%; height:100%; object-fit:cover; display:block;}
  .photo-tag{
    position:absolute; bottom:0.6rem; left:0.6rem;
    font-size:0.7rem; font-weight:800; text-transform:uppercase; letter-spacing:0.04em;
    color:#fff; background:rgba(26,20,16,0.55); padding:0.3rem 0.6rem; border-radius:999px;
  }

  .lightbox{
    position:fixed; inset:0; background:rgba(15,10,5,0.92);
    display:none; align-items:center; justify-content:center; flex-direction:column; gap:1rem;
    z-index:100; padding:2rem;
  }
  .lightbox.open{display:flex;}
  .lightbox img{max-width:min(90vw, 1100px); max-height:78vh; border-radius:10px; object-fit:contain;}
  .lightbox p{color:#EFE9D8; font-size:0.95rem; min-height:1.2em;}
  .lightbox-close{
    position:absolute; top:1.4rem; right:1.6rem; background:none; border:none;
    color:#fff; font-size:1.6rem; cursor:pointer; line-height:1;
  }

  .event-list{margin-top:1.6rem;}
  .event-row{display:flex; justify-content:space-between; align-items:center; padding:1rem 0; border-bottom:1px solid var(--line);}
  .band .event-row{border-bottom-color:rgba(246,239,223,0.2);}
  .event-row .date{font-weight:800; color:var(--coral);}
  .band .event-row .date{color:var(--amber);}
  .placeholder-note{font-size:0.85rem; color:#8a7a5c; margin-top:1rem; font-style:italic;}
  .band .placeholder-note{color:#C9C2AA;}

  footer{background:var(--ink); color:var(--cream); padding:4rem 2.2rem 2rem;}
  .footer-grid{
    max-width:1280px; margin:0 auto;
    display:grid; grid-template-columns:1.4fr 1fr 1fr;
    gap:2.5rem; padding-bottom:2.5rem;
    border-bottom:1px solid rgba(246,239,223,0.15);
  }
  .footer-brand p{margin-top:0.8rem; font-size:0.92rem; color:#B8AF98; max-width:34ch;}
  .footer-col h4{font-family:Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', Palatino, serif; font-size:1rem; margin-bottom:0.9rem; color:var(--amber);}
  .footer-col ul{list-style:none; display:flex; flex-direction:column; gap:0.6rem;}
  .footer-col a{text-decoration:none; font-size:0.92rem; color:#D6CFB8;}
  .footer-social{display:flex; gap:0.8rem; margin-top:1rem;}
  .footer-social a{
    width:36px;height:36px; border-radius:50%; border:1px solid rgba(246,239,223,0.3);
    display:flex;align-items:center;justify-content:center; color:#B8AF98;
    transition:color .15s ease, border-color .15s ease, transform .15s ease;
  }
  .footer-social a:hover{color:var(--amber); border-color:var(--amber); transform:translateY(-2px);}
  .footer-sponsors{display:flex; gap:0.8rem; margin-top:0.9rem; flex-wrap:wrap;}
  .footer-sponsors div{
    width:84px;height:40px; border-radius:8px;
    border:1px dashed rgba(246,239,223,0.3);
    display:flex;align-items:center;justify-content:center;
    font-size:0.66rem; color:#B8AF98;
  }
  .footer-bottom{
    max-width:1280px; margin:0 auto; padding-top:1.6rem;
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;
    font-size:0.82rem; color:#8f886e;
  }

  @media (prefers-reduced-motion:reduce){*{transition:none !important; animation:none !important;} .reveal, .kinetic-title .line{opacity:1; transform:none;}}

  /* --- multi-page additions --- */
  nav.drawer a.active{color:var(--amber);}

  .brief-inner{display:grid; grid-template-columns:0.6fr 1.4fr; gap:3rem; align-items:center;}
  .brief-inner p{max-width:56ch; font-size:1.05rem; color:#3a3226; margin-bottom:1.4rem;}
  .band .brief-inner p{color:#EFE9D8;}
  .brief-cta{display:inline-flex; align-items:center; gap:0.5rem;}

  .footer-bottom a{
    color:inherit; text-decoration:underline; text-decoration-color:rgba(246,239,223,0.5);
    text-underline-offset:3px;
  }
  .footer-bottom a:hover{text-decoration-color:var(--amber);}

  .contact-links{display:flex; flex-direction:column; gap:1rem; margin-top:1.8rem; max-width:460px;}
  .contact-link-card{
    display:flex; align-items:center; gap:1rem;
    padding:1.1rem 1.4rem; border:2px solid var(--ink); border-radius:0;
    text-decoration:none; color:var(--ink); font-weight:700; font-size:1rem;
    transition:transform .2s ease;
  }
  .contact-link-card:hover{transform:translateX(4px);}
  .contact-link-card .icon{font-size:1.3rem;}
  .contact-link-card small{display:block; font-weight:500; font-size:0.8rem; color:#6b5d47; margin-top:0.1rem;}
  .band .contact-link-card{border-color:var(--cream); color:var(--cream);}

  .contact-map{
    margin-top:1.6rem; border-radius:16px; overflow:hidden; border:1px solid var(--line);
    max-width:460px;
  }
  .contact-map iframe{display:block;}

  .contact-social{margin-top:1.8rem; display:flex; align-items:center; gap:1rem;}
  .contact-social-label{font-size:0.85rem; font-weight:700; color:#6b5d47;}
  .contact-social .footer-social a{
    border-color:var(--line); color:var(--ink);
  }
  .contact-social .footer-social a:hover{color:var(--coral); border-color:var(--coral);}
  .band .contact-link-card small{color:#C9C2AA;}

/* --- Mobile overrides (placed last on purpose: some responsive rules above,
     like .brief-inner, .chapter-inner--photo, .contact-map, are defined further
     up but their base declarations appear later in the file; a media query
     earlier in the source would lose the cascade tie-break to those later
     rules even while active, so every mobile override lives here at the end) --- */
@media (max-width:900px){
  .hero.hero--bg{min-height:480px; padding:2.5rem 1.4rem; background-position:center 20%;}
  .hero.hero--bg::before{background:linear-gradient(180deg, rgba(233,221,194,0.3) 0%, rgba(233,221,194,0.9) 30%, var(--cream) 48%);}
  .hero-content{align-self:flex-end;}
  .bento{grid-template-columns:repeat(2,1fr); grid-auto-rows:160px; padding:2rem 1.4rem 3rem;}
  .bento > div{grid-column:span 2 !important; grid-row:span 1 !important;}
  .chapter-inner, .chapter-inner--photo, .brief-inner{grid-template-columns:1fr !important; gap:1.6rem;}
  section.chapter{padding:3rem 1.4rem;}
  .footer-grid{grid-template-columns:1fr;}
  footer{padding:3rem 1.4rem 1.5rem;}
  .contact-map, .contact-links{max-width:100%;}
}
@media (max-width:480px){
  .kinetic-title{font-size:clamp(2.1rem,11vw,2.8rem);}
  .chapter h2{font-size:1.8rem;}
  .hero p{font-size:1.02rem;}
  .hero-actions .btn, .brief-cta{width:100%; text-align:center; justify-content:center;}
  .hero-actions{flex-direction:column;}
  .contact-link-card{padding:1rem;}
}