@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600&display=swap');

/* Ajouter les fontes (placer les fichiers .woff2/.woff dans ../fonts/) */
@font-face {
  font-family: 'Rogueland';
  src: url('../fonts/Rogueland-Regular.woff2') format('woff2'),
       url('../fonts/Rogueland-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Corsa Grotesk';
  src: url('../fonts/CorsaGrotesk-Regular.woff2') format('woff2'),
       url('../fonts/CorsaGrotesk-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root{
  --brown:#5E322C;
  --pink:#FE316E;
  --white:#fff;
  --black:#110908;
  --teapink:#E4BCBF;
  --light-color:#777;
  --border:.1rem solid var(--black);
}

*{
  font-family: 'Corsa Grotesk', 'Rubik', sans-serif; /* sous-titre / breadcrumb */
  margin:0; padding:0;
  box-sizing: border-box;
  outline: none; border: none;
  text-decoration: none;
}

*::selection{
  background-color: var(--brown);
  color:var(--black);
}

::-webkit-scrollbar{
  height: .5rem;
  width: 1rem;
}

::-webkit-scrollbar-track{
  background-color: transparent;
}

::-webkit-scrollbar-thumb{
  background-color: var(--brown);
}

html{
  font-size: 62.5%;
  overflow-x: hidden;
  scroll-behavior: smooth;
  stop-opacity: 7rem;
}

section{
  margin:0 auto;
  max-width: 1200px;
  padding:2rem;
}

.txcenter{
  text-align: center;
}

/* Styles communs pour les titres principaux */
.title,
.heading h3,
.about .row .content h3,
.form-container form h3 {
  text-align: center;
  margin-bottom: 2.5rem;
  font-size: 4rem;
  color:var(--brown); 
  text-underline-offset: 1rem;
  font-family: 'Rogueland', 'Rubik', sans-serif; /* titre */
}

/* Surcharge pour .heading h3 */
.heading h3{
  color:var(--white);
}

/* Surcharge pour .form-container form h3 */
.form-container form h3{
  color:var(--black);
}

.privacy ul li a {
    color: brown;
    text-decoration: none;
}

.privacy ul li a:hover {
    text-decoration: underline;
}

.heading{
  display: flex;
  align-items: center;
  justify-content: center;
  gap:1rem;
  flex-flow: column;
  background-color: var(--brown);
  min-height: 20rem;
}
  
.heading p{
  font-size: 2.3rem;
  color: #cfcfcf;
}

.heading p a{
  color:var(--teapink);
}

.heading p a:hover{
  text-decoration: underline;
  color:var(--white);
}

.btn,
.delete-btn{
  margin-top: 1rem;
  display: inline-block;
  font-size: 2rem;
  padding:1rem 3rem;
  cursor: pointer;
  text-transform: none;
  transition: .2s linear;
}

.btn{
  background-color: var(--brown);
  color:var(--teapink);
  border-radius: 6px;
}

.delete-btn{
  background-color: var(--pink);
  color:var(--white);
  border-radius: 6px;
}

.btn:hover,
.delete-btn:hover{
  letter-spacing: .2rem;
}

.disabled{
  opacity: .5;
  user-select: none;
  pointer-events: none;
}

.message{
  position: sticky;
  top:0;
  max-width: 1200px;
  margin:0 auto;
  padding:2rem;
  display: flex;
  align-items: center;
  gap:1rem;
  justify-content: space-between;
  background-color: var(--brown);
}

.message span{
  font-size: 2rem;
  color:var(--teapink);
}

.message i{
  font-size: 2.5rem;
  color:var(--pink);
  cursor: pointer;
}

.message i:hover{
  color:var(--black);
}

.empty{ 
   border-radius: 6px;
   background-color: var(--white);
   padding:1.5rem;
   text-align: center;
   width: 100%;
   font-size: 2rem;
   text-transform: none;
   color:var(--pink);
   box-shadow: 0 4px 8px rgba(0,0,0,0.1); 
}

.flex-btn{
  display: flex;
  gap:1rem;
}

.header{
  position: sticky;
  top:0; left:0; right:0;
  background-color: var(--white);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  z-index: 1000;
}

.header .flex{
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.header .flex .logo{
  font-size: 2.5rem;
  color:var(--black);
}

.header .flex .navbar a{
  font-size: 2rem;
  color:var(--black);
  margin:0 1rem;
}

.header .flex .navbar a:hover{
  color:var(--brown);
  text-decoration: underline;
}

.header .flex .icons > *{
  margin-left: 1.5rem;
  font-size: 2.5rem;
  color:var(--black);
  cursor: pointer;
}

.header .flex .icons > *:hover{
  color: var(--brown);
}

.header .flex .icons span{
  font-size: 2rem;
}

#menu-btn{
  display: none;
}

.header .flex .profile{
  background-color: var(--white);
  border:var(--border);
  padding:1.5rem;
  text-align: center;
  position: absolute;
  top:125%; right:2rem;
  width: 30rem;
  display: none;
  animation: fadeIn .2s linear;
}

.header .flex .profile.active{
  display: inline-block;
}

@keyframes fadeIn {
  0%{
    transform: translateY(1rem);
  }
}

.header .flex .profile .name{
  font-size: 2rem;
  color:var(--black);
  margin-bottom: .5rem;
}

.header .flex .profile .account{
  margin-top: 1.5rem;
  font-size: 2rem;
  color:var(--light-color);
}

.header .flex .profile .account a{
  color:var(--black);
}

.header .flex .profile .account a:hover{
  color:var(--brown);
  text-decoration: underline;
}

.hero .slide{
  display: flex;
  align-items: center;
  flex-wrap: wrap-reverse;
  gap:2rem;
  margin-bottom: 4rem;
}

.hero .slide .image{
  flex:1 1 40rem;
}

.hero .slide .image img{
  width: 100%;
}

.hero .slide .content{
  flex:1 1 40rem;
  text-align: center;
}

.hero .slide .content span{
  font-size: 2.5rem;
  color:var(--light-color);
}

.hero .slide .content h3{
  margin:1rem 0;
  font-size: 6rem;
  color:var(--black);
  text-transform: none;
}

.swiper-pagination-bullet-active{
  background-color: var(--brown);
}

.category .box-container{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(27rem, 1fr));
  gap:1.5rem;
  align-items: flex-start;
}

.category .box-container .box{
  border: 0.2rem solid transparent;
  border-radius: 6px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  padding:2rem;
  text-align: center;
}

.category .box-container .box img{
  width: 100%;
  height: 10rem;
  object-fit: contain;
}

.category .box-container .box h3{
  font-size: 2rem;
  margin-top: 1.5rem;
  color:var(--black);
  text-transform: none;
}

.category .box-container .box:hover{
  background-color: var(--black);
}

.category .box-container .box:hover img{
  filter: invert(1);
}

.category .box-container .box:hover h3{
  color:var(--white);
}

.products .box-container{
  display: grid;
  grid-template-columns: repeat(auto-fit, 33rem);
  justify-content: center;
  align-items: flex-start;
  gap:1.5rem;
}

.products .box-container .box{ 
  position: relative;
  overflow: hidden;
  border: 0.2rem solid transparent;
  border-radius: 6px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  padding:2rem; 
}

.products .box-container .box img{
  height: 25rem;
  width: 100%;
  object-fit: contain;
  margin-bottom: 1rem;
}

.products .box-container .box .fa-eye,
.products .box-container .box .fa-shopping-cart{
  position: absolute;
  top:1rem;
  height: 4.5rem;
  width: 4.5rem;
  line-height: 4.3rem;
  border:var(--pink);
  background-color: var(--white); 
  font-size: 2rem;
  color:var(--pink); 
  text-align: center;
  transition: .2s linear;
}

.products .box-container .box .fa-eye:hover,
.products .box-container .box .fa-shopping-cart:hover{
  background-color: var(--brown);
  border-radius: 6px;
  color:var(--white);
}

.products .box-container .box .fa-eye{
  left: -10rem;
}

.products .box-container .box .fa-shopping-cart{
  right: -10rem;
}

.products .box-container .box:hover .fa-eye{
  left: 1rem;
}

.products .box-container .box:hover .fa-shopping-cart{
  right: 1rem;
}

.products .box-container .box .cat{
  font-size: 1.8rem;
  color:var(--light-color);
}

.products .box-container .box .cat:hover{
  color:var(--black);
  text-decoration: underline;
}

.products .box-container .box .name{
  font-size: 2rem;
  color:var(--black);
  margin:1rem 0;
}

.products .box-container .box .flex{
  display: flex;
  align-items: center;
  gap:1rem;
  margin-top: 1.5rem;
}

.products .box-container .box .flex .price{
  margin-right: auto;
  font-size: 2.5rem;
  color:var(--black);
}

.products .box-container .box .flex .price span{
  color:var(--light-color);
  font-size: 1.8rem;
}

.products .box-container .box .flex .qty { 
  padding: 1rem;
  border: 2px solid var(--brown);
  border-radius: 6px;
  font-size: 1.8rem;
  color: var(--pink);
}

.products .box-container .box .flex .fa-edit{
  width: 5rem;
  background-color: var(--brown);
  color:var(--white);
  cursor: pointer;
  font-size: 1.8rem;
  height: 4.5rem; 
  border-radius: 6px;
  border:var(--border);
}

.products .box-container .box .flex .fa-edit:hover{
  background-color: var(--pink);
  color:var(--white);
  transition: .2s linear;
}

.products .box-container .box .fa-times{
  position: absolute;
  top:1rem; 
  right:1rem;
  background-color: var(--pink);
  color:var(--white);
  border:var(--border);
  line-height:4rem;
  height: 4.3rem;
  border-radius: 6px;
  width: 4.5rem;
  cursor: pointer;
  font-size: 2rem;
}

.products .box-container .box .fa-times:hover{
  background-color: var(--brown);
  color:var(--white);
}

.products .box-container .box .sub-total{
  margin-top: 1rem;
  font-size: 1.8rem;
  color:var(--light-color);
}

.products .box-container .box .sub-total span{
  color:var(--pink);
}

.products .more-btn{
  margin-top: 1rem;
  text-align: center;
}

.products .cart-total{
  display: flex;
  align-items: center;
  gap:1.5rem;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 3rem;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); 
  border-radius: 6px; 
  padding:1rem;
}

