:root{
    --beige-light: #D9C1B4; /*  (tu peux changer) */
    --brown-light: #735149;
    --beige-: #BFA08E;
    --brown-dark: #401D16;
    --white: #FAF8F6;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}

/*  Body */
body{
    font-family: "Times New Roman", serif;
    background: var(--white);
    color: var(--brown-dark);
    line-height:1.5;
}

/* Navigation  */
.main-nav{
    background: var(--brown-light);
    padding: 15px 10px;
    box-shadow: 0 4px 0 rgba(0,0,0,0.05);
}
.main-nav ul{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    justify-content:center;
    gap:36px;
    align-items:center;
    font-family: "Times new roman", serif;
    font-size:18px;
}
.main-nav a{
    color: var(--white);
    text-decoration:none;
    padding:6px 10px;
    border-radius:6px;
}
.main-nav a:hover{
    background: var(--brown-light);
    color: var(--beige-);
}

/* ====== Hero / Header ====== */
.hero{
    padding: 40px 20px;
    text-align:center;
}
.hero-inner{
    max-width:1000px;
    margin:0 auto;
}
.hero h1{
    font-family: "Times new roman", serif;
    font-size:64px;
    margin:0 0 6px 0;
    color: var(--brown-dark);
    letter-spacing: 2px;
}
.lead{
    margin:0;
    color: rgba(120,88,63,0.9);
}

/* ====== Sections ====== */
.section{
    padding: 40px 20px;
    max-width:1200px;
    margin:0 auto;
}
.section.alt{
    background: rgba(120,88,63,0.05);
}

/* Titres */
h2{
    font-family: "Brown Sugar", serif;
    font-size:36px;
    margin-bottom:8px;
    text-align:center;
}

/* Sous-catégories */
.sub-categories{
    display:flex;
    justify-content:center;
    gap:18px;
    margin:20px 0 30px 0;
    flex-wrap:wrap;
}
.cat{
    background: var(--brown-light);
    color: var(--white);
    padding:12px 20px;
    border-radius:10px;
    text-decoration:none;
    font-weight:700;
}
.cat:hover{ background: var(--brown-dark); color: var(--white); }

/* ====== Galerie : 2 par ligne ====== */
.gallery{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap:22px;
    margin-top:30px;
}

.card{
   
    border-radius:10px;
    overflow:hidden;
    box-shadow: 0 6px 18px rgba(120,88,63,0.10);
    text-align:center;
    transition: transform .18s ease, box-shadow .18s ease;
}

.card img{
    width:100%;
    height:330px; /* grande hauteur */
    object-fit:cover;
}

.card figcaption{
    padding:15px;
    font-weight:600;
    color: var(--brown-dark);
}

.card:hover{
    transform: translateY(-6px);
    box-shadow: 0 18px 30px rgba(120,88,63,0.15);
}

/* responsive */
@media (max-width:768px){
    .gallery{ grid-template-columns: 1fr; }
}


/* Hover effet */
.card:hover{
    transform: translateY(-6px);
    box-shadow: 0 18px 30px rgba(120,88,63,0.12);
    
}



/* ====== Footer ====== */
.footer{
    background: var(--brown-dark);
    color: var(--white);
    padding:30px 20px;
    margin-top:40px;
    text-align:center;
}
.footer .small{opacity:0.9}

/* ====== Responsive ====== */
@media (max-width: 1024px){
    .hero h1{ font-size:48px; }
    .gallery{ grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 800px){
    .main-nav ul{ gap:18px; font-size:16px; }
    .hero h1{ font-size:40px; }
    .gallery{ grid-template-columns: repeat(2, 1fr); }
    .card img{ height:200px; }
}

@media (max-width: 480px){
    .hero h1{ font-size:32px; }
    .gallery{ grid-template-columns: 1fr; }
    .card img{ height:260px; }
    .main-nav ul{ flex-wrap:wrap; gap:12px; }
}