/* ===== Mobile : refonte 2026-10 =====
   Corrections d'affichage sur téléphone. Rien ici ne s'applique au-dessus de 991px. */

/* La barre de menu du bureau laissait une bande vide sous l'en-tête. */
@media (max-width: 991px) {
  .header-nav-bar {
    display: none !important;
  }
}

@media (max-width: 767px) {
  /* Bandeau d'annonce : deux lignes au lieu de quatre. */
  .header-top-bar {
    font-size: 11.5px;
    line-height: 1.35;
    padding: 6px 10px;
  }

  /* --- Fiche produit --- */
  /* La photo occupait 150px à cause d'un retrait de 80px de chaque côté. */
  body#product #content.page-content,
  .product-page-v2 .product-media-column .page-content {
    padding: 0 !important;
  }

  body#product .images-container,
  body#product .product-cover,
  body#product .product-cover picture,
  body#product .product-cover img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  body#product .product-cover img {
    border-radius: 14px;
  }

  /* Une seule photo : la vignette n'apporte rien. */
  body#product .product-images > li:only-child {
    display: none;
  }

  body#product .product-images {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 8px 0 0;
    margin: 0;
  }

  body#product .product-images .thumb {
    width: 64px;
    height: 64px;
    object-fit: cover;
  }

  body#product h1.h1 {
    font-size: 1.45rem;
    line-height: 1.25;
    margin-top: 16px;
  }

  /* Onglets : une rangée à faire défiler, plus de liste empilée. */
  body#product .product-tabs-shell {
    padding: 16px !important;
  }

  body#product .product-tabs-nav {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    max-height: none;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  body#product .product-tabs-nav::-webkit-scrollbar {
    display: none;
  }

  body#product .product-tabs-nav .nav-item {
    flex: 0 0 auto;
    width: auto;
    float: none;
  }

  body#product .product-tabs-nav .nav-link {
    width: auto;
    white-space: nowrap;
    padding: 10px 14px;
  }

  /* --- Listes de produits --- */
  /* Bouton « Catégories » fixe en bas de l'écran : il ouvre l'arbre dans un panneau qui monte du bas. */
  .creati-cats-toggle {
    position: fixed;
    left: 50%;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 1040;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 11px 22px;
    border: 0;
    border-radius: 999px;
    background: var(--pk-primary, #0b4a4a);
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  }

  .creati-cats-toggle .material-icons {
    font-size: 20px;
    transition: transform 0.2s;
  }

  .creati-cats-toggle[aria-expanded="true"] .material-icons {
    transform: rotate(180deg);
  }

  #left-column .block-categories {
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    box-shadow: none;
  }

  #creatiCatsTree {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1039;
    max-height: 78vh;
    overflow-y: auto;
    padding: 18px 18px calc(76px + env(safe-area-inset-bottom, 0px));
    border-radius: 18px 18px 0 0;
    background: #fff;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.25);
  }

  #creatiCatsTree.collapse:not(.in):not(.show) {
    display: none;
  }

  #creatiCatsTree > .category-top-menu {
    margin: 0;
    padding: 0;
  }

  /* Le bouton fixe ne doit pas masquer le bas de page. */
  body#category #footer,
  body#category footer {
    padding-bottom: 70px;
  }

  /* Le texte de la catégorie passe sous les produits : le titre reste en haut. */
  body#category section#main {
    display: flex;
    flex-direction: column;
  }

  body#category #js-product-list-header,
  body#category .category-hero,
  body#category .category-hero-inner,
  body#category .category-hero-content {
    display: contents;
  }

  body#category .category-title {
    margin: 4px 0 8px;
  }

  body#category .category-meta {
    margin-bottom: 14px;
  }

  body#category #category-description {
    order: 10;
    margin-top: 24px;
    padding: 16px;
    border: 1px solid #e3e8ea;
    border-radius: 14px;
    background: #fff;
  }

  /* En-tête de catégorie : moins de marges, pas d'image décorative avant les produits. */
  body#category section#main {
    padding-left: 0;
    padding-right: 0;
  }

  .category-hero-media {
    display: none;
  }

  /* Deux produits par ligne. */
  #products .products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  #products .product-card {
    min-width: 0;
  }

  #products .product-card .product-title,
  #products .product-card .product-title a {
    font-size: 0.85rem;
    line-height: 1.25;
  }

  #products .product-card .product-card-price {
    font-size: 1rem;
  }

  /* Cartes de genre des coraux : deux par ligne, compactes. */
  .creati-coral-genera {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-bottom: 20px;
  }

  .creati-coral-genera .category-card {
    min-height: 0;
    height: 132px;
    overflow: hidden;
  }

  .creati-coral-genera .category-card-content {
    padding: 10px;
  }

  .creati-coral-genera .category-card-title {
    font-size: 0.95rem;
  }

  .creati-coral-genera .category-card-count {
    font-size: 0.72rem;
    line-height: 1.25;
  }

  .creati-coral-genera .category-card-arrow {
    display: none;
  }
}

@media (min-width: 768px) {
  .creati-cats-toggle {
    display: none;
  }

  /* Sur grand écran l'arbre reste toujours ouvert. */
  #creatiCatsTree.collapse {
    display: block !important;
    height: auto !important;
  }
}

/* ===== Lot 2 : recherche, panier, commande ===== */

