/* ==========================================================================
   5 — RESPONSIVE
   Divi ajuste les valeurs par breakpoint mais ne sait PAS réorganiser
   l'ordre des colonnes. C'est ce que font ces règles, sans dupliquer
   les sections.
   Breakpoints Divi : tablette ≤ 980px · mobile ≤ 767px
   ========================================================================== */

/* ---------- TABLETTE ---------- */
@media (max-width: 980px){
  .et_pb_section{ padding: clamp(48px, 7vw, 80px) 0; }
  .woocommerce ul.products.columns-4 li.product{ width: 48%; }

  /* En-tete : les trois signatures restent sur une ligne et le menu devient
     un bouton compact, sans recreer le grand vide de la section generique. */
  .et-l--header .lmd-header-global.et_pb_section{
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 14px 0 10px !important;
  }
  .et-l--header .lmd-header-global .et_pb_row{
    width: min(92%, 780px) !important;
    max-width: 780px !important;
  }
  .et-l--header .lmd-header-groupe.et_pb_row{
    padding-bottom: 9px !important;
  }
  .et-l--header .lmd-header-groupe .et_pb_image{
    width: 220px !important;
    height: 39px !important;
    max-width: 54vw !important;
  }
  .et-l--header .lmd-header-marques.et_pb_row{
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;
    padding: 3px var(--lmd-marge) 5px !important;
  }
  .et-l--header .lmd-header-marques.et_pb_row > .et_pb_column{
    display: flex !important;
    flex: 1 1 0 !important;
    width: 33.333% !important;
    margin: 0 !important;
  }
  .et-l--header .lmd-header-marques.et_pb_row > .et_pb_column:nth-child(1) .et_pb_image{
    width: 120px !important;
    height: 40px !important;
    max-width: none !important;
  }
  .et-l--header .lmd-header-marques.et_pb_row > .et_pb_column:nth-child(2) .et_pb_image{
    width: 68px !important;
    height: 40px !important;
    max-width: none !important;
  }
  .et-l--header .lmd-header-marques.et_pb_row > .et_pb_column:nth-child(3) .et_pb_image{
    width: 80px !important;
    height: 40px !important;
    max-width: none !important;
  }
  .et-l--header .lmd-header-marques .et_pb_image img{
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
    max-height: none;
    margin: 0 auto;
    object-fit: contain;
  }
  .et-l--header .lmd-header-navigation.et_pb_row{
    padding-top: 0 !important;
  }
  .et-l--header .lmd-header-navigation .et_pb_menu_inner_container{
    min-height: 44px;
  }
  .et-l--header .lmd-header-navigation .et_pb_menu__wrap{
    justify-content: flex-end !important;
  }
  .et-l--header .lmd-header-navigation .et_mobile_nav_menu{
    margin-left: auto !important;
  }
  .et-l--header .lmd-header-navigation .mobile_menu_bar::before{
    color: var(--lmd-creme) !important;
  }
  .et-l--header .lmd-header-navigation .et_mobile_menu{
    top: calc(100% + 8px);
    border-top-color: var(--lmd-dore) !important;
    background: var(--lmd-creme-clair) !important;
    box-shadow: 0 14px 28px rgba(8,32,47,.22);
  }
  /* Les couleurs du module Divi sont prévues pour le fond bleu du desktop.
     Sur le panneau mobile clair, tous les niveaux doivent repasser en bleu. */
  body #page-container .et-l--header .lmd-header-navigation .et_mobile_menu li > a{
    color: var(--lmd-bleu) !important;
    opacity: 1 !important;
  }
  body #page-container .et-l--header .lmd-header-navigation .et_mobile_menu > li > a{
    background: rgba(15,39,56,.055) !important;
    font-weight: 600 !important;
  }
  body #page-container .et-l--header .lmd-header-navigation .et_mobile_menu .sub-menu li > a{
    background: transparent !important;
    font-weight: 400 !important;
  }
  body #page-container .et-l--header .lmd-header-navigation .et_mobile_menu li.current-menu-item > a,
  body #page-container .et-l--header .lmd-header-navigation .et_mobile_menu li.current-menu-ancestor > a{
    color: var(--lmd-dore-texte) !important;
  }

  /* Checkout : les deux colonnes de champs et le récapitulatif se replient
     sans conserver les largeurs forcées par les modules Divi. */
  body.woocommerce-checkout #main-content .et_pb_section{
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  body.woocommerce-checkout form.checkout .form-row-first,
  body.woocommerce-checkout form.checkout .form-row-last{
    float: none !important;
    width: 100% !important;
  }
  body.woocommerce-checkout .wc-block-components-sidebar-layout{
    display: block;
  }
  body.woocommerce-checkout .wc-block-components-sidebar{
    width: 100%;
    margin-top: 32px;
  }
}

