/* ============================================================
   MOBILE POLISH — 16/07/2026 (couche additive, retirable)
   Corrige : skip-link visible, CTA header coupé, sticky agressif,
   rythme mobile. Chargée APRÈS main.css.
   ============================================================ */

/* --- 1. Skip-link : invisible sauf au focus clavier (tous écrans) --- */
body .skip-link{position:absolute!important;left:-9999px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important;z-index:100001}
body .skip-link:focus{left:14px!important;top:12px!important;width:auto!important;height:auto!important;overflow:visible!important;background:#fff;color:#2B2A26;padding:10px 16px;border-radius:10px;box-shadow:0 8px 26px rgba(43,42,38,.22);text-decoration:none;font-weight:600}

/* --- 2. Sticky CTA : pilule flottante discrète, apparaît après le héro --- */
body .sticky-cta-mobile{left:0;right:0;bottom:calc(14px + env(safe-area-inset-bottom, 0px));background:transparent!important;padding:0!important;box-shadow:none!important;display:flex;justify-content:center;pointer-events:none;transform:translateY(140%);opacity:0;transition:transform .38s cubic-bezier(.22,.9,.3,1),opacity .3s ease}
body .sticky-cta-mobile.is-visible{transform:none;opacity:1}
body .sticky-cta-mobile .btn-sticky{pointer-events:auto;width:auto!important;max-width:calc(100% - 48px);margin:0 auto;padding:12px 24px!important;border-radius:999px!important;font-size:.95rem!important;line-height:1.2;box-shadow:0 12px 32px rgba(43,42,38,.28)!important;display:inline-flex;align-items:center;gap:8px}
@media(prefers-reduced-motion:reduce){body .sticky-cta-mobile{transition:opacity .2s ease;transform:none}body .sticky-cta-mobile:not(.is-visible){opacity:0;visibility:hidden}}

/* ================= MOBILE ≤ 767px ================= */
@media(max-width:767px){
  /* --- 3. Header : logo + burger seulement, le CTA passe au sticky/héro --- */
  body .navbar .nav-cta-group{display:none!important}
  body .navbar .nav-main{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 16px}
  body .navbar .menu-toggle{margin-left:auto}

  /* --- 4. Héro : rythme éditorial --- */
  .hero{padding-top:100px;padding-bottom:38px}
  .hero-content h1{font-size:2.05rem;line-height:1.14;text-wrap:balance;margin-bottom:14px}
  .hero-content p{font-size:1.02rem;line-height:1.75;max-width:34ch;margin-left:auto;margin-right:auto;text-wrap:pretty}
  .hero-trust-badges{gap:8px;margin-top:18px}
  .hero-badge{font-size:.86rem;padding:8px 14px}

  /* --- 5. Rythme général des sections --- */
  .section-spacing{padding-top:52px;padding-bottom:52px}
  .section-header h2{font-size:1.62rem;line-height:1.2;text-wrap:balance}
  .section-header p{font-size:.98rem;text-wrap:pretty}

  /* --- 6. Artefacts : respirations mobiles --- */
  #chronologie-sante .crc-live{margin-left:4px;margin-right:4px;padding:22px 18px}
  #chronologie-sante .crc-card{padding:16px 16px}
  #piege-dopamine .dop-curve{padding:18px 14px 14px}
  #industrie-tabac{padding:0 4px}

  /* --- 7. Boutons : généreux mais pas criards --- */
  .btn-primary.btn-large{padding:14px 26px;font-size:1rem}

  /* --- 8. Footer : ne pas coller au sticky --- */
  body{padding-bottom:calc(76px + env(safe-area-inset-bottom, 0px))}
}

/* --- 9. Courbe dopamine : lisible, scrollable, pas écrasée --- */
#piege-dopamine .dop-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;margin:4px -4px 0;padding:0 4px}
@media(max-width:767px){
  #piege-dopamine svg.dop-svg{min-width:560px;height:200px}
  #piege-dopamine .dop-lbl{font-size:13.5px}
  #piege-dopamine .dop-curve{padding:22px 16px 16px}
  #piege-dopamine .dop-ch h3{font-size:1.35rem}
  #piege-dopamine .dop-note{font-size:.98rem;line-height:1.72;margin-top:14px}
  #piege-dopamine .dop-step{padding:20px 16px}
  #piege-dopamine .dop-step p{font-size:.9rem}
}