/* style.css - version améliorée pour Essential Oil Roots */
:root{
  --nav-height:120px;
  --card-img-height:clamp(140px, 18vw, 220px);
  --bs-body-font-family: 'Open Sans', Arial, sans-serif;
  --gap: 1rem;
}

*{box-sizing:border-box}

body{
  font-family:var(--bs-body-font-family);
  margin:0;
  padding-top:var(--nav-height); /* espace pour la navbar fixe */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.visually-hidden{
  position:absolute!important;
  height:1px;width:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);white-space:nowrap;
}

/* images utilitaires */
.custom-img{max-width:100%;height:auto;border-radius:.5rem}
.thumb{cursor:pointer}
.card-img-top{object-fit:cover;height:var(--card-img-height);width:100%}

/* ajustements pour les cards */
.card.h-100{display:flex;flex-direction:column}
.card-body{flex:1}

/* -------------------------
   Produits : single-line UX
   ------------------------- */

/* wrapper avec horizontal scroll sur petits écrans */
.products-wrapper{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  padding-bottom:.5rem;
  scroll-behavior:smooth;
}

/* grille/flex qui s'adapte :
   - sur larges écrans : 5 cartes exactement sur une ligne (20% chacune)
   - sur petits écrans : chaque carte a une largeur min (scroll horizontal)
*/
.products-grid{
  display:flex;
  gap:var(--gap);
  padding:1rem;
  align-items:start;
  /* scroll snap pour un défilement cadré */
  scroll-snap-type:x mandatory;
}

/* comportement par défaut (mobile/tablette) : cartes larges, scroll horizontal */
.product-col{
  flex: 0 0 220px; /* largeur minimum pratique sur mobile */
  display:flex;
  scroll-snap-align:start;
}

/* Sur très large écran, forcer 5 items sur une ligne (sans scroll) */
@media (min-width:1200px){
  .products-wrapper{overflow-x:visible}
  /* calc pour tenir compte du gap total (4 * gap) */
  .product-col{
    flex: 0 0 calc((100% - (4 * var(--gap))) / 5);
  }
}

/* Masquage esthétique du scrollbar (WebKit) - garde visible pour accessibilité si nécessaire */
.products-wrapper::-webkit-scrollbar{height:10px}
.products-wrapper::-webkit-scrollbar-track{background:transparent}
.products-wrapper::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.12);border-radius:10px}
.products-wrapper::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,0.18)}

/* carousel caption text alignment fallback */
.carousel-caption.text-start{left:1rem;right:auto;text-align:left}

/* footer spacing */
footer{padding:1.25rem 0}

/* accessibilité focus visible */
.thumb:focus{outline:3px solid rgba(0,123,255,.5);outline-offset:2px}

/* améliorer lisibilité des titres */
h1,h2,h3,h4,h5,h6{font-family:'Open Sans', Arial, sans-serif}


/* Effet zoom + fondu pour modale image */
#imageModal .modal-content {
  transform: scale(0.7);
  opacity: 0;
  transition: all 0.3s ease-in-out;
}
#imageModal.show .modal-content {
  transform: scale(1);
  opacity: 1;
}
/* Justifier le texte du formulaire de contact à gauche */
#contact,
#contactForm,
#contactForm p,
#contactForm label,
#contactForm input,
#contactForm textarea {
    text-align: left;
}