html,body{
  max-width:100vw;
  overflow-x:hidden;
  margin:0;
  box-sizing:border-box;
  background:#fff
}
*{
  scroll-behavior:smooth
}

/* === INDICATEURS DE VALIDATION === */
.valid-field {
  border-color: #17C145 !important;
  background-color: #e6faea !important;
  box-shadow: 0 0 0 2px rgba(23, 193, 69, 0.2) !important;
  transition: all 0.3s ease !important;
}

.invalid-field {
  border-color: #F95154 !important;
  background-color: #faeaea !important;
  box-shadow: 0 0 0 2px rgba(249, 81, 84, 0.2) !important;
  transition: all 0.3s ease !important;
}

.valid-field:focus {
  border-color: #17C145 !important;
  box-shadow: 0 0 0 3px rgba(23, 193, 69, 0.3) !important;
}

.invalid-field:focus {
  border-color: #F95154 !important;
  box-shadow: 0 0 0 3px rgba(249, 81, 84, 0.3) !important;
}

.top-adv-bar{
  background:#000;
  padding:10px 0
}
.top-adv-inner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px
}
.adv-col{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center
}
.adv-sep{
  width:1px;
  height:30px;
  background:#c3c3c3;
  margin:0 10px
}
.icon-gray{
  color:#C3C3C3;
  font-size:15px;
  margin-bottom:6px
}
.icon-green{
  color:#17C145;
  font-size:12px
}
.text-small{
  font-size:10px;
  line-height:1.2
}
.gray-text{
  color:#C3C3C3
}
.green-text{
  color:#17C145
}
.white-text{
  color:#fff
}
.center-text{
  text-align:center
}
.bold{
  font-weight:bold
}
.normal{
  font-weight:normal
}
.underline{
  text-decoration:underline
}
.flex-center{
  display:flex;
  align-items:center
}
.gap{
  gap:4px
}
.mb-small{
  margin-bottom:6px
}
.header{
  padding:0.5rem 1.25rem;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:0.25rem;
  font-size:1.25rem;
  color:#E40F50;
  font-weight:bold
}
@media(min-width:1024px){
  .header{
      padding:1.25rem;
      font-size:2.25rem
  }
}
.logo{
  width:8.5rem
}
@media(min-width:768px){
  .logo{
      width:10rem
  }
}
@media(min-width:1024px){
  .logo{
      width:14rem
  }
}
.main-container{
  max-width:1500px;
  margin:100px auto;
  padding:0 1rem
}
@media(min-width:768px){
  .main-container{
      padding:0 2rem
  }
}
@media(min-width:1280px){
  .main-container{
      padding:0 3rem;
      max-width:1400px
  }
}
@media(min-width:1536px){
  .main-container{
      max-width:1500px
  }
}
@media(max-width:1023px){
  .main-container{
      margin-top:30px!important
  }
}
.content-grid{
  display:grid;
  grid-template-columns:1fr;
  row-gap:1rem;
  margin-bottom:1rem;
  align-items:center
}
@media(min-width:1024px){
  .content-grid{
      grid-template-columns:repeat(2,minmax(0,1fr));
      column-gap:1rem;
      row-gap:1.5rem;
      margin-bottom:2rem;
      align-items:stretch!important;
      grid-auto-rows:minmax(0,auto)
  }
  .content-grid.reverse{
      direction:rtl
  }
  .content-grid.reverse>*{
      direction:ltr
  }
}
.image-block{
  margin-top:0!important;
  min-width:0;
  min-height:0;
  overflow:hidden
}
.image-block img{
  width:100%;
  object-fit:cover;
  border-radius:0.375rem
}
@media(min-width:1024px){
  .slider-col{
      display:flex;
      flex-direction:column
  }
  .thumbs-swiper{
      position:static!important;
      width:100%!important;
      margin-top:18px!important;
      background:transparent!important
  }
}
.slider-desktop-wrapper img,.slider-mobile-wrapper img{
  object-fit:contain;
  width:100%;
  height:100%;
  display:block;
  background:#fff
}
.thumbs-swiper img{
  object-fit:cover;
  width:100%;
  height:100%;
  border-radius:0.75rem;
  border:2px solid #e5e7eb;
  cursor:pointer;
  display:block
}
.text-block{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  width:100%;
  max-width:700px;
  padding:0 0.5rem;
  margin-bottom:0!important;
  position:relative;
  z-index:1
}
.text-block h2{
  font-size:1.25rem;
  font-weight:bold;
  text-align:left;
  padding-bottom:0.375rem
}
@media(min-width:768px){
  .text-block h2{
      font-size:1.5rem
  }
}
@media(min-width:640px){
  .text-block h2{
      text-align:center
  }
}
.text-block p{
  font-size:0.875rem;
  margin-top:0.375rem;
  text-align:left
}
@media(min-width:1024px){
  .text-block p{
      font-size:1.125rem
  }
}
.delivery-timeline,#Progress,#Progress-desktop,.stock-indicator-bar-mobile,.stock-indicator-bar-desktop{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  box-sizing:border-box
}
.verified-badge{
  color:#17C145;
  font-size:14px;
  margin-left:0.25rem
}
.slider-mobile-wrapper{
  width:400px!important;
  height:400px!important;
  max-width:100vw;
  max-height:100vw;
  margin:0 auto!important;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  overflow:hidden;
  border-radius:10px
}
@media(max-width:420px){
  .slider-mobile-wrapper{
      width:100vw!important;
      height:100vw!important
  }
}
.footer{
  background:#F8ECE0;
  padding:24px 16px
}
.footer-container{
  display:grid;
  grid-template-columns:1fr;
  gap:24px
}
@media(min-width:768px){
  .footer-container{
      grid-template-columns:repeat(3,1fr);
      padding:0 32px
  }
}
.footer-item{
  text-align:center
}
.footer-title{
  font-size:1rem;
  font-weight:600
}
.footer-description{
  font-size:1rem;
  padding-top:12px
}
.footer-image{
  width:100%;
  max-width:288px;
  margin:0 auto
}
.footer-disclaimer,.footer-disclaimer-note{
  font-size:0.75rem;
  line-height:1.2;
  padding-top:12px
}
.footer-heading{
  font-size:1rem;
  font-weight:700;
  padding-top:12px
}
.footer-about{
  font-size:0.875rem;
  line-height:1.5
}
.footer-link{
  font-size:1rem;
  text-decoration:underline;
  color:#000
}
.footer-year{
  font-size:1rem;
  font-weight:700;
  text-align:center;
  padding-top:32px;
  padding-bottom:8px
}
.responsive-padding{
  padding:0 100px
}
@media(max-width:768px){
  .responsive-padding{
      padding:0 20px
  }
}
.cards-container{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:1.5rem;
  padding:0 10px 1.5rem;
  background:#F2F2F2
}
.card{
  flex:1 1 calc(33.333% - 1rem);
  max-width:350px;
  box-sizing:border-box
}
@media(max-width:768px){
  .card{
      flex:1 1 100%;
      max-width:100%
  }
}
@media(max-width:1023px){
  #buy-btn-section{
      margin-bottom:5px!important
  }
  .stock-indicator-bar-mobile{
      margin-top:4px!important;
      margin-bottom:10px!important
  }
  .image-block{
      margin-bottom:36px!important
  }
  .text-block h2{
      margin-bottom:7px!important
  }
  .image-block img{
      max-width:100%!important;
      width:100%!important;
      height:auto!important;
      display:block;
      margin:0 auto
  }
}
@keyframes modalFadeIn{
  0%{
      opacity:0;
      transform:translateY(40px) scale(0.98)
  }
  100%{
      opacity:1;
      transform:translateY(0) scale(1)
  }
}
#shipping-modal[aria-visible="true"] .modal-content{
  animation:modalFadeIn 0.33s cubic-bezier(.4,1.3,.6,1) both
}
#shipping-modal .modal-content{
  background:#000;
  color:#fff;
  border-radius:18px;
  max-width:430px;
  width:90vw;
  margin:auto;
  padding:2.5rem 2rem;
  box-shadow:0 0 40px #000;
  position:relative
}
@media(max-width:600px){
  #shipping-modal{
      position:fixed!important;
      z-index:9999!important;
      inset: 0 !important; /* Remplace top/left/right/bottom */
      width:100vw!important;
      height:100dvh !important; /* Utilise device-height pour gérer les notches */
      background:#fff!important;
      align-items:stretch!important;
      padding: env(safe-area-inset-top) !important;
      overflow-y:auto
  }
  #shipping-modal .modal-content{
      background:#fff!important;
      color:#111!important;
      border-radius:0!important;
      box-shadow:none!important;
      width:100vw!important;
      max-width:100vw!important;
      height:auto!important;
      margin:0!important;
      padding: 1.2rem 0.7rem 1.5rem !important;
      display:flex!important;
      flex-direction:column!important;
      justify-content:flex-start!important
  }
}
#shipping-modal .modal-content input,#shipping-modal .modal-content select{
  background:#fff!important;
  color:#111!important;
  border:1.5px solid #bbb!important;
  padding:0.9rem!important;
  border-radius:10px!important;
  font-size:1.1rem!important;
  margin-bottom:2px!important;
  outline:none!important;
  transition:all 0.3s ease!important;
  box-shadow:none!important
}
#shipping-modal .modal-content input:focus,#shipping-modal .modal-content select:focus{
  border-color:#D35400!important;
  box-shadow: 0 0 0 2px rgba(211, 84, 0, 0.2)!important;
}

