.cat-intro-material { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:clamp(24px,4vw,64px); align-items:start; padding-bottom:40px; }
.p-catalogue .cat-intro-material .cat-ess__head { padding-bottom:0; }
.mat-card { margin-top:54px; padding:24px; border:1px solid #dbe3e5; border-radius:14px; background:#fffdf8; box-shadow:0 12px 30px #1634430a; }
.mat-kicker { font-size:9px; text-transform:uppercase; letter-spacing:.16em; color:#087eb8; margin:0 0 8px; }
.mat-card h4 { font-size:18px; line-height:1.3; color:#1b303a; margin:0; }
.mat-scene { height:190px; position:relative; perspective:700px; }
.mat-layer { position:absolute; left:50%; width:150px; height:100px; margin-left:-75px; border-radius:10px; transform:rotateX(53deg) rotateZ(-32deg); display:flex; align-items:flex-end; padding:10px; font-size:11px; font-weight:700; box-sizing:border-box; transition:top .8s cubic-bezier(.22,1,.36,1),transform .8s; box-shadow:0 10px 16px #17344216; }
.mat-layer--1 { top:25px; z-index:3; background:linear-gradient(135deg,#eaf7fbba,#a8d4e1c9); border:1px solid #88b6c9; color:#20536a; }
.mat-layer--2 { top:58px; z-index:2; background:repeating-linear-gradient(135deg,#1183b3 0 18px,#35acd1 18px 36px); color:white; }
.mat-layer--3 { top:91px; z-index:1; background:repeating-linear-gradient(35deg,#303e43 0 2px,#3c4a4f 2px 4px); color:#fff; }
.mat-card:hover .mat-layer--1 { top:8px; transform:rotateX(53deg) rotateZ(-26deg); }
.mat-card:hover .mat-layer--3 { top:110px; }
.mat-card--chaussettes .mat-layer--1 { background:linear-gradient(130deg,#369cc4,#126483); border-radius:20px 8px 17px 9px; }
.mat-card--chaussettes .mat-layer--2 { background:#d8dcda; border:8px double #8d9698; border-radius:50%; width:64px; height:64px; margin-left:-32px; color:#33434a; }
.mat-card--chaussettes .mat-layer--3 { background:transparent; border:5px solid #34484d; border-radius:50%; color:#34484d; }
.mat-card ol { list-style:none; padding:0; margin:0; }
.mat-card li { padding:10px 0; border-top:1px solid #e7ecec; }
.mat-card li b { display:block; font-size:12px; color:#23424e; }
.mat-card li span { display:block; font-size:11px; line-height:1.6; color:#65767d; margin-top:3px; }
.mat-note { font-size:9px; line-height:1.5; color:#7d888d; margin:14px 0 0; }
@media(prefers-reduced-motion:no-preference) { .mat-scene { animation:mat-float 5s ease-in-out infinite; } }
@keyframes mat-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-5px); } }
@media(max-width:1000px) { .cat-intro-material { grid-template-columns:1fr; gap:0; } .mat-card { max-width:520px; margin-top:26px; } }
@media(prefers-reduced-motion:reduce) { .mat-layer { transition:none; } }
.mat-card { --spread:.35; }
.mat-scene { height:210px; }
.mat-card .mat-layer--1,.mat-card:hover .mat-layer--1 { top:calc(65px - var(--spread)*55px); }
.mat-card .mat-layer--2 { top:70px; }
.mat-card .mat-layer--3,.mat-card:hover .mat-layer--3 { top:calc(75px + var(--spread)*55px); }
.mat-layer { cursor:pointer; font-family:inherit; }
.mat-layer[aria-pressed=true] { outline:3px solid #24a8dc; outline-offset:5px; box-shadow:0 12px 30px #1884af40; }
.mat-card.has-selection .mat-layer[aria-pressed=false] { opacity:.45; }
.mat-select { display:block; width:100%; padding:0; text-align:left; background:transparent; border:0; color:#23424e; font:700 12px/1.6 inherit; font-size:12px; font-weight:700; cursor:pointer; }
.mat-select[aria-pressed=true] { color:#087eb8; }
.mat-card li { border-radius:5px; transition:background .3s,padding .3s; }
.mat-card li.is-selected { background:#e5f3f9; padding:10px; }
.mat-control { display:block; color:#637781; font-size:10px; margin:0 0 20px; }
.mat-control input { display:block; width:100%; margin-top:10px; accent-color:#087eb8; cursor:ew-resize; }
.mat-layer:focus-visible,.mat-select:focus-visible { outline:2px solid #087eb8; outline-offset:4px; }
@media(prefers-reduced-motion:reduce) { .mat-card li { transition:none; } }