/* ============================================================
   MesLacets.fr — responsive.css
   Règles responsive (media queries) de la HOME native (index.tpl),
   extraites de theme.css le 17/08/2026 (étape 1 : séparation des
   instructions responsive avant évolution section par section
   vers la maquette maquette-responsive-meslacets-instrumentsans.html).

   Portée : sections .ml-hero, .ml-bestsellers, .ml-intro,
   .ml-promo-fidelite, .ml-carousel, .ml-counters, .ml-raisons,
   .ml-temoins, .ml-gamme, .ml-publications, .ml-histoire, .ml-faq,
   .ml-contact, + espace bas de footer mobile (.footer-container).

   Les déclarations de base (non responsive) de ces sections restent
   dans theme.css. Ce fichier ne contient QUE les @media.
   ============================================================ */

/* ===== 0. BADGE AVIS (Trustpilot) — home mobile, affinage de l'exemplaire au-dessus du hero =====
   home.js (initRatingBadgeInline) clone l'original (mêmes id, id dupliqués
   volontairement — voir commentaire dans home.js) et l'insère juste avant .ml-hero,
   avec la classe .ml-rating-inline. La mise en forme horizontale de base (display,
   flex-direction, pastille, etc.) vient de theme.css et s'applique aux DEUX
   exemplaires (id partagé) ; ici on affine juste la largeur/marge du clone pour
   qu'il s'aligne sur le conteneur du hero (max-width 1110px). */
@media (max-width: 767px) {
  body#index #rating-badge-container.ml-rating-inline {
    max-width: 1110px;
    margin: 10px auto 14px;
  }
}

/* ===== 1. HERO — largeur ≤1024px ===== */
@media (max-width:1024px){ .ml-hero__grid{ grid-template-columns:1fr 1fr; grid-template-rows:260px 260px 260px;
  grid-template-areas:"big big" "s1 s2" "wide wide"; } .ml-hero__name{ font-size:40px; }
  .ml-hero__tile--s1 .ml-hero__name,.ml-hero__tile--s2 .ml-hero__name{ font-size:26px; } }

/* ===== 1. HERO — largeur ≤600px ===== */
@media (max-width:600px){ .ml-hero__title{ font-size:24px; } .ml-hero__grid{ grid-template-columns:1fr;
  grid-template-rows:repeat(4,220px); grid-template-areas:"big" "s1" "s2" "wide"; gap:14px; }
  .ml-hero__name{ font-size:34px; } .ml-hero__tile--s1 .ml-hero__name,.ml-hero__tile--s2 .ml-hero__name{ font-size:32px; } }

/* ===== 1bis. RÉASSURANCE RAPIDE — mobile uniquement, sous le hero =====
   Masquée par défaut (theme.css) ; même seuil que .ml-promo-fidelite (768px).
   Fond gris clair : réutilise le token --ml-bg-gris déjà défini dans theme.css
   (système d'alternance de fonds de la home). */