/* Panier : le module Réassurance n'est pas configuré et affiche ses textes d'exemple. */
.cart-grid-right .blockreassurance_product {
  display: none;
}

/* La recherche n'était accessible que dans le menu : elle a sa ligne sous le logo. */
@media (max-width: 991px) {
  .header-row {
    flex-wrap: wrap;
  }

  .header-search-wrapper {
    display: block !important;
    order: 10;
    flex: 0 0 100%;
    max-width: none;
    margin: 8px 0 2px;
  }
}

@media (max-width: 767px) {
  /* Résultats de recherche : même grille à deux colonnes que les catégories. */
  #products .products {
    display: grid !important;
    margin-left: 0;
    margin-right: 0;
  }

  #products .products > * {
    width: auto;
    max-width: none;
  }

  /* Commande : le menu complet s'affichait déplié avant le formulaire. */
  body#checkout #header .header-top.hidden-md-up .col-sm-12 {
    display: none;
  }

  body#checkout .checkout-step .step-title {
    font-size: 1.05rem;
  }

  /* En dessous de 16px, iOS zoome sur le champ à la saisie. */
  body#checkout input[type="text"],
  body#cart input[type="text"] {
    font-size: 16px;
  }
}

/* ===== Agrandissement de la photo produit (tous écrans) ===== */
/* La fenêtre prend la place disponible et n'affiche que la photo. */
#product-modal .modal-dialog {
  width: auto;
  max-width: min(94vw, calc(94vh - 20px));
  margin: 3vh auto;
}

#product-modal .modal-content .modal-body {
  display: block;
  margin-left: 0;
}

#product-modal .modal-content,
#product-modal .modal-body {
  padding: 0;
  border: 0;
  background: transparent;
}

#product-modal figure {
  margin: 0;
}

#product-modal .product-cover-modal {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

/* Une seule photo : pas de bande de vignettes. */
#product-modal .js-modal-product-images > li:only-child {
  display: none;
}

/* ===== Cartes produit (tous écrans) ===== */
/* Plus de boutons œil et panier au survol : toute la carte mène à la fiche. */
.product-card .product-quick-actions {
  display: none !important;
}

.product-card {
  position: relative;
  cursor: pointer;
}

.product-card .product-card-link {
  position: absolute;
  inset: 0;
  z-index: 3;
}

/* ===== Fiche produit sur téléphone : lot 3 ===== */
body#product .product-tabs-zone .product-local-reassurance-bottom {
  display: none;
}

@media (max-width: 767px) {
  /* Plus de bouton de partage. */
  body#product .social-sharing {
    display: none;
  }

  /* La réassurance descend sous la description : le bloc du haut est masqué, sa copie du bas affichée. */
  body#product .product-summary-card .product-local-reassurance {
    display: none;
  }

  body#product .product-tabs-zone .product-local-reassurance-bottom {
    display: grid;
    gap: 10px;
    margin-top: 24px;
  }

  /* Description et Livraison alignées sur le reste de la page. */
  body#product .product-tabs-shell {
    padding: 0 !important;
    border: 0;
    background: none;
    box-shadow: none;
  }
}

/* ===== Pied de page : logo à la place du nom (tous écrans) ===== */
.footer-brand-logo {
  display: block;
  width: auto;
  height: 64px;
  max-width: 100%;
}

/* ===== Pied de page : les trois engagements sont centrés dans leur colonne (tous écrans) ===== */
.footer-features .feature-item {
  justify-content: center;
}

/* Sur téléphone, l'icône passe au-dessus du texte pour que les trois blocs soient alignés entre eux. */
@media (max-width: 767px) {
  .footer-features .feature-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* ===== Accueil : le texte du haut et les catégories s'alignent sur « Nouveautés » (tous écrans) ===== */
/* Mêmes retraits latéraux que .products-section : 1rem, puis 1.5rem, puis 2rem. */
.hero-section,
.categories-section {
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .hero-section,
  .categories-section {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .hero-section,
  .categories-section {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* ===== Catégories de coraux : les cartes de genre passent sous les produits (tous écrans) ===== */
.listing-content {
  display: flex;
  flex-direction: column;
}

.listing-content > .creati-coral-genera {
  order: 5;
  margin-top: 32px;
  /* Les cartes sont le dernier bloc avant le pied de page. */
  margin-bottom: 48px;
}

/* ===== Fiche produit sur téléphone : toucher la photo l'ouvre en grand, dans sa qualité d'origine ===== */
/* Le thème masquait la zone cliquable sous 768px : le zoom n'existait que sur ordinateur. */
@media (max-width: 767px) {
  body#product .product-cover {
    position: relative;
  }

  body#product .product-cover .layer {
    display: block !important;
    position: absolute;
    inset: 0;
    opacity: 0 !important;
    cursor: zoom-in;
  }
}

/* ===== Fil d'Ariane aligné sur le contenu (tous écrans) ===== */
/* Sur la fiche produit, le contenu est en retrait de la marge de section#main (16px, puis 24px dès 992px). */
body#product nav.breadcrumb {
  padding-left: 16px;
  padding-right: 16px;
}

@media (min-width: 992px) {
  body#product nav.breadcrumb {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* Panier : la carte commence 9px plus à droite sur grand écran. */
@media (min-width: 768px) {
  body#cart nav.breadcrumb {
    padding-left: 9px;
    padding-right: 9px;
  }
}