:root {
  --nav-h: 20px;
  --header-h: 150px;
  --footer-h: 30px;
}


/* ===== RESET / BASE ===== */
* { box-sizing: border-box; }
html, body { height: 100%; -webkit-overflow-scrolling: touch;overflow-y: auto;
  -ms-overflow-style: none;  /* IE et Edge */
  scrollbar-width: none; }
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background-color: var(--background-color, #fff);
  color: black;
  display: flex;
  flex-direction: column;
  min-height: 100%;

  /* Cacher la scrollbar */
  overflow-y: auto;
  -ms-overflow-style: none;  /* IE et Edge */
  scrollbar-width: none;     /* Firefox */
}

body::-webkit-scrollbar {
  display: none;  /* Chrome, Safari, Opera */
}




/* ===== NAVBAR ===== */
.top-navbar{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--highlight-color);
  display: flex;
  justify-content: center;
  min-height: var(--nav-h);
  padding: 8px 0;
}
.top-navbar ul{ list-style: none; display: flex; gap: 28px; margin: 0; padding: 0; align-items: center; }
.top-navbar a{
  display: flex; align-items: center; gap: 6px;
  text-decoration: none; color: var(--text-color); font-weight: 500; font-size: 14px;
}
.top-navbar a:hover{ color: var(--primary-color, #111); }
.top-navbar a.active{ color: #000; font-weight: 600; }
.top-navbar svg{ display: inline-block; }

/* ===== HEADER sous la navbar ===== */
header{
  position: sticky;
  top: var(--nav-h);   /* colle sous la navbar */
  z-index: 900;
  background-color: var(--secondary-color);
  height: var(--header-h);
  
}
.header-background{
  width: 100%;
  
  object-fit: fill;
  display: block;
  width: 100%;
  height: 100%;
}

/* ===== MAIN (zone média plein écran entre header et footer) ===== */
.main-content{
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  height: calc(100% - var(--nav-h) - var(--header-h) - var(--footer-h))!important;
  overflow: auto;
  padding: 0;                      /* edge-to-edge */
  display: grid;
  place-items: center;
  text-align: center;
  height: 100%;
  margin-bottom: calc(var(--footer-h) + var(--footer-h) + var(--nav-h) ) ; /* espace pour le footer */
  
  
  
}


.main-content::-webkit-scrollbar {
  display: none;  /* Chrome, Safari */
}

/* ⚠️ On neutralise l'ancien style des images dans main */
.main-content img{ max-width: none; height: auto; border-radius: 0; margin: 0; }

/* Média principal (image OU vidéo) plein écran */
#hero-media,
#hero-video{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;   
            /* remplit la zone sans déformer */
}

/* Fondu slider / vidéo */
.hero-fade{ transition: opacity 400ms ease; }
.hero-visible{ opacity: 1; }
.hero-hidden{ opacity: 0; }


.btn-commande {
  position: fixed;  /* ✅ toujours par rapport à la fenêtre, pas un parent */
  left: 50%;
  bottom: calc(10% + env(safe-area-inset-bottom)); /* ✅ visible même avec le notch */
  transform: translateX(-50%);
  z-index: 3000;
  text-decoration: none;
  padding: 14px 28px;
  border-radius: 9999px;
  background: var(--primary-color, #111);
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
  transition: background .3s;
}
.btn-commande:hover {
  background: #000;
}



/* ===== FOOTER FIXE ===== */
footer{
  position: fixed;
  bottom: 0; left: 0; width: 100%;
  height:var(--footer-h) ;
  background: var(--highlight-color);
  color: var(--text-color);
  padding: 10px 16px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  text-align: center;
  font-size: 14px;
  display: grid;
  place-items: center;
  z-index: 1100;
  height: 10%;
}
footer .infos{ margin-bottom: 4px; }
footer p{ margin: 0; }


.infos-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px; /* espace entre les cartes */
  padding: 12px; /* padding normal */
  padding-bottom: calc(var(--footer-h) + 90px) !important; /* espace pour le footer */
}

.card.coords {
  width: 100%; /* occupe toute la largeur */
  box-sizing: border-box;
  margin: 0; /* on retire les marges automatiques */
  padding: 12px 16px;
  border-radius: 8px;
  background: #f9f9f9; /* couleur de fond claire */
  box-shadow: 0 2px 6px rgba(0,0,0,.1);
}



/* ===== Mobile zoom (optionnel) ===== */
@media (max-width: 768px){
  body{ zoom: 80%; }

#hero-media,
  #hero-video {
    object-fit: contain;  /* la vidéo sera réduite pour entrer dans l’écran */
  }

}
@media (max-width: 480px){
  body{ zoom: 80%; }

#hero-media,
  #hero-video {
    object-fit: contain;  /* la vidéo sera réduite pour entrer dans l’écran */
  }

}


