:root{
  --mat-gomme:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4 8h12M28 8h16M10 20h10M30 20h8M2 32h14M26 32h18M12 44h8M32 44h10'/%3E%3Cpath d='M20 4l4 8M40 14l-4 8M18 28l4 8M42 38l-4 8' stroke-width='1.6'/%3E%3C/g%3E%3C/svg%3E");
  --mat-carbone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Crect width='8' height='8' fill='%23000' opacity='.9'/%3E%3Crect x='8' y='8' width='8' height='8' fill='%23000' opacity='.9'/%3E%3Crect x='8' width='8' height='8' fill='%23000' opacity='.35'/%3E%3Crect y='8' width='8' height='8' fill='%23000' opacity='.35'/%3E%3C/svg%3E");
  --mat-alu:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='6' viewBox='0 0 120 6'%3E%3Cg stroke='%23000' stroke-width='.7'%3E%3Cpath d='M0 1h120' opacity='.9'/%3E%3Cpath d='M0 2.5h120' opacity='.3'/%3E%3Cpath d='M0 4h120' opacity='.6'/%3E%3Cpath d='M0 5.5h120' opacity='.2'/%3E%3C/g%3E%3C/svg%3E");
  --mat-kraft:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.045 .12' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
  --mat-hachure:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M-2 14L14-2M-2 2L2-2M10 14l4-4' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E");
  --mat-opacite:.055;
}
[data-ambiance="sombre"]{ --mat-opacite:.10 }

[data-matiere]{position:relative; isolation:isolate}
[data-matiere]::before{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:-1; opacity:var(--mat-opacite);
  background-repeat:repeat; mix-blend-mode:multiply}
[data-ambiance="sombre"] [data-matiere]::before{mix-blend-mode:screen; filter:invert(1)}
[data-matiere="gomme"]::before{background-image:var(--mat-gomme); background-size:48px 48px}
[data-matiere="carbone"]::before{background-image:var(--mat-carbone); background-size:16px 16px; opacity:calc(var(--mat-opacite) * .8)}
[data-matiere="alu"]::before{background-image:var(--mat-alu); background-size:120px 6px; opacity:calc(var(--mat-opacite) * 1.4)}
[data-matiere="kraft"]::before{background-image:var(--mat-kraft); background-size:120px 120px; opacity:calc(var(--mat-opacite) * 1.8)}
[data-matiere="hachure"]::before{background-image:var(--mat-hachure); background-size:12px 12px}

.panneau[data-matiere]::after{content:""; position:absolute; left:18px; right:18px; top:0; height:3px; border-radius:0 0 3px 3px; pointer-events:none;
  background:linear-gradient(90deg, var(--mat-teinte, var(--or)), transparent 70%)}
