/* ============================================================
   ACHAT LIBRE — Page-specific additions (v3)
   Inherits design system from boucherie.css (.bch-*)
   Page-specific: .al-* classes
   Direction: Heritage Maison — editorial + earthy + elegant
   ============================================================ */

.al {
    /* inherit all --bch-* tokens from boucherie.css via .bch container */
    font-family: var(--bch-font-sans);
    color: var(--bch-ink);
    background: var(--bch-cream);
}

/* Section header compact variant (FAQ) */
.bch-section-header--compact {
    padding: clamp(50px, 7vw, 80px) 24px clamp(24px, 3vw, 40px);
    text-align: left;
}

/* =========================================================
   AL-PRODUCTS — 3 product cards (Agneau, Agnelle, Brebis)
   Distinctive per-variant tinting via CSS custom properties
   ========================================================= */
.al-products {
    position: relative;
    padding: 0 0 clamp(80px, 12vh, 140px);
    background:
        radial-gradient(ellipse at 20% 0%, rgba(197, 171, 114, .12) 0%, transparent 55%),
        radial-gradient(ellipse at 100% 100%, rgba(139, 111, 63, .08) 0%, transparent 50%),
        var(--bch-cream-deep);
}
.al-products::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 48px;
    background: linear-gradient(180deg, transparent, var(--bch-gold));
    opacity: .6;
    pointer-events: none;
}

.al-products-grid {
    list-style: none;
    padding: 0 clamp(20px, 3vw, 40px);
    margin: 0 auto;
    max-width: 1280px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(22px, 2.2vw, 36px);
}

/* Base card shell */
.al-product-card {
    /* Per-variant tokens — overriden by modifier classes below */
    --al-accent:       var(--bch-gold);
    --al-accent-deep:  var(--bch-gold-deep);
    --al-accent-soft:  rgba(197, 171, 114, .18);
    --al-tint-a:       rgba(230, 199, 118, .22);
    --al-tint-b:       rgba(197, 171, 114, .10);
    --al-figure-bg:    linear-gradient(155deg, #F5EEDB 0%, var(--bch-cream-deep) 55%, #E9DFC9 100%);
    --al-watermark:    rgba(139, 111, 63, .06);
    --al-stripe:       linear-gradient(90deg, var(--bch-gold-bright), var(--bch-gold), var(--bch-gold-deep));

    list-style: none;
    position: relative;
    background: var(--bch-cream);
    border: 1px solid var(--al-accent-soft);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    isolation: isolate;
    transition:
        transform .55s cubic-bezier(.2, .8, .2, 1),
        box-shadow .5s ease,
        border-color .3s ease;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .6) inset,
        0 10px 30px -20px rgba(15, 15, 15, .18);
}

/* Top color stripe (variant accent) */
.al-product-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--al-stripe);
    z-index: 5;
    pointer-events: none;
}

/* Roman numeral watermark (huge, faint, behind everything) */
.al-product-watermark {
    position: absolute;
    bottom: -36px;
    right: -14px;
    font-family: var(--bch-font-serif);
    font-style: italic;
    font-weight: 900;
    font-size: clamp(200px, 22vw, 300px);
    line-height: .82;
    color: var(--al-watermark);
    letter-spacing: -.05em;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    transition: transform .8s cubic-bezier(.2, .8, .2, 1);
}

.al-product-card:hover {
    transform: translateY(-8px);
    border-color: var(--al-accent);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .8) inset,
        0 24px 60px -24px rgba(15, 15, 15, .28),
        0 0 0 1px var(--al-accent-soft);
}
.al-product-card:hover .al-product-watermark {
    transform: translateY(-10px) rotate(-3deg);
}

