/* ============================================================
   KVM Joaillerie — Home CSS (front-page.php)
   Dual Collection Panels — Emerald Design
   ============================================================ */

body.home { overflow-x: hidden; }

.kvm-home { min-height: 100vh; }

/* — Dual Panels Container — hero deux univers — */
.kvm-dual {
    position: relative;
    height: min(88svh, 860px);
    min-height: 620px;
    padding: clamp(104px, 12vh, 120px) clamp(20px, 4vw, 64px) clamp(32px, 5vw, 64px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(16px, 2vw, 28px);
    transition: grid-template-columns 900ms var(--ease-cubic-soft);
    overflow: hidden;
    background: var(--emerald);
}
.kvm-dual.is-silver { grid-template-columns: 1.6fr 1fr; }
.kvm-dual.is-gold   { grid-template-columns: 1fr 1.6fr; }

/* Medial rule retirée : cadre menthe + column-gap la remplacent */
.kvm-dual-rule { display: none; }

/* — Panel — encadré, coins arrondis — */
.kvm-panel {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
    border-radius: 14px;
    color: #F8F6F1;
}

.kvm-panel-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.05);
    transition: transform 1400ms var(--ease-cubic-soft), filter 1400ms var(--ease-cubic-soft);
}
.kvm-panel:hover .kvm-panel-bg { transform: scale(1.0); }

.kvm-panel--silver .kvm-panel-bg {
    background-color: #7A8A82;
    filter: grayscale(0.7) contrast(1.05) brightness(0.92);
}
.kvm-panel--gold .kvm-panel-bg {
    background-color: #8A7A5A;
    filter: saturate(1.02) contrast(1.03) brightness(0.94);
}

/* Voile sombre léger, concentré en bas (charte §4) */
.kvm-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.38) 100%);
    transition: background 800ms var(--ease-out);
}
.kvm-panel:hover::after {
    background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.30) 100%);
}

/* — Panel Inner — */
.kvm-panel-inner {
    position: relative;
    z-index: 1;
    height: 100%;
    padding: clamp(36px, 5vw, 64px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Panel top */
.kvm-panel-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    color: rgba(248, 246, 241, 0.7);
}
.kvm-panel-marker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.kvm-marker-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}
.kvm-panel--silver .kvm-marker-dot { background: var(--silver); }
.kvm-panel--gold .kvm-marker-dot { background: var(--gold); }

/* Panel title */
.kvm-panel-title {
    font-family: var(--serif);
    font-weight: 300;
    font-size: clamp(3rem, 7.2vw, 7.8rem);
    line-height: 0.88;
    letter-spacing: -0.035em;
    margin: 0;
    color: rgba(248,246,241,0.95);
}
.kvm-panel-title em {
    font-style: italic;
    font-weight: 300;
}
.kvm-panel--silver .kvm-panel-title em { color: #DCDAD2; }
.kvm-panel--gold .kvm-panel-title em { color: var(--gold); }

/* Panel bottom */
.kvm-panel-bottom {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 24px;
}
.kvm-panel-lede {
    max-width: 40ch;
    font-family: var(--serif);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1rem, 1.3vw, 1.2rem);
    line-height: 1.45;
    color: rgba(248,246,241,0.86);
}

/* CTA with arrow */
.kvm-panel-cta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: var(--sans);
    font-size: var(--cap);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    border-bottom: 1px solid rgba(248,246,241,0.5);
    padding-bottom: 6px;
    transition: border-color 400ms var(--ease-out), gap 400ms var(--ease-out);
    white-space: nowrap;
}
.kvm-cta-arrow {
    display: inline-block;
    width: 22px;
    height: 1px;
    background: currentColor;
    position: relative;
    transition: width 400ms var(--ease-quart);
}
.kvm-cta-arrow::after {
    content: "";
    position: absolute;
    right: 0;
    top: -3px;
    width: 7px;
    height: 7px;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    transform: rotate(45deg);
}
.kvm-panel:hover .kvm-panel-cta { border-color: rgba(248,246,241,1); }
.kvm-panel:hover .kvm-cta-arrow { width: 38px; }

