*{
    box-sizing: border-box;
    margin:0;
    padding:0;
}

@font-face {
    font-family: 'BodoniXT';
    src: url('/fonts/Kaisei.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url('/fonts/inter-regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Inter-SemiBold';
    src: url('/fonts/Inter-semiBold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

:root {
    /* 🎨 Couleurs */
    --text-color: white;
    --background-color: #000000;
    --font-primary: 'Poppins', sans-serif;
    --font-secondary: 'Roboto', sans-serif;
    --font-title: 'BodoniXT', serif;
    --font-subtitle:'Inter', serif;
    --font-subtitleBold:'Inter-SemiBold', serif;
}


html{
    font-size: 1.2vw;
}

body{
    background-color:  var(--background-color);
}

.content-cart-login{
    opacity: 1;
}

.ancre{
    opacity: 1;
    transform: translateY(0);
    font-family: var(--font-subtitleBold);
}

.line-bottom-header{
    transform: scaleX(1);
}


.contact-section{
    margin-top: 8rem;
    display: flex;
    justify-content: center;
    gap:10rem;
    margin-bottom: 5rem;
    overflow: hidden;
}

.contact-info{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.contact-title{
    font-family: var(--font-title);
    font-size: 5rem;
    color:white;
    letter-spacing: 0.1rem;
    font-weight: 100;
    transform: translateY(-50%);
    opacity: 0;
}

.contact-description{
    font-family: var(--font-subtitle);
    font-size: 1rem;
    color:white;
    margin-top: 0.5rem;
    transform: translateY(-50%);
    opacity: 0;
}

.contact-form-container{
     transform: rotate(5deg) translateY(25%) translateX(40%);
     opacity: 0;
     width: 30rem;
     background-color: white;
     min-height: 28rem;
     border-radius: 1rem;
}

.contact-email-text{
    font-size: 1rem;
    font-family: var(--font-subtitle);

}

.contact-socials{
    display: flex;
    gap:1rem;
    margin-top: 2rem;
}

.social-icon{
    width: 3rem;
    height: 3rem;
    background-color: #d9d9d9;
    border-radius: 100%;
    opacity: 0;
}

.contact-email{
    display: flex;
    color:white;
    font-family: var(--font-primary);
    font-size: 0.85rem;
    margin-top: 0.8rem;
    align-items: center;
    gap:0.3rem
}

.contact-email-icon{
    filter: invert(1);
    width: 1.8rem;

}

.contact-form{
    display: flex;
    flex-direction: column;
    width: 100%;
    padding:2rem;
    justify-content: space-around;
    gap:1rem;
    height: 100%;
}

input,textarea{
    width: 100%;
    font-size: 0.9rem;
    background-color: white;
    border:none;
    border-bottom: 2px solid #d9d9d9;
    font-family: var(--font-subtitle);
    padding: 0.3rem 0.3rem;
}

input::placeholder,textarea::placeholder{
    color:#0A0A0A
}

input:focus,textarea:focus{
    outline: 1px solid #0A0A0A;
}

textarea{
    height: 10rem;
    border: 2px solid #d9d9d9;
    margin-top: 1rem;
    border-radius: 0.2rem;
    padding: 0.3rem
}

.contact-submit-btn{
    background-color: #0A0A0A;
    color:white;
    font-size: 1rem;
    font-family: var(--font-subtitle);
    border:none;
    border-radius: 1rem;
    padding: 0.4rem 0;
    margin-top: 1.5rem;
}

.input-error {
  outline: 2px solid red;
}

.error-message {
  margin-top: 0.2rem;
  display: block;
}

.container-loader{

    height: 100%;
    width: 100%;
    display: none;
    justify-content: center;
    align-items: center;
}

#cart-notification-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap:0.5rem
}



.cart-notification {
background: white;
color: black;
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 1rem;
padding: 1rem;
border-radius: 0.5rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
max-width: 30rem;
    opacity: 0;

}

.cart-notification.show {
    opacity: 1;
}

.cart-notification.fade-out {
    opacity: 0;
}
/* Image dans la notif */
.cart-notification img {
  width: 2rem;
  height: 2rem;
}

/* Animation de disparition */
.cart-notification.fade-out {
  opacity: 0;
}

#age-popup{
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:#000c;
    display:none;
    justify-content:center;
    align-items:center;
    z-index:9999;
    padding: 0.5rem;
    min-height: 100%;
    height: 100%;
       box-sizing: border-box; /* évite que le padding dépasse */
    overflow-x: hidden; /* bloque les débordements éventuels */
}

.bloc-popup{
background:white;
padding:2rem;
border-radius:1rem;
text-align:center;
display: flex;
flex-direction: column;
gap:1.2rem;
margin: auto;

      /* ✅ ne dépasse jamais l’écran */
          /* ✅ prend toute la place dispo */
}

.title-popup-age{
    font-family: var(--font-title);
    font-weight: bold;
    font-size: 1.8rem;
}

.text-popup-age{
    font-family: var(--font-subtitle);
    font-size: 1.1rem;

}

.container-btn-age{
    display: flex;
    flex-direction: column;
    gap:1rem;
    margin-top: 0.5rem;
}

#accept-age,#refuse-age{
    background-color: #0A0A0A;
    border: none;
    color: #D9D9D9;
    font-family: var(--font-subtitleBold);
    font-size: 1rem;
    padding: 0.3rem 0;
    cursor: pointer;
}

#accept-age:hover,#refuse-age:hover{
    background-color: #171717;
    transform: scale(1.02);
}


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

     .bloc-popup{
background:white;
padding:2.5rem;
    }

    .title-popup-age{
    font-size: 3rem;
    }

    .text-popup-age{

        font-size: 1.5rem;
    }

    #accept-age,#refuse-age{

    font-size: 1.5rem;

}


    .contact-section {
        flex-direction: column;
        padding: 0 3rem;
        margin-top: 15rem;
        margin-bottom: 15rem;
    }

    .contact-info {
        align-items: flex-start;
    }

    .contact-title {
        font-size: 8rem;
    }

    .contact-description {
        font-size: 3rem;
        max-width: 70%;
    }

    .social-icon {
        width: 5rem;
        height: 5rem;
    }

    .contact-socials {
        margin-top: 5rem;
    }

    .contact-email {
        font-size: 2rem;
    }

    .contact-email-icon {
        width: 4rem;
    }

    .contact-form-container{
        width: 100%;
        min-height: 55.5rem;
    }

    .contact-form {
        width: 100%;
        gap:3rem;
        padding: 4rem;
    }

    input, textarea,.contact-submit-btn   {
        font-size: 2rem;
    }

    textarea {
        height: 20rem;
    }

    input::placeholder,textarea::placeholder{
        font-size: 2rem;
    }

     .cart-notification {

  gap: 1rem;
  font-size: 2rem;
  padding: 1.3rem;
  max-width: 40rem;
}

