/**
 * Copyright © Hugo Stawiarski EI. Tous droits réservés.
 */

/* ===== Buttons ===== */
.btn {
    font-family: var(--mch-font); font-weight: 700; font-size: .95rem;
    border: none; border-radius: 8px;
    padding: 0 1.4rem; min-height: 48px;
    cursor: pointer; transition: .15s;
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    white-space: nowrap; text-decoration: none;
}
.btn:focus-visible { outline: 3px solid var(--mch-sky-blue); outline-offset: 2px; }
.btn.primary { background: var(--mch-blue); color: #fff; }
.btn.primary:hover { background: var(--mch-dark-blue); }
.btn.accent { background: var(--mch-yellow); color: var(--mch-gray-d80); }
.btn.accent:hover { background: var(--mch-yellow-d02); }
.btn.ghost { background: transparent; color: var(--mch-blue); box-shadow: inset 0 0 0 2px var(--mch-blue); }
.btn.ghost:hover { background: var(--mch-blue-l01); }
.btn.ghostw { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55); }
.btn.ghostw:hover { background: rgba(255,255,255,.12); }
.btn.lg { min-height: 54px; padding: 0 2rem; font-size: 1.05rem; }
.btn.sm { min-height: 36px; padding: 0 1rem; font-size: .82rem; }

/* ===== Header / nav ===== */
header.nav {
    position: sticky; top: 0; z-index: 40;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--mch-gray-l10);
    transition: transform .3s ease;
}
.nav .row { display: flex; align-items: center; gap: 28px; height: 68px; }
.brand { display: flex; align-items: center; gap: 0; text-decoration: none; }
.brand-logo { height: 28px; padding-bottom: 4px; width: auto; display: block; margin-right: 6px; }
.brand-logo-white { display: none; }
.brand .subbrand {
    font-family: var(--mch-font-title); font-weight: 800; font-size: .82rem;
    color: var(--mch-gray-d70); line-height: 1; margin-left: -3px;
}
.nav nav.mainnav { display: flex; gap: 22px; margin-left: 8px; align-items: center; }
.nav nav.mainnav a {
    font-size: .92rem; font-weight: 600;
    color: var(--mch-gray-d70); padding: 6px 0;
    border-bottom: 2px solid transparent;
    text-decoration: none;
}
.nav nav.mainnav a:hover,
.nav nav.mainnav a.active { color: #1a1a1a; border-color: var(--mch-yellow); }
.nav .spacer { flex: 1; }
.nav .icons { display: flex; align-items: center; gap: 14px; }

.iconbtn {
    background: none; border: none; cursor: pointer;
    color: var(--mch-gray-d80);
    display: inline-flex; align-items: center; justify-content: center;
    padding: 6px;
}
.iconbtn:hover { color: var(--mch-blue); }

.cartbtn { position: relative; cursor: pointer; background: none; border: none;
    color: var(--mch-gray-d80); display: flex; align-items: center; padding: 4px;
}
.cartbtn:hover { color: var(--mch-blue); }
.cartbtn .count {
    position: absolute; top: -6px; right: -8px;
    background: var(--mch-yellow); color: var(--mch-gray-d80);
    font-size: .65rem; font-weight: 800;
    min-width: 17px; height: 17px; border-radius: 999px;
    display: grid; place-items: center; padding: 0 3px;
}

@media (max-width: 820px) {
    .nav nav.mainnav, .findbtn { display: none; }
}

/* ===== Footer ===== */
footer.site {
    background: var(--mch-midnight-blue);
    color: #9bb4d8;
    padding: 46px 0 28px;
    margin-top: 40px;
}
footer.site .cols {
    display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 30px; margin-bottom: 30px;
}
@media (max-width: 820px) { footer.site .cols { grid-template-columns: 1fr 1fr; } }
footer.site h5 { color: #fff; font-size: .95rem; margin-bottom: 12px; font-weight: 700; }
footer.site a {
    display: block; font-size: .86rem;
    padding: 4px 0; color: #9bb4d8; text-decoration: none;
}
footer.site a:hover { color: var(--mch-yellow); }
footer.site .brand .subbrand { color: #fff; }
footer.site .brand-logo-blue { display: none; }
footer.site .brand-logo-white { display: block; }
footer.site .baseline {
    margin-top: 14px; max-width: 30ch;
    font-size: .95rem; color: #C1D6EF; font-style: italic;
}
footer.site .social {
    display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px;
}
footer.site .social a {
    width: 38px; height: 38px; border-radius: 50%;
    display: grid; place-items: center;
    color: #fff; background: rgba(255,255,255,.08);
    padding: 0; transition: .15s;
}
footer.site .social a:hover { background: var(--mch-yellow); color: #13203c; }
footer.site .bottom {
    border-top: 1px solid rgba(255,255,255,.1);
    padding-top: 18px; font-size: .8rem;
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
}
footer.site .hosting { margin-top: 12px; font-size: .8rem; color: rgba(255,255,255,.55); }

/* ===== Common section ===== */
section.block { padding: 64px 0; }
.eyebrow {
    font-size: .74rem; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--mch-blue); margin-bottom: 8px;
}

/* ===== Shop : grille produits ===== */
.shop-wrap { padding: 40px 24px 80px; }

.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}
@media (max-width: 1100px) { .grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px)  { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .grid { grid-template-columns: 1fr; } }

.card {
    background: #fff;
    border: 1px solid var(--mch-gray-l10);
    border-radius: 12px;
    overflow: hidden;
    display: flex; flex-direction: column;
    transition: .2s;
    text-decoration: none; color: inherit;
}
.card:hover {
    transform: translateY(-5px);
    box-shadow: var(--mch-elev-3);
    border-color: var(--mch-blue-l02);
}
.card .imgw {
    position: relative;
    aspect-ratio: 1 / 1.08;
    background: radial-gradient(circle at 50% 52%, #fff, #F2F2F2);
    display: flex; align-items: flex-end; justify-content: center;
    padding: 52px 18px 18px;
}
.card .imgw img {
    max-height: 100%; max-width: 90%;
    object-fit: contain;
    mix-blend-mode: multiply;
}
.card .tags {
    position: absolute; top: 12px; left: 12px; right: 12px;
    display: flex; gap: 6px; flex-wrap: wrap; z-index: 2;
}
.card .body {
    padding: 14px 16px 18px;
    display: flex; flex-direction: column; gap: 7px;
    flex: 1;
}
.card .pname { font-weight: 700; font-size: 1rem; line-height: 1.25; color: #13203c; }
.card .pdesc {
    font-size: .82rem; color: var(--mch-gray-d40); flex: 1;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card .foot {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 8px;
}
.card .price { font-weight: 800; font-size: 1.15rem; color: var(--mch-blue); }
.card .price small {
    font-weight: 500; font-size: .66rem; color: var(--mch-gray-d40);
    display: block; line-height: 1;
}

/* ===== Pills ===== */
.pill {
    display: inline-block;
    font-size: .68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em;
    padding: .28rem .6rem; border-radius: 5px;
}
.pill.blue { background: var(--mch-blue-l01); color: var(--mch-blue); }
.pill.yellow { background: var(--mch-yellow-l02); color: var(--mch-gray-d80); }
.pill.dark { background: var(--mch-dark-blue); color: #fff; }

.toolbar-bottom { margin-top: 40px; }
.empty {
    text-align: center; color: var(--mch-gray-d40);
    padding: 50px 20px; font-size: .92rem;
}