/* === VALIDATION SPÉCIFIQUE AU MODAL === */
#shipping-modal .modal-content input.valid-field,
#shipping-modal .modal-content select.valid-field {
  border-color: #17C145 !important;
  background-color: #e6faea !important;
  box-shadow: 0 0 0 2px rgba(23, 193, 69, 0.2) !important;
}

#shipping-modal .modal-content input.invalid-field,
#shipping-modal .modal-content select.invalid-field {
  border-color: #F95154 !important;
  background-color: #faeaea !important;
  box-shadow: 0 0 0 2px rgba(249, 81, 84, 0.2) !important;
}

#shipping-modal .modal-content input.valid-field:focus,
#shipping-modal .modal-content select.valid-field:focus {
  border-color: #17C145 !important;
  box-shadow: 0 0 0 3px rgba(23, 193, 69, 0.3) !important;
}

#shipping-modal .modal-content input.invalid-field:focus,
#shipping-modal .modal-content select.invalid-field:focus {
  border-color: #F95154 !important;
  box-shadow: 0 0 0 3px rgba(249, 81, 84, 0.3) !important;
}

#shipping-modal .modal-content input.valid-blur,#shipping-modal .modal-content select.valid-blur{
  background:#e6faea!important;
  border-color:#17C145!important
}
#shipping-modal .modal-content input.invalid-blur,#shipping-modal .modal-content select.invalid-blur{
  background:#faeaea!important;
  border-color:#F95154!important
}
#shipping-modal .modal-content .error-message{
  color:#F95154!important;
  font-size:0.95rem!important;
  margin-top:-8px!important;
  margin-bottom:2px!important;
  display:none!important
}
#shipping-modal .modal-content input.invalid-blur+.error-message,#shipping-modal .modal-content select.invalid-blur+.error-message{
  display:block!important
}