/* Image dans la notif */
.cart-notification img {
  width: 2.2rem;
  height: 2.2rem;
}
}

@media (max-width: 767.98px) {
    .contact-form {
        padding:3rem;
    }

    .contact-socials {
        gap:1.5rem
    }

     .cart-notification {

  gap: 1rem;
  font-size: 2.2rem;
  padding: 1.3rem;
  max-width: 43rem;
}

/* Image dans la notif */
.cart-notification img {
  width: 2.4rem;
  height: 2.4rem;
}

 .contact-form-container{

        min-height: 53.5rem;
    }
}

@media (max-width: 575.98px) {

     .contact-form-container{

        min-height: 55.5rem;
    }

      #accept-age,#refuse-age{

    padding: 0.5rem 0;

}


    .contact-section {
        padding: 0 2rem;
    }
    .contact-form {
        padding:4rem 3rem;
    }

    .contact-title {
        font-size: 5.5rem;
    }

    .contact-description {
        font-size: 2rem;
        max-width: 100%;
    }

       #cart-notification-container {
    left: 50%;
    transform: translateX(-50%);
    right: auto; /* on désactive le right */
    width: 90%;


  }

    .cart-notification {
        max-width: 100%;
        text-align: center;
        font-size: 2rem;
        justify-content: center;
    }
}