/* ================================================
   HERO — PAGE ACCUEIL
   /assets/css/home.css
================================================ */

/* ── LAYOUT GÉNÉRAL ── */
#hero {
    background: #FAF8F3;
    position: relative;
    overflow: hidden;
    min-height: 100vh;
}

/* Desktop : 2 colonnes côte à côte */
@media (min-width: 901px) {
    #hero {
        display: grid;
        grid-template-columns: 1fr 1.05fr;
        align-items: stretch;
        min-height: 100vh;
    }
    #hero::after {
        content: '';
        position: absolute;
        top: 15%; bottom: 15%;
        left: 50%;
        width: 1px;
        background: linear-gradient(to bottom, transparent, rgba(180,150,90,0.18) 30%, rgba(180,150,90,0.18) 70%, transparent);
        z-index: 1;
    }
}

/* Mobile : flex colonne */
@media (max-width: 900px) {
    #hero {
        display: flex;
        flex-direction: column;
        min-height: auto;
    }
}

/* Grain papier subtil */
#hero::before {
    content: '';
    position: absolute; inset: 0; z-index: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events: none;
}

/* ── COLONNE TEXTE ── */
#hero-text {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: calc(80px + clamp(40px, 6vw, 80px)) clamp(24px, 6vw, 80px) clamp(40px, 6vw, 80px) clamp(24px, 8vw, 100px);
}
@media (max-width: 900px) {
    #hero-text {
        padding: calc(80px + 40px) 24px 40px 24px;
        align-items: flex-start;
    }
}

/* ── COLONNE BOUTEILLES ── */
#hero-bottles {
    position: relative;
    z-index: 5;
    background: linear-gradient(160deg, #F5F0E8 0%, #EDE6D6 50%, #E8DCC8 100%);
    overflow: hidden;
}

/* Desktop */
@media (min-width: 901px) {
    #hero-bottles { min-height: 100vh; }
    #hero-bottles::after {
        content: '';
        position: absolute; bottom: 0; left: 50%;
        transform: translateX(-50%);
        width: 70%; height: 80px;
        background: radial-gradient(ellipse, rgba(100,70,20,.18) 0%, transparent 70%);
        filter: blur(20px);
        pointer-events: none;
    }
    .hbottle { position: absolute; bottom: 0; will-change: transform; }
    .hb-center { left: 50%; transform: translateX(-50%); z-index: 3; animation: hbFloatC 7s ease-in-out infinite; }
    .hb-center img { height: clamp(340px, 52vh, 580px); display: block; }
    .hb-left  { left: 4%;  z-index: 2; animation: hbFloat 9s ease-in-out infinite; animation-delay: -3s; }
    .hb-left img  { height: clamp(240px, 38vh, 420px); display: block; opacity: .85; }
    .hb-right { right: 4%; z-index: 2; animation: hbFloat 8s ease-in-out infinite; animation-delay: -5s; }
    .hb-right img { height: clamp(220px, 35vh, 400px); display: block; opacity: .78; }
}

/* Mobile : bouteilles côte à côte */
@media (max-width: 900px) {
    #hero-bottles {
        height: auto;
        padding: 0 0 32px;
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }
    .hbottle { position: relative; flex-shrink: 0; bottom: auto; display: flex; align-items: flex-end; }
    .hb-center { z-index: 3; margin: 0 -12px; animation: hbFloatC 7s ease-in-out infinite; }
    .hb-center img { height: clamp(200px, 50vw, 300px); display: block; }
    .hb-left  { z-index: 2; animation: hbFloat 9s ease-in-out infinite; animation-delay: -3s; }
    .hb-left img  { height: clamp(150px, 38vw, 230px); display: block; opacity: .85; }
    .hb-right { z-index: 2; animation: hbFloat 8s ease-in-out infinite; animation-delay: -5s; }
    .hb-right img { height: clamp(140px, 35vw, 220px); display: block; opacity: .78; }
    #hero-bottles::after {
        content: '';
        position: absolute; bottom: 0; left: 50%;
        transform: translateX(-50%);
        width: 80%; height: 30px;
        background: radial-gradient(ellipse, rgba(100,70,20,.15) 0%, transparent 70%);
        filter: blur(10px);
        pointer-events: none;
    }
}

