:root{
  --titre:"Bricolage Grotesque","Manrope","Inter",system-ui,sans-serif;
  --coupe:14px;
  --r-sig:14px 4px 14px 4px;
}

h1,h2,h3,.valeur,.indicateur .valeur,.vis-chiffre b,.pendule,.vis-banniere h2{font-family:var(--titre)}
h1{font-weight:800; letter-spacing:-.03em; font-stretch:92%}
h2{font-weight:700; letter-spacing:-.025em; font-stretch:95%}
h3{font-weight:700; letter-spacing:-.015em}
.indicateur .valeur,.vis-chiffre b{font-weight:800; letter-spacing:-.04em; font-stretch:88%}
.entree h1{font-size:clamp(2rem, 4.6vw, 3.1rem); line-height:1; font-stretch:88%}
.etiquette{font-family:var(--texte-police); font-weight:700}

.panneau:not(.plein):not(.serre),.vis-banniere,.role,.indicateur,.feuille{
  clip-path:polygon(0 0, calc(100% - var(--coupe)) 0, 100% var(--coupe), 100% 100%, 0 100%)}

.panneau:not(.plein):not(.serre):not([data-matiere])::before,.indicateur::before,.role::before{
  content:""; position:absolute; right:0; top:0; width:var(--coupe); height:var(--coupe); pointer-events:none; z-index:2;
  background:linear-gradient(225deg, transparent 50%, color-mix(in srgb, var(--texte) 12%, transparent) 50%)}
.role::before{z-index:3}
.panneau[data-matiere]::after{background:
  linear-gradient(225deg, transparent 50%, color-mix(in srgb, var(--texte) 12%, transparent) 50%) right top / var(--coupe) var(--coupe) no-repeat,
  linear-gradient(90deg, var(--mat-teinte, var(--or)), transparent 70%) left top / 100% 3px no-repeat;
  left:0; right:0; height:var(--coupe); border-radius:0}

.bouton{border-radius:var(--r-sig)}
.bouton.or{font-weight:700; letter-spacing:.02em}
.bouton.or::after{background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%)}
.bouton.icone{border-radius:12px 4px 12px 4px}
.bouton.grand{border-radius:18px 6px 18px 6px}
.puce{border-radius:10px 3px 10px 3px}
.badge{border-radius:9px 3px 9px 3px}
input:not([type="range"]):not([type="checkbox"]),select,textarea{border-radius:12px 4px 12px 4px}
.segments{border-radius:12px 4px 12px 4px}
.segments button[aria-selected="true"]{border-radius:10px 3px 10px 3px}
.avatar{border-radius:14px 5px 14px 5px}

.emo{width:24px; height:24px; border-radius:50%; background:color-mix(in srgb, currentColor 12%, transparent); padding:3px; box-sizing:border-box}
.emo svg{stroke-width:2}
.badge .emo{width:17px; height:17px; padding:2px; margin-right:4px !important}
.emo.grand{width:38px; height:38px; padding:5px} .emo.geant{width:60px; height:60px; padding:8px}
.toast .emo{width:26px; height:26px; padding:3px}

.rail{position:relative}
.rail .indic-rail{position:absolute; left:6px; width:4px; border-radius:0 4px 4px 0; background:var(--or); transition:top .35s var(--courbe), height .35s var(--courbe); pointer-events:none;
  box-shadow:0 0 12px color-mix(in srgb, var(--or) 60%, transparent)}

#contenu{position:relative}
#contenu.rideau::after{content:""; position:absolute; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg, var(--or), transparent); transform-origin:left; animation:rideau .7s var(--courbe) forwards; pointer-events:none; z-index:5}
@keyframes rideau{from{transform:scaleX(0); opacity:1} 80%{opacity:1} to{transform:scaleX(1); opacity:0}}

@media (prefers-reduced-motion:reduce){ .rail .indic-rail{transition:none} #contenu.rideau::after{animation:none; display:none} }