/* =====================================================================
   ZonePara — habillage mobile
   Couplé aux vues de includes/mobile/. Tout est enfermé sous 768 px :
   le rendu desktop n'est jamais affecté par ce fichier.
   ===================================================================== */

/* Le masquage lui-meme ne depend PAS de ce fichier : les vues mobiles
   portent la classe Bootstrap .d-md-none, et l'en-tete desktop .d-none.d-md-block.
   Si cette feuille manque ou reste en cache, l'affichage reste correct —
   seul l'habillage disparait. Regle conservee en filet de securite. */
@media (min-width:768px){
  .mob-app, .mob-puces, .mob-livraison, .mob-promo{ display:none !important }
}

@media (max-width:767.98px){

  body{ background:#fff; font-size:14px; padding-bottom:70px }
  .container-xxl{ padding-inline:14px }

  /* filet de securite : l'en-tete desktop est deja masque par .d-none */
  .topbar, .header, .catbar{ display:none !important }

  /* ---------------- bandeau vert ---------------- */
  .mob-app{
    background:linear-gradient(165deg, #12A074 0%, #0A6B4D 100%);
    padding:12px 14px 16px; border-radius:0 0 22px 22px;
    position:sticky; top:0; z-index:1030;
  }
  .mob-barre{ display:flex; align-items:center; gap:10px; margin-bottom:12px }
  .mob-btn{ position:relative; width:38px; height:38px; flex:none; border:0; border-radius:12px;
    background:rgba(255,255,255,.15); color:#fff; display:grid; place-items:center; font-size:1.25rem }
  .mob-btn:hover, .mob-btn:focus{ background:rgba(255,255,255,.25); color:#fff }
  .mob-btn .pastille-nb{ position:absolute; top:-4px; inset-inline-end:-4px; background:var(--corail);
    color:#fff; font-size:.62rem; font-weight:700; border-radius:99px; padding:1px 5px; line-height:1.5 }

  /* logo centré : le nom du site tient la place du titre de page */
  .mob-marque{ flex:1; display:flex; align-items:center; justify-content:center; gap:9px; min-width:0 }
  .mob-marque .pastille{ width:34px; height:34px; border-radius:11px; background:#fff;
    display:grid; place-items:center; flex:none }
  .mob-marque .pastille svg{ width:26px; height:26px }
  .mob-marque .nom{ font-family:"Bricolage Grotesque", system-ui, sans-serif; font-weight:700;
    font-size:1.15rem; color:#fff; letter-spacing:-.02em }

  .mob-recherche{ display:flex; align-items:center; gap:10px; background:#fff;
    border-radius:14px; padding:12px 14px }
  .mob-recherche i{ color:var(--gris); font-size:1rem }
  .mob-recherche input{ border:0; flex:1; min-width:0; font-size:.92rem; background:transparent }
  .mob-recherche input:focus{ outline:0 }

  /* ---------------- raccourcis ---------------- */
  .mob-puces{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding:14px 14px 4px }
  .mob-puces::-webkit-scrollbar{ display:none }
  .mob-puces a{ white-space:nowrap; padding:8px 16px; border-radius:99px; font-size:.86rem;
    font-weight:500; background:#F1F5F3; color:#4A625B }
  .mob-puces a.on{ background:var(--vert-l); color:var(--vert-d); font-weight:600 }

  /* ---------------- ordre des sections ----------------
     Sur mobile, la séquence suit la maquette : bannière, catégories,
     puis les produits. Les sections restent au même endroit dans le HTML,
     seul l'affichage est réordonné — le desktop n'est pas touché. */
  main.container-xxl{ display:flex; flex-direction:column }
  main.container-xxl > *{ order:9 }
  .sec-hero{ order:1 }
  .sec-rayons{ order:2 }
  .sec-offres{ order:3 }
  .sec-ventes{ order:4 }
  .sec-livraison{ order:5 }

  /* ---------------- sections ---------------- */
  .section{ padding:12px 0 }
  .section-head{ align-items:center; margin-bottom:12px }
  .section-head h2{ font-size:1.15rem; font-weight:700; letter-spacing:-.02em }
  .section-head .eyebrow{ display:none }
  .section-head .more{ font-size:.86rem; font-weight:600 }
  .section-head .more i{ display:none }

  /* ---------------- bannière promotionnelle ---------------- */
  .mob-promo{ display:flex; align-items:center; gap:14px; background:var(--vert-l);
    border-radius:18px; padding:18px; margin-bottom:6px }
  .mob-promo .texte{ flex:1; min-width:0 }
  .mob-promo .sur{ font-size:.8rem; color:var(--vert-d); font-weight:500 }
  .mob-promo strong{ display:block; font-size:1.22rem; font-weight:700; color:var(--nuit);
    line-height:1.2; margin:3px 0 14px; letter-spacing:-.025em }
  .mob-promo .btn{ background:var(--vert); color:#fff; border-radius:99px; padding:9px 20px;
    font-size:.88rem; font-weight:600; display:inline-block }
  .mob-promo .visuel{ width:78px; height:78px; border-radius:18px; flex:none;
    background:#fff; display:grid; place-items:center; color:var(--vert); font-size:2rem;
    box-shadow:0 2px 8px rgba(14,138,99,.12) }

  /* carrousel, quand des bannières sont en ligne */
  .hero-slider .carousel-inner{ border-radius:18px }
  .hero-slider .carousel-item{ aspect-ratio:16/10 }

  /* ---------------- rayons ---------------- */
  .cat-tile{ background:transparent; border:0; box-shadow:none; padding:0; min-height:0;
    display:flex; flex-direction:column; align-items:center; gap:8px }
  .cat-tile:hover{ transform:none; box-shadow:none; border-color:transparent }
  .cat-tile i{ width:100%; aspect-ratio:1/1; max-width:78px; border-radius:20px; display:grid;
    place-items:center; font-size:1.55rem; background:#E8F1FB; color:#4A7FB5 }
  .cat-tile div{ font-size:.78rem; color:#4A625B; line-height:1.2 }
  .row > .col:nth-child(4n+2) .cat-tile i{ background:#FCE9EE; color:#D45E7E }
  .row > .col:nth-child(4n+3) .cat-tile i{ background:#FDF0DC; color:#C58A2A }
  .row > .col:nth-child(4n+4) .cat-tile i{ background:#ECE9FA; color:#7566CE }
  .row-cols-4 > .col{ flex:0 0 25%; max-width:25% }

  /* ---------------- carte produit ---------------- */
  .row.g-3{ --bs-gutter-x:.7rem; --bs-gutter-y:.7rem }
  .card-p{ border:1px solid var(--ligne); border-radius:16px; box-shadow:none; overflow:hidden }
  .card-p:hover{ transform:none; box-shadow:none }
  .card-p .media{ padding:0; background:#E7F3EE }
  /* une colonne verte, une colonne ambrée : la grille respire */
  .row > .col:nth-child(2n) .card-p .media{ background:#FCF0DF }
  .card-p .media img{ border-radius:0; padding:16px; aspect-ratio:1/1 }
  .card-p .flag{ top:10px; inset-inline-start:10px; border-radius:9px; font-size:.68rem;
    font-weight:700; padding:3px 9px }
  .card-p .fav-form{ top:8px; inset-inline-end:8px }
  .card-p .fav{ width:30px; height:30px; background:rgba(255,255,255,.92) }

  .card-p .body{ position:relative; padding:11px 12px 12px; gap:2px }
  .card-p .marque{ font-size:.7rem; color:var(--gris); font-weight:500; text-transform:none; letter-spacing:0 }
  .card-p .title{ font-size:.87rem; font-weight:500; color:var(--encre); min-height:2.4em }
  .card-p .contenance{ display:none }
  .card-p .stock:not(.bas){ display:none }
  .card-p .stock.bas{ font-size:.68rem }
  .price{ font-size:1.05rem; font-weight:700 }
  .price-old{ font-size:.74rem }
  .card-p .body > .d-flex{ padding-inline-end:44px }
  .card-p .p-foot{ position:absolute; inset-inline-end:10px; bottom:11px; padding:0; margin:0 }
  .card-p .shop-chip{ display:none }
  .card-p .add{ width:36px; height:36px; background:var(--vert); color:#fff; font-size:1rem;
    box-shadow:0 2px 7px rgba(14,138,99,.32) }

  /* ---------------- bandeau livraison ---------------- */
  .mob-livraison{ display:flex; align-items:center; gap:12px; background:#F3F8F6;
    border-radius:16px; padding:14px; margin:16px 0 }
  .mob-livraison .ic{ width:40px; height:40px; border-radius:13px; background:#fff;
    display:grid; place-items:center; color:var(--vert); font-size:1.2rem; flex:none }
  .mob-livraison strong{ display:block; font-size:.88rem }
  .mob-livraison span{ font-size:.76rem; color:var(--gris) }

  .deals{ background:transparent; border:0; padding:0 }

  /* ---------------- barre d'onglets ---------------- */
  .tabbar{ border-top:1px solid var(--ligne); padding-bottom:env(safe-area-inset-bottom);
    box-shadow:0 -2px 14px rgba(14,42,34,.06) }
  .tabbar a{ padding:9px 0 7px; font-size:.68rem; font-weight:500 }
  .tabbar a i{ font-size:1.25rem; margin-bottom:2px }
  .tabbar a.active{ color:var(--vert); font-weight:600 }

  footer{ margin-top:18px; padding:20px 0 14px }
  footer .row > div:not(:first-child){ display:none }
}

/* =====================================================================
   PANNEAU DE NAVIGATION — indépendant du seuil : il n'est ouvert
   que depuis les vues mobiles.
   ===================================================================== */
.mob-menu{ width:88%; max-width:340px }
.mob-menu-tete{ display:flex; align-items:center; gap:12px;
  background:linear-gradient(165deg, #12A074 0%, #0A6B4D 100%); color:#fff; padding:20px 18px }
.mob-menu-tete .pastille{ width:46px; height:46px; border-radius:14px; background:#fff;
  display:grid; place-items:center; flex:none }
.mob-menu-tete .pastille svg{ width:32px; height:32px }
.mob-menu-tete strong{ display:block; font-family:"Bricolage Grotesque", system-ui, sans-serif;
  font-size:1.15rem; font-weight:700 }
.mob-menu-tete .bonjour{ font-size:.85rem; opacity:.85 }
.mob-menu-tete .btn-close{ margin-inline-start:auto }

.mob-menu-corps{ padding:8px 0 24px; overflow-y:auto }
.mob-menu-corps a{ display:flex; align-items:center; gap:14px; padding:14px 20px;
  color:var(--encre); font-size:.98rem }
.mob-menu-corps a i:first-child{ width:22px; text-align:center; color:var(--vert-d); font-size:1.1rem }
.mob-menu-corps a:hover{ background:#F7FAF9 }
.mob-menu-corps a.on{ background:var(--vert-l); color:var(--vert-d); font-weight:600 }
.mob-menu-corps a .chev{ margin-inline-start:auto; color:#C2D0CA; font-size:.85rem }
.mob-menu-corps a.sortie{ color:var(--corail) }
.mob-menu-corps a.sortie i{ color:var(--corail) }
.pastille-promo{ margin-inline-start:auto; background:var(--corail-l); color:var(--corail);
  font-size:.72rem; font-weight:700; border-radius:99px; padding:3px 10px }
.separateur{ height:1px; background:var(--ligne); margin:8px 20px }

.ligne-langue{ display:flex; align-items:center; gap:14px; padding:14px 20px; font-size:.98rem }
.ligne-langue > i{ width:22px; text-align:center; color:var(--vert-d); font-size:1.1rem }
.ligne-langue .langues{ margin-inline-start:auto; display:flex; gap:4px }
.ligne-langue .langues a{ padding:3px 9px; border-radius:8px; font-size:.8rem; font-weight:600;
  color:var(--gris); background:transparent }
.ligne-langue .langues a.on{ background:var(--vert-l); color:var(--vert-d) }
.version{ padding:18px 20px 0; font-size:.76rem; color:var(--gris); margin:0 }
html[dir="rtl"] .mob-menu-corps a .chev{ transform:scaleX(-1) }

/* L'univers matériel prend place juste après les ventes sur mobile */
@media (max-width:767.98px){
  .sec-materiel{ order:6 }
  .bloc-materiel{ padding:14px; border-radius:16px }
  .bloc-materiel .ic{ width:42px; height:42px; font-size:1.15rem }
  .univers-materiel{ padding:18px; border-radius:18px }
  .univers-materiel h1{ font-size:1.25rem }
  .univers-materiel p{ font-size:.87rem }
  .univers-materiel .atouts{ flex-direction:row; flex-wrap:wrap; width:100% }
  .univers-materiel .atouts span{ font-size:.76rem; padding:6px 12px }
  .cat-tile.materiel i{ background:var(--bleu-l); color:var(--bleu) }
}