*{box-sizing:border-box}html{font-size:100%}body{margin:0;background:#f5f6f8;color:#17263c;font:1rem/1.6 system-ui,sans-serif}header{background:#172942;color:white;padding:1.4rem max(1rem,calc((100% - 950px)/2))}header a{color:white}main{max-width:950px;margin:auto;padding:1rem}h1{font-size:clamp(1.6rem,4vw,2.4rem);line-height:1.25}h2{font-size:1.3rem}.card{background:white;border:1px solid #d2d9df;border-radius:18px;padding:clamp(1rem,3vw,1.5rem);margin:1rem 0;min-width:0}.stack{display:grid;gap:.8rem}.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:1rem}label{display:block;margin:.5rem 0}input[type=checkbox],input[type=radio]{width:1.25rem;height:1.25rem;vertical-align:middle;accent-color:#176c59}button,select,input[type=text]{font:inherit;min-height:44px;border:2px solid #35638b;border-radius:9px;padding:.55rem .75rem;background:white;color:#17263c;max-width:100%}button{cursor:pointer}button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid #e59c22;outline-offset:3px}.actions{display:flex;flex-wrap:wrap;gap:.6rem}.result{border-left:5px solid #27755f;background:#eaf6f0;padding:1rem;margin-top:1rem;overflow-wrap:anywhere}.muted{color:#47586b}.demo{border:2px solid #8191a6;border-radius:14px;overflow:hidden;background:white;min-width:0}.browser{background:#e8ecf2;border-bottom:1px solid #b5bfcd;padding:.65rem 1rem;font-weight:600;overflow-wrap:anywhere}.page{padding:1.1rem;min-width:0}.page h3{margin-top:0}.site-nav{display:flex;flex-wrap:wrap;gap:.5rem}.site-nav span{background:#e8f1f0;padding:.35rem .7rem;border-radius:6px}.preview-box{border:1px solid #b6c0cb;padding:1rem;border-radius:8px}.issue{background:#fff2dc;border-left:5px solid #b27618;padding:.8rem}code{overflow-wrap:anywhere}details{margin-top:1rem}summary{cursor:pointer;font-weight:700}small{font-size:.9rem}@media(max-width:550px){main{padding:.65rem}.card{padding:1rem}.actions button{flex:1 1 100%}}
/* V0.2 : lisibilité mobile et zoom */
fieldset{min-width:0;border:1px solid #b7c5d1;border-radius:10px;padding:1rem}legend{font-weight:700;padding:0 .3rem}fieldset label{display:flex;align-items:flex-start;gap:.6rem;padding:.35rem 0;overflow-wrap:break-word}fieldset input[type=checkbox]{flex:0 0 1.25rem;margin-top:.3rem}select{width:100%}.preview-box{min-width:0;overflow-wrap:break-word;hyphens:auto}.page{overflow-wrap:break-word}.result{min-height:3rem}button:hover{background:#eaf2f6}@media(max-width:400px){.page{padding:.7rem}.preview-box{padding:.45rem;font-size:.9rem}.site-nav span{padding:.25rem .45rem}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}