@media (max-width: 768px) {
  .ml-trust-mobile {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-width: 1110px;
    margin: 0 auto;
    padding: 16px 16px 20px;
    background: var(--ml-bg-gris, #F7F7F7);
  }
}

/* ===== 2. BESTSELLERS — largeur ≤900px (tablette, section encore visible) ===== */
@media (max-width:900px){ .ml-bestsellers__grid{ grid-template-columns:repeat(3,1fr); } }

/* ===== 2. BESTSELLERS — largeur ≤768px =====
   Section désactivée en mobile (demande 17/08/2026). L'ancien ajustement à
   560px (2 colonnes + titre réduit) devient sans objet, la section entière
   étant masquée sous 768px ; la règle à 900px ci-dessus reste utile pour la
   tranche tablette (769-900px), où la section est encore visible. */
@media (max-width:768px){ .ml-bestsellers{ display:none; } }

/* ===== 3. INTRO / UNIVERS — largeur ≤768px =====
   Section désactivée en mobile (demande 17/08/2026). L'ancien ajustement de
   grille interne (grid-template-columns, gap, taille du titre) devient sans
   objet puisque la section entière est masquée. */
@media (max-width:768px){ .ml-intro{ display:none; } }

/* ===== 4. PROMO FIDÉLITÉ =====
   Section désactivée en mobile (demande 17/08/2026). Elle était déjà masquée
   par défaut sur desktop (.ml-promo-fidelite{display:none}, theme.css) — sans
   la règle @media qui l'affichait ici, elle reste masquée à toutes les largeurs. */

/* ===== 5. CARROUSEL PROMO — largeur ≤768px ===== */
@media (max-width:768px){ .ml-carousel{ display:none; } }

/* ===== 6. COMPTEURS — largeur ≤768px ===== */
@media (max-width:768px){ .ml-counters__grid{ grid-template-columns:1fr; gap:20px; } .ml-counter__num{ font-size:46px; } }

/* ===== 7. TROIS BONNES RAISONS — largeur ≤768px =====
   Section désactivée en mobile (demande 17/08/2026) : redondante avec la nouvelle
   réassurance rapide (.ml-trust-mobile) sous le hero. Les anciens ajustements
   internes (gap, max-width) deviennent sans objet puisque la section entière
   est masquée. */
@media (max-width:768px){ .ml-raisons{ display:none; } }

/* ===== 8. TÉMOIGNAGES — largeur ≤900px ===== */
@media (max-width:900px){ .ml-temoins__slide{ flex-basis:50%; } }

/* ===== 8. TÉMOIGNAGES — largeur ≤600px ===== */
@media (max-width:600px){ .ml-temoins__slide{ flex-basis:100%; } .ml-temoins__heading{ font-size:23px; } }

/* ===== 9. PARCOUREZ NOTRE GAMME — largeur ≤900px ===== */
@media (max-width:900px){ .ml-gamme__cats { grid-template-columns:repeat(3,1fr); } }

/* ===== 9. PARCOUREZ NOTRE GAMME — largeur ≤560px ===== */
@media (max-width:560px){ .ml-gamme__cats { grid-template-columns:repeat(2,1fr); } .ml-gamme__heading { font-size:23px; } }

/* ===== 10. DERNIÈRES PUBLICATIONS — largeur ≤900px (tablette, section encore en grille) ===== */
@media (max-width:900px){ .ml-publications__grid { grid-template-columns:repeat(2,1fr); } }

/* ===== 10bis. PUBLICATIONS — largeur ≤768px =====
   Bascule mobile (demande 17/08/2026) : masque le titre/la grille/le lien
   "Voir toutes nos publications" d'origine, affiche l'en-tête condensé
   ("Guides & conseils" + "Tout voir") et le carrousel injectés par home.js
   (initPublicationsMobile). L'ancien ajustement à 560px (grille 1 colonne,
   titre réduit) devient sans objet. */
@media (max-width:768px){
  .ml-publications__heading,
  .ml-publications__grid,
  .ml-publications__all {
    display: none;
  }
  .ml-publications__head-mobile {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
  }
  .ml-publications__carousel { display: block; }
}

/* ===== 11. LA PETITE HISTOIRE — largeur ≤768px ===== */
@media (max-width:768px){
  .ml-histoire__cols { grid-template-columns:1fr; gap:16px; }
  .ml-histoire__cale { flex-direction:row; gap:12px; justify-content:flex-start; border-right:0; border-bottom:2px solid #f0d2de; padding-bottom:12px; }
  .ml-histoire__annee { font-size:48px; }
  .ml-histoire__depuis { font-size:16px; }
}

/* ===== 11. LA PETITE HISTOIRE — largeur ≤560px ===== */
@media (max-width:560px){ .ml-histoire__heading { font-size:22px; } }

/* ===== 12. FAQ — largeur ≤768px ===== */
@media (max-width:768px){
  .ml-faq__list { grid-template-columns:1fr; column-gap:0; }
  .ml-faq__list > .ml-faq__item:nth-child(2) { border-top:0; }
}

/* ===== 12. FAQ — largeur ≤560px ===== */
@media (max-width:560px){
  .ml-faq__heading { font-size:22px; }
  .ml-faq__q { font-size:16px; padding-right:36px; }
}

/* ===== 13. NOUS TROUVER & CONTACTER — largeur ≤900px ===== */
@media (max-width:900px){
  .ml-contact__cols { grid-template-columns:1fr; gap:32px; }
  .ml-contact__map { padding-right:0; border-right:0; border-bottom:1px solid #DADADA; padding-bottom:28px; }
  .ml-contact__heading { font-size:23px; }
}

/* ===== FOOTER — espace bas mobile ≤767px ===== */
@media (max-width: 767px) {
  .footer-container {
    padding-bottom: 100px;
  }
}