/* ==========================================================================
   adapt-mobile.css — jr-commercique.fr
   Adaptation tablette et mobile du gabarit osCommerce (grille 960gs).
   Installation (dans le <head> du gabarit, juste avant </head>) :
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
     <link rel="stylesheet" href="ext/adapt-mobile.css?v=4">
   Paliers : 1023 px et moins (tablette + mobile), 768 px et moins (mobile,
   aligné sur le script du menu), 359 px et moins (très petits écrans).
   Le bureau (1024 px et plus) n'est pas modifié : vérifié, rendu identique à 1280 px.
   Retour arrière : retirer ces deux lignes.
   ========================================================================== */

:root {
  --jr-rouge: #d4114a;
  --jr-encre: #2b2b2e;
  --jr-gris: #5f6066;
  --jr-trait: #e3e4e8;
  --jr-gouttiere: 16px;
  --jr-cible: 44px;            /* taille minimale d'une zone tactile */
}

/* ----- Tablette et mobile : on libère la largeur fixe de 1024 px ----- */
@media (max-width: 1023px) {
  body { min-width: 0 !important; }

  ul.overlayer,
  #horizontal_menu .horizontal_menu_content,
  #bodyContent_columnLeft { width: auto !important; max-width: 100% !important; }

  /* Images et blocs embarqués ne débordent plus */
  #bodyContent img,
  #bodyContent iframe,
  #bodyContent video { max-width: 100%; height: auto; }
  #bodyContent table { max-width: 100%; }
  /* Filets et espaceurs en width="100%" : height:auto ci-dessus les rendait carrés */
  #bodyContent img[src*="pixel_"][height="1"] { height: 1px; }
  #bodyContent img[src*="pixel_"][height="10"] { height: 10px; }

  /* Bandeau catégories : défilement horizontal au lieu d'être écrasé */
  div.categoriy_menu { height: auto !important; }
  ul.overlayer {
    justify-content: flex-start !important;
    height: auto !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* fondu à droite : signale qu'il reste des catégories à faire défiler */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
  ul.overlayer::-webkit-scrollbar { display: none; }
  ul.overlayer li.level_0 {
    flex: 0 0 auto !important;
    height: var(--jr-cible) !important;
    margin-bottom: 0 !important;
    scroll-snap-align: start;
  }
  ul.overlayer li.level_0 > a,
  ul.overlayer li.level_0 > span {
    padding: 0 16px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }
  /* Le méga-menu au survol n'a pas de sens au doigt : la page catégorie liste déjà ses sous-rubriques */
  ul.overlayer ul.level_0 { display: none !important; }

  /* En-tête : logo + téléphone sur une ligne, raccourcis et recherche dessous */
  #header {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    float: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 10px var(--jr-gouttiere) 12px;
    box-sizing: border-box;
    gap: 10px 12px;
  }
  #storeLogo { float: none !important; margin: 0 !important; flex: 0 1 150px; }
  #storeLogo img { width: 150px; height: auto; display: block; }
  #header .info_contact {
    float: none !important;
    height: auto !important;
    padding: 0 !important;
    font-size: 13px !important;
    line-height: 1.3;
    text-align: right !important;
    color: var(--jr-gris) !important;
  }
  #header .info_contact > div { margin: 0 !important; }
  #header .info_contact strong { font-size: 17px; color: var(--jr-encre); white-space: nowrap; }
  #header .info_contact .a_sav {
    display: inline-block;
    margin-top: 6px;
    padding: 6px 10px;
    font-size: 11px;
    line-height: 1.2;
  }
  #header > div:last-child { flex: 1 1 100%; min-width: 0; width: 100% !important; margin: 0 !important; }

  /* Raccourcis Panier / Contact / Connexion : trois vrais boutons */
  #headerShortcutsLeft,
  #headerShortcutsRight { display: none !important; }
  #headerShortcuts {
    float: none !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 6px;
    width: auto !important;
    height: auto !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
  }
  #headerShortcuts > a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: var(--jr-cible);
    margin: 0 !important;
    padding: 0 4px;
    border: 1px solid var(--jr-trait);
    border-radius: 6px;
    background: #fff;
    font-size: 13px !important;
    text-align: center;
    box-sizing: border-box;
  }
  #headerShortcuts .menu_1_text { line-height: 1.2; }

  /* Recherche pleine largeur, champ de 16 px (évite le zoom auto d'iOS) */
  div#search_block {
    float: none !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
  }
  #search_block form { display: flex; align-items: center; gap: 8px; }
  #search_block #search_border_left,
  #search_block #search_border_right { display: none; }
  #search_block #search_input {
    order: 1;
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
    height: var(--jr-cible) !important;
    margin: 0 !important;
    padding: 0 12px !important;
    font-size: 16px !important;
    border: 1px solid #c9cad0 !important;
    border-radius: 6px !important;
    box-sizing: border-box;
  }
  #search_block #search_btn {
    order: 2;
    float: none !important;
    width: var(--jr-cible) !important;
    height: var(--jr-cible) !important;
    margin: 0 !important;
    padding: 13px !important;
    box-sizing: border-box;
    border-radius: 6px;
    background: var(--jr-rouge);
  }
  #search_block #advanced_search_btn { display: none !important; }

  /* Boutons raccourcis (Moins cher ailleurs, Promotions…) : une rangée de pastilles qui défile */
  #bodyWrapper div:has(> a.buttontop) {
    display: flex !important;
    flex-wrap: nowrap;
    gap: 8px;
    height: auto !important;
    margin: 0 !important;
    padding: 10px var(--jr-gouttiere) !important;
    overflow-x: auto;
    scrollbar-width: none;
    box-sizing: border-box;
    text-align: left !important;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
  #bodyWrapper div:has(> a.buttontop)::-webkit-scrollbar { display: none; }
  #bodyWrapper div:has(> div > a.buttontop) { height: auto !important; }
  .buttontop br { display: none; }
  #bodyWrapper .buttontop {
    display: flex !important;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: auto !important;
    min-height: var(--jr-cible) !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 16px !important;
    font-size: 14px !important;
    line-height: 1.2;
    white-space: nowrap;
    border-radius: 999px;
    box-sizing: border-box;
  }

  /* Filtres : champs tactiles, sur deux lignes propres */
  .sf-toolbar { padding: 12px !important; }
  .sf-toolbar__row--second { gap: 10px 14px !important; }
  .sf-input,
  .sf-price,
  .sf-select {
    min-height: var(--jr-cible);
    font-size: 16px !important;
    box-sizing: border-box;
  }
  .sf-input { width: 100% !important; }
  .sf-price { width: 76px !important; }
  .sf-check { min-height: var(--jr-cible); font-size: 14px; }
  .sf-check input { width: 20px; height: 20px; }
  .sf-group { font-size: 14px; }
  .sf-reset { display: inline-flex; align-items: center; min-height: var(--jr-cible); font-size: 14px; }
  .sf-count { margin-left: auto; font-size: 13px; color: var(--jr-gris); }

  /* Grille produits : cartes lisibles, boutons tactiles (3 colonnes tablette, 2 téléphone) */
  .sf-grid { gap: 10px; }
  .sf-card {
    width: calc(33.333% - 7px) !important;
    margin: 0 !important;
    padding: 10px 0 12px !important;
    display: flex !important;
    flex-direction: column;
    border-style: solid !important;
    border-color: var(--jr-trait) !important;
    border-radius: 8px;
    background: #fff;
    box-sizing: border-box;
  }
  .sf-card__title { padding: 0 10px 6px !important; min-height: 0 !important; -webkit-line-clamp: 3 !important; }
  .sf-card__title a { font-size: 13px !important; line-height: 1.35; color: var(--jr-encre) !important; }
  .sf-card__image { min-height: 0 !important; padding: 0 10px; }
  .sf-card__image img { width: 100%; max-width: 120px; }
  .sf-card__price { margin-top: auto; font-size: 17px !important; color: var(--jr-encre) !important; }  /* prix et boutons alignés en bas de carte */
  .sf-card__actions {
    margin-top: 0 !important;
    display: grid;
    gap: 6px;
    padding: 0 10px;
    line-height: 1.2 !important;
  }
  .sf-card__actions a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: var(--jr-cible);
    font-size: 14px !important;
    border-radius: 6px !important;
    box-sizing: border-box;
  }
  .sf-card a.ajout_panier1 { order: -1; font-weight: 600; }

  /* Ancien listing (new_products.php, product_listing.php, specials.php, wishlist.php) : mêmes cartes que .sf-card
     (3 colonnes tablette, 2 téléphone, 1 très petit écran) */
  table#products_gallery { display: block; min-height: 0; }
  table#products_gallery > tbody {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }
  table#products_gallery > tbody > tr { display: contents; }
  table#products_gallery > tbody > tr > td { display: block; }
  table#products_gallery > tbody > tr > td[colspan] { grid-column: 1 / -1; }
  table#products_gallery > tbody > tr > td:empty { display: none; }
  table#products_gallery td.products_gallery_cell {
    display: flex;
    width: auto !important;  /* 210 px inline sur specials.php */
    flex-direction: column;
    height: auto;
    padding: 10px 0 12px;
    border: 1px solid var(--jr-trait);
    border-radius: 8px;
    background: #fff;
    box-sizing: border-box;
  }
  table.products_gallery_cases { display: block; flex: 1 1 auto; width: 100%; }
  table.products_gallery_cases > tbody { display: flex; flex-direction: column; height: 100%; }
  table.products_gallery_cases tr { display: block; }
  table.products_gallery_cases tr:has(.gallery_products_price) { margin-top: auto; }
  table.products_gallery_cases td { display: block; width: auto; padding: 0 10px; }
  table.products_gallery_cases td.centrer { font-size: 13px !important; line-height: 1.35; color: var(--jr-encre); }
  table.products_gallery_cases td.products_img { margin: 6px 0; text-align: center; }
  #bodyContent table.products_gallery_cases td.products_img img { display: block; width: 100%; max-width: 160px; margin: 0 auto; object-fit: contain; }
  table.products_gallery_cases span.gallery_products_price { display: block; margin-bottom: 8px; text-align: center; font-size: 17px !important; line-height: 1.25; color: var(--jr-encre) !important; }
  table.products_gallery_cases td:has(> a.ajout_panier1) { display: grid; gap: 6px; line-height: 1.2 !important; }
  table.products_gallery_cases td a.products_view_btn + br { display: none; }
  table.products_gallery_cases td a.products_view_btn,
  table.products_gallery_cases td a.ajout_panier1 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    min-height: var(--jr-cible);
    padding: 2px 5px;
    font-size: 14px !important;
    border-radius: 6px;
    box-sizing: border-box;
  }
  table.products_gallery_cases td a.ajout_panier1 { order: -1; font-weight: 600; }

  /* Pied de page : 3 colonnes sur tablette (5 colonnes + 80 px de marge débordaient) */
  footer > div:first-of-type {
    box-sizing: border-box;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 28px !important;
  }
}