@keyframes modal-pop-in {
  0% {
    opacity: 0;
    transform: scale(0.95) translateY(30px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

#shipping-modal .modal-content {
  opacity: 0;
  transform: scale(0.95) translateY(30px);
  pointer-events: none;
}
#shipping-modal .modal-content.modal-in {
  animation: modal-pop-in 0.32s cubic-bezier(.4,2,.6,1) forwards;
  pointer-events: auto;
}

/* === 🔥 CORRECTIONS MINIMALES AJOUTÉES === */

/* Empêcher le scroll du body sur mobile quand modal ouvert */
body[aria-modal-open="true"] {
  overflow: hidden !important;
  position: fixed !important;
  width: 100% !important;
  height: 100vh !important;
}

/* Transition douce pour l'ouverture/fermeture */
#shipping-modal {
  transition: opacity 0.3s ease !important;
}

#shipping-modal[aria-visible="false"] {
  opacity: 0 !important;
}

#shipping-modal[aria-visible="true"] {
  opacity: 1 !important;
}

/* === 🔥 CORRECTION HAUTEUR MODAL MOBILE === */

@media (max-width: 600px) {
  #shipping-modal {
    overflow-y: auto !important; /* Permettre le scroll vertical */
    padding: 0 !important; /* Petit padding tout autour */
  }
  
  #shipping-modal .modal-content {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    padding: 1rem 0.7rem !important; /* Réduire le padding vertical */
    margin: 0 !important;
    display: block !important; /* Au lieu de flex */
    box-sizing: border-box !important;
  }
  
  /* Ajuster les inputs et select pour qu'ils prennent toute la largeur disponible */
  #shipping-modal .modal-content input,
  #shipping-modal .modal-content select {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0.75rem !important;
    font-size: 1rem !important;
  }
  
  /* Ajuster les conteneurs de champs */
  #shipping-modal .modal-content .space-y-4 > * {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Ajuster le bouton de fermeture */
  #shipping-modal #close-shipping-modal {
    top: 0.5rem !important;
    right: 0.5rem !important;
    width: 2rem !important;
    height: 2rem !important;
    padding: 0.25rem !important;
  }
  
  /* Réduire l'espacement entre les champs */
  #shipping-modal .modal-content .space-y-4 > * + * {
    margin-top: 0.75rem !important; /* Au lieu de 1rem */
  }
  
  /* Réduire le padding des inputs */
  #shipping-modal .modal-content input,
  #shipping-modal .modal-content select {
    padding: 0.75rem !important; /* Au lieu de 0.9rem */
    font-size: 1rem !important; /* Au lieu de 1.1rem */
  }
  
  /* Réduire l'espace autour du titre */
  #shipping-modal .text-center {
    margin-bottom: 1rem !important; /* Au lieu de 1.5rem */
  }
  
  /* Réduire la taille de l'image du drapeau */
  #shipping-modal .w-16 {
    width: 3rem !important;
    margin-bottom: 0.75rem !important;
  }
}