/* ── ATI Group · Anwar Tunisie — mise en page « grossiste » ──
   Héros à mur de produits, familles, secteurs. Fichier externe (style-src 'self'). */

/* héros : texte à gauche, produits qui défilent à droite */
#hero.hero-ws{justify-content:flex-start;background:radial-gradient(90% 70% at 85% 25%,#15352a 0%,var(--noir) 62%)}
#hero.hero-ws .hero-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,4.5vw,72px);
  align-items:center;flex:1;padding-top:clamp(112px,15vh,160px);padding-bottom:clamp(28px,4vh,48px)}
.ws-anwar{width:clamp(170px,18vw,240px);height:auto;margin-bottom:clamp(18px,3vh,30px)}
#hero.hero-ws .h-display{font-size:clamp(38px,4.9vw,76px);margin:22px 0}
#hero.hero-ws .lead{max-width:56ch}

.ws-wall{position:relative;height:min(68vh,620px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;overflow:hidden;
  -webkit-mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent)}
.ws-col{display:flex;flex-direction:column;animation:ws-up 46s linear infinite;will-change:transform}
.ws-col:nth-child(2){animation-name:ws-down;animation-duration:54s}
.ws-col:nth-child(3){animation-duration:60s}
.ws-wall:hover .ws-col{animation-play-state:paused}
@keyframes ws-up{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes ws-down{from{transform:translateY(-50%)}to{transform:translateY(0)}}
@keyframes ws-left{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ws-card{margin:0 0 14px;background:#FFFFFC;padding:8px 8px 10px;box-shadow:0 20px 44px rgba(0,0,0,.38)}
.ws-card img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.ws-card figcaption{padding:8px 2px 0;display:flex;flex-direction:column;gap:2px}
.ws-card b{font:400 12px/1.3 var(--sans);color:var(--ink)}
.ws-card span{font:400 8.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--em)}

/* familles de produits en pied de héros */
.ws-fam{position:relative;border-top:1px solid rgba(242,241,234,.14)}
.ws-fam-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
.ws-fam a{display:flex;flex-direction:column;gap:4px;min-height:44px;padding:18px 16px 20px;border-left:1px solid rgba(242,241,234,.12);color:var(--ivoire);transition:background .3s}
.ws-fam a:first-child{border-left:0;padding-left:0}
.ws-fam a:hover b{color:var(--mint-lt)}
.ws-fam b{font:400 14px/1.3 var(--sans);transition:color .3s}
.ws-fam span{font:400 9.5px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#83917F}

/* secteurs */
.sect-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,24px)}
.sect{min-width:0;background:var(--card);border:1px solid var(--hair-soft);box-shadow:0 18px 44px rgba(15,31,24,.07);
  padding:clamp(22px,2.4vw,32px);display:flex;flex-direction:column;gap:12px}
.sect svg{width:44px;height:44px;fill:none;stroke:var(--em);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sect .who{font:500 9.5px var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--em)}
.sect h3{font:400 clamp(21px,1.9vw,26px)/1.2 var(--disp);color:var(--ink)}
.sect p{font:300 14px/1.7 var(--sans);color:var(--ink-2);flex:1}
.sect .chips{margin-top:0}
.sect .link-line{align-self:flex-start;margin-top:6px}
.sect-band{margin-top:clamp(20px,2.6vw,34px);display:flex;flex-wrap:wrap;gap:18px 30px;align-items:center;justify-content:space-between;
  background:var(--noir);color:var(--ivoire);padding:clamp(24px,3vw,40px)}
.sect-band p{font:300 clamp(20px,2.1vw,28px)/1.35 var(--disp);max-width:52ch}
.sect-band p em{font-style:italic;color:var(--mint-lt)}
.sect-band .btn{color:var(--ivoire);border-color:rgba(242,241,234,.35)}
.acts{display:flex;flex-wrap:wrap;gap:12px}

@media (max-width:1120px){
  .sect-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ws-fam-in{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ws-fam a:nth-child(3n+1){border-left:0;padding-left:0}
  .ws-fam a:nth-child(n+4){border-top:1px solid rgba(242,241,234,.12)}
}
@media (max-width:860px){
  #hero.hero-ws .hero-in{grid-template-columns:minmax(0,1fr);padding-top:calc(var(--nav-h,78px) + 36px)}
  .ws-wall{height:auto;display:block;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
  .ws-col{flex-direction:row;width:max-content;animation:ws-left 48s linear infinite}
  .ws-col:nth-child(n+2){display:none}
  .ws-card{width:clamp(130px,34vw,180px);margin:0 12px 0 0}
}
@media (max-width:600px){
  #hero.hero-ws .h-display{font-size:clamp(32px,9.6vw,46px)}
  .sect-grid{grid-template-columns:minmax(0,1fr)}
  .ws-fam-in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ws-fam a,.ws-fam a:nth-child(3n+1){border-left:0;padding-left:0;padding-right:10px}
  .ws-fam a:nth-child(n+3){border-top:1px solid rgba(242,241,234,.12)}
  .acts,.acts .btn{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.ws-col{animation:none}}

/* logos au A vert : ATI Group et Anwar Tunisie */
.foot img.ft-logo{display:block;width:min(190px,60%);height:auto;margin:0 0 18px}
.foot img.ft-logo+img.ft-logo{width:min(170px,55%)}
.mz-logo{display:block;width:min(200px,64%);height:auto;margin-bottom:14px}

/* bande Comelit sur fond sombre : le logo ATI–Comelit garde son A vert */
#comelit{background:radial-gradient(80% 90% at 90% 0%,#15352a 0%,var(--noir) 60%)}
#comelit .cm li{border-bottom-color:rgba(242,241,234,.14)}
#comelit .clogo{height:auto;width:min(420px,100%)}