/* Maison Qeddus — durcissement responsive multi-support, 10/08/2026 */
:root{--mq-safe-x:clamp(16px,4vw,32px)}
html{width:100%;max-width:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{width:100%;max-width:100%;min-width:0;overflow-x:hidden}
*,*::before,*::after{box-sizing:border-box}
img,picture,video,canvas,svg,iframe{max-width:100%}
img,picture,video,canvas{height:auto}
input,select,textarea,button{max-width:100%;font:inherit}
pre,code{max-width:100%;overflow-wrap:anywhere}
h1,h2,h3,h4,p,li,a,span{min-width:0}
.site,main,section,header,footer,.wrap,.bar,.home-shell,.secure-shell,.mq-container{min-width:0;max-width:100%}

/* Les conteneurs du site restent centrés sans jamais dépasser le viewport. */
.wrap,.home-shell,.secure-shell,.mq-container{
  width:min(1180px,calc(100% - (2 * var(--mq-safe-x))));
  margin-left:auto;
  margin-right:auto;
}

/* Les enfants de grid/flex peuvent réellement rétrécir. */
.grid>*,.split>*,.home-hero-grid>*,.feature-grid>*,.offer-grid>*,.service-grid>*,
.secure-grid>*,.secure-hero>*,.sidebar-layout>*,.footer-grid>*{min-width:0}

/* Les visuels de présentation ne doivent jamais être coupés par un débordement horizontal. */
.hero-img,.top-image,.home-hero-visual,.feature-visual,.offer-image,.message-visual,
.mq-offer-visual,.record-panel,.old-preview{max-width:100%;overflow:hidden}
.hero-img img,.top-image img,.home-hero-visual>img,.feature-visual img,.mq-offer-visual img{
  display:block;width:100%;max-width:100%;
}

/* Entêtes : pas de sortie d'écran sur petits portables, tablettes ou zoom navigateur. */
.bar,.secure-top,.mq-uniform-topbar{max-width:100%;min-width:0}
.brand,.secure-brand{min-width:0}

/* Pieds de page cohérents et sans largeur fixe. */
.footer,.mq-rich-footer,.mq-footer-rich,footer{max-width:100%}
.footer-grid,.footer-grid-large,.mq-rich-footer .footer-grid,.mq-footer-rich .mq-container{
  width:min(1180px,calc(100% - (2 * var(--mq-safe-x))));
  max-width:100%;margin-left:auto;margin-right:auto;
}

/* Tablettes et petits ordinateurs. */
@media (max-width:1100px){
  :root{--mq-safe-x:22px}
  .grid.cards,.offers,.mq-offer-table{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .footer-grid-large{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .sidebar-layout{grid-template-columns:minmax(210px,260px) minmax(0,1fr)}
  .side{min-width:0}
}

/* Téléphones et petites tablettes : une seule colonne, textes et images toujours entiers. */
@media (max-width:900px){
  :root{--mq-safe-x:18px}
  body{overflow-x:hidden!important}
  .site{width:100%!important;max-width:100%!important;margin:0!important}
  .wrap,.home-shell,.secure-shell,.mq-container{
    width:calc(100% - (2 * var(--mq-safe-x)))!important;
    max-width:calc(100% - (2 * var(--mq-safe-x)))!important;
  }
  .grid,.grid.cards,.grid.three,.grid.two,.offers,.steps,.flowline,.split,
  .home-hero-grid,.feature-grid,.offer-grid,.service-grid,.mq-offer-table,
  .secure-hero,.sidebar-layout,.footer-grid,.footer-grid-large,
  .mq-rich-footer .footer-grid,.mq-footer-rich .mq-container{
    grid-template-columns:minmax(0,1fr)!important;
  }
  .secure-grid{display:block!important}
  .secure-grid>.secure-card{margin-bottom:18px}
  .span-12,.span-8,.span-7,.span-6,.span-5,.span-4{grid-column:auto!important}
  .bar{width:100%!important;padding-left:var(--mq-safe-x)!important;padding-right:var(--mq-safe-x)!important;gap:12px!important}
  .brand{white-space:normal!important;line-height:1.05!important;overflow-wrap:normal!important}
  .nav{max-width:calc(100vw - (2 * var(--mq-safe-x)))!important;left:var(--mq-safe-x)!important;right:var(--mq-safe-x)!important}
  .hero,.section{padding-left:var(--mq-safe-x)!important;padding-right:var(--mq-safe-x)!important}
  .home-hero-visual>img,.hero-img img,.top-image img,.feature-visual img,.mq-offer-visual img{
    width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;
    aspect-ratio:auto!important;object-fit:contain!important;object-position:center!important;
  }
  .hero-note{max-width:100%!important}
  .form,.card,.table-card,.secure-card,.secure-hero-main,.security-card{max-width:100%!important}
  .form-grid,.permissions,.metric-grid{grid-template-columns:minmax(0,1fr)!important}
  .form-field.full{grid-column:auto!important}
  .footer,.mq-rich-footer,.mq-footer-rich{width:100%!important;margin:0!important;padding-left:var(--mq-safe-x)!important;padding-right:var(--mq-safe-x)!important}
  .footer-bottom,.mq-footer-bottom{flex-wrap:wrap!important;white-space:normal!important}
}

/* Petits téléphones (320–390 px). */
@media (max-width:390px){
  :root{--mq-safe-x:14px}
  .bar{padding-top:12px!important;padding-bottom:12px!important}
  .brand{font-size:clamp(24px,8vw,30px)!important}
  .menu-btn{min-width:0!important;padding:13px 16px!important;font-size:12px!important}
  .hero h1,.home-hero-copy h1{font-size:clamp(34px,11vw,48px)!important;line-height:1.02!important}
  .section-head h1,.split h1{font-size:clamp(34px,11vw,48px)!important}
  .card,.form,.table-card,.secure-card,.secure-hero-main,.security-card{padding-left:18px!important;padding-right:18px!important}
  .btn,.home-btn,.secure-btn{width:100%;white-space:normal;text-align:center}
  .table-card{overflow-x:auto!important;-webkit-overflow-scrolling:touch}
}

/* Grands écrans : le contenu reste contenu et les photos de héros gardent leur ratio. */
@media (min-width:1101px){
  .home-site .home-hero-visual>img{height:auto!important;max-height:none!important;object-fit:contain!important;object-position:center!important}
  .home-site .home-hero-visual{overflow:visible!important}
}