/* PPAM & COMPAGNIE — Site V1 | CSS non minifié */
@font-face {
    font-family:Oswald;
    src:url("../fonts/Oswald/Oswald-Regular.woff2") format("woff2");
    font-weight:400;
    font-display:swap
}

@font-face {
    font-family:Oswald;
    src:url("../fonts/Oswald/Oswald-Bold.woff2") format("woff2");
    font-weight:700;
    font-display:swap
}

@font-face {
    font-family:Cormorant;
    src:url("../fonts/Cormorant/CormorantGaramond-Regular.woff2") format("woff2");
    font-weight:400;
    font-display:swap
}

@font-face {
    font-family:Cormorant;
    src:url("../fonts/Cormorant/CormorantGaramond-Italic.woff2") format("woff2");
    font-style:italic;
    font-display:swap
}

@font-face {
    font-family:Allura;
    src:url("../fonts/Allura/Allura-Regular.woff2") format("woff2");
    font-display:swap
}

:root {
    --black:#0d0b09;
    --deep:#030302;
    --gold:#c79a5a;
    --gold-light:#d8b67a;
    --red:#b45c4a;
    --green:#708548;
    --beige:#e5d3b1;
    --white:#fff7e7;
    --border:rgba(199,154,90,.72);
    --title:Oswald,"Arial Narrow",sans-serif;
    --serif:Cormorant,Georgia,serif;
    --script:Allura,cursive;
    --container:1320px
}

* {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth
}

body {
    margin:0;
    background:#000;
    color:var(--beige);
    font-family:var(--serif)
}

img {
    display:block;
    max-width:100%
}

a {
    text-decoration:none;
    color:inherit
}

.container {
    width:min(var(--container),92%);
    margin:auto
}

.site-header {
    position:sticky;
    top:0;
    z-index:20;
    background:#000;
    border-bottom:1px solid rgba(199,154,90,.45)
}

.nav {
    min-height:104px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:22px
}

.brand-logo {
    width:86px
}

.main-nav {
    display:flex;
    gap:26px;
    flex-wrap:wrap
}

.main-nav a {
    font-family:var(--title);
    color:var(--gold-light);
    text-transform:uppercase;
    letter-spacing:1.5px
}

.menu-toggle {
    display:none;
    border:1px solid var(--border);
    background:transparent;
    color:var(--gold-light);
    font-size:1.4rem;
    padding:8px 14px
}

.hero-board {
    padding:22px;
    background:#000
}