/* Ombres bouteilles */
.hbottle img { filter: drop-shadow(0 20px 40px rgba(80,50,10,.28)) drop-shadow(0 4px 12px rgba(80,50,10,.15)); }
.hb-left img, .hb-right img { filter: drop-shadow(0 14px 28px rgba(80,50,10,.2)); }

/* Gradient derrière les bouteilles */
#hero-bottles::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 80% 70% at 55% 90%, rgba(217,138,43,.1) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 30% 20%, rgba(240,220,180,.35) 0%, transparent 60%);
    pointer-events: none;
}

/* Animations */
@keyframes hbFloat  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes hbFloatC { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-16px); } }

/* ── ÉLÉMENTS TEXTE DU HERO ── */
.htag {
    display: inline-flex; align-items: center; gap: 8px;
    border: 1px solid rgba(46,74,56,0.2);
    background: rgba(46,74,56,0.06);
    border-radius: 100px; padding: 5px 14px; margin-bottom: 28px;
}
.htag-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #2E4A38;
    animation: hpulse 2.5s ease-in-out infinite;
}
@keyframes hpulse { 0%,100%{box-shadow:0 0 0 0 rgba(46,74,56,0.4)} 50%{box-shadow:0 0 0 5px rgba(46,74,56,0.08)} }

.htitle {
    font-family: 'Fraunces', serif;
    font-size: clamp(2.8rem, 5.5vw, 5.8rem);
    font-weight: 900;
    line-height: 0.92;
    letter-spacing: -0.03em;
    color: #1A1208;
    margin-bottom: 20px;
}
.htitle-em { display: block; font-style: italic; font-weight: 400; color: #D98A2B; letter-spacing: -0.01em; }
.hsub {
    color: #6B5E4E;
    font-size: clamp(0.95rem, 1.5vw, 1.05rem);
    line-height: 1.75;
    max-width: 420px;
    font-weight: 300;
    margin-bottom: 32px;
}
.hbtn-primary {
    display: inline-flex; align-items: center; gap: 10px;
    background: #1A1208; color: #FAF8F3;
    font-weight: 700; font-size: 0.9rem;
    padding: 14px 28px; border-radius: 100px;
    border: 2px solid #1A1208;
    transition: all .35s cubic-bezier(.16,1,.3,1);
    letter-spacing: .01em; text-decoration: none;
}
.hbtn-primary:hover { background: #D98A2B; border-color: #D98A2B; color: #1A1208; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(217,138,43,.25); }
.hbtn-secondary {
    display: inline-flex; align-items: center; gap: 10px;
    color: #6B5E4E; font-weight: 600; font-size: 0.9rem;
    padding: 14px 22px; border-radius: 100px;
    border: 1.5px solid rgba(107,94,78,.25);
    transition: all .3s ease; text-decoration: none;
}
.hbtn-secondary:hover { color: #1A1208; border-color: rgba(107,94,78,.5); background: rgba(107,94,78,.04); }
.hdivider { width: 44px; height: 2px; background: linear-gradient(90deg,#D98A2B,#F0B429); border-radius: 2px; margin: 28px 0; }
.hstats { display: flex; gap: 28px; flex-wrap: wrap; }
.hstat-val { font-family: 'Fraunces', serif; font-size: 1.5rem; font-weight: 700; color: #1A1208; line-height: 1; }
.hstat-lbl { font-size: .67rem; text-transform: uppercase; letter-spacing: .1em; color: #9C8C7A; margin-top: 3px; }

/* Badge bouteille */
.bottle-badge {
    position: absolute;
    background: #1A1208; color: #FAF8F3;
    font-size: .62rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .1em;
    padding: 4px 10px; border-radius: 100px;
    white-space: nowrap; z-index: 10;
}
@media (max-width: 900px) { .bottle-badge { display: none; } }