:root{--exemple-bg: rgba(226, 220, 201, .35);--exemple-border: #8f9b6b;--exemple-text: var(--text-dark);--exemple-title-color: #6b7852;--exemple-shadow: 0 4px 12px rgba(0, 0, 0, .08);--exemple-hover-shadow: 0 8px 20px rgba(0, 0, 0, .12);--exemple-code-bg: rgba(143, 155, 107, .15)}.dark{--exemple-bg: rgba(168, 181, 138, .25);--exemple-border: #a8b58a;--exemple-text: var(--text-light);--exemple-title-color: #a8b58a;--exemple-shadow: 0 4px 12px rgba(0, 0, 0, .08);--exemple-hover-shadow: 0 8px 20px rgba(0, 0, 0, .12);--exemple-code-bg: rgba(168, 181, 138, .15)}.section-card--exemple{margin:20px 0;display:flex;flex-direction:column;position:relative;transition:all .3s ease-in-out}.exemple-header{display:flex;align-items:center;margin-bottom:20px}.section-card--exemple .exemple-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--exemple-title-color);font-size:1.8rem;padding-right:10px}.section-card--exemple .exemple-icon svg{width:1em;height:1em;fill:currentColor;stroke:currentColor}.exemple-title{font-size:1.2rem;color:var(--exemple-title-color);font-weight:700;margin:0;text-transform:uppercase;font-family:var(--font-sans);letter-spacing:.5px}.section-card--exemple .section-text-content{color:var(--exemple-text);padding-left:14px;border-left:4px solid var(--exemple-border);font-family:var(--font-sans);transition:color .3s ease}.section-card--exemple .section-text-content p{margin-bottom:16px}@media(max-width:768px){.section-card--exemple{padding:18px 20px}.exemple-icon{font-size:1.5rem}.exemple-title{font-size:1.05rem}}ol{counter-reset:level1;list-style:none;padding-left:0;margin:1.25rem 0}ol>li{counter-increment:level1;padding-left:2.4rem;position:relative}ol>li:before{content:counter(level1) ".";position:absolute;left:0;font-weight:700;color:var(--exemple-border);font-size:1.05rem}ol ol{counter-reset:level2;margin-top:.6rem}ol ol>li{counter-increment:level2;margin-bottom:.6rem;padding-left:2.2rem;position:relative}ol ol>li:before{content:counter(level2,lower-alpha) ")";position:absolute;left:0;font-weight:600;color:var(--exemple-title-color);font-size:.95rem}ol ol ol{counter-reset:level3;margin-top:.4rem}ol ol ol>li{counter-increment:level3;margin-bottom:.4rem;padding-left:2rem;position:relative;font-size:.95em}ol ol ol>li:before{content:counter(level3,lower-roman) ".";position:absolute;left:0;font-style:italic;color:var(--exemple-border);opacity:.85}