.gold-frame {
    position:relative;
    overflow:hidden;
    min-height:920px;
    padding:30px 36px;
    border:3px double var(--border);
    background:radial-gradient(circle at 18% 18%,rgba(112,133,72,.16),transparent 22%),radial-gradient(circle at 83% 23%,rgba(199,154,90,.14),transparent 25%),linear-gradient(180deg,#070604 0%,#020201 100%)
}

.gold-frame:before {
    content:"";
    position:absolute;
    inset:12px;
    border:1px solid rgba(199,154,90,.24);
    pointer-events:none
}

.decor {
    position:absolute;
    z-index:1;
    pointer-events:none
}

.decor-lavande-left {
    width:260px;
    left:18px;
    top:38px
}

.decor-romarin-right {
    width:370px;
    right:24px;
    top:36px
}

.decor-sauge-left {
    width:230px;
    left:30px;
    top:250px
}

.decor-thym-right {
    width:240px;
    right:42px;
    top:285px
}

.decor-coquelicot {
    width:120px;
    right:28px;
    bottom:72px
}

.decor-camomille {
    width:145px;
    right:132px;
    bottom:76px
}

.hero-heading {
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:36% 64%;
    align-items:center;
    min-height:360px
}

.logo-wrap {
    display:flex;
    justify-content:center
}

.hero-logo {
    width:min(255px,78%);
    filter:drop-shadow(0 0 18px rgba(180,92,74,.28))
}

.title-img {
    width:min(650px,96%);
    filter:drop-shadow(0 2px 2px rgba(0,0,0,.45))
}

.producer {
    margin:16px 0 4px;
    color:var(--green);
    font-size:clamp(2rem,3vw,3.4rem);
    font-style:italic;
    line-height:1
}

.hero-heading h1 {
    margin:0;
    color:var(--beige);
    text-transform:uppercase;
    letter-spacing:2px;
    font-size:clamp(2rem,3.05vw,3.35rem);
    line-height:1.1
}

.hero-heading h1 span {
    color:var(--green)
}


.product-cards {
    position: relative;
    z-index: 2;
    margin-top: 20px;
    display: grid;
    border-top: 1px solid rgba(199, 154, 90, 0.55);
    border-left: 1px solid rgba(199, 154, 90, 0.35);
}

/* Version accueil : 7 encarts sur une seule ligne */
.product-cards-line {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    width: 100%;
    gap: 0;
    align-items: stretch;
}

.product-card {
    min-width: 0;
    min-height: 225px;
    padding: 12px 7px 16px;
    border-right: 1px solid rgba(199, 154, 90, 0.55);
    border-bottom: 1px solid rgba(199, 154, 90, 0.55);
    text-align: center;
    transition: 0.22s ease;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}
.product-card:hover {
    transform:translateY(-4px);
    background:rgba(199,154,90,.07)
}

.card-illu {
    width:auto;
    height:132px;
    margin:0 auto 12px;
    object-fit:contain
}

.card-illu.bottle,.card-illu.vrac-img,.card-illu.salt-img,.card-illu.gelee-img {
    height:155px
}

.product-card h2 {
    margin:0;
    color:var(--gold-light);
    font-family:var(--title);
    font-weight:400;
    text-transform:uppercase;
    letter-spacing:2.2px;
    font-size:clamp(1.5rem,2.2vw,2.35rem);
    line-height:1.06
}

.product-card strong {
    display:block;
    margin-top:5px;
    color:var(--green);
    font-family:var(--title);
    text-transform:uppercase
}

.separator {
    height:18px;
    width:auto;
    margin:11px auto 8px
}

.product-card p {
    margin:0;
    color:var(--white);
    font-size:1.28rem;
    font-style:italic;
    line-height:1.25
}

.product-card-vrac {
    background:radial-gradient(circle at center,rgba(112,133,72,.16),transparent 68%)
}

.bottom-row {
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:36% 34% 30%;
    gap:28px;
    align-items:center;
    margin-top:32px
}

.commitments {
    border:1px solid var(--border);
    border-radius:10px;
    padding:18px
}

.commitments h2 {
    margin:0 0 14px;
    color:var(--green);
    font-family:var(--title);
    font-weight:400;
    text-align:center;
    text-transform:uppercase;
    letter-spacing:3px
}

.commitment-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:8px
}

.commitment-grid article {
    text-align:center;
    color:var(--gold-light);
    font-family:var(--title);
    text-transform:uppercase;
    font-size:.92rem
}

.commitment-grid img {
    height:60px;
    margin:0 auto 8px;
    object-fit:contain
}

.signature img {
    max-height:172px;
    margin:auto
}

.bio-logos {
    display:flex;
    gap:18px;
    align-items:center;
    justify-content:center
}

.bio-logos img {
    max-height:118px;
    background:#fff
}

.thanks {
    position:relative;
    z-index:2;
    margin:22px 0 0;
    color:var(--white);
    font-family:var(--script);
    text-align:center;
    font-size:clamp(2rem,3vw,3.3rem)
}

.page-hero {
    padding:86px 0;
    border-bottom:1px solid var(--border);
    background:radial-gradient(circle at 82% 28%,rgba(112,133,72,.12),transparent 30%),linear-gradient(180deg,#090806,#020201)
}

.eyebrow {
    color:var(--green);
    font-family:var(--title);
    text-transform:uppercase;
    letter-spacing:4px
}

.page-hero h1,.section-title {
    margin:0 0 18px;
    color:var(--gold-light);
    font-family:var(--title);
    font-weight:400;
    text-transform:uppercase;
    letter-spacing:2px;
    font-size:clamp(2.8rem,5vw,5.8rem);
    line-height:1
}

.page-hero p {
    max-width:850px;
    font-size:1.45rem;
    line-height:1.6
}

.section {
    padding:82px 0;
    background:#000
}

.cards-grid,.price-grid,.workshop-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:26px
}

.content-card,.price-card,.contact-box {
    padding:30px;
    border:1px solid var(--border);
    background:var(--black)
}

.content-card img {
    height:180px;
    width:auto;
    margin:0 auto 22px;
    object-fit:contain
}

.content-card h2,.price-card h2,.contact-box h2 {
    color:var(--gold-light);
    font-family:var(--title);
    font-weight:400;
    text-transform:uppercase;
    letter-spacing:1.5px
}

.content-card p,.price-card p,.contact-box p,.section p,.section li {
    font-size:1.25rem;
    line-height:1.6
}

.price-card strong {
    display:block;
    color:var(--gold-light);
    font-family:var(--title);
    font-size:3.4rem;
    margin:18px 0
}