/* Footer : liens légaux en couleur primaire */
footer .legal-links a{
  color: var(--primary-color) !important;
  text-decoration: underline;
}


.desc-text{
  color: var(--highlight-color, #111);
  font-weight: 800;
  font-size: clamp(18px, 2.4vw, 28px);
  line-height: 1.35;
  text-align: center;
  white-space: pre-wrap;
}


.modal-overlay {
  z-index: 999999 !important;
}

/* ===== MODALE INFOS ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9000 !important;
}

.modal-box {
  background: #fff;
  border-radius: 12px;
  padding: 22px;
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 18px 50px rgba(0,0,0,.2);
  animation: fadeIn .25s ease;
}

.modal-box h2 {
  margin-bottom: 14px;
  text-align: center;
  font-size: 20px;
}

.modal-box label {
  display: block;
  margin: 10px 0 4px;
  font-size: 14px;
  font-weight: 500;
}

.modal-box input,
.modal-box textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 15px;
  margin-bottom: 8px;
}

.modal-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
}

.modal-actions .btn {
  flex: 1;
  padding: 10px 14px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
}

.modal-actions .btn.cancel {
  background: #ddd;
  color: #111;
}

.modal-actions .btn:not(.cancel) {
  background: var(--primary-color, #2a5bd7);
  color: #fff;
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(.95); }
  to { opacity: 1; transform: scale(1); }
}











/* ===== MODALE INFOS ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9000 !important;
}

.modal-box {
  background: #fff;
  border-radius: 12px;
  padding: 22px;
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 18px 50px rgba(0,0,0,.2);
  animation: fadeIn .25s ease;
}

.modal-box h2 {
  margin-bottom: 14px;
  text-align: center;
  font-size: 20px;
}

.modal-box label {
  display: block;
  margin: 10px 0 4px;
  font-size: 14px;
  font-weight: 500;
}

.modal-box input,
.modal-box textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 15px;
  margin-bottom: 8px;
}

.modal-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
}

.modal-actions .btn {
  flex: 1;
  padding: 10px 14px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
}

.modal-actions .btn.cancel {
  background: #ddd;
  color: #111;
}

.modal-actions .btn:not(.cancel) {
  background: var(--primary-color, #2a5bd7);
  color: #fff;
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(.95); }
  to { opacity: 1; transform: scale(1); }
} 

/* Le conteneur scrollable dans la modale */
#besoin-additionnel-modal { overflow: hidden; }

#besoin-additionnel-modal .scroll-zone {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  max-height: 100%; /* optionnel mais OK */
}

/* évite de centrer verticalement le contenu de la modale */
#besoin-additionnel-modal .modal-content {
  justify-content: flex-start; /* au lieu de center */
}





/* ===== MODALE COMPTE (ONGLETS) ===== */
.km-modal-box{
  max-width: 520px;
  width: 92%;
  max-height: 90%;
  overflow: auto;
}

.km-modal-top{
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 2;
  padding-bottom: 10px;
}