.panneau[data-matiere="gomme"]{--mat-teinte:var(--texte)}
.panneau[data-matiere="carbone"]{--mat-teinte:#F28C28}
.panneau[data-matiere="alu"]{--mat-teinte:var(--info)}
.panneau[data-matiere="kraft"]{--mat-teinte:#B07A3B}
.panneau[data-matiere="hachure"]{--mat-teinte:var(--texte-3)}

.mat-echantillons{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px}
.mat-echantillon{border-radius:14px; box-shadow:0 0 0 1px var(--filet); padding:14px; min-height:110px; display:flex; flex-direction:column; justify-content:flex-end; gap:2px; --mat-opacite:.16}
[data-ambiance="sombre"] .mat-echantillon{--mat-opacite:.22}
.mat-echantillon b{font-size:13px} .mat-echantillon span{font-size:11px; color:var(--texte-3)}

.emo.tourne svg{animation:emo-tourne 2.4s linear infinite; transform-origin:50% 50%}
.emo.charge svg{animation:emo-charge 1.8s ease-in-out infinite}
.emo.pulse svg{animation:emo-pulse 1.6s ease-in-out infinite}
.emo.tremble svg{animation:emo-tremble .5s ease-in-out 3}
.emo.roule svg{animation:emo-roule 1.4s cubic-bezier(.2,.7,.3,1) infinite}
.emo.cligne svg{animation:emo-cligne 4s ease-in-out infinite}
@keyframes emo-tourne{to{transform:rotate(360deg)}}
@keyframes emo-charge{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes emo-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
@keyframes emo-tremble{0%,100%{transform:translateX(0)}25%{transform:translateX(-2px) rotate(-6deg)}75%{transform:translateX(2px) rotate(6deg)}}
@keyframes emo-roule{0%{transform:translateX(-3px)}50%{transform:translateX(3px)}100%{transform:translateX(-3px)}}
@keyframes emo-cligne{0%,92%,100%{transform:scaleY(1)}96%{transform:scaleY(.15)}}
.emo.grand{width:34px; height:34px} .emo.geant{width:56px; height:56px}
@media (prefers-reduced-motion:reduce){ .emo svg{animation:none !important} }

.bouton{position:relative; overflow:hidden; letter-spacing:.01em; transition:background var(--t-rapide), box-shadow var(--t-rapide), color var(--t-rapide), transform .12s var(--courbe)}
.bouton::after{content:""; position:absolute; inset:0; background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%); transform:translateX(-120%); pointer-events:none}
.bouton:hover::after{animation:btn-balaie .7s var(--courbe) forwards}
@keyframes btn-balaie{to{transform:translateX(120%)}}
.bouton:active{transform:translateY(1px) scale(.985)}
.bouton::before{content:""; position:absolute; left:50%; top:50%; width:0; height:0; border-radius:50%; background:currentColor; opacity:0; transform:translate(-50%,-50%); pointer-events:none}
.bouton:active::before{animation:btn-onde .5s ease-out}
@keyframes btn-onde{0%{width:0; height:0; opacity:.22}100%{width:240%; height:600%; opacity:0}}
.bouton svg{width:15px; height:15px; flex:none; stroke-width:2}
.bouton.or svg,.bouton.ok svg{filter:drop-shadow(0 1px 0 rgba(0,0,0,.25))}
.bouton.or{box-shadow:var(--fil-lumiere), 0 1px 2px rgba(15,23,42,.24), 0 0 0 0 color-mix(in srgb, var(--or) 40%, transparent)}
.bouton.or:hover{box-shadow:var(--fil-lumiere), 0 6px 16px -6px rgba(11,37,69,.55), 0 0 0 3px color-mix(in srgb, var(--or) 22%, transparent)}
.bouton.fil{box-shadow:inset 0 0 0 1.5px var(--filet-fort)}
.bouton.fil:hover{box-shadow:inset 0 0 0 1.5px var(--or), 0 0 0 3px color-mix(in srgb, var(--or) 14%, transparent); color:var(--or)}
.bouton.doux:hover{background:color-mix(in srgb, var(--or) 10%, var(--verre-fort))}
.bouton.icone{padding:0; width:34px}
.bouton.grand{height:42px; padding:0 18px; font-size:14px; border-radius:12px}
.bouton:disabled{opacity:.5; cursor:not-allowed; transform:none}
.bouton:disabled::after,.bouton:disabled::before{display:none}
@media (prefers-reduced-motion:reduce){ .bouton::after,.bouton::before{animation:none !important} }

h1,h2{letter-spacing:-.022em; font-weight:800}
.panneau > h2, .panneau > .entete h2, .vis-banniere h2{position:relative; display:block; width:max-content; max-width:100%; padding-bottom:2px}
.vis-banniere .etiquette{display:block; margin-bottom:2px}
.panneau > h2::after, .panneau > .entete h2::after, .vis-banniere h2::after{content:""; position:absolute; left:0; bottom:-3px; height:3px; width:28px; border-radius:3px;
  background:linear-gradient(90deg, var(--or), color-mix(in srgb, var(--or) 30%, transparent)); transform:scaleX(0); transform-origin:left; animation:titre-trait .6s var(--courbe) .15s forwards}
@keyframes titre-trait{to{transform:scaleX(1)}}
.etiquette{letter-spacing:.09em}
.valeur, .num, .indicateur .valeur{font-variant-numeric:tabular-nums lining-nums; font-feature-settings:"tnum" 1, "lnum" 1}
.indicateur .valeur{animation:chiffre-entre .5s var(--courbe) both}
@keyframes chiffre-entre{from{opacity:0; transform:translateY(6px); filter:blur(2px)}}
.plaque{font-variant-numeric:tabular-nums; letter-spacing:.12em}
@media (prefers-reduced-motion:reduce){ .panneau > h2::after, .panneau > .entete h2::after, .vis-banniere h2::after{animation:none; transform:none} .indicateur .valeur{animation:none} }