.products .cart-total p{
  font-size: 2.5rem;
  color:var(--light-color);
}

.products .cart-total p span{
  color:var(--pink);
}

.products .cart-total .btn{
  margin-top: 0;
}

.about .row{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap:1.5rem;
}

.about .row .image{
  flex:1 1 40rem;
}

.about .row .image img{
  width: 100%;
}

.about .row .content{
  flex:1 1 40rem;
  text-align: center;
}

.about .row .content p{
  padding:1rem 0;
  line-height: 2;
  font-size: 1.6rem;
  color:var(--light-color);
  text-align: justify;
}

.mt-3 {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}

.steps .box-container{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
  gap:1.5rem;
  align-items: flex-start;
}

.steps .box-container .box{
  border: 0.2rem solid transparent;
  border-radius: 6px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  padding:2rem;
  text-align: center;
}

.steps .box-container .box img{
  height: 15rem;
  width: 100%;
  object-fit: contain;
  margin-bottom: 1rem;
}

.steps .box-container .box h3{
  font-size: 2.3rem;
  margin:1rem 0;
  color:var(--black);
  text-transform: none;
}

.steps .box-container .box p{
  line-height: 2;
  font-size: 1.6rem;
  color:var(--light-color);
}

.reviews .slide{
  margin-bottom: 4rem;
  border:var(--border);
  border: 0.2rem solid transparent;
  border-radius: 6px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  padding:2rem;
  text-align: center;
}