.km-modal-tabs{
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.km-tab{
  border: 1px solid #e6e6e6;
  background: #f7f7f7;
  padding: 8px 10px;
  border-radius: 10px;
  font-weight: 800;
  cursor: pointer;
}

.km-tab.active{
  background: var(--primary-color, #f5c400);
  border-color: rgba(0,0,0,0.05);
  color: #111;
}

.km-tab-panel{
  padding-top: 8px;
}

.km-muted{
  opacity: 0.75;
  font-weight: 700;
}

/* ===== LISTE COMMANDES ===== */
.km-orders-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.km-order-card{
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 12px;
  cursor: pointer;
  background: #fff;
}

.km-order-card:hover{
  background: #fafafa;
}

.km-order-row{
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-weight: 800;
}

.km-order-sub{
  margin-top: 6px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-weight: 700;
  opacity: 0.85;
}

.km-empty{
  margin-top: 14px;
  padding: 14px;
  border-radius: 12px;
  background: rgba(0,0,0,0.05);
  font-weight: 800;
  text-align: center;
}

/* ===== DETAILS ===== */
.km-order-details-head{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.km-back{
  border: 1px solid #e6e6e6;
  background: #f7f7f7;
  border-radius: 10px;
  padding: 8px 10px;
  font-weight: 900;
  cursor: pointer;
}

.km-order-title{
  font-weight: 900;
  font-size: 16px;
}

.km-order-details{
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 12px;
}

.km-od-block{
  margin-bottom: 12px;
}

.km-od-line{
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-weight: 800;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(0,0,0,0.12);
}

.km-od-line:last-child{
  border-bottom: none;
}

.km-od-muted{
  opacity: 0.75;
  font-weight: 700;
  margin-top: 6px;
}

/* ===== QR ===== */
.km-qr-wrap{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
}

#km-qr-img{
  width: 240px;
  height: 240px;
  border-radius: 16px;
  border: 1px solid #eee;
  background: #fff;
  object-fit: contain;
}

.km-qr-caption{
  font-weight: 900;
  opacity: 0.9;
}

.km-qr-text{
  font-family: monospace;
  font-size: 12px;
  opacity: 0.75;
  text-align: center;
  word-break: break-all;
}



/* ================================
   MODAL COMPTE : HEADER FIXE + BODY SCROLL + FOOTER FIXE
================================ */

/* La box du modal = colonne, hauteur limitée */
#modal-infos .km-modal-box{
  display: flex;
  flex-direction: column;
   width: 92%;
  overflow: auto;       /* IMPORTANT : empêche le footer de sortir */
}

/* Header (titre + tabs) reste en haut */
#modal-infos .km-modal-top{
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  z-index: 3;
  background: #fff;
}

/* Chaque panel doit pouvoir “rétrécir” dans un flex parent */
#modal-infos .km-tab-panel{
  flex: 1 1 auto;
  min-height: 0;          /* CRUCIAL sinon overflow ne marche pas */
  overflow: auto;       /* on va scroller les zones internes */
}

/* ============ PANEL INFOS ============ */
/* Le form devient la zone scrollable */
#km-panel-infos form#form-infos{
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: auto;         /* ✅ le contenu scroll */
  -webkit-overflow-scrolling: touch;
  padding-bottom: 10px;
}

/* Le footer du form reste visible en bas pendant le scroll */
#km-panel-infos form#form-infos .modal-actions{
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: #fff;
  padding: 12px 0;
  margin-top: 12px;
  border-top: 1px solid rgba(0,0,0,0.08);
}

/* ============ PANEL COMMANDES ============ */
#km-panel-orders{
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* toolbar ne scroll pas */
#km-orders-toolbar{
  flex: 0 0 auto;
}

/* ✅ seule la liste scroll */
#km-orders-list{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 12px;
}

/* footer “Fermer” fixe */
#km-panel-orders .modal-actions{
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: #fff;
  padding: 12px 0;
  border-top: 1px solid rgba(0,0,0,0.08);
}

/* ============ PANEL DETAILS COMMANDE ============ */
#km-panel-order-details{
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* head détails ne scroll pas */
#km-panel-order-details .km-order-details-head{
  flex: 0 0 auto;
}

/* ✅ seul le bloc détails scroll */
#km-order-details{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 12px;
}

/* footer “Fermer” fixe */
#km-panel-order-details .modal-actions{
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: #fff;
  padding: 12px 0;
  border-top: 1px solid rgba(0,0,0,0.08);
}

/* ============ PANEL BADGE ============ */
#km-panel-badge{
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* le contenu badge peut scroller si besoin */
#km-panel-badge .km-qr-wrap{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 12px;
}

/* footer “Fermer” fixe */
#km-panel-badge .modal-actions{
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: #fff;
  padding: 12px 0;
  border-top: 1px solid rgba(0,0,0,0.08);
}







/* MODAL DE CHOIX NIV PRIX */
.price-level-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
}

.price-level-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
}

.price-level-content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(520px, 92vw);
  background: #fff;
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.25);
}

.price-level-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.price-level-title {
  font-size: 18px;
  font-weight: 800;
}

.price-level-close {
  border: none;
  background: transparent;
  font-size: 18px;
  cursor: pointer;
}

.price-level-product {
  font-size: 14px;
  opacity: 0.9;
  margin-bottom: 14px;
}

.price-level-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.price-level-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 14px;
  border-radius: 14px;
  border: 2px solid #eee;
  background: #fafafa;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
}

.price-level-btn:active {
  transform: scale(0.99);
}

.price-level-btn .lvl-name {
  font-weight: 800;
}

.price-level-btn .lvl-price {
  font-weight: 900;
}