/* ═══════════════════════════════════════════════════════════
   FAMILLES & SERVICES — AFFICHAGE MOBILE (≤ 900px)
   Couche dédiée smartphone / tablette, prioritaire sur le reste
   ═══════════════════════════════════════════════════════════ */
@media (max-width:900px){
  html,body{overflow-x:hidden!important;max-width:100vw!important}
  img,svg,video,iframe{max-width:100%!important}
  .container{padding-left:20px!important;padding-right:20px!important}

  /* — Typographie lisible — */
  h1{font-size:clamp(32px,9vw,44px)!important;line-height:1.08!important;letter-spacing:-.02em!important}
  h2{font-size:clamp(26px,7.2vw,34px)!important;line-height:1.12!important}
  h3{font-size:clamp(20px,5.6vw,24px)!important;line-height:1.2!important}
  p,li{font-size:16px;line-height:1.6}
  .eyebrow,.phero-kicker{font-size:11px!important}

  /* — Toutes les grilles passent sur 1 colonne — */
  [class*="grid"],[class*="-row"],[class*="cols"],.vals,.steps,.pillars,.testi-grid,.engagements,
  [style*="grid-template-columns"]{grid-template-columns:1fr!important}
  [class*="grid"],[class*="-row"]{gap:24px!important}
  .ag-zone-grid,.checkbox-grid{grid-template-columns:1fr!important}

  /* — Espacements des sections — */
  section{padding-top:56px!important;padding-bottom:56px!important}
  .hero,.phero,.rde-hero,.brico-hero{padding-top:28px!important;padding-bottom:48px!important}

  /* — Boutons pleine largeur, texte autorisé à passer à la ligne — */
  .btn{white-space:normal!important;text-align:center}
  .hero-ctas,.phero-ctas,.brico-hero-ctas,.cta-actions,.cta-row{flex-direction:column!important;align-items:stretch!important;gap:12px!important}
  .hero-ctas .btn,.phero-ctas .btn,.brico-hero-ctas .btn,.cta-actions .btn,.cta-row .btn{width:100%!important;justify-content:center!important}

  /* — Barre noire Urssaf — */
  .topbanner-inner{padding:9px 16px!important;gap:6px 10px!important}
  .topbanner .tb-tag{display:none!important}
  .topbanner .tb-msg{font-size:12px!important;line-height:1.45!important;text-align:center}
  .topbanner .tb-link{font-size:11.5px!important}

  /* — Menu — */
  .nav-inner{height:68px!important}
  .nav-links .menu-hide,.nav-phone,.megamenu{display:none!important}
  .logo{gap:10px!important}
  .logo-mark{width:36px!important;height:36px!important}
  .logo-wm{font-size:16px!important}
  .logo-txt small{font-size:8px!important;letter-spacing:.14em!important;white-space:normal!important}
  .nav-links .btn.btn-pink{padding:9px 13px!important;font-size:12.5px!important}

  /* — Accueil : ruban + couverture magazine simplifiée — */
  .since-bar{flex-wrap:wrap!important;gap:8px!important;padding:8px 14px!important}
  .since-bar .since{border-right:none!important;padding-right:0!important}
  .hero-trust{gap:12px!important;flex-direction:column}
  .hero-scene.mag{aspect-ratio:4/5!important}
  .hero-scene.mag .mag-contenu,.hero-scene.mag .mag-voile{display:none!important}
  .manifest-left{position:static!important}

  /* — Carrousel des univers — */
  .univers-arrow{display:none!important}
  .universe{aspect-ratio:auto!important;min-height:520px!important}
  .universe-body{left:20px!important;right:20px!important;bottom:28px!important}
  .universe-num{top:20px!important;left:20px!important;font-size:44px!important}
  .univers-controls{grid-template-columns:1fr!important;justify-items:center;gap:14px!important}

  /* — Cartes et blocs — */
  .uni{aspect-ratio:4/3!important;padding:26px!important}
  .cta-banner,.contact-form,.ag-id-card,.legal-info-box{padding:26px 20px!important}
  .band-item{border-right:none!important;padding:12px 0!important}
  .legal-info-box .row,.ag-id-row{flex-direction:column!important;gap:4px!important}
  .ag-id-row .v{text-align:left!important}
  .phero-scene,.rde-hero-scene,.brico-visual,.ag-portrait,.portrait-scene{max-width:100%!important}

  /* — Pied de page — */
  .footer-grid{grid-template-columns:1fr!important;gap:36px!important}
  .footer-bottom{flex-direction:column!important;gap:14px!important;text-align:center}
  .footer-bottom .links{flex-wrap:wrap;justify-content:center;gap:14px!important}
  .footer-signature{font-size:18px!important;padding:28px 0 18px!important}
}
@media (max-width:380px){
  h1{font-size:30px!important}
  .nav-links .btn.btn-pink{padding:8px 10px!important;font-size:11.5px!important}
  .logo-txt small{display:none!important}
}