.btn,.small-btn,.contact-box button {
    display:inline-block;
    margin-top:18px;
    padding:14px 28px;
    border:0;
    background:var(--gold);
    color:#000;
    font-family:var(--title);
    text-transform:uppercase;
    letter-spacing:1px;
    cursor:pointer
}

.two-cols {
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:54px;
    align-items:center
}

.feature-image {
    max-height:520px;
    margin:auto
}

.chips {
    display:flex;
    flex-wrap:wrap;
    gap:14px
}

.chips span {
    padding:12px 18px;
    border:1px solid var(--border);
    color:var(--gold-light);
    background:#000;
    font-family:var(--title);
    letter-spacing:.8px
}

.contact-box {
    max-width:780px;
    margin:auto
}

.contact-box form {
    display:grid;
    gap:18px;
    margin-top:24px
}

.contact-box label {
    display:grid;
    gap:8px;
    color:var(--gold-light);
    font-family:var(--title);
    text-transform:uppercase
}

.contact-box input,.contact-box select,.contact-box textarea {
    width:100%;
    padding:14px;
    border:1px solid var(--border);
    background:#000;
    color:var(--white);
    font:inherit
}

.site-footer {
    padding:40px 0;
    border-top:1px solid rgba(199,154,90,.45);
    background:#000
}

.footer-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px;
    align-items:center
}

.footer-logo {
    width:86px;
    margin-bottom:14px
}

@media(max-width:1100px) {
.hero-heading,.bottom-row,.two-cols,.footer-grid {
        grid-template-columns:1fr
    }

.product-cards,.cards-grid,.price-grid,.workshop-grid {
        grid-template-columns:repeat(2,1fr)
    }

.commitment-grid {
        grid-template-columns:repeat(2,1fr)
    }

.main-nav {
        display:none;
        width:100%;
        flex-direction:column;
        padding-bottom:18px
    }

.main-nav.is-open {
        display:flex
    }

.menu-toggle {
        display:block
    }

.nav {
        flex-wrap:wrap;
        padding:16px 0
    }

}

@media(max-width:680px) {
.hero-board {
        padding:10px
    }

.gold-frame {
        padding:22px 14px
    }

.product-cards,.cards-grid,.price-grid,.workshop-grid {
        grid-template-columns:1fr
    }

.decor {
        opacity:.28
    }

.bio-logos {
        flex-direction:column
    }

}



/* ==========================================================
   PAGES PHP COMPATIBLES AVEC L'ACCUEIL
   ========================================================== */
