/* ── ATI Group — couche responsive (téléphones, tablettes, PC) ──
   Chargée après le CSS interne. Fichier externe : les empreintes CSP
   des <style> internes restent valides. Reprend les règles d'ATI Electronics. */
:root{--nav-h:78px}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
section[id],header[id]{scroll-margin-top:calc(var(--nav-h) + 12px)}
html.menu-open{overflow:hidden}

/* les enfants de grilles/flex peuvent rétrécir : plus de débordement latéral */
.nav-in>*,.hero-in,.hero-foot>*,.maison>*,.cm>*,.house-grid>*,.gam>*,.duo>*,.foot>*,.vitrine>*{min-width:0}
.btn{max-width:100%}
.link-line,.duo .tel,.foot li a,.legal .wrap,.hp-card h3{overflow-wrap:anywhere}
.brand img,.burger{flex-shrink:0}
/* l'entrée des scènes glisse de 26 px : ne jamais créer de défilement latéral */
.stage3{overflow-x:clip}
.hf-logo,.cm-mark,#comelit .clogo,.foot img.ft-cm{max-width:100%}

/* tactile : cibles ≥ 44 px, pas de survol collant */
@media (pointer:coarse){
  .burger{width:44px;height:44px}
  .burger span:first-child{top:17px}.burger span:last-child{top:26px}
  .burger.x span:first-child,.burger.x span:last-child{top:21px}
  .brand{min-height:44px}
  .hs{width:44px;height:44px;margin:-22px}
  .env-tabs button,.vt-filter button,.hp-legend button{min-height:44px}
  .link-line,.duo .tel,.legal a{position:relative}
  .link-line::after,.duo .tel::after,.legal a::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:44px;transform:translateY(-50%)}
  .foot li{margin-bottom:0}
  .foot li a{display:inline-block;padding:12px 0}
}
@media (hover:none){
  .vt:hover{transform:none}
  .maison:hover figure img,.gam article:hover .gi img{transform:none}
}

/* menu burger jusqu'à 1 120 px (6 liens + CTA ne tiennent pas en ligne avant),
   défilant si l'écran est bas (téléphone à l'horizontale) */
@media (max-width:1120px){
  .nav-links{position:fixed;inset:0;background:var(--paper);flex-direction:column;align-items:flex-start;
    justify-content:flex-start;gap:8px;overflow-y:auto;overscroll-behavior:contain;z-index:440;
    padding:calc(var(--nav-h) + 16px) var(--pad) max(32px,env(safe-area-inset-bottom));
    transform:translateY(-102%);transition:transform .5s cubic-bezier(.7,0,.2,1)}
  .nav-links.open{transform:none}
  .nav-links>li{width:100%}
  .nav-links>li:first-child{margin-top:auto}
  .nav-links>li:last-child{margin-bottom:auto}
  .nav-links a{font-size:15px;letter-spacing:.22em;color:var(--ink)!important;padding:12px 0;min-height:48px;
    border-bottom:1px solid var(--hair-soft);display:block;width:100%;opacity:1}
  .burger{display:block}
  /* backdrop-filter enfermerait le menu plein écran dans la barre de 78 px */
  #nav.sc{backdrop-filter:none;-webkit-backdrop-filter:none;background:#F5F4EE}   /* opaque : sans flou, 3 % de transparence laissait voir le bandeau sombre */
}
@media (min-width:861px) and (max-width:1120px){
  .nav-cta{margin-left:auto}
  .burger{margin-left:0}
}

