/************* CATALOGUE HÉBÉ PREMIUM *************/

.catalogue {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 34px;
    align-items: stretch;
}

.contain-shop {
    width: 95%;
    max-width: 1480px;
    margin: 0 auto;
    padding: 0 0 70px;
}

.contain-shop h1 {
    color: #A96358;
    text-align: center;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2.5em;
    font-weight: 400;
    letter-spacing: .08em;
    line-height: 1.1;
    margin: 25px auto 10px;
}

.contain-shop .cat-sub-title {
    text-align: center;
    color: #3F3835;
    font-size: 1.2em;
    max-width: 850px;
    margin: 0 auto 18px;
}

.contain-shop .cat-sub-title::after {
    content: "──────────── " "♡" " ────────────";
    display: block;
    color: #A96358;
    font-size: 1.4rem;
    margin: 16px auto 30px;
    position: relative;
}

.product-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #FFFDF9;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(169, 99, 88, .13);
    box-shadow: 0 16px 35px rgba(47, 47, 47, .08);
    transition: transform .25s ease, box-shadow .25s ease;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 24px 55px rgba(47, 47, 47, .12);
}

/************* SLIDER PRODUIT *************/

.product-slider {
    flex-shrink: 0;
    position: relative;
    width: 100%;
    max-height: 250px;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #F1E9E1;
}

.product-slider img:hover{
    cursor: pointer;
}

.product-slider .slider-image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;

    opacity: 0;
    visibility: hidden;
    transform: scale(1.03);

    transition:
        opacity .45s ease,
        transform .45s ease,
        visibility 0s linear .45s;
}

.product-slider .slider-image.active {
    opacity: 1;
    visibility: visible;
    transform: scale(1.04);
    z-index: 2;

    transition:
        opacity .45s ease,
        transform .65s ease,
        visibility 0s;
}

.product-card:hover .product-slider img{

    transform:scale(1.05);

}

.product-slider img{

    transition:.45s ease;

}

.product-discover-link {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 18px;
    z-index: 8;

    display: flex;
    justify-content: center;

    text-decoration: none;
    pointer-events: none;
}

.product-discover-link span {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    width: 100%;
    padding: 13px 18px;

    border-radius: 999px;
    background: rgba(255, 253, 249, .92);
    color: #A96358;

    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .04em;

    box-shadow: 0 12px 28px rgba(47,47,47,.13);

    opacity: 0;
    transform: translateY(14px);

    transition: .3s ease;
    pointer-events: auto;
}

.product-card:hover .product-discover-link{

    opacity:1;
    
}

.product-card:hover .product-discover-link span{

    transform:translateY(0);

    opacity:1;
}

.product-discover-link span::after {
 
    content: " →";
    margin-left: 6px;
}

.slider-arrow {
    position: absolute;
    top: 50%;
    z-index: 10;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(169, 99, 88, .35);
    background: rgba(255, 255, 255, .92);
    color: #A96358;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(47, 47, 47, .16);
    transition: background .25s ease, color .25s ease, transform .25s ease;
}

.slider-arrow svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.slider-arrow:hover {
    background: #A96358;
    color: #fff;
    transform: translateY(-50%) scale(1.06);
}

.slider-prev {
    left: 18px;
}

.slider-next {
    right: 18px;
}

.slider-dots {
    position: absolute;
    left: 0;
    right: 0;
    top: 18px;
    z-index: 10;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.slider-dot {
    width: 15px;
    height: 15px;
    border-radius: 999px;
    border: none;
    background: rgba(90, 80, 75, .25);
    cursor: pointer;
    transition: width .25s ease, background .25s ease;
}

.slider-dot.active {
    width: 28px;
    background: #A96358;
}

.product-card:hover .product-discover-link {
    opacity: 1;
}

/******* LIGHTBOX SHOP *********/

.shop-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 30px;
    background: rgba(30, 25, 22, .85);
}

.shop-lightbox.active {
    display: flex;
}

