/* ═══════════════════════════════════════════════════════════════════
   CONTACT NFC : CORRECTIFS RESPONSIVE (mobile, tablette, grand écran)
   À charger EN DERNIER : après bootstrap, style.css, plaques.css et charte-nfc.css.
   <link rel="stylesheet" href="assets/css/responsive-nfc.css">
   Ce fichier n'ajoute que des règles : retirez-le et le site redevient comme avant.
   Points d'arrêt : 1000 px (tablette large), 900 px (tablette), 640 px (mobile), 340 px (petit mobile).
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Sécurités valables partout ── */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip}
img,video,iframe,svg:not([width]){max-width:100%}
h1,h2,h3,h4,p,li,a,figcaption,summary,label{overflow-wrap:break-word}
table{max-width:100%}
.table-responsive-auto{overflow-x:auto;-webkit-overflow-scrolling:touch}
:focus-visible{outline-offset:2px}

/* Évite le zoom automatique d'iOS quand on touche un champ */
@media (max-width:768px){
  input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px}
}

/* ── 2. Zones tactiles confortables (doigt : 44 px) ── */
@media (pointer:coarse){
  .cn-crumb a,.cn-inline{display:inline-block;padding:10px 4px}
  .cn-opt{min-height:56px}
  .cn-stepper button,.cc-qb{min-width:44px;min-height:44px}
  .cc-close{width:44px;height:44px}
  .cc-rm{padding:10px 6px}
  .cn-q summary{min-height:48px}
  .ft .ft__nav a,.ft .ft__legal a,.ft .ft__bottom a{display:inline-block;padding:11px 0}
  .ft .ft__seo-city{display:inline-flex;align-items:center;min-height:44px}
  .ft .ft__contact-line{min-height:44px}
  .cnfc-nav__logo{display:inline-flex;align-items:center;min-height:44px}
  .cnfc-cartbtn,.cnfc-cartbtn--m{min-width:44px;min-height:44px}
}

/* ── 3. Tablette (≤ 900 px) : fiches produit ── */
@media (max-width:900px){
  .cn-stage-col{max-width:560px;margin-inline:auto;width:100%}
  .cn-panel{padding-inline:clamp(16px,4vw,28px)}
  .cn-wrap{padding-inline:clamp(16px,4vw,32px)}
}

/* ── 4. Mobile (≤ 640 px) ── */
@media (max-width:640px){
  /* Accueil : 2 cartes par ligne au lieu d'une seule, pour ne pas faire une page de 30 écrans */
  .mx .mx-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .mx .mx-cards--1{grid-template-columns:minmax(0,1fr)}
  .mx .mx-card{padding:18px 10px 14px;border-radius:20px}
  .mx .mx-card-acces{font-size:15px}
  .mx .mx-card-acces small{font-size:12px}
  .mx .mx-card-visual{width:76px;height:76px;margin:12px 0 12px;border-width:2px}
  .mx .mx-card-visual .mx-ico{width:32px;height:32px}
  .mx .mx-card-title{font-size:17px}
  .mx .mx-card-desc{font-size:13px;line-height:1.4;margin-top:6px;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .mx .mx-card-tags{display:none}
  .mx .mx-card-price{padding-top:12px}
  .mx .mx-card-btn{font-size:15px;padding:8px;min-height:44px}
  .mx .mx-cards--1 .mx-card{padding:22px 16px 18px}
  .mx .mx-cards--1 .mx-card-desc{-webkit-line-clamp:unset;display:block;font-size:14px}
  .mx .mx-group+.mx-group{margin-top:44px}

  /* Aperçu du profil dans le téléphone : texte lisible (décoratif, ne change pas la mise en page) */
  .mx .mx-pf-role,.mx .mx-pf-org,.mx .mx-pf-tag,.mx .mx-pf-actions span,.mx .mx-pf-row span{font-size:10px}
  .mx .mx-pf-row small{font-size:9.5px}

  /* Listes de plaques / stickers / display : 2 par ligne */
  .cn-cat{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .cn-cat-body{padding:12px}
  .cn-cat-body h2,.cn-cat-body h3{font-size:1rem;line-height:1.2}
  .cn-cat-body p{display:none}
  .cn-cat-btn{padding:10px 12px;font-size:.95rem}
  .cn-title{font-size:clamp(1.7rem,8vw,2.2rem)}

  /* Prix par palier : ne plus couper « / plaque » sur deux lignes */
  .cn-tiers{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cn-tier{padding:10px}
  .cn-tier-p{font-size:1.1rem}
  .cn-tier-p small{white-space:nowrap}
  .cn-band-title{font-size:clamp(1.3rem,6vw,1.7rem)}

  /* Panier : plein écran, bouton de paiement toujours accessible */
  .cc-drawer{width:100vw;height:100dvh;max-height:100dvh}
  .cc-foot{padding-bottom:calc(20px + env(safe-area-inset-bottom))}
  .cc-line{grid-template-columns:minmax(0,1fr) auto}

  /* Fenêtre « Autres produits » */
  .mx .mx-modal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mx .mx-modal-box{max-height:100dvh}
}

/* ── 5. Petit mobile (≤ 340 px) ── */
@media (max-width:340px){
  .mx .mx-cards,.cn-cat,.mx .mx-modal-grid{grid-template-columns:minmax(0,1fr)}
  .cn-cat-body p{display:block}
  .cnfc-nav__logo{font-size:.92em}
  .cnfc-burger,.cnfc-cartbtn--m{flex-shrink:0}
  .cn-tiers{grid-template-columns:minmax(0,1fr)}
}

/* ── 6. Téléphone en paysage (peu de hauteur) ── */
@media (max-height:480px) and (orientation:landscape){
  .mx .mx-modal{padding:0}
  .mx .mx-modal-box{max-height:100dvh;border-radius:0}
  .cc-drawer{height:100dvh}
  .cnfc-drawer__body{overflow-y:auto}
}

/* ── 7. Grands écrans (≥ 1600 px) : le contenu ne s'étire pas indéfiniment ── */
@media (min-width:1600px){
  .cn-wrap{max-width:1320px}
  .mx .mx-cards{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
}