/* =============================================================
 * Main stylesheet — cleaned & organised (2025-05-23 ➜ 2025-06-19)
 * -------------------------------------------------------------
 * Convention
 *   #  Root & variables
 *   A  Base (fonts, body, links)
 *   B  Layout containers & hero
 *   C  Components (buttons, navbar, cards, slideshow, info panel)
 *   C bis  Cart feedback (pulse + toast)
 *   D  Helpers & utilities
 *   E  Responsive breakpoints
 * -------------------------------------------------------------
 * NOTE
 *  • Aucune règle supprimée : seulement dé-dupliquée / ré-ordonnée.
 *  • Ordre de surcharge conservé : les sections plus bas priment.
 *  • Fix 2025-06-19 : override 100svh pour le bug mobile vh.
 * ============================================================*/

/* #############################################################
 * #  ROOT & VARIABLES                                          #
 * ########################################################### */
:root {
  /* hauteur réservée pour navbar + marges + footer */
  --chrome-height: 350px;
}

/* -------------------------------------------------------------
 * FONTS (local woff/woff2)
 * ----------------------------------------------------------- */
@font-face {
  font-family: "Antonia";
  src: url("/static/fonts/AntoniaH3-Medium.woff2") format("woff2"),
       url("/static/fonts/AntoniaH3-Medium.woff")  format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Garamond";
  src: url("/static/fonts/Garamond.woff2") format("woff2"),
       url("/static/fonts/Garamond.woff")  format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* #############################################################
 * A. BASE                                                      #
 * ########################################################### */
body {
  margin: 0;
  padding: 0;
  background: rgb(255, 255, 255) center / cover fixed;
  font-family: "Antonia", sans-serif;
}

/* supprimer la déco sur les liens-produits */
.product-link,
.product-link:hover,
.product-link:focus {
  text-decoration: none !important;
  color: inherit !important;
}

/* #############################################################
 * B. LAYOUT CONTAINERS & HERO                                  #
 * ########################################################### */
.content-container {
  background-color: rgb(255, 255, 255);
  border-radius: 12px;
  padding: 20px;
  overflow: hidden;
  margin: 0 auto;
  transition: all 0.5s ease;
}

.content-container.small    { width: 700px; max-height: 400px; }
.content-container.expanded { width: 85vw;  height: 75vh; overflow-y: auto; }
.dynamic-content            { padding-top: 20px; }

/* Hero section */
.welcome-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  height: 100%;
}
.welcome-content h1 { font-size: 2.5rem; color:#222; margin-bottom:20px; }
.welcome-content p  { font-size: 1.1rem; color:#444; margin-bottom:30px; }

/* ============================================================
 * B bis – Correctifs HOME banner (à charger APRÈS B)
 * ========================================================== */
/* 1. Conteneur spécifique “home”                              */
.content-container.home{
  width: 80vw;                          /* desktop : 80 % */
  height: calc(100vh - 200px);          /* fallback pour vieux navigateurs */
  padding: 0;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  border-radius: 12px;

  /* image desktop par défaut */
  background-image: url("/static/images/bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 2. L’image <img> doit remplir le conteneur                   */
.content-container.home img,
#welcome-content img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 3. Le wrapper hérite de la hauteur                          */
#welcome-content{ height: 100%; }

/* #############################################################
 * C. COMPONENTS                                                #
 * ########################################################### */
/* --- Buttons / CTA ----------------------------------------- */
.btn-green{
  background-color: rgb(69,148,93);
  color:#fff;
  border:none;
  padding:12px 24px;
  font-size:1.1rem;
  border-radius:6px;
  transition: background-color .3s ease;
  display:inline-block;
}
.btn-green:hover{ background-color:#3ebc8e; }

.btn-outline-dark{
  border:2px solid #222;
  color:#fff;
  padding:12px 24px;
  font-size:1.1rem;
  border-radius:6px;
  transition:background-color .3s ease, color .3s ease;
}
.btn-outline-dark:hover{ background-color:#222; color:#000; }

/* category buttons */
.content-container .btn-category{
  border:none !important;
  box-shadow:none !important;
  background-color: rgb(69,148,93);
}
#btn-filter{ display:none; }

/* --- Navbar & footer --------------------------------------- */
.navbar{
  background: linear-gradient(90deg, rgb(69,148,93), rgb(69,148,93));
  position:relative;
  z-index:1000;
}
.navbar .nav-link{ color:#fff !important; font-weight:500; transition:color .3s; font-size:.9rem; }
.navbar .nav-link:hover{ color:#dcd9d9 !important; }

.nav-veep .navbar-brand,
.nav-veep .nav-link{ line-height:inherit; }

footer{
  background-color:#222;
  color:#fff;
  text-align:center;
  padding:15px 20px;
  border-top:1px solid #444;
}

/* --- Product cards grid ------------------------------------ */
.card{
  border:none;
  border-radius:8px;
  overflow:hidden;
  transition:transform .3s ease, box-shadow .3s ease;
}
.card-img-top{
  width:100%; height:350px;
  object-fit:contain; object-position:center;
}
.card-body{
  padding-left:0; padding-right:0;
  background-color: rgb(255, 255, 255);
  text-align:center;
}
.card-body .card-title{ font-family:"Garamond", "Antonia", serif; }

/* sold-out overlay */
.sold-out-overlay{
  position:absolute; inset:0;
  background:rgba(0,0,0,.5);
  color:#fff; font-size:2rem; font-weight:bold;
  display:flex; align-items:center; justify-content:center;
  z-index:2; pointer-events:none;
}
.product-link.disabled{
  pointer-events:none;
  cursor:not-allowed;
  opacity:.5;
  position:relative;
}

/* --- Slideshow (product detail) ---------------------------- */
.slideshow-container{
  position:relative;
  max-height:calc(100vh - var(--chrome-height));
  overflow:hidden;
  border-radius:8px;
  background:transparent;
}
.slide{ display:none; }
.slide img{
  width:100%;
  max-height:calc(100vh - var(--chrome-height));
  object-fit:scale-down;
}
.prev, .next{
  cursor:pointer;
  position:absolute; top:50%; padding:12px; font-size:24px;
  color:#fff; background:rgba(0,0,0,.5); border-radius:50%;
  user-select:none; transform:translateY(-50%);
  z-index:10;
}
.prev{ left:10px; } .next{ right:10px; }

/* thumbnails & dots */
.thumbnails{ display:flex; flex-direction:column; gap:8px; }
.thumbnails .thumb{
  cursor:pointer;
  border:1px solid transparent;
  width:60px; height:60px;
  overflow:hidden; margin-bottom:8px;
}
.thumbnails .thumb img{ width:100%; height:100%; object-fit:cover; }
.thumbnails .thumb.active{ border-color:#999; }
.dots-container{ text-align:center; margin-top:8px; }
.dot{
  display:inline-block; width:12px; height:12px; border-radius:50%;
  background:#ccc; margin:0 4px; cursor:pointer;
}
.dot.active{ background:#444; }

/* --- Product info panel ------------------------------------ */
.product-info{
  background:transparent;          /* desktop : transparent */
  border-radius:8px;
  padding:20px;
  box-shadow:none;
}
.product-info h2{ font-family:"Garamond"; color:#222; margin:0 0 15px; }
.product-info p { font-family:"Garamond"; color:#444; font-size:1rem; margin-bottom:10px; }
.product-info .card-text{ font-family:"Antonia", sans-serif !important; }

/* stacked buttons */
.product-info #btn-add-to-cart,
.product-info #btn-buy-now{ display:block; width:100%; }
.product-info #btn-buy-now{ margin-top:10px; }

/* bouton outline vert */
.btn-outline-green{
  background-color:#fff;
  color:rgb(69,148,93);
  border:2px solid rgb(69,148,93);
  padding:12px 24px;
  font-size:1.1rem;
  border-radius:6px;
  transition:background-color .3s ease, color .3s ease;
}
.btn-outline-green:hover{
  background-color:rgb(69,148,93);
  color:#fff;
}

.product-info ul,
.product-info li{ font-family:"Garamond", "Antonia", serif; }

.promotion{ color:#e0007b; font-weight:bold; }

/* ===== Page « Retour après paiement » ====================== */
.return-success{
  font-family:"Garamond", "Antonia", serif;
  background:#f5fbf7;
  color:#45945d;
  max-width:600px;
  margin:80px auto;
  padding:60px 25px 50px;
  border-radius:16px;
  box-shadow:0 4px 20px rgba(0,0,0,.05);
}
.return-success svg{
  width:70px; height:70px;
  fill:#45945d;
  margin-bottom:25px;
}
.return-success h1{
  font-size:2.2rem;
  margin-bottom:18px;
  color:#222;
}
.return-success p{
  font-size:1.15rem;
  color:#444;
  line-height:1.5;
}

/* #############################################################
 * C bis. CART FEEDBACK (pulse + toast)
 * ########################################################### */
/* pulse badge */
@keyframes cart-badge-pulse{
  0%   { transform:scale(1);   }
  50%  { transform:scale(1.25);}
  100% { transform:scale(1);   }
}
#cart-badge.pulse,
#cart-badge-mobile.pulse{
  animation:cart-badge-pulse .4s ease;
}

/* toast “Added to cart!” */
.addtocart-toast{
  position:fixed;
  left:50%; bottom:1.5rem;
  transform:translate(-50%,120%);
  background:#28a745;
  color:#fff;
  padding:.6rem 1.2rem;
  font-size:.9rem;
  border-radius:6px;
  box-shadow:0 4px 12px rgba(0,0,0,.25);
  opacity:0;
  transition:transform .35s ease, opacity .35s ease;
  z-index:10000;
}
.addtocart-toast.show{
  transform:translate(-50%,0);
  opacity:1;
}

/* #############################################################
 * D. HELPER CLASSES (misc.)                                   #
 * ########################################################### */
/* (placeholder) */

/* #############################################################
 * E. RESPONSIVE BREAKPOINTS                                   #
 * ########################################################### */
/* ---------- ≤768 px (mobile) ------------------------------- */
@media (max-width:768px){

  /* override 100svh pour le bug iOS / webview */
  .content-container.home{
    height: calc(80svh);
    background-image: url("/static/images/bg-mobile.jpeg");
  }

  body.no-scroll{
    overflow:hidden;
    touch-action:none; /* supprime le “bounce” iOS */
  }

  .return-success{
    margin:50px 15px;
    padding:40px 20px;
  }
  .return-success h1{ font-size:1.8rem; }
  .return-success p { font-size:1rem; }

  .card-img-top            { height:150px; }
  .slideshow-container,
  .slide img               { max-height:300px; }
  .welcome-content h1      { font-size:2rem; }
  .welcome-content p       { font-size:1rem; }

  /* content container tweaks */
  .content-container.small,
  .content-container.expanded{
    width:90vw; height:auto; margin:10px auto; overflow-y:auto;
  }
  .product-info{ margin-bottom:80px; }

  /* floating filter button */
  #btn-filter{
    position:fixed; top:100px; left:10px;
    width:40px; height:40px; border-radius:50%;
    background:rgb(69,148,93); color:#fff; border:none;
    display:flex; align-items:center; justify-content:center;
    z-index:1050; transition:background-color .3s;
  }
  #btn-filter:hover{ background:rgb(69,148,93); }

  /* navbar fixe adjustments */
  .navbar.navbar-expand-lg,
  .navbar{
    position:fixed !important;
    top:0 !important; width:100% !important;
    z-index:2000;
    padding: 30px;
  }
  .navbar .navbar-toggler{ position:absolute; left:10px; top:10px; z-index:2100; }
  .navbar .navbar-brand   { position:absolute; left:50%; top:10px; transform:translateX(-50%); z-index:2100; }
  .navbar .d-lg-none      { position:absolute; right:10px; top:10px; z-index:2100; }
  .navbar .collapse,
  .navbar .collapsing{
    position:relative; width:100%;
    padding-top: 30px;
    background:inherit; z-index:2000; transition:none;
  }
  .navbar .collapse:not(.show){ display:none; }

  .product-grid{ margin-top:20px; }

  /* category sidebar */
  .col-md-3.d-none.d-md-block{ display:none !important; }
  .category-sidebar{
    position:fixed; top:80px; left:0; bottom:0;
    width:200px; background:rgb(69,148,93);
    overflow-y:auto; z-index:2000;
    transition:transform .3s;
  }
  .category-sidebar.collapsed{ transform:translateX(-100%); }

  .product-detail footer{ display:none; }
}

/* ---------- ≥768 px (tablet/desktop) ----------------------- */
@media (min-width:768px){

  .dots-container{ display:none; }
  .thumbnails    { display:flex; }

  /* category sidebar desktop */
  .category-sidebar{
    position:fixed; top:200px;
    background:rgb(69,148,93);
    border:2px solid #fff; border-radius:12px;
  }

  .product-detail .col-md-4{
    display:flex; flex-direction:column;
  }
  .product-detail .product-info{
    align-self:flex-start;
    padding-top:0 !important;
    margin-top:0 !important;
  }
  .product-detail #btn-back{ margin-bottom:2rem !important; }

  /* sortable admin table */
  #products-tbody tr{ cursor:move; }

  .navbar .container{
    width:80vw;
    max-width:none;
    padding-left:0; padding-right:0;
  }
}