/* Page d'explication de la démo « pâtisserie » */
@font-face{font-family:"Fredoka";src:url(/fonts/fredoka-600.woff2) format("woff2");font-weight:500 700;font-display:swap}
@font-face{font-family:"Space Mono";src:url(/fonts/space-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
:root{--ink:#2B2433;--cream:#FFF4EA;--paper:#FFFDF8;--pistache:#3E7D5C;--pistache-l:#CDE8D6;--rose:#F6C9D8;--framboise:#D6336C;--abricot:#FFB648;--muted:#6C6274}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--ink:#F4EEF6;--cream:#1E1A22;--paper:#26212B;--pistache-l:#23402F;--rose:#4A2433;--muted:#B9AEC0}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font:400 17px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:inherit}
.ex-wrap{max-width:980px;margin:0 auto;padding:0 20px}
.ex-strip{background:#2B2433;color:#FFF4EA;font:400 12px/1.5 "Space Mono",monospace;text-align:center;padding:7px 14px}
.ex-strip strong{letter-spacing:.08em;text-transform:uppercase;margin-right:6px}
.ex-strip a{color:#FFF4EA;margin-left:6px}
h1,h2{font-family:"Fredoka",system-ui,sans-serif;font-weight:600;line-height:1.08;margin:0 0 14px;text-wrap:balance}
h1{font-size:clamp(2.1rem,6vw,3.6rem)}
h2{font-size:clamp(1.5rem,3.6vw,2.1rem)}
.ex-hero{padding:56px 0 48px;background:radial-gradient(120% 90% at 100% 0%,var(--rose) 0,transparent 55%),radial-gradient(90% 80% at 0% 100%,var(--pistache-l) 0,transparent 60%)}
.ex-logo{display:block;margin-bottom:18px}
.ex-kicker{font:400 13px "Space Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--framboise);margin:0 0 10px}
.ex-lead{font-size:clamp(1.05rem,2.4vw,1.25rem);max-width:60ch;margin:0 0 26px;color:var(--ink)}
.ex-ctas{display:flex;gap:12px;flex-wrap:wrap}
.ex-btn{display:inline-flex;align-items:center;min-height:48px;padding:0 22px;border-radius:999px;border:2px solid var(--ink);background:var(--paper);color:var(--ink);text-decoration:none;font:600 16px "Fredoka",system-ui,sans-serif;box-shadow:0 4px 0 var(--ink);transition:transform .15s,box-shadow .15s}
.ex-btn:hover{transform:translateY(2px);box-shadow:0 2px 0 var(--ink)}
.ex-btn-main{background:var(--pistache);color:#fff}
.ex-pass{margin:18px 0 0;font-size:15px;color:var(--muted)}
.ex-pass code{font:400 14px "Space Mono",monospace;background:var(--paper);border:1px solid var(--muted);border-radius:6px;padding:2px 8px;color:var(--ink)}
.ex-section{padding:48px 20px}
.ex-steps{margin:0;padding:0;list-style:none;counter-reset:s;display:grid;gap:12px}
.ex-steps li{counter-increment:s;background:var(--paper);border:2px solid var(--ink);border-radius:16px;padding:14px 16px 14px 60px;position:relative}
.ex-steps li::before{content:counter(s);position:absolute;left:14px;top:12px;width:32px;height:32px;border-radius:50%;background:var(--abricot);color:#2B2433;display:grid;place-items:center;font:600 16px "Fredoka",sans-serif}
.ex-band{background:var(--paper);border-block:2px solid var(--ink);padding:48px 0}
.ex-grid{display:grid;gap:32px}
@media (min-width:760px){.ex-grid{grid-template-columns:1fr 1fr}}
.ex-list{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.ex-list li{padding-left:28px;position:relative}
.ex-list li::before{content:"";position:absolute;left:4px;top:.55em;width:12px;height:12px;border-radius:50%;background:var(--pistache)}
.ex-note{font-size:15px;color:var(--muted)}
.ex-link{font:inherit;color:var(--framboise);background:none;border:0;padding:0;text-decoration:underline;cursor:pointer}
.ex-foot{background:#2B2433;color:#FFF4EA;padding:28px 0;font-size:15px}
.ex-foot p{margin:4px 0}
.ex-legal{padding:40px 20px 60px}
.ex-legal h1{font-size:2rem}.ex-legal h2{font-size:1.3rem;margin-top:26px}
:focus-visible{outline:3px solid var(--framboise);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.ex-btn{transition:none}}