.reviews .slide img{
  height: 10rem;
  width: 10rem;
  border-radius: 50%;
}

.reviews .slide p{
  padding:1.5rem 0;
  line-height: 2;
  font-size: 1.6rem;
  color:var(--light-color);
}

.reviews .slide .stars{
  display: inline-block;
  border-radius: 6px;
  padding:.5rem 1.5rem;
  border:var(--border);
}

.reviews .slide .stars i{
  font-size: 1.8rem;
  color:var(--pink);
}

.reviews .slide h3{
  font-size: 2rem;
  margin-top: 1.5rem;
  text-transform: none;
  color:var(--black);
}

.contact .row{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap:1.5rem;
}

.contact .row .image{
  flex:1 1 40rem;
}

.contact .row .image img{
  width: 100%;
}

.contact .row form{ 
  flex:1 1 40rem;
  padding:2rem;
  text-align: center;
  margin-bottom: 4rem; 
  border: 0.2rem solid transparent; 
  border-radius: 6px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); 
}

.contact .row form h3{
  font-size: 2.5rem;
  color:var(--black);
  margin-bottom: 1rem;
  text-transform: none;
}

.contact .row form .box{
  margin:.7rem 0;
  font-size: 1.8rem;
  border-radius: 6px;
  color:var(--black); 
  border: #110908 1px solid;
  padding:1.4rem;
  width: 100%;
}

.contact .row form textarea{
  height: 15rem;
  resize: none;
}

.search-form form{
  display: flex;
  border-radius: 6px;
  gap:1.3rem;
}