/* ---------- MOBILE ---------- */
@media (max-width: 767px){

  body{ font-size: 16px; }

  .et-l--header .lmd-header-global.et_pb_section{
    gap: 7px !important;
    padding: 11px 0 8px !important;
  }
  .et-l--header .lmd-header-groupe.et_pb_row{
    padding-bottom: 7px !important;
  }
  .et-l--header .lmd-header-groupe .et_pb_image{
    width: 180px !important;
    height: 32px !important;
    max-width: 62vw !important;
  }
  .et-l--header .lmd-header-marques.et_pb_row{
    gap: 8px !important;
    padding: 2px 12px 4px !important;
  }
  .et-l--header .lmd-header-marques.et_pb_row > .et_pb_column:nth-child(1) .et_pb_image{
    width: 90px !important;
    height: 30px !important;
  }
  .et-l--header .lmd-header-marques.et_pb_row > .et_pb_column:nth-child(2) .et_pb_image{
    width: 51px !important;
    height: 30px !important;
  }
  .et-l--header .lmd-header-marques.et_pb_row > .et_pb_column:nth-child(3) .et_pb_image{
    width: 60px !important;
    height: 30px !important;
  }

  /* Inverser deux colonnes — classe sur la LIGNE */
  .lmd-inverse-mobile.et_pb_row{ display: flex; flex-direction: column; }
  .lmd-inverse-mobile.et_pb_row > .et_pb_column:nth-child(1){ order: 2; }
  .lmd-inverse-mobile.et_pb_row > .et_pb_column:nth-child(2){ order: 1; }

  /* Remonter une colonne — classe sur la COLONNE */
  .lmd-premier-mobile{ order: -1 !important; }

  /* Masquer sur mobile */
  .lmd-masque-mobile{ display: none !important; }

  /* Image débordant des marges */
  .lmd-pleine-largeur-mobile img{
    width: 100vw; max-width: none;
    margin-left: 50%; transform: translateX(-50%);
  }

  /* Boutons pleine largeur : plus faciles à viser au pouce */
  .et_pb_button,
  .woocommerce a.button, .woocommerce button.button,
  .woocommerce .single_add_to_cart_button{
    display: block !important;
    width: 100% !important;
    text-align: center;
    padding-block: 16px !important;
  }
  /* sauf dans le tableau, où l'espace est compté */
  .wc-product-table .button{ display: inline-block !important; width: auto !important; }

  /* Tableau Barn2 : défilement horizontal contenu */
  .wc-product-table-wrapper{ overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Quantité plus large au doigt */
  .woocommerce .quantity input.qty{ width: 80px; height: 48px; }

  /* Panier en cartes empilées */
  .woocommerce table.shop_table_responsive tr td{ text-align: right; font-size: 14px; }
  .woocommerce table.shop_table_responsive tr td::before{
    float: left;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--lmd-bleu-400);
    font-weight: 400;
  }

  /* Grille produits : deux colonnes */
  .woocommerce ul.products li.product{ width: 48% !important; margin-right: 4% !important; }
  .woocommerce ul.products li.product:nth-child(2n){ margin-right: 0 !important; }

  /* Checkout mobile : avis, coupon, paiement et bouton restent contenus
     dans la gouttière, sans barre sombre ni débordement horizontal. */
  body.woocommerce-checkout #main-content .et_pb_section{
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }
  body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info{
    display: block;
  }
  body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a{
    display: inline-block;
    margin-top: 4px;
  }
  body.woocommerce-checkout .woocommerce-message,
  body.woocommerce-checkout .woocommerce-info,
  body.woocommerce-checkout .woocommerce-error,
  body.woocommerce-checkout .lmd-valide,
  body.woocommerce-checkout .lmd-alerte{
    padding: 12px 14px !important;
    font-size: 13px !important;
  }
  body.woocommerce-checkout form.checkout .form-row{
    margin-bottom: 16px !important;
  }
  body.woocommerce-checkout #payment,
  body.woocommerce-checkout .et_pb_wc_checkout_payment_info #payment{
    padding: 16px !important;
  }
  body.woocommerce-checkout #payment #place_order{
    float: none;
    width: 100% !important;
    margin-top: 18px;
  }
  body.woocommerce-checkout .wc-block-checkout{
    padding: 30px var(--lmd-marge);
  }
  body.woocommerce-checkout .wc-block-components-sidebar{
    padding: 18px;
  }

  /* Le bouton Divi flotte au-dessus des moyens de paiement sur petit écran.
     Safari et les navigateurs mobiles proposent déjà un retour rapide. */
  .et_pb_scroll_top.et-pb-icon{ display: none !important; }
}

/* ---------- BARRE D'ACTION COLLANTE (portail connecté) ----------
   Total, progression vers le seuil et accès panier, toujours visibles.
   Un revendeur qui saisit quarante lignes ne doit jamais remonter la page
   pour savoir où il en est.
   ------------------------------------------------------------------- */