.syrup-section-title { margin-bottom: 28px; }
.syrup-section-title h2 { margin: 6px 0 0; color: var(--gold-light); font-family: var(--title); font-weight: 400; text-transform: uppercase; letter-spacing: 2px; font-size: clamp(2rem, 4vw, 4rem); }
.syrup-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.syrup-family-rare { background: radial-gradient(circle at 16% 20%, rgba(180, 92, 74, 0.10), transparent 30%), #060403; }
.syrup-card { min-width: 0; border: 1px solid var(--border); background: #080604; transition: transform 0.22s ease, border-color 0.22s ease; }
.syrup-card:hover { transform: translateY(-5px); border-color: var(--gold-light); }
.syrup-card-link { display: block; height: 100%; }
.syrup-card-visual { position: relative; min-height: 320px; padding: 28px; display: grid; place-items: center; background: radial-gradient(circle, rgba(112, 133, 72, 0.12), transparent 42%), #030302; }
.syrup-card-visual img { max-height: 270px; object-fit: contain; }
.product-badge { position: absolute; top: 14px; left: 14px; padding: 7px 10px; border: 1px solid var(--border); background: rgba(0, 0, 0, 0.82); color: var(--gold-light); font-family: var(--title); text-transform: uppercase; letter-spacing: 1px; font-size: 0.75rem; }
.syrup-card-content { padding: 24px; }
.syrup-card-content h3 { margin: 0; color: var(--gold-light); font-family: var(--title); font-weight: 400; text-transform: uppercase; letter-spacing: 1.5px; font-size: 1.7rem; }
.syrup-card-content p { font-family: var(--serif); line-height: 1.5; }
.syrup-card-footer { display: flex; justify-content: space-between; gap: 18px; color: var(--gold-light); }
.discover-button { display: block; margin-top: 20px; padding-top: 14px; border-top: 1px solid rgba(199, 154, 90, 0.4); color: var(--gold-light); font-family: var(--title); text-transform: uppercase; letter-spacing: 1px; }
.product-toolbar { border-bottom: 1px solid rgba(199, 154, 90, 0.4); background: #070504; }
.product-toolbar-inner { min-height: 68px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.dynamic-product-sheet { width: min(1440px, 96%); margin: 28px auto; border: 3px double var(--border); background: #030302; }
.dynamic-product-intro { display: grid; grid-template-columns: 42% 58%; min-height: 620px; border-bottom: 1px solid var(--border); }
.dynamic-product-image { padding: 42px; display: grid; place-items: center; border-right: 1px solid var(--border); }
.dynamic-product-image img { max-height: 540px; object-fit: contain; }
.dynamic-product-copy { padding: 58px 48px; }
.dynamic-product-copy h1 { margin: 8px 0; color: var(--gold-light); font-family: var(--title); font-weight: 400; text-transform: uppercase; line-height: 0.92; letter-spacing: 2px; font-size: clamp(3.5rem, 7vw, 7rem); }
.dynamic-latin { color: var(--gold-light); font-size: 1.6rem; }
.dynamic-subtitle { color: var(--gold); font-size: 1.25rem; font-style: italic; }
.dynamic-profile { color: #9ca756; font-size: 1.3rem; font-style: italic; line-height: 1.5; }
.dynamic-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 28px; }
.dynamic-facts div { padding: 16px; border: 1px solid rgba(199, 154, 90, 0.5); }
.dynamic-facts dt { color: var(--gold); font-family: var(--title); text-transform: uppercase; }
.dynamic-facts dd { margin: 7px 0 0; color: var(--gold-light); font-weight: 700; }
.dynamic-section { padding: 58px 40px; border-bottom: 1px solid var(--border); }
.dynamic-uses { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.dynamic-uses article, .dynamic-recipes article { padding: 22px; border: 1px solid rgba(199, 154, 90, 0.5); background: #080604; }
.dynamic-uses h3, .dynamic-recipes h3, .dynamic-recipes h4 { color: var(--gold-light); font-family: var(--title); text-transform: uppercase; }
.dynamic-recipes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.dynamic-engagement { padding: 40px; text-align: center; }
.dynamic-engagement p { color: var(--gold-light); font-size: 1.4rem; font-style: italic; }
.dynamic-engagement strong { color: var(--green); letter-spacing: 3px; }
.admin-page { min-height: 100vh; display: grid; place-items: center; padding: 30px; }
.admin-box { width: min(700px, 100%); padding: 32px; border: 1px solid var(--border); background: #080604; }
.admin-box form, .admin-box label { display: grid; gap: 12px; }
.admin-box input { padding: 12px; border: 1px solid var(--border); background: #000; color: var(--white); }
.admin-success, .admin-error { margin: 12px 0; padding: 12px; border: 1px solid; }
.admin-success { border-color: #708548; }
.admin-error { border-color: #b45c4a; }
.error-page { min-height: 60vh; padding: 80px 0; }

@media (max-width: 980px) {
    .syrup-grid { grid-template-columns: repeat(2, 1fr); }
    .dynamic-product-intro { grid-template-columns: 1fr; }
    .dynamic-product-image { border-right: 0; border-bottom: 1px solid var(--border); }
    .dynamic-uses { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px) {
    .syrup-grid, .dynamic-facts, .dynamic-uses, .dynamic-recipes { grid-template-columns: 1fr; }
    .product-toolbar-inner { padding: 12px 0; flex-direction: column; align-items: stretch; }
    .dynamic-product-copy, .dynamic-section { padding: 30px 20px; }
}

@page { size: A4 portrait; margin: 10mm; }

@media print {
    body { background: #fff; color: #111; }
    .site-header, .site-footer, .no-print { display: none !important; }
    .dynamic-product-sheet { width: 100%; margin: 0; border: 1px solid #76552d; background: #fff; }
    .dynamic-product-intro { min-height: auto; grid-template-columns: 38% 62%; }
    .dynamic-product-image { padding: 8mm; }
    .dynamic-product-image img { max-height: 105mm; }
    .dynamic-product-copy { padding: 8mm; }
    .dynamic-product-copy h1 { color: #5d3d19; font-size: 30pt; }
    .dynamic-section { padding: 8mm; }
    .dynamic-uses, .dynamic-recipes { grid-template-columns: repeat(2, 1fr); gap: 4mm; }
    .dynamic-uses article, .dynamic-recipes article { background: #fff; break-inside: avoid; }
    .dynamic-engagement { padding: 6mm; }
}