/* ----- Mobile (aligné sur le seuil du script de menu existant : 768 px) ----- */
@media (max-width: 768px) {
  body {
    padding-top: 0 !important;
    font-size: 14px;
    -webkit-text-size-adjust: 100%;
            text-size-adjust: 100%;
  }

  /* Bandeau livraison : plus fixe, il ne mange plus un tiers de l'écran */
  #sticky-banner {
    position: static !important;
    width: auto !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 8px var(--jr-gouttiere) !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    box-shadow: none !important;
  }

  /* Menu rouge : grille 2 colonnes au lieu de 7 lignes empilées */
  #shad_under_menu { display: none !important; }
  #horizontal_menu .horizontal_menu_content {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    position: relative !important;
    min-height: 0 !important;
  }
  #horizontal_menu .horizontal_menu_item {
    width: auto !important;
    position: static !important;
    border-right: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25) !important;
  }
  /* « Connexion » et « Contact » sont déjà dans les raccourcis de l'en-tête */
  #horizontal_menu .horizontal_menu_item:has(> a[href$="account.php"]),
  #horizontal_menu .horizontal_menu_item:has(> a[href$="contact_us.php"]) { display: none !important; }
  #horizontal_menu .horizontal_menu_item:nth-child(odd) { border-right: none !important; }
  #horizontal_menu .horizontal_menu_item:last-child { grid-column: 1 / -1; }
  #horizontal_menu .horizontal_menu_link {
    display: flex !important;
    align-items: center !important;
    height: auto !important;
    min-height: var(--jr-cible) !important;
    padding: 0 14px !important;
    font-size: 14px !important;
    justify-content: flex-start !important;
    box-sizing: border-box;
  }
  /* Sous-menus (Meilleures ventes, Fabricants, Informations) : panneau pleine largeur sous le menu */
  #horizontal_menu .dropdown .dropdown_content {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    min-width: 0 !important;
    max-height: 60vh;
    overflow-y: auto;
    margin: 0 !important;
    background: #fff !important;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18) !important;
    z-index: 600 !important;
  }
  #horizontal_menu .dropdown_content a {
    display: flex !important;
    align-items: center;
    min-height: var(--jr-cible);
    padding: 8px var(--jr-gouttiere) !important;
    font-size: 14px !important;
    box-sizing: border-box;
  }

  /* Fil d'Ariane : une seule ligne qui défile, au lieu de trois lignes */
  .infoBoxContainerHeader { height: auto !important; margin-top: 0 !important; }
  .infoBoxHeadingHeader {
    height: auto !important;
    padding: 0 var(--jr-gouttiere) !important;
    font-size: 13px !important;
    line-height: var(--jr-cible) !important;
    white-space: nowrap !important;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
  .infoBoxHeadingHeader::-webkit-scrollbar { display: none; }
  .infoBoxHeadingHeader a.headerNavigation { display: inline-block; line-height: var(--jr-cible); }

  /* Contenu */
  #bodyContent_columnLeft { padding: 0 !important; }
  .contentContainer { padding-left: var(--jr-gouttiere) !important; padding-right: var(--jr-gouttiere) !important; }
  #gallery_div [style*="width:583px"] { width: auto !important; }
  #gallery_div h1 { font-size: 22px !important; line-height: 1.25 !important; }
  #gallery_div .contentText { font-size: 14px; line-height: 1.55; }

  /* Grille produits : 2 colonnes sur téléphone */
  .sf-card { width: calc(50% - 5px) !important; }
  table#products_gallery > tbody { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Catégories « parentes » (ex. Encaissement) : tableaux et séparateurs à 700 px fixes */
  .separateur { width: auto !important; }
  #categories_gallery { border-spacing: 0 !important; }
  #categories_gallery,
  #categories_gallery > tbody,
  #categories_gallery > tbody > tr,
  #categories_gallery > tbody > tr > td { display: block !important; width: auto !important; }
  #categories_gallery div[style*="width"],
  #gallery_div .contentContainer,
  #gallery_div .contentText { width: auto !important; max-width: 100%; }
  #categories_gallery .contentText > table:not(#products_gallery),
  #categories_gallery .contentText > table:not(#products_gallery) > tbody { display: block !important; width: auto !important; }
  /* les vignettes de sous-catégories passent à la ligne au lieu de s'aligner sur 700 px */
  #categories_gallery .contentText > table:not(#products_gallery) > tbody > tr { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 10px; }
  #categories_gallery .contentText > table:not(#products_gallery) > tbody > tr > td { display: block !important; width: auto !important; }
  #categories_gallery .contentText > table:not(#products_gallery) > tbody > tr > td[colspan] { flex-basis: 100%; }

  /* Accueil : les 3 cartes UberEats / WooCommerce / Shopify ont une grille en style en ligne */
  .job-categories .category-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; }
  .category-card h3 { font-size: 1.25rem !important; }

  /* Fiche produit : une seule colonne, et le nom du produit AVANT la photo et le prix */
  .product-page-container { grid-template-columns: minmax(0, 1fr) !important; gap: 16px !important; }
  .product-main-section,
  .product-header { display: contents !important; }
  .product-page-container .product-title { order: -2; margin: 0 !important; }
  .product-sidebar { width: auto !important; min-width: 0 !important; max-width: none !important; }
  /* product_info.php la met en sticky !important sous 768 px : elle restait collée en haut et la description passait derrière */
  #gallery_div .product-sidebar { position: static !important; top: auto !important; }
  .product-sidebar > .product-image-container,
  .product-sidebar > .product-purchase-section {
    width: auto !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Panier (shopping_cart.php) : son <style> est émis après cette feuille, d'où le préfixe #gallery_div.
     Libellés en \E9 : la feuille n'a pas de charset et les pages sont en iso-8859-1. */
  #gallery_div:has(.cart_content_table) > h1 { padding: 0 var(--jr-gouttiere) !important; font-size: 22px; }
  /* Chaque produit devient une carte : produit + corbeille, référence, puis prix / quantité / remise / total */
  #gallery_div .cart_content_table,
  #gallery_div .cart_content_table > tbody { display: block; width: auto; }
  #gallery_div .cart_content_table > tbody > tr:first-child { display: none; }
  #gallery_div .cart_content_table > tbody > tr {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-areas: "prod prod prod suppr" "ref ref ref ref" "pu qte rem tot";
    gap: 8px 6px;
    padding: 12px;
    border-bottom: 1px solid var(--jr-trait);
  }
  #gallery_div .cart_content_table > tbody > tr > td { display: block; min-width: 0; padding: 0; border: 0; font-size: 14px; text-align: center; }
  #gallery_div .cart_content_table > tbody > tr > td:nth-child(1) { grid-area: suppr; justify-self: end; }
  #gallery_div .cart_content_table > tbody > tr > td:nth-child(2) { grid-area: ref; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--jr-gris); }
  #gallery_div .cart_content_table > tbody > tr > td:nth-child(3) { grid-area: prod; }
  #gallery_div .cart_content_table > tbody > tr > td:nth-child(4) { grid-area: pu; }
  #gallery_div .cart_content_table > tbody > tr > td:nth-child(5) { grid-area: qte; }
  #gallery_div .cart_content_table > tbody > tr > td:nth-child(6) { grid-area: rem; }
  #gallery_div .cart_content_table > tbody > tr > td:nth-child(7) { grid-area: tot; font-weight: 700; color: var(--jr-encre); }
  #gallery_div .cart_content_table > tbody > tr > td:nth-child(n+4)::before {
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 400;
    color: var(--jr-gris);
  }
  #gallery_div .cart_content_table > tbody > tr > td:nth-child(4)::before { content: "PU"; }
  #gallery_div .cart_content_table > tbody > tr > td:nth-child(5)::before { content: "Qt\E9"; }
  #gallery_div .cart_content_table > tbody > tr > td:nth-child(6)::before { content: "Remise"; }
  #gallery_div .cart_content_table > tbody > tr > td:nth-child(7)::before { content: "Total"; }
  #gallery_div .cart_content_table > tbody > tr > td:nth-child(1) a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--jr-cible);
    height: var(--jr-cible);
  }
  #gallery_div .cart_content_table td td { padding: 0 8px 0 0; }
  #gallery_div .cart_content_table td td:first-child { width: 68px; }
  #gallery_div .cart_content_table td p { font-size: 13px !important; line-height: 1.35; color: var(--jr-encre); }
  #gallery_div .cart_content_table select { width: 100%; min-height: var(--jr-cible); padding: 0 2px; font-size: 16px; box-sizing: border-box; }

  /* Récapitulatif : totaux, puis Commander / Devis, puis l'encadré Livraison (qui rejetait les boutons tout en bas) */
  #gallery_div .summary-left-section,
  #gallery_div .shipping_module_table_content,
  #gallery_div .shipping_module_table_content > tbody,
  #gallery_div .shipping_module_table_content > tbody > tr { display: contents; }
  #gallery_div .cart-summary-compact { margin: 12px 0; }
  #gallery_div .shipping_module_table_content > tbody > tr > td { display: block; width: auto !important; min-width: 0; margin: 0; }
  #gallery_div .shipping_module_table_content > tbody > tr > td:nth-child(1) { order: 3; }
  #gallery_div .shipping_module_table_content > tbody > tr > td:nth-child(1) > div { max-width: none !important; box-sizing: border-box; }
  #gallery_div .shipping_module_table_content > tbody > tr > td:nth-child(2) { order: 1; }
  #gallery_div .buttons-right-section { order: 2; width: auto; box-sizing: border-box; border-left: 0; }
  #gallery_div .buttons-right-section h3 { display: none; }
  #gallery_div .compact-button { min-height: var(--jr-cible); margin-bottom: 8px; }
  #gallery_div .compact-button:last-child { margin-bottom: 0; }
  /* Tableaux de totaux : libellé et montant sur la même ligne (le module les empilait) */
  #gallery_div .shipping_module_table { max-width: none; margin-bottom: 8px; table-layout: auto; }
  #gallery_div .shipping_module_table td { display: table-cell; width: auto; max-width: none; margin: 0; padding: 8px 12px; font-size: 14px; }
  #gallery_div .shipping_module_table td[colspan] { white-space: normal; text-align: left; }
  #gallery_div .shipping_module_table select { display: block; width: 100%; max-width: none; min-height: var(--jr-cible); margin-top: 4px; font-size: 16px; }

  /* Pied de page : 2 colonnes puis 1 */
  footer > div:first-of-type {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px 20px !important;
    padding-left: var(--jr-gouttiere) !important;
    padding-right: var(--jr-gouttiere) !important;
    box-sizing: border-box;
    width: auto !important;
    max-width: 100% !important;
  }
  footer > div:first-of-type > div { width: auto !important; min-width: 0; }
  footer > div:first-of-type > div:first-child { grid-column: 1 / -1; }
  footer a { display: inline-block; min-height: 32px; line-height: 32px; }
  footer > div:not(:first-of-type) {
    padding-left: var(--jr-gouttiere) !important;
    padding-right: var(--jr-gouttiere) !important;
    flex-wrap: wrap;
    box-sizing: border-box;
    max-width: 100% !important;
  }

  /* Encoches et coins arrondis des téléphones récents */
  #bodyWrapper,
  footer {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

/* Très petits écrans (iPhone SE, Android d'entrée de gamme) */
@media (max-width: 359px) {
  .sf-card { width: 100% !important; }
  table#products_gallery > tbody { grid-template-columns: 1fr; }
  footer > div:first-of-type { grid-template-columns: 1fr !important; }
}

/* Mouvement réduit : pas d'animation du menu déroulant */
@media (prefers-reduced-motion: reduce) {
  .horizontal_menu_link { transition: none !important; }
  ul.overlayer { scroll-behavior: auto; }
}
/* ==========================================================================
   v5 (30/10/2026) : vignettes de sous-catégories sur téléphone
   À COLLER À LA FIN de ext/adapt-mobile.css, puis passer le lien à ?v=5.
   - vraie grille 2 colonnes : plus de rangée « 3 + 1 orpheline » sur les grands téléphones
   - image dans une zone de hauteur fixe : elle ne déborde plus sur le libellé
   ========================================================================== */
@media (max-width: 768px) {
  #categories_gallery .contentText > table:not(#products_gallery) > tbody {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  #categories_gallery .contentText > table:not(#products_gallery) > tbody > tr { display: contents !important; }
  #categories_gallery .contentText > table:not(#products_gallery) > tbody > tr > td { min-width: 0; padding: 0 !important; }
  #categories_gallery .contentText > table:not(#products_gallery) > tbody > tr > td[colspan] { grid-column: 1 / -1; }
  #categories_gallery .contentText > table:not(#products_gallery) > tbody > tr > td:empty { display: none !important; }

  /* La vignette prend toute la case (elle était fixée à 140 px) */
  #categories_gallery td > div[style*="width:140px"],
  #categories_gallery td > div > a.sansSouligneCat { display: block; height: 100%; width: auto !important; }
  /* (les logos de marques de la description utilisent aussi .bordureCat : on ne vise que les vignettes, sous a.sansSouligneCat) */
  #categories_gallery a.sansSouligneCat > .bordureCat {
    display: flex;
    flex-direction: column;
    width: auto !important;
    height: 100%;
    margin: 0 !important;
    box-sizing: border-box;
  }

  /* Zone image de hauteur fixe ; l'image s'y loge sans se déformer ni déborder */
  #categories_gallery a.sansSouligneCat > .bordureCat > div[style*="height:90px"] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto !important;
    height: 110px !important;
    overflow: hidden;
  }
  #categories_gallery a.sansSouligneCat > .bordureCat > div[style*="height:90px"] > div { display: contents; }
  #bodyContent #categories_gallery a.sansSouligneCat > .bordureCat img {
    width: auto !important;
    height: 100px !important;
    max-width: 100% !important;
    margin: 0 !important;
    object-fit: contain;
  }

  /* Libellé : lisible et touchable, collé en bas de la vignette */
  #categories_gallery .bordureTopCat {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: auto;
    min-height: var(--jr-cible) !important;
    padding: 4px 6px;
    box-sizing: border-box;
    font-size: 13px;
    line-height: 1.25;
    text-align: center;
  }
}
/* Grands téléphones à l'horizontale et petites tablettes : 3 vignettes par rangée */
@media (min-width: 560px) and (max-width: 768px) {
  #categories_gallery .contentText > table:not(#products_gallery) > tbody { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}