/* Page Matériel V4 — bannière noire et rouge + grille 3×3 */
.page-hero{
  min-height:500px!important;
  display:flex!important;
  align-items:center!important;
  overflow:hidden!important;
  isolation:isolate!important;
  background:
    linear-gradient(90deg,
      rgba(5,8,11,.99) 0%,
      rgba(5,8,11,.98) 34%,
      rgba(5,8,11,.91) 49%,
      rgba(5,8,11,.57) 68%,
      rgba(5,8,11,.27) 84%,
      rgba(5,8,11,.48) 100%),
    url("assets/material-hero-v4/materiel-professionnel-hero-v4.webp") center right/cover no-repeat!important;
}
.page-hero::before{
  z-index:1!important;
  background:
    linear-gradient(118deg,transparent 0 77%,rgba(211,21,32,.16) 77% 79%,transparent 79%),
    linear-gradient(118deg,transparent 0 89%,rgba(211,21,32,.10) 89% 91%,transparent 91%)!important;
}
.page-hero::after{
  z-index:1!important;
  right:-95px!important;
  top:-70px!important;
  width:210px!important;
  height:710px!important;
  opacity:.22!important;
  background:linear-gradient(180deg,#e11926,#810912)!important;
}
.page-hero>.wrap{
  z-index:2!important;
  width:min(92%,1200px)!important;
}
.page-hero h1{
  max-width:880px!important;
  text-shadow:0 4px 24px rgba(0,0,0,.55)!important;
}
.page-hero .lead{
  max-width:790px!important;
  text-shadow:0 2px 12px rgba(0,0,0,.75)!important;
}
.sr-only{
  position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;
}
.pro-material{
  padding:58px 0 26px!important;
  background:#f6f7f8!important;
}
.pro-wrap{
  width:min(94%,1480px)!important;
  max-width:1480px!important;
}
.pro-heading{
  max-width:980px!important;
  margin:0 0 34px!important;
}
.pro-heading .eyebrow{
  display:inline-block!important;
  margin-bottom:14px!important;
  color:#d31520!important;
  font-size:12px!important;
  font-weight:900!important;
  letter-spacing:.14em!important;
}
.pro-heading h2{
  margin:0 0 15px!important;
  color:#11151a!important;
  font-size:clamp(34px,4vw,52px)!important;
  line-height:1.08!important;
}
.pro-heading .section-accent{
  width:60px!important;
  height:4px!important;
  margin:0 0 17px!important;
  border-radius:4px!important;
  background:#d31520!important;
}
.pro-heading p{
  max-width:900px!important;
  margin:0!important;
  color:#3f474e!important;
  font-size:15px!important;
  line-height:1.7!important;
}
.pro-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:22px!important;
  align-items:stretch!important;
}
.pro-card{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  min-width:0!important;
  min-height:0!important;
  overflow:hidden!important;
  border:1px solid #e7eaed!important;
  border-radius:16px!important;
  background:#fff!important;
  box-shadow:0 7px 24px rgba(25,31,38,.055)!important;
  transition:transform .2s ease,box-shadow .2s ease!important;
}
.pro-card:hover{
  transform:translateY(-3px)!important;
  box-shadow:0 14px 34px rgba(25,31,38,.09)!important;
}
.pro-card::after{
  content:""!important;
  position:absolute!important;
  top:0!important;
  right:0!important;
  width:47px!important;
  height:47px!important;
  background:linear-gradient(135deg,transparent 49%,#d31520 50%)!important;
  pointer-events:none!important;
}
.pro-icon{
  display:grid!important;
  place-items:center!important;
  flex:0 0 auto!important;
  background:linear-gradient(145deg,#e11926,#b90e17)!important;
  color:#fff!important;
  font-weight:900!important;
  box-shadow:0 8px 18px rgba(211,21,32,.2)!important;
}
.pro-card--feature .pro-card-head{
  display:block!important;
  min-height:176px!important;
  padding:18px 20px 8px!important;
}
.pro-card--feature .pro-icon{
  width:45px!important;
  height:45px!important;
  margin-bottom:18px!important;
  border-radius:9px!important;
  font-size:21px!important;
}
.pro-card--feature h3{
  margin:0 22px 11px 0!important;
  color:#11151a!important;
  font-size:clamp(17px,1.25vw,21px)!important;
  font-weight:800!important;
  letter-spacing:-.2px!important;
  line-height:1.15!important;
  text-transform:none!important;
}
.pro-card--feature p{
  max-width:350px!important;
  margin:0!important;
  color:#2f363c!important;
  font-size:clamp(12px,.92vw,13px)!important;
  line-height:1.65!important;
}
.pro-photo{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  border:0!important;
  background:#fff!important;
}
.pro-photo>img{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  height:100%!important;
  max-height:100%!important;
  padding:0!important;
  object-fit:contain!important;
  object-position:center!important;
  transform:none!important;
}
.pro-card--feature .pro-photo{
  position:relative!important;
  height:clamp(245px,24vw,360px)!important;
  margin-top:auto!important;
  padding:10px 22px 24px!important;
}
.pro-card--feature .pro-photo>img{
  filter:drop-shadow(0 11px 10px rgba(18,23,29,.09))!important;
}
.pro-photo--guarantee>img{
  position:relative!important;
  z-index:1!important;
  padding:4px 18px 0!important;
}
.pro-guarantee-badge{
  position:absolute!important;
  right:25px!important;
  bottom:26px!important;
  z-index:3!important;
  width:66px!important;
  height:76px!important;
  display:block!important;
  background:url("assets/materials/garantie-shield.svg") center/contain no-repeat!important;
  filter:drop-shadow(0 6px 7px rgba(32,37,43,.25))!important;
}
.pro-card--catalog .pro-card-head{
  order:1!important;
  display:grid!important;
  grid-template-columns:46px minmax(0,1fr)!important;
  gap:13px!important;
  min-height:76px!important;
  padding:16px 19px 5px!important;
}
.pro-card--catalog .pro-icon{
  width:42px!important;
  height:42px!important;
  border-radius:9px!important;
  font-size:20px!important;
}
.pro-card--catalog h3{
  margin:2px 22px 3px 0!important;
  color:#d31520!important;
  font-size:clamp(15px,1.2vw,19px)!important;
  font-weight:900!important;
  line-height:1.08!important;
  text-transform:uppercase!important;
}
.pro-card--catalog p{
  margin:0!important;
  color:#252b30!important;
  font-size:11px!important;
  line-height:1.35!important;
}
.pro-card--catalog .pro-list{
  order:2!important;
  display:grid!important;
  gap:7px!important;
  margin:0!important;
  padding:9px 20px 3px!important;
  list-style:none!important;
}
.pro-card--catalog .pro-list li{
  position:relative!important;
  margin:0!important;
  padding-left:18px!important;
  color:#242a2f!important;
  font-size:11.5px!important;
  line-height:1.35!important;
}
.pro-card--catalog .pro-list li::before{
  content:"⊙"!important;
  position:absolute!important;
  top:-1px!important;
  left:0!important;
  color:#ed1522!important;
  font-size:13px!important;
  font-weight:900!important;
}
.pro-card--catalog .pro-photo{
  order:3!important;
  height:clamp(190px,19vw,286px)!important;
  margin-top:auto!important;
  padding:8px 20px 2px!important;
}
.pro-card--catalog .pro-photo>img{
  filter:drop-shadow(0 12px 10px rgba(18,23,29,.09))!important;
}
.pro-logo-strip,
.pro-logo-strip--wide,
.pro-logo-strip--ups{
  order:4!important;
  min-height:63px!important;
  display:flex!important;
  grid-template-columns:none!important;
  align-items:center!important;
  justify-content:space-around!important;
  gap:14px!important;
  margin:0!important;
  padding:6px 20px 15px!important;
  border:0!important;
  background:#fff!important;
}
.pro-brand-logo{
  min-width:0!important;
  min-height:0!important;
  flex:1 1 0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.pro-brand-logo img{
  display:block!important;
  width:auto!important;
  max-width:112px!important;
  height:34px!important;
  max-height:34px!important;
  padding:0!important;
  object-fit:contain!important;
  transform:none!important;
}
.pro-logo-strip--wide{
  gap:9px!important;
  padding-inline:14px!important;
}
.pro-logo-strip--wide .pro-brand-logo img{
  max-width:75px!important;
  height:29px!important;
  max-height:29px!important;
}
.pro-brand-logo--stacked{
  flex-direction:column!important;
  gap:1px!important;
}
.pro-logo-strip--wide .pro-brand-logo--stacked img{
  width:27px!important;
  height:23px!important;
}
.pro-brand-logo--stacked b{
  color:#191919!important;
  font-size:7px!important;
  line-height:1!important;
}
.pro-logo-strip--ups{
  gap:10px!important;
  padding-inline:14px!important;
}
.pro-logo-strip--ups .pro-brand-logo img{
  max-width:85px!important;
  height:29px!important;
  max-height:29px!important;
}
.pro-brand-word{
  font-size:19px!important;
  font-weight:900!important;
  line-height:1!important;
  white-space:nowrap!important;
}
.pro-brand-word--thinkpad{
  color:#111!important;
  font-family:Arial,sans-serif!important;
  letter-spacing:-1.3px!important;
}
.pro-brand-word--thinkpad span{color:#e11926!important}
.pro-brand-word--nitram{
  color:#d71920!important;
  font-size:17px!important;
  font-style:italic!important;
  letter-spacing:.4px!important;
}
.pro-benefits{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  margin-top:22px!important;
  overflow:hidden!important;
  border:1px solid #e5e8eb!important;
  border-radius:14px!important;
  background:#fff!important;
  box-shadow:0 6px 21px rgba(25,31,38,.045)!important;
}
.pro-benefits>div{
  min-height:88px!important;
  display:grid!important;
  grid-template-columns:38px 1fr!important;
  grid-template-areas:"i t" "i s"!important;
  gap:2px 10px!important;
  align-content:center!important;
  padding:14px 17px!important;
  border-right:1px solid #e6e9eb!important;
}
.pro-benefits>div:last-child{border-right:0!important}
.pro-benefits span{grid-area:i!important;align-self:center!important;color:#d31520!important;font-size:27px!important}
.pro-benefits strong{grid-area:t!important;align-self:end!important;color:#11151a!important;font-size:11px!important}
.pro-benefits small{grid-area:s!important;align-self:start!important;color:#697078!important;font-size:9px!important;line-height:1.35!important}
.pro-local{
  padding:0 0 60px!important;
  background:#f6f7f8!important;
}
.pro-local>.wrap{
  position:relative!important;
  padding:42px 36px 34px!important;
  border:1px solid #e7eaed!important;
  border-radius:15px!important;
  background:#fff!important;
  box-shadow:0 7px 24px rgba(25,31,38,.04)!important;
}
.pro-local>.wrap::before{
  content:""!important;position:absolute!important;top:25px!important;left:36px!important;
  width:46px!important;height:4px!important;border-radius:4px!important;background:#d31520!important;
}
.pro-local .eyebrow,.pro-local h2{display:none!important}
.pro-local .heading{max-width:1050px!important;margin:0!important}
.pro-local .heading p{font-size:14px!important;line-height:1.8!important}
.pro-local .actions{margin-top:20px!important}
@media(max-width:900px){
  .pro-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .pro-benefits{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .pro-benefits>div{border-right:1px solid #e6e9eb!important;border-bottom:1px solid #e6e9eb!important}
  .pro-benefits>div:nth-child(even){border-right:0!important}
}
@media(max-width:640px){
  .page-hero{
    min-height:auto!important;
    background-position:68% center!important;
  }
  .page-hero::after{opacity:.13!important}
  .pro-material{padding:42px 0 20px!important}
  .pro-wrap{width:min(92%,1480px)!important}
  .pro-heading{margin-bottom:27px!important}
  .pro-heading h2{font-size:32px!important}
  .pro-heading p{font-size:14px!important}
  .pro-grid{grid-template-columns:1fr!important;gap:17px!important}
  .pro-card--feature .pro-photo{height:300px!important}
  .pro-card--catalog .pro-photo{height:230px!important}
  .pro-card--catalog h3{font-size:16px!important}
  .pro-benefits{grid-template-columns:1fr!important}
  .pro-benefits>div{border-right:0!important;border-bottom:1px solid #e6e9eb!important}
  .pro-benefits>div:last-child{border-bottom:0!important}
  .pro-local>.wrap{padding:40px 24px 28px!important}
  .pro-local>.wrap::before{left:24px!important}
}