.shop-lightbox img {
    max-width: min(92vw, 1100px);
    max-height: 88vh;
    object-fit: contain;
    border-radius: 18px;
    box-shadow: 0 25px 80px rgba(0,0,0,.35);
}

.shop-lightbox-close {
    position: absolute;
    top: 24px;
    right: 28px;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background: #FFFDF9;
    color: #A96358;
    font-size: 2rem;
    cursor: pointer;
}

/************* CONTENU PRODUIT *************/

.content-product {
    flex: 1;
    padding: 24px 26px 16px;
    text-align: center;
}

.content-product h2 {
    font-family: Georgia, "Times New Roman", serif;
    color: #1F1F1F;
    font-size: 2rem;
    font-weight: 400;
    margin-bottom: 10px;
}

.content-product > p{
    margin-bottom: 12px;
}

.content-product p {
    color: #3F3835;
    font-size: 1.4rem;
    line-height: 1.5;
    margin-bottom: 12px;
}

.content-product strong {
    display: block;
    color: #A96358;
    margin: 14px 0 6px;
    font-size: 1.55rem;
    font-weight: 600;
}

.content-product p:last-child {
    color: #19763A;
    font-size: 1.2rem;
}

/************* FORMULAIRE AJOUT PANIER *************/

.product-card form {
    display: grid;
    grid-template-columns: 135px 1fr;
    gap: 16px;
    align-items: center;
    padding: 0 26px 26px;
    margin-top: auto;
}

.product-card input[type="number"] {
    width: 100%;
    height: 54px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid rgba(47, 47, 47, .18);
    background: #fff;
    color: #1F1F1F;
    text-align: center;
    font-size: 1.05rem;
}

.product-card button[type="submit"]{

    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;

    width:100%;

    min-height:64px;

    padding:16px;

    border:none;
    border-radius:10px;

    background:linear-gradient(
        180deg,
        #C77D73,
        #A96358
    );
    color:#fff;
    font-size:1rem;
    font-weight:600;
    letter-spacing:.04em;
    cursor:pointer;
    transition:.25s;

}

