/* 01N: only top-left test portion; the remaining 01M frame stays intact. */
@media(min-width:761px){
 html[data-poc="1"] .vt-pane-l .vt-grain::after{content:'';position:absolute;inset:0;pointer-events:none;
 background-image:url('/assets/01n/angle.webp'),url('/assets/01n/horizontal.webp'),url('/assets/01n/vertical.webp');
 background-position:0 0,var(--poc-size) 0,0 var(--poc-size);
 background-size:var(--poc-size) var(--poc-size),calc(100% - var(--poc-size)) var(--poc-size),var(--poc-size) calc(100% - var(--poc-size));
 background-repeat:no-repeat;
 clip-path:polygon(0 0,100% 0,100% var(--poc-size),var(--poc-size) var(--poc-size),var(--poc-size) 100%,0 100%);}
 html[data-poc="1"] .vt-pane-l .vt-glass{clip-path:polygon(calc(var(--poc-size) - var(--bl)) calc(var(--poc-size) - var(--head)),100% calc(var(--poc-size) - var(--head)),100% 100%,calc(var(--poc-size) - var(--bl)) 100%);}
}
/* 01N-b : même découpes, recalées sur les coloris de la maquette de référence (?matiere=cuivre) */
@media(min-width:761px){
 html[data-poc="1"][data-poc-mat="cuivre"] .vt-pane-l .vt-grain::after{background-image:url('/assets/01n/cuivre/angle.webp'),url('/assets/01n/cuivre/horizontal.webp'),url('/assets/01n/cuivre/vertical.webp');}
}
/* 01N-c : habillage de TOUT le cadre desktop (?poc=2, défaut). Les 4 bandes à onglet de 01M (.vt-grain i) sont repeintes par les découpes ; épaisseur uniforme S, demi-montants au centre. */
html{--poc-h:url('/assets/01n/horizontal.webp');--poc-v:url('/assets/01n/vertical.webp')}
html[data-poc-mat="cuivre"]{--poc-h:url('/assets/01n/cuivre/horizontal.webp');--poc-v:url('/assets/01n/cuivre/vertical.webp')}
@media(min-width:761px){
 html[data-poc="2"] .vt-pane-l{--head:var(--poc-size);--rail:var(--poc-size);--bl:var(--poc-size);--br:calc(var(--poc-size) * .6)}
 html[data-poc="2"] .vt-pane-r{--head:var(--poc-size);--rail:var(--poc-size);--br:var(--poc-size);--bl:calc(var(--poc-size) * .6)}
 html[data-poc="2"] .vt-kick{display:none}
 html[data-poc="2"] .vt-grain i{background-repeat:no-repeat;background-blend-mode:normal}
 html[data-poc="2"] .vt-grain i:nth-child(1){background-image:var(--poc-h);background-size:100% var(--head);background-position:0 0}
 html[data-poc="2"] .vt-grain i:nth-child(3){background-image:var(--poc-h);background-size:100% var(--rail);background-position:0 100%;filter:brightness(.86)}
 html[data-poc="2"] .vt-grain i:nth-child(4){background-image:var(--poc-v);background-size:var(--bl) 100%;background-position:0 0}
 html[data-poc="2"] .vt-grain i:nth-child(2){background-image:var(--poc-v);background-size:var(--br) 100%;background-position:100% 0;filter:brightness(.86)}
}
/* 01N-d : symétrie gauche/droite et traverses continues d'un volet à l'autre */
@media(min-width:761px){
 /* haut et bas : une seule traverse étalée sur les deux volets (volet gauche = 1re moitié, volet droit = 2e moitié) */
 html[data-poc="2"] .vt-pane-l .vt-grain i:nth-child(1){background-size:200% var(--head);background-position:0 0}
 html[data-poc="2"] .vt-pane-r .vt-grain i:nth-child(1){background-size:200% var(--head);background-position:100% 0}
 html[data-poc="2"] .vt-pane-l .vt-grain i:nth-child(3){background-size:200% var(--rail);background-position:0 100%}
 html[data-poc="2"] .vt-pane-r .vt-grain i:nth-child(3){background-size:200% var(--rail);background-position:100% 100%}
 /* montants : le montant de droite est le miroir de celui de gauche, même luminosité (reflet côté jonction au centre, côté extérieur aux bords) */
 html[data-poc="2"] .vt-grain i:nth-child(2){filter:none;transform:scaleX(-1);background-position:0 0;
  clip-path:polygon(0 0,var(--br) var(--head),var(--br) calc(100% - var(--rail)),0 100%)}
}
/* 01N-e : mobile (ouvrant unique) — le cadre périphérique fixe .vt-frame-m reçoit la même matière ; épaisseur M adaptée à l'écran */
@media(max-width:760px){
 html[data-poc="2"][data-ouvrant="unique"] .vt-frame-m{--poc-m:clamp(8px,2.6vw,12px);--head:var(--poc-m);--rail:var(--poc-m);--bl:var(--poc-m);--br:var(--poc-m)}
 html[data-poc="2"][data-ouvrant="unique"] .vt-frame-m i{background-repeat:no-repeat;background-blend-mode:normal}
 html[data-poc="2"][data-ouvrant="unique"] .vt-frame-m i:nth-child(1){background-image:var(--poc-h);background-size:100% var(--head);background-position:0 0}
 html[data-poc="2"][data-ouvrant="unique"] .vt-frame-m i:nth-child(3){background-image:var(--poc-h);background-size:100% var(--rail);background-position:0 100%;filter:brightness(.86)}
 html[data-poc="2"][data-ouvrant="unique"] .vt-frame-m i:nth-child(4){background-image:var(--poc-v);background-size:var(--bl) 100%;background-position:0 0}
 html[data-poc="2"][data-ouvrant="unique"] .vt-frame-m i:nth-child(2){background-image:var(--poc-v);background-size:var(--br) 100%;background-position:0 0;filter:none;transform:scaleX(-1);clip-path:polygon(0 0,var(--br) var(--head),var(--br) calc(100% - var(--rail)),0 100%)}
}