/* téléphones */
@media (max-width:600px){
  :root{--pad:clamp(16px,5vw,28px);--sp:clamp(56px,15vw,96px)}
  .grain{display:none}
  .nav-in{gap:12px}
  .hero-in{padding-top:calc(var(--nav-h) + 40px);padding-bottom:32px}
  .eyebrow{letter-spacing:.22em;line-height:1.6;gap:12px}
  .eyebrow::before{flex:0 0 28px;width:28px}
  #hero .h-display{font-size:clamp(34px,10.4vw,52px);margin:20px 0}
  .hero-in .lead{font-size:15.5px}
  .hero-cta{flex-direction:column;align-items:stretch;gap:12px}
  .hero-cta .btn{justify-content:center}
  .hero-foot{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-foot .tb{padding:14px 12px 16px 0}
  .hf-logo{height:auto;width:100%;max-width:150px}
  .maison,.maison.rev{grid-template-columns:44px minmax(0,1fr);gap:16px}
  .maison .num{font-size:34px}
  .cm li{flex-direction:column;gap:4px}
  .cm li b{text-align:left;white-space:normal}
  #comelit .clogo{height:auto;max-height:64px}
  .cm-mark{height:auto;max-height:46px}
  .env-tabs button{flex:1 1 auto;padding:13px 12px}
  .vitrine{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .vt img{height:clamp(92px,30vw,128px)}
  .gam{grid-template-columns:minmax(0,1fr)}
  .pricecta .btn{width:100%;justify-content:center}
  .foot{grid-template-columns:minmax(0,1fr)}
  .legal .wrap{padding-right:calc(var(--pad) + 60px)}
  .wa{width:48px;height:48px;right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom))}
}

/* très petits écrans (iPhone SE, 320 px) */
@media (max-width:360px){
  .bt span{letter-spacing:.3em}
  .eyebrow{font-size:9.5px;letter-spacing:.16em}
  .hero-foot{grid-template-columns:minmax(0,1fr)}
  .btn{padding:15px 16px;letter-spacing:.14em}
}

/* ══════════════════════════════════════════════════════════════════════
   Ajustements téléphone — 15/09/2026
   Sélecteurs préfixés par l'id : ati-ad.css est chargé APRÈS ce fichier,
   donc à spécificité égale il l'emporterait.
   ═════════════════════════════════════════════════════════════════════ */

/* 1 — « L'électronique, de la carte au bâtiment »
   Le tracé est dessiné avec preserveAspectRatio="xMidYMax slice" dans un
   cadre de 480–700 px de haut. Sur un écran de 393 px, un dessin 16:9
   forcé dans une boîte deux fois plus haute que large est rogné de part
   et d'autre : le bâtiment sortait de l'écran. Sur téléphone on le remet
   dans le flux — largeur pleine, hauteur automatique — donc le dessin
   entier, plus petit mais complet. Le titre reste au-dessus (order). */
@media (max-width:640px){
  #pont .pont-frame{
    min-height:0;
    display:flex;flex-direction:column;
    padding-bottom:clamp(20px,6vw,32px);
  }
  #pont .pont-copy{order:1;padding-block:clamp(36px,10vw,56px) clamp(12px,4vw,20px)}
  #pont .pont-frame svg{
    order:2;
    position:static;inset:auto;
    display:block;width:100%;height:auto;
    opacity:.92;                      /* .5 rendait le tracé illisible */
  }
  #pont .pont-shade{display:none}     /* plus de texte par-dessus le dessin */
}

/* 2 — Scènes « la maison ATI » : même principe. Le SVG occupe toute la
   largeur du téléphone au lieu d'être centré dans une boîte haute. */
@media (max-width:640px){
  #maison-ati .stage3,#maison-ati .env.env-on{height:auto}
  #maison-ati .house-stage{height:auto;padding:0}
  #maison-ati .house-stage svg{width:100%;height:auto;max-height:none}
}

/* 3 — Vitrine produits : liste écourtée + bouton « Montrer plus ».
   54 vignettes sur deux colonnes = 27 rangées à faire défiler. */
.vt-more-wrap{display:none}
@media (max-width:600px){
  .vitrine .vt.vt-clamped{display:none}
  .vt-more-wrap{display:block;margin-top:16px}
  .vt-more-wrap .btn{width:100%;justify-content:center}
}