/* — Mobile — */
@media (max-width: 860px) {
    .kvm-dual {
        grid-template-columns: 1fr;
        height: auto;
    }
    .kvm-dual.is-silver,
    .kvm-dual.is-gold {
        grid-template-columns: 1fr;
    }
    .kvm-dual-rule { display: none; }
    .kvm-panel { min-height: 50vh; }
    .kvm-panel-title {
        font-size: clamp(2.5rem, 12vw, 5rem);
    }
    .kvm-panel-bottom {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .kvm-home {
        height: auto;
        overflow: visible;
    }
    body.home { overflow: visible; }
}

/* ============================================================
   Sections below-fold — premium éditorial (thème clair)
   ============================================================ */
.kvm-home-section { max-width: 1500px; margin: 0 auto; padding: clamp(64px, 9vw, 128px) clamp(20px, 4vw, 64px); }
.kvm-home-section + .kvm-home-section { padding-top: 0; }

.kvm-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(28px, 4vw, 52px); flex-wrap: wrap; }
.kvm-sec-eyebrow { font-family: var(--sans); font-size: var(--cap-tight); text-transform: uppercase; letter-spacing: 0.28em; color: var(--cream-soft); display: block; margin-bottom: 14px; }
.kvm-sec-title { font-family: var(--serif); font-weight: 300; font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1; letter-spacing: -0.02em; color: var(--cream); }
.kvm-sec-title em { font-style: italic; }
.kvm-sec-link { font-family: var(--sans); font-size: var(--cap); text-transform: uppercase; letter-spacing: 0.2em; color: var(--cream); border-bottom: 1px solid var(--cream); padding-bottom: 4px; white-space: nowrap; transition: color 200ms, border-color 200ms; }
.kvm-sec-link:hover { color: var(--gold); border-color: var(--gold); }

/* Sélection — grille produits */
.kvm-featured-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(24px, 3vw, 44px) clamp(16px, 2vw, 30px); }
@media (min-width: 900px) { .kvm-featured-grid { grid-template-columns: repeat(4, 1fr); } }

/* Atelier — bloc éditorial */
.kvm-ethos { background: var(--emerald-deep); }
.kvm-ethos-inner { max-width: 1500px; margin: 0 auto; padding: clamp(72px, 10vw, 150px) clamp(20px, 4vw, 64px); display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 48px); }
@media (min-width: 860px) { .kvm-ethos-inner { grid-template-columns: 0.9fr 1.1fr; align-items: center; } }
.kvm-ethos-eyebrow { font-size: var(--cap-tight); text-transform: uppercase; letter-spacing: 0.28em; color: var(--cream-soft); }
.kvm-ethos-quote { font-family: var(--serif); font-weight: 300; font-size: clamp(1.6rem, 3.2vw, 2.6rem); line-height: 1.28; letter-spacing: -0.01em; color: var(--cream); }
.kvm-ethos-quote em { font-style: italic; }
.kvm-ethos-text { color: var(--cream-soft); font-size: 1.0625rem; line-height: 1.7; max-width: 52ch; }
.kvm-ethos-text p + p { margin-top: 16px; }

/* Valeurs — 3 colonnes */
.kvm-values { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--cream-rule); border-top: 1px solid var(--cream-rule); border-bottom: 1px solid var(--cream-rule); }
@media (min-width: 720px) { .kvm-values { grid-template-columns: repeat(3, 1fr); } }
.kvm-value { background: var(--emerald); padding: clamp(36px, 5vw, 64px) clamp(24px, 3vw, 40px); text-align: center; }
.kvm-value svg { width: 30px; height: 30px; color: var(--cream); margin: 0 auto 18px; }
.kvm-value h4 { font-family: var(--serif); font-weight: 400; font-size: 1.2rem; color: var(--cream); margin-bottom: 10px; }
.kvm-value p { color: var(--cream-soft); font-size: 0.9rem; line-height: 1.6; max-width: 32ch; margin: 0 auto; }