/* ---- Per-variant identity ---- */
.al-product-card--agneau {
    --al-accent:       #D9BE7B;
    --al-accent-deep:  #B79243;
    --al-accent-soft:  rgba(217, 190, 123, .30);
    --al-figure-bg:    linear-gradient(155deg, #FAF3DC 0%, #F0E4C3 60%, #E5D49F 100%);
    --al-watermark:    rgba(183, 146, 67, .08);
    --al-stripe:       linear-gradient(90deg, #E6C776, #D9BE7B, #B79243);
}
.al-product-card--agnelle {
    --al-accent:       #C5AB72;
    --al-accent-deep:  #9C7F40;
    --al-accent-soft:  rgba(197, 171, 114, .30);
    --al-figure-bg:    linear-gradient(155deg, #F4ECD4 0%, #E8D9B3 55%, #D9C492 100%);
    --al-watermark:    rgba(156, 127, 64, .08);
    --al-stripe:       linear-gradient(90deg, #D9BE7B, #C5AB72, #9C7F40);
}
.al-product-card--brebis {
    --al-accent:       #A88754;
    --al-accent-deep:  #6E5528;
    --al-accent-soft:  rgba(168, 135, 84, .30);
    --al-figure-bg:    linear-gradient(155deg, #EEE1BF 0%, #D8C28F 55%, #B89B5F 100%);
    --al-watermark:    rgba(110, 85, 40, .09);
    --al-stripe:       linear-gradient(90deg, #C5AB72, #A88754, #6E5528);
}

/* ---- Figure (product image block) ---- */
.al-product-figure {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--al-figure-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 28px 20px 24px;
    z-index: 1;
    isolation: isolate;
}
.al-product-figure::after {
    /* vignette inner for depth */
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 110%, rgba(15, 15, 15, .18) 0%, transparent 55%),
        radial-gradient(ellipse at 50% -10%, rgba(255, 255, 255, .45) 0%, transparent 50%);
    pointer-events: none;
    z-index: 1;
}
.al-product-figure img {
    position: relative;
    z-index: 2;
    max-width: 82%;
    max-height: 88%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform .7s cubic-bezier(.2, .8, .2, 1), filter .5s ease;
    filter: drop-shadow(0 14px 22px rgba(15, 15, 15, .22)) drop-shadow(0 2px 4px rgba(15, 15, 15, .12));
}
.al-product-card:hover .al-product-figure img {
    transform: scale(1.07) rotate(-2deg);
    filter: drop-shadow(0 20px 32px rgba(15, 15, 15, .3)) drop-shadow(0 3px 6px rgba(15, 15, 15, .15));
}

/* Roman numeral small (corner, above figure) */
.al-product-roman {
    position: absolute;
    top: 14px;
    left: 18px;
    z-index: 3;
    font-family: var(--bch-font-serif);
    font-style: italic;
    font-weight: 900;
    font-size: 30px;
    color: var(--al-accent-deep);
    opacity: .55;
    letter-spacing: 1px;
    pointer-events: none;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
}

/* Origine certifiée badge (top-right of figure) */
.al-product-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px 5px 8px;
    background: var(--bch-forest-deep);
    color: var(--bch-gold-bright);
    font-family: var(--bch-font-sans);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    border-radius: 999px;
    box-shadow: 0 4px 10px rgba(11, 38, 32, .3);
}
.al-product-badge svg {
    color: var(--bch-gold-bright);
    flex-shrink: 0;
}

/* ---- Body ---- */
.al-product-body {
    position: relative;
    z-index: 2;
    padding: 24px 26px 26px;
    display: flex;
    flex-direction: column;
    flex: 1;
    background: var(--bch-cream);
}

/* Tagline ("Le jeune", "La délicatesse", "Le caractère") */
.al-product-tagline {
    font-family: var(--bch-font-sans);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--al-accent-deep);
    margin: 0 0 10px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
}
.al-product-tagline::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 1px;
    background: var(--al-accent);
}

/* Product title (Playfair italic, big) */
.al-product-title {
    font-family: var(--bch-font-serif);
    font-weight: 400;
    font-size: clamp(28px, 2.4vw, 38px);
    line-height: 1;
    color: var(--bch-ink);
    margin: 0 0 8px;
    letter-spacing: -.015em;
}
.al-product-title em {
    font-style: italic;
    font-weight: 700;
    background: linear-gradient(180deg, var(--al-accent) 0%, var(--al-accent-deep) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Subtitle (italic serif, muted) */
.al-product-sub {
    font-family: var(--bch-font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.4;
    color: var(--bch-muted);
    margin: 0 0 20px;
}

/* Specs grid */
.al-product-specs {
    margin: 0 0 20px;
    padding: 14px 0;
    border-top: 1px solid rgba(15, 15, 15, .08);
    border-bottom: 1px solid rgba(15, 15, 15, .08);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.al-spec {
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: left;
}
.al-spec dt {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--bch-muted);
    margin: 0;
}
.al-spec dd {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--bch-ink);
    margin: 0;
    line-height: 1.3;
}

/* Price row */
.al-product-price-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin: 4px 0 22px;
}
.al-product-price-wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.al-product-price-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--bch-muted);
}
.al-product-price {
    font-family: var(--bch-font-serif);
    font-weight: 400;
    font-size: clamp(48px, 4.6vw, 64px);
    color: var(--bch-forest);
    line-height: 1;
    letter-spacing: -.025em;
    display: inline-flex;
    align-items: baseline;
}
.al-product-price em {
    font-style: italic;
    font-weight: 700;
    color: var(--bch-forest);
}
.al-product-price-eur {
    font-family: var(--bch-font-sans);
    font-style: normal;
    font-weight: 700;
    font-size: .5em;
    color: var(--al-accent-deep);
    vertical-align: 0.4em;
    margin-left: 3px;
    letter-spacing: 0;
}
.al-product-price-ttc {
    font-family: var(--bch-font-sans);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--bch-muted);
    text-align: right;
    line-height: 1.35;
    padding-bottom: 6px;
    flex-shrink: 0;
}