.lmd-barre-collante{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  background: var(--lmd-bleu); color: var(--lmd-creme);
  box-shadow: 0 -8px 28px rgba(15,39,56,.22);
  padding-bottom: env(safe-area-inset-bottom);   /* encoche iPhone */
}
.lmd-barre-collante__in{
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 78px;
  max-width: 1320px; margin: 0 auto;
  padding: 10px var(--lmd-marge);
}
.lmd-barre__gauche{ min-width: 0; }

.lmd-barre-collante .lmd-total{
  margin: 0; font-size: 21px; font-weight: 500; line-height: 1.15;
  color: var(--lmd-creme); font-variant-numeric: tabular-nums;
}
.lmd-barre-collante .lmd-total .amount,
.lmd-barre-collante .lmd-total bdi{ color: var(--lmd-creme); }
.lmd-barre-collante .lmd-ht{
  font-size: 12px; font-weight: 400; color: rgba(246,241,231,.6);
  letter-spacing: .06em;
}
/* la mention HT du suffixe WooCommerce ferait doublon ici */
.lmd-barre-collante .lmd-mention-ht,
.lmd-barre-collante .woocommerce-price-suffix{ display: none; }

.lmd-barre-collante .lmd-detail{
  margin: 3px 0 0; font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(246,241,231,.62);
  font-variant-numeric: tabular-nums;
}

/* --- Jauges par marque --- */
.lmd-jauges{ display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.lmd-barre-collante .lmd-jauge{
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-variant-numeric: tabular-nums;
  color: rgba(246,241,231,.72);
}
.lmd-barre-collante .lmd-jauge__barre{
  width: 34px; height: 4px; border-radius: 2px; overflow: hidden;
  background: rgba(246,241,231,.22);
}
.lmd-barre-collante .lmd-jauge__barre i{ display: block; height: 4px; transition: width .3s; }
.lmd-barre-collante .lmd-jauge--ok{ color: var(--lmd-creme); }
.lmd-barre-collante .lmd-jauge--manque{ color: #F0C36B; }

/* --- Bouton d'accès au panier --- */
.lmd-btn-panier{
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--lmd-creme); color: var(--lmd-bleu) !important;
  border: none; border-radius: var(--lmd-rayon);
  padding: 14px 24px; min-height: 48px; flex: none;
  font-family: var(--lmd-texte); font-size: 14px; font-weight: 500;
  letter-spacing: .02em; text-align: center; text-decoration: none;
  transition: background .2s;
}
.lmd-btn-panier:hover{ background: #fff; color: var(--lmd-bleu) !important; }
.lmd-btn-panier:disabled{
  background: rgba(246,241,231,.14); color: rgba(246,241,231,.5) !important;
  cursor: not-allowed;
}
/* Seuil non atteint : le bouton reste cliquable — le revendeur doit pouvoir
   consulter son panier — mais il annonce ce qui manque. */
.lmd-btn-panier--attente{
  background: transparent; color: #F0C36B !important;
  border: 1px solid rgba(240,195,107,.5);
}
.lmd-btn-panier--attente:hover{ background: rgba(240,195,107,.12); color: #F0C36B !important; }

body.lmd-avec-barre{ padding-bottom: 100px; }

@media (max-width: 767px){
  .lmd-barre-collante__in{
    min-height: 64px;
    gap: 10px;
    padding-block: 7px;
  }
  .lmd-barre__gauche{
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    grid-template-areas: "total detail" "jauges jauges";
    align-items: baseline;
    column-gap: 9px;
    row-gap: 2px;
  }
  .lmd-barre-collante .lmd-total{
    grid-area: total;
    font-size: 18px;
    white-space: nowrap;
  }
  .lmd-barre-collante .lmd-detail{
    grid-area: detail;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .lmd-jauges{
    grid-area: jauges;
    gap: 9px;
    margin: 0;
    flex-wrap: nowrap;
  }
  .lmd-barre-collante .lmd-jauge__barre{ width: 26px; }
  .lmd-btn-panier{
    max-width: 132px;
    min-height: 42px;
    padding: 10px 13px;
    font-size: 12px;
    line-height: 1.2;
  }
  /* la règle « boutons pleine largeur » ne doit pas s'appliquer ici */
  .lmd-barre-collante .lmd-btn-panier{ width: auto !important; display: inline-flex !important; }
  body.lmd-avec-barre{ padding-bottom: calc(82px + env(safe-area-inset-bottom)); }
}

/* ---------- IMPRESSION : catalogues et bons de commande ---------- */
@media print{
  .et-l--header, .et-l--footer, .lmd-barre-collante,
  #main-header, #footer-bottom, #et-boc .et-l--header,
  .lmd-barre-collante{ display: none !important; }
  body{ background: #fff; color: #000; font-size: 11pt; }
  .et_pb_section{ padding: 0 0 12pt 0; }
  a[href^="http"]::after{ content: " (" attr(href) ")"; font-size: 9pt; }
}