.product-card button[type="submit"]:hover {
    background: linear-gradient(180deg, #B96F65, #944F46);
    transform: translateY(-2px);
}

.product-card > p {
    text-align: center;
    padding: 0 30px 30px;
    color: #A96358;
    font-style: italic;
}

/*********** BADGE COLLECTION ***********/

.product-badge{

    display:inline-flex;

    align-items:baseline;

    gap:8px;

    margin-bottom:10px;

    padding:4px 16px;

    border-radius:50px;

    background:linear-gradient(135deg,#F7F2EC,#EEE4D8);

    border:1px solid rgba(181,150,120,.18);

    color:#8A6A56;

    font-size:.72rem;

    font-weight:500;

    letter-spacing:.4px;

    text-transform:uppercase;

    box-shadow:0 6px 16px rgba(0,0,0,.05);

}

.product-badge strong{

    color:#5A463A;

    font-size: .73rem;;

    font-weight:500;

}

.product-card:hover .product-badge{

    transform:translateY(-2px);

    box-shadow:0 10px 25px rgba(0,0,0,.08);

    transition:.25s;

}

.badge-icon {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.product-price-stock{
    display: flex;
    align-items: baseline;
    justify-content: space-evenly;
}
.product-attributes-compact {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 18px 0 16px;
    
}

.product-attribute-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border-radius: 999px;
    background:#FBF7F2;
    color: #5F5651;
    font-size: .82rem;
    line-height: 1;
    border: 1px solid rgba(181,110,90,.18);
    box-shadow: 0 2px 6px rgba(0,0,0,.03);
}

.color-dot{

    width:12px;

    height:12px;

    border-radius:50%;

    border:1px solid rgba(0,0,0,.15);

    flex-shrink:0;

}
/** ASSOCIE A COLOR- *****/

.color-marron{
    background:#7A5236;
}

.color-ocre{
    background:#C99755;
}

.color-beige{
    background:#D8C2A3;
}

.color-écru,
.color-ecru{
    background:#F4EFD9;
}

.color-blanc{
    background:#FFFFFF;
}

.color-noir{
    background:#232323;
}

.color-rose{
    background:#D99BA2;
}

.color-vieux-rose{
    background:#B7848A;
}

.color-vert-sauge{
    background:#9BAF91;
}

/******* ICONE PANIER *********/

.btn-cart{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
}

.cart-icon{

    width:22px;
    height:22px;

    stroke:white;
    stroke-width:2;

    fill:none;

    transition:.3s;

}

/********* INPUT NUMBER + ET - ********/

.quantity-selector {
    display: grid;
    grid-template-columns: 48px 1fr 48px;
    align-items: center;
    height: 62px;
    border: 1px solid rgba(169, 99, 88, .22);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}

.qty-btn {
    height: 100%;
    border: none;
    background: #fff;
    color: #3F3835;
    font-size: 1.45rem;
    cursor: pointer;
    transition: .25s ease;
}

.qty-minus {
    border-right: 1px solid rgba(169, 99, 88, .14);
}

.qty-plus {
    border-left: 1px solid rgba(169, 99, 88, .14);
}

.qty-btn:hover {
    background: #F7EFEA;
    color: #A96358;
}

.qty-input {
    width: 100%;
    height: 100%;
    border: none;
    text-align: center;
    font-size: 1.05rem;
    font-weight: 600;
    color: #2F2F2F;
    outline: none;
    appearance: textfield;
    -moz-appearance: textfield;
}

.qty-input::-webkit-inner-spin-button,
.qty-input::-webkit-outer-spin-button {
    display: none;
}

/****** AUTH LOGIN / REGISTER ******/

.auth-page {
    width: 90%;
    max-width: 520px;
    margin: 70px auto;
}

.auth-card {
    background: #FFFDF9;
    border: 1px solid rgba(181, 110, 90, 0.18);
    border-radius: 22px;
    padding: 42px;
    box-shadow: 0 18px 45px rgba(47, 47, 47, 0.08);
}

.auth-card h1 {
    color: #B56E5A;
    text-align: center;
    font-size: 2rem;
    font-weight: 500;
    margin-bottom: 12px;
}

.auth-intro {
    text-align: center;
    color: #5F5651;
    margin-bottom: 32px;
}

.auth-card form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.auth-card input {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid rgba(181, 110, 90, 0.28);
    border-radius: 999px;
    background: #fff;
    font-size: 1rem;
}

.auth-card input:focus {
    outline: none;
    border-color: #B56E5A;
    box-shadow: 0 0 0 3px rgba(181, 110, 90, 0.12);
}

.auth-card button {
    margin-top: 10px;
    padding: 14px 22px;
    border: none;
    border-radius: 999px;
    background: #B56E5A;
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
}

.auth-card button:hover {
    background: #9F5F4F;
}

.auth-link {
    margin-top: 24px;
    text-align: center;
    color: #5F5651;
}

.auth-link a {
    color: #B56E5A;
    text-decoration: none;
}

.auth-link a:hover {
    text-decoration: underline;
}

.auth-error {
    background: #fff2ef;
    color: #9F5F4F;
    border: 1px solid rgba(181, 110, 90, 0.25);
    padding: 12px 16px;
    border-radius: 14px;
    margin-bottom: 20px;
}


/************* FLASH MESSAGE *************/

/**************** FLASH ****************/

.flash{

    width:min(650px,90%);

    margin:25px auto;

    padding:18px 24px;

    display:flex;

    align-items:center;

    gap:18px;

    border-radius:14px;

    background:#fff;

    box-shadow:0 12px 35px rgba(0,0,0,.08);

    animation:flashAppear .35s ease;

}

.flash-icon{

    width:42px;

    height:42px;

    flex-shrink:0;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

    font-size:1.15rem;

}

.flash-content{

    flex:1;

    color:#3F3835;

    line-height:1.5;

}

.flash-close{

    background:none;

    border:none;

    cursor:pointer;

    color:#777;

    font-size:1.5rem;

    transition:.25s;

}

.flash-close:hover{

    transform:rotate(90deg);

}

.flash-success{

    border-left:5px solid #3E8B5B;

}

.flash-success .flash-icon{

    background:#EDF8F0;

    color:#3E8B5B;

}

.flash-error{

    border-left:5px solid #B35C4C;

}

.flash-error .flash-icon{

    background:#FFF2EF;

    color:#B35C4C;

}

.flash-warning{

    border-left:5px solid #D99D22;

}

.flash-warning .flash-icon{

    background:#FFF9E8;

    color:#D99D22;

}

.flash-info{

    border-left:5px solid #5A83C7;

}

.flash-info .flash-icon{

    background:#EEF4FF;

    color:#5A83C7;

}

@keyframes flashAppear{

    from{

        opacity:0;

        transform:translateY(-15px);

    }

    to{

        opacity:1;

        transform:none;

    }

}



.current-image-block {
    display:flex;
    flex-direction: row;
    justify-content: space-evenly;
    flex-wrap: wrap;
    width: 100%;
    padding: 22px;
    border-radius: 18px;
    background: #F8F5F1;
    border: 1px solid rgba(181,110,90,.14);
}

.current-p-images {
    color: #8A6A5E;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 14px;
}

.current-image-block img {
    width: 160px;
    height: 160px;
    object-fit: cover;
    border-radius: 18px;
    display: block;
    margin-bottom: 12px;
    box-shadow: 0 10px 25px rgba(47,47,47,.08);
}

.current-image-block small,
.current-image-block span {
    color: #5F5651;
    font-size: .9rem;
}

.gallery-image{

    position:relative;

    width:260px;

    aspect-ratio:1;

    overflow:hidden;

    border-radius:22px;

    cursor:pointer;

    margin-bottom: 20px;

}
.gallery-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.35s;

}
.gallery-overlay{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:12px;

    background:rgba(255,253,249,.82);

    opacity:0;

    transition:.3s;

}
.gallery-image:hover img{

    transform:scale(1.05);

}

.gallery-image:hover .gallery-overlay{

    opacity:1;

}
.replace-icon{

    width:64px;

    height:64px;

    border-radius:50%;

    background:white;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:1.8rem;

    box-shadow:0 15px 40px rgba(0,0,0,.12);

}

/****** FICHE PRODUIT VERSION 2 ********/

.product-gallery,
.product-info{
    background:#FFFDF9;

    border-radius:28px;

    box-shadow:0 20px 50px rgba(0,0,0,.06);
}


.delete-image{

    position:absolute;

    top:14px;

    right:14px;

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    background:white;

    cursor:pointer;

    opacity:0;

    transition:.25s;

}
.gallery-image:hover .delete-image{

    opacity:1;

}

/******* SLIDER IMAGES BOUTIQUE *******/

.product-slider {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #EFE7DF;
}

.product-slider img {
    display: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-slider img.active {
    display: block;
}
/******** MEDIA QUERY ********/

@media screen and (max-width: 900px) {

    .catalogue {
        grid-template-columns: repeat(2, 1fr);
    }

    .shop-reassurance {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media screen and (max-width: 768px) {

    .product-discover-link {
        inset: auto 14px 14px 14px;
        opacity: 1;
        background: transparent;
        justify-content: center;
    }

    .product-discover-link span {
        opacity: 1;
        transform: none;
    }

    .auth-card {
        padding: 30px 22px;
    }

    .contain-shop {
        width: 92%;
    }

    .catalogue {
        grid-template-columns: 1fr;
    }

    .product-card form {
        grid-template-columns: 1fr;
    }

    .product-card input[type="number"] {
        width: 100%;
    }

    .slider-arrow {
        width: 46px;
        height: 46px;
    }

    .slider-prev {
        left: 12px;
    }

    .slider-next {
        right: 12px;
    }

    .shop-reassurance {
        grid-template-columns: 1fr;
    
    }
}