.al-product-cta {
    width: 100%;
    justify-content: center;
    margin-top: auto;
}

/* Footer disclaimer */
.al-products-foot {
    max-width: 780px;
    margin: clamp(32px, 5vw, 56px) auto 0;
    padding: 0 clamp(20px, 3vw, 40px);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 12px;
    line-height: 1.55;
    color: var(--bch-muted);
    text-align: left;
}
.al-products-foot svg {
    color: var(--bch-gold-deep);
    margin-top: 2px;
    flex-shrink: 0;
}

/* =========================================================
   AL-PROCESS — 4 étapes
   ========================================================= */
.al-process {
    padding: 0 0 clamp(80px, 12vh, 140px);
    background: var(--bch-cream);
}
.al-process-list {
    list-style: none;
    padding: 0 clamp(20px, 3vw, 40px);
    margin: 0 auto;
    max-width: 1240px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(20px, 2vw, 32px);
    counter-reset: step;
    position: relative;
}
.al-process-list::before {
    content: "";
    position: absolute;
    top: 70px;
    left: 12%;
    right: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--bch-gold), transparent);
    opacity: .35;
    pointer-events: none;
}

.al-step {
    list-style: none;
    text-align: center;
    padding: 0 10px;
    position: relative;
    z-index: 1;
}

.al-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border: 1px solid var(--bch-gold);
    border-radius: 50%;
    background: var(--bch-cream);
    font-family: var(--bch-font-serif);
    font-style: italic;
    font-weight: 700;
    font-size: 20px;
    color: var(--bch-gold-deep);
    margin: 0 auto 18px;
    box-shadow: 0 4px 18px rgba(197, 171, 114, .2);
    letter-spacing: 0;
}

.al-step-icon {
    color: var(--bch-forest);
    margin: 0 auto 14px;
    display: block;
    opacity: .85;
}

.al-step-title {
    font-family: var(--bch-font-serif);
    font-style: italic;
    font-weight: 700;
    font-size: clamp(18px, 1.8vw, 22px);
    color: var(--bch-ink);
    margin: 0 0 10px;
}

.al-step-text {
    font-size: 13px;
    line-height: 1.6;
    color: var(--bch-muted);
    margin: 0 auto;
    max-width: 240px;
}

/* =========================================================
   AL-FAQ
   ========================================================= */
