/*
 * mobile.css — Broderies de la Cigogne, site PrestaShop 1.6 (lot 1 du responsive, oct. 2026)
 *
 * Chargé en DERNIER par header.tpl (après les CSS des modules), avec ?v=N pour le cache.
 * Étude de référence : etude-1.6-responsive.md (dépôt new_broderie).
 *
 * Règle d'or : tout ce qui touche à la mise en page est sous @media (max-width:1259px).
 * Au-dessus (écran de bureau), le site ne change pas d'un pixel.
 * Seule exception, voulue par Babette : le logo Visa/MasterCard sous le prix est masqué partout.
 *
 * Retour arrière : retirer la ligne <link … mobile.css> de header.tpl (ce fichier devient inerte).
 */

/* Logo de la banque sous le prix (fiche produit) : masqué sur toutes les tailles d'écran. */
#product_payment_logos { display: none; }

@media (max-width: 1259px) {

  /* ── 1. Plus aucune largeur fixe de 1250 / 1000 px ─────────────────────────── */
  html, body { overflow-x: hidden; }
  .container, .header-container, .mf_divfooter, .mf_bordure { min-width: 0 !important; }
  .container { width: auto !important; max-width: 100%; padding-left: 12px !important; padding-right: 12px !important; }
  #columns > .row, #slider_row { margin-left: 0; margin-right: 0; }
  #columns img, #header img { max-width: 100%; height: auto; }

  /* ── 2. En-tête : la barre-image de 1259 px est retirée, tout repasse dans le flux ── */
  .header-container { min-height: 0 !important; }
  #header .nav { display: none; }
  #header > div:not(.nav) > .container > .row {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 0;
  }
  #mf_designbroderie_barrehorizontale { display: none !important; }
  /* Blason (image du thème PS9, réduite) en tête du bloc */
  #header > div:not(.nav) > .container > .row:before {
    content: ""; display: block; -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%;
    width: 100%; height: 76px; margin: 10px 0 0;
    background: url(../img/bro/blason-160.png) center / contain no-repeat;
  }
  #header > div:not(.nav) > .container > .row:after { display: none; }
  #mf_designbroderie_logotexte, #mf_designbroderie_logotextestrasbourg, .mf_designbroderie_menumathieu, .mf_commandeminimum {
    position: static !important; margin: 0 !important; -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%;
    width: 100%; text-align: center; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1;
  }
  #mf_designbroderie_logotexte { font-size: 34px !important; line-height: 1.15; padding: 6px 8px 0; }
  #mf_designbroderie_logotextestrasbourg { font-size: 14px !important; padding-bottom: 4px; }
  .mf_designbroderie_menumathieu { border-top: 2px solid #8f877c; border-bottom: 2px solid #8f877c; margin-top: 8px !important; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; }
  .mf_designbroderie_menumathieu ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 0; margin: 0; }
  .mf_designbroderie_menumathieu ul li { margin: 0 !important; }
  .mf_designbroderie_menumathieu ul li a { display: block; padding: 13px 16px; font-size: 15px; }
  /* Panier : sous le menu, centré */
  #header .col-sm-4 { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; float: none; padding: 0; }
  #header .shopping_cart { position: static !important; float: none; margin: 6px auto !important; height: 52px !important; width: auto !important; min-width: 150px; background-size: auto 46px !important; }
  #header .mf_pannier { padding: 10px 0 0 64px !important; text-align: left; }
  #header .cart_block { display: none !important; } /* le survol n'existe pas au doigt */

  /* ── 3. Colonnes ─────────────────────────────────────────────────────────────
     Tablette (768 → 1259) : on garde la colonne des catégories à gauche (25 % / 72 %, comme au
     bureau). Téléphone : voir plus bas (< 768). Le voile blanc décoratif qui remontait derrière
     l'en-tête (#mf_barre_gauche, 350 px en position absolue) est retiré. */
  #mf_barre_gauche { display: none !important; }
  #center_column > .clearfix > div[style] { width: auto !important; }

  /* Accueil : carrousel et texte d'accueil */
  #homepage-slider, #homepage-slider .bx-wrapper { max-width: 100% !important; }
  #homeslider { max-height: none !important; }
  #mf_accueiltext { margin: 0 auto !important; max-width: 100%; background-size: contain; background-repeat: no-repeat; background-position: center; }

  /* ── 4. Pages à largeur fixe : contact, CMS, commande, historique ──────────── */
  #mf_contact, #page .rte, #mf_command, #mf_history, .mf_table_history { width: auto !important; margin-left: 0 !important; margin-right: 0 !important; }
  .mf_center { margin-left: 0 !important; }
  #mf_contact .mf_contact_right, #mf_contact .mf_rightline { width: 100% !important; float: none; border: 0 !important; }
  .form-control { width: 100% !important; max-width: 100%; float: none !important; }
  #mf_contact div.selector, #mf_contact div.selector span { float: none !important; }
  p.payment_module { width: auto !important; }
  .rte img { max-width: 100%; height: auto; }
  .rte table { width: 100% !important; }

  /* Tableaux du panier / historique : défilement à l'intérieur du tableau, jamais de la page */
  .table_block, #order-detail-content { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ── 5. Fiche produit ───────────────────────────────────────────────────────── */
  .mf_paymentmode { float: none; width: auto; }

  /* ── 6. Pied de page ────────────────────────────────────────────────────────── */
  .mf_foot { padding: 0 8px; text-align: center; }
  .mf_foot li { display: inline-block; margin: 0 6px !important; }
  .mf_foot li a { display: inline-block; padding: 8px 4px; }
}

/* Téléphones (< 768) */
@media (max-width: 767px) {
  /* Une seule colonne : les produits d'abord, l'arbre des catégories ensuite (sinon il occupe tout
     le premier écran). Le thème replie les blocs de colonne en « accordéon » sous 768 px, mais ce
     bloc n'a pas de titre cliquable : on le garde donc toujours ouvert. */
  #columns > .row:not(#slider_row) { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
  #columns > .row:not(#slider_row):before, #columns > .row:not(#slider_row):after { display: none; }
  div#center_column, div#left_column { width: 100% !important; margin: 0 !important; float: none; }
  div#center_column { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; }
  div#left_column { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; padding: 8px 8px 4px; margin-top: 16px !important; }
  #left_column #categories_block_left .block_content { display: block !important; }
  #categories_block_left .tree li a { display: inline-block; padding: 6px 0; }

  /* Produits : 2 par ligne */
  ul.product_list.grid > li { width: 50%; float: left; }
  ul.product_list.grid > li:nth-child(odd) { clear: left; }
  .product-name { font-size: 13px; }
  #mf_designbroderie_logotexte { font-size: 24px !important; }
  #mf_designbroderie_logotextestrasbourg { font-size: 13px !important; }
  .mf_designbroderie_menumathieu ul li a { padding: 13px 6px; font-size: 13px; }
}