.search-form form .box{
  width: 100%;
  border:var(--border);
  padding:1.4rem;
  font-size: 1.8rem;
  border-radius: 6px;
  color:var(--black);
}

.search-form form .bi-search{
  width: 6rem;
  background-color: var(--black);
  color:var(--white);
  cursor: pointer;
  border-radius: 6px;
  font-size: 2.5rem;
} 

.search-form form .bi-search:hover{
  background-color: var(--brown);
  color:var(--white);
}

.checkout form{
  max-width: 50rem;
  margin:0 auto; 
  border-radius: 6px;
  padding:2rem;
  position: relative; 
  margin-bottom: 4rem; 
  border: 0.2rem solid transparent; 
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); 
}

.checkout form h3{
  font-size: 2.5rem;
  text-transform: none;
  padding: 2rem 0;
  color:var(--black);
}

.checkout form .cart-items{
  background-color: var(--black);
  border-radius: 6px;
  padding:2rem;
  padding-top: 0;
}

.checkout form .cart-items h3{
  color:var(--white);
}

.checkout form .cart-items p{
  display: flex;
  align-items: center;
  gap:1.5rem;
  justify-content: space-between;
  margin:1rem 0;
  line-height: 1.5;
  font-size: 2rem;
}

.checkout form .cart-items p .name{
  color:var(--light-color);
}

.checkout form .cart-items p .price{
  color:var(--teapink);
}

.checkout form .cart-items .grand-total{
  background-color: var(--white);
  border-radius: 6px;
  padding:.5rem 1.5rem;
}

.checkout form .cart-items .grand-total .price{
  color:var(--pink);
}

.cart-link {
    display: inline-flex;
    align-items: center;
    gap: 8px; /* espace entre l’icône et le badge */
    text-decoration: none;
    color: inherit;
}

/* RESET DE L'ICÔNE POUR ÉVITER LES DÉCALAGES */
.cart-link .bi {
    line-height: 1;
    vertical-align: middle;
}

/* BADGE ROSE CENTRÉ PARFAITEMENT */
.cart-count {
    background-color: #FE316E;
    color: #fff;
    font-size: 14px;
    font-weight: bold;

    width: 30px;
    height: 30px;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;
    line-height: 1;  /* évite que le texte se décale vers le haut */
    box-sizing: border-box;
    vertical-align: middle;
}


.checkout form .user-info p{ 
  font-size: 2rem;
  line-height: 1.5;
  padding:1rem 0;
}

.checkout form .user-info p i{
  color:var(--light-color);
  margin-right: 1rem;
}

.checkout form .user-info p span{
  color:var(--black);
}

.checkout form .user-info .box{
  width: 100%;
  border:var(--border);
  border-radius: 6px;
  padding:1.4rem;
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-size: 1.8rem;
}

.orders .box-container{
  display: flex;
  flex-wrap: wrap;
  gap:1.5rem;
  align-items: flex-start;
}

.orders .box-container .box{
  padding:1rem 2rem; 
  border-radius: 6px;
  flex:1 1 40rem;
  margin-bottom: 4rem; 
  border: 0.2rem solid transparent; 
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); 
}

.orders .box-container .box p{
  line-height: 1.5;
  margin:1rem 0;
  font-size: 2rem;
  color:var(--light-color);
}

.orders .box-container .box p span{
  color:var(--black);
}

.form-container form{
  margin:0 auto;
  max-width: 50rem;
  padding:2rem;
  text-align: center;
  margin-bottom: 4rem;
  border:var(--border);
  border: 0.2rem solid transparent;
  border-radius: 6px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.form-container form .box{
  margin:.7rem 0;
  width: 100%;
  border:var(--border);
  padding:1.4rem;
  border-radius: 6px;
  font-size: 1.8rem;
  color:var(--black);
}

.form-container form p{
  margin-top: 1.5rem;
  font-size: 2rem;
  color:var(--light-color);
}

.form-container form p a{
  color:var(--black);
}

.form-container form p a:hover{
  text-decoration: underline;
}

.user-details .user{
  max-width: 50rem;
  margin:0 auto; 
  border-radius: 6px;
  padding:2rem;
  margin-bottom: 4rem; 
  border: 0.2rem solid transparent; 
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); 
}

.user-details .user img{
  width: 100%;
  height: 20rem;
  object-fit: contain;
  margin-bottom: 1rem;
}

.user-details .user p{
  padding:1rem 0;
  line-height: 1.5;
  font-size: 2rem;
}

.user-details .user p span{
  color:var(--black);
}