.al-faq {
    padding: clamp(80px, 12vh, 140px) 0;
    background: var(--bch-cream-deep);
}
.al-faq-inner {
    max-width: 840px;
    margin: 0 auto;
    padding: 0 clamp(20px, 3vw, 40px);
}
.al-faq-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 20px;
}
.al-faq-item {
    background: var(--bch-cream);
    border: 1px solid rgba(197, 171, 114, .22);
    border-radius: 2px;
    overflow: hidden;
    transition: border-color .3s ease, background .3s ease;
}
.al-faq-item[open] {
    border-color: rgba(197, 171, 114, .5);
    background: var(--bch-cream);
}
.al-faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 22px;
    font-family: var(--bch-font-serif);
    font-style: italic;
    font-weight: 600;
    font-size: 17px;
    color: var(--bch-ink);
    cursor: pointer;
    list-style: none;
    transition: color .3s ease;
}
.al-faq-item summary::-webkit-details-marker { display: none; }
.al-faq-item summary::after {
    content: "+";
    font-family: var(--bch-font-serif);
    font-style: normal;
    font-weight: 400;
    font-size: 28px;
    color: var(--bch-gold-deep);
    line-height: 1;
    transition: transform .4s cubic-bezier(.2, .8, .2, 1);
    flex-shrink: 0;
}
.al-faq-item[open] summary::after {
    transform: rotate(45deg);
}
.al-faq-item summary:hover { color: var(--bch-gold-deep); }
.al-faq-item p {
    margin: 0;
    padding: 0 22px 22px;
    font-family: var(--bch-font-sans);
    font-size: 14px;
    line-height: 1.7;
    color: var(--bch-ink-soft);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
/* Tablet ≤ 1024px */
@media (max-width: 1024px) {
    .al-products-grid { grid-template-columns: repeat(2, 1fr); }
    .al-product-card:last-child {
        grid-column: 1 / -1;
        max-width: 540px;
        justify-self: center;
    }
    .al-product-watermark { font-size: clamp(180px, 26vw, 260px); }

    .al-process-list { grid-template-columns: repeat(2, 1fr); gap: 40px 30px; }
    .al-process-list::before { display: none; }
}

/* Mobile ≤ 720px */
@media (max-width: 720px) {
    .al-products { padding-bottom: 56px; }
    .al-products-grid {
        grid-template-columns: 1fr;
        padding: 0 16px;
        gap: 18px;
    }
    .al-product-card:last-child { max-width: none; }

    .al-product-watermark {
        font-size: 200px;
        bottom: -40px;
        right: -10px;
    }

    .al-product-figure { aspect-ratio: 16 / 10; padding: 22px 18px 18px; }
    .al-product-figure img { max-width: 78%; max-height: 86%; }
    .al-product-roman { font-size: 24px; top: 10px; left: 14px; }
    .al-product-badge { font-size: 8.5px; letter-spacing: 1.5px; padding: 4px 9px 4px 7px; gap: 5px; top: 10px; right: 10px; }
    .al-product-badge svg { width: 10px; height: 10px; }

    .al-product-body { padding: 22px 20px 22px; }
    .al-product-tagline { font-size: 9.5px; letter-spacing: 2.5px; margin-bottom: 8px; }
    .al-product-title { font-size: 26px; margin-bottom: 6px; }
    .al-product-sub { font-size: 13px; margin-bottom: 16px; }

    .al-product-specs {
        padding: 12px 0;
        margin-bottom: 16px;
        gap: 8px;
    }
    .al-spec dt { font-size: 8.5px; letter-spacing: 1.2px; }
    .al-spec dd { font-size: 11.5px; }

    .al-product-price-row { margin: 4px 0 18px; gap: 10px; }
    .al-product-price-label { font-size: 9px; letter-spacing: 1.5px; }
    .al-product-price { font-size: 44px; }
    .al-product-price-eur { font-size: .48em; }
    .al-product-price-ttc { font-size: 8.5px; letter-spacing: 1.5px; padding-bottom: 5px; }
    .al-product-cta { padding: 13px 18px; font-size: 11px; letter-spacing: 1.8px; }

    .al-products-foot { margin-top: 28px; padding: 0 16px; font-size: 11.5px; }

    .al-process { padding-bottom: 56px; }
    .al-process-list {
        grid-template-columns: 1fr;
        gap: 26px;
        padding: 0 18px;
    }
    .al-step { padding: 0; }
    .al-step-num {
        width: 44px;
        height: 44px;
        font-size: 16px;
        margin-bottom: 12px;
    }
    .al-step-icon { width: 32px; height: 32px; margin-bottom: 10px; }
    .al-step-title { font-size: 18px; margin-bottom: 8px; }
    .al-step-text { font-size: 12.5px; line-height: 1.55; max-width: 320px; }

    .al-faq { padding: 56px 0; }
    .al-faq-inner { padding: 0 16px; }
    .al-faq-item summary {
        font-size: 14.5px;
        padding: 14px 16px;
        gap: 10px;
    }
    .al-faq-item summary::after { font-size: 22px; }
    .al-faq-item p {
        font-size: 12.5px;
        padding: 0 16px 16px;
        line-height: 1.65;
    }
}

/* Very small ≤ 380px */
@media (max-width: 380px) {
    .al-product-figure { aspect-ratio: 3 / 2; padding: 18px 14px 14px; }
    .al-product-body { padding: 18px 16px 18px; }
    .al-product-title { font-size: 24px; }
    .al-product-sub { font-size: 12px; }
    .al-product-price { font-size: 38px; }
    .al-product-specs {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 6px;
    }
    .al-spec dt { font-size: 8px; }
    .al-spec dd { font-size: 11px; }
    .al-product-watermark { font-size: 180px; bottom: -34px; }
    .al-faq-item summary { font-size: 13.5px; padding: 12px 14px; }
    .al-faq-item p { font-size: 12px; padding: 0 14px 14px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .al-product-card,
    .al-product-card:hover,
    .al-product-card:hover .al-product-figure img,
    .al-product-card:hover .al-product-watermark,
    .al-faq-item[open] summary::after {
        transform: none !important;
        animation: none !important;
    }
}