.user-details .user p i{
  margin-right: 1rem;
  color:var(--light-color);
}

.user-details .user .address{
  margin-top: 1rem;
}

.quick-view form{
  max-width: 40rem;
  padding:2rem; 
  border-radius: 0.5rem;
  position: relative;
  margin:0 auto;
  margin-bottom: 4rem; 
  border: 0.2rem solid transparent;
  border-radius: 6px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); 
}

.quick-view form img{
  height: 25rem;
  width: 100%;
  object-fit: contain;
  margin-bottom: 1rem;
}

.quick-view form .cat{
  font-size: 1.8rem;
  color:var(--light-color);
}

.quick-view form .cat:hover{
  color:var(--black);
  text-decoration: underline;
}

.quick-view form .name{
  font-size: 2rem;
  margin:.5rem 0;
}

.quick-view form .flex{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap:1.5rem;
  margin:1rem 0;
}

.quick-view form .flex .price{
  font-size: 2.5rem;
  color:var(--black);
}

.quick-view form .flex .price span{
  font-size: 2rem;
  color:var(--light-color);
}

.quick-view form .flex .qty{
  padding: 1rem;
  border: 2px solid var(--brown);
  border-radius: 6px;
  font-size: 1.8rem;
  color: var(--pink);
}

.quick-view form .cart-btn{
  width: 100%;
  padding:1rem 3rem;
  text-align: center;
  border:var(--border);
  font-size: 2rem;
  border-radius: 6px;
  color:var(--blabck);
  cursor: pointer;
  background-color: var(--pink);
  text-transform: none;
  background: none;
  margin-top: 1rem;
}

.quick-view form .cart-btn:hover{
  background-color: var(--brown);
  color:var(--white);
}


/* ------------------ */
/*     FOOTER BASE    */
/* ------------------ */

.footer-cartzilla {
  background: #110908;
  color: #F9F8F8;
  font-family: "Inter", sans-serif;
  padding-top: 60px;
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: auto;
}

/* ------------------ */
/*     TOP FOOTER     */
/* ------------------ */

.footer-top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 60px;
  padding-bottom: 70px;
}

.footer-title {
  font-size: 24px;
  font-weight: 600;
  color: #E4BCBF;
}

.footer-text {
  margin: 15px 0 25px;
  font-size: 14px;
  line-height: 1.6;
  color: #fff;
}

.footer-subtitle {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 18px;
  color: #E4BCBF;
}

/* LISTES */
.footer-col ul {
  padding: 0;
  list-style: none;
}

.footer-col ul li {
  margin-bottom: 10px;
  font-size: 14px;
}

.footer-col ul li a {
  text-decoration: none;
  color: #F9F8F8;
  transition: 0.3s;
}

.footer-col ul li a:hover {
  color: #FE316E;
}

/* ---------------------- */
/*     SOCIAL ICONS       */
/* ---------------------- */

.social-icons a {
  margin-right: 10px;
  color: #F9F8F8;
  font-size: 18px;
  transition: 0.3s;
}

.social-icons a:hover {
  color: #FE316E;
}

.social-links a{
  margin-left:12px;
  font-size:16px;
  color:#ccc;
  transition:0.3s;
}

.social-links a:hover{
  color:#FE316E;
  transform:scale(1.1);
}

/* ------------------------ */
/*     NEWSLETTER SECTION   */
/* ------------------------ */

.newsletter-section {
  background: #5E322C;
  text-align: center;
  padding: 50px 20px;
}

.newsletter-section h3 {
  font-size: 20px;
  margin-bottom: 20px;
  color: #F9F8F8;
}

.newsletter-box {
  display: flex;
  justify-content: center;
  max-width: 450px;
  margin: 0 auto 15px;
}

.newsletter-box input {
  width: 70%;
  padding: 12px;
  border: none;
  outline: none;
  border-radius: 6px 0 0 6px;
  font-size: 14px;
}

.newsletter-box button {
  background: #FE316E;
  border: none;
  padding: 12px 25px;
  font-size: 14px;
  color: #fff;
  cursor: pointer;
  border-radius: 0 6px 6px 0;
  transition: 0.3s ease-in-out;
}

.newsletter-box button:hover {
  background: #5E322C;
}

.newsletter-note {
  font-size: 12px;
  opacity: 0.8;
  margin-top: 10px;
  color: #F9F8F8;
}

/* ------------------ */
/*     FOOTER BOTTOM */
/* ------------------ */

.footer-bottom {
  padding: 25px 0;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.footer-bottom p {
  font-size: 13px;
  color: #F9F8F8;
  text-align: center;
}

.footer-links a {
  margin-left: 18px;
  color: #F9F8F8;
  text-decoration: none;
  font-size: 13px;
  transition: 0.3s;
}

.footer-links a:hover {
  color: #FE316E;
}


/* ------------------ */
/*     FOOTER STEPS   */
/* ------------------ */

.footer-steps {
    background: #E4BCBF; /* rose pâle */
    padding: 60px 20px;
    font-family: "Rubik", sans-serif;
}

.steps-container {
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 40px;
  text-align: center;
}

.step-box i {
  font-size: 40px;
  color: #5E322C; /* brun */
  background: rgba(255, 255, 255, 0.4);
  padding: 20px;
  border-radius: 50%;
  transition: 0.3s;
}

.step-box:hover i {
  background: #FE316E; /* rose vif */
  color: #F9F8F8;
  transform: translateY(-6px);
}

.step-box h4 {
  margin-top: 15px;
  font-size: 18px;
  font-weight: 700;
  color: #5E322C; /* brun */
}

.step-box p {
  margin-top: 8px;
  font-size: 14px;
  color: #110908; /* très foncé */
  line-height: 1.4;
}
 

.reservations-gateaux {
  background-color: var(--pink);
  padding: 45px 20px;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 40px;
}

/* ------------------ */
/* CATEGORY FEATURES */
/* ------------------ */
.category-features {
  background-color: var(--brown);
  padding: 45px 20px;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 40px;
}

.features-box i {
  font-size: 35px;
  color: var(--white); /* blanc cassé */
  background-color: var(--pink); /* rose vif */
}

.features-box {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 280px;
  text-decoration: none; /* enlève soulignement du lien */
  transition: 0.3s;
}

.features-box:hover {
  transform: translateY(-3px);
} 

.features-box h3 {
  color: #F9F8F8; /* blanc cassé */
  font-size: 21px; /* texte normal, bien visible */
  font-weight: 600;
  margin: 0;
}

.features-box p {
  color: #E4BCBF; /* rose pâle */
  font-size: 13px; /* taille normale */
  margin-top: 5px;
}

.feature-box {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 280px;
  text-decoration: none; /* enlève soulignement du lien */
  transition: 0.3s;
}

.feature-box:hover {
  transform: translateY(-3px);
}

.feature-box i {
  font-size: 35px;
  color: var(--pink); /* rose vif */
}

.feature-box h3 {
  color: #F9F8F8; /* blanc cassé */
  font-size: 21px; /* texte normal, bien visible */
  font-weight: 600;
  margin: 0;
}

.feature-box p {
  color: #E4BCBF; /* rose pâle */
  font-size: 13px; /* taille normale */
  margin-top: 5px;
}

.credit{
  padding:3rem 2rem;
  text-align: center;
  background-color: var(--black);
  color:var(--white);
  font-size: 2rem;
  text-transform: none;
}

.credit span{
  color:var(--brown);
}

.loader{
  position: fixed;
  top:0; left:0; right:0; bottom: 0;
  z-index: 1000000;
  background-color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
}

.loader img{
  height: 25rem;
}


/* ------------------ */
/*   MEDIA QUERIES   */
/* ------------------ */

@media (max-width:991px) {
  html{
    font-size: 55%;
  }
}

@media (max-width:768px){
  #menu-btn{
    display: inline-block;
  }

  .header .flex .navbar{
    position: absolute;
    top:99%; left: 0; right: 0;
    border-top: var(--border); 
    background-color: var(--white);
    transition: .2s linear;
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  }

  .header .flex .navbar a{
    display: block;
    margin:2rem;
  }

  .header .flex .navbar.active{
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }

  .newsletter-box {
    flex-direction: column;
  }

  .newsletter-box input {
    width: 100%;
    border-radius: 6px;
    margin-bottom: 10px;
  }

  .newsletter-box button {
    border-radius: 6px;
    width: 100%;
  }
}

@media (max-width:450px) {
  html{
    font-size: 50%;
  }

  .title{
    font-size: 3rem;
  }

  .header .flex .logo{
    font-size: 2rem;
  }

  .hero .slide .content h3{
    font-size: 5rem;
  }

  .products .box-container{
    grid-template-columns: 1fr;
  }

  .heading h3{
    font-size: 3.5rem;
  }

  .products .cart-total{
    padding:1.5rem;
    justify-content: center;
  }

  .flex-btn{
    flex-flow: column;
    gap:0;
  }
}