:root{--papier:#f6f3ec;--encre:#161310;--trait:rgba(22,19,16,.14);--ja:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif}
*{box-sizing:border-box}
body{margin:0;background:var(--papier);color:var(--encre);font-family:var(--ja);font-size:16px;line-height:1.9;letter-spacing:.04em;-webkit-font-smoothing:antialiased}
a{color:inherit}
.barre{display:flex;justify-content:space-between;align-items:center;padding:1rem 16px;max-width:1080px;margin:0 auto}
.barre .k{font-size:1.15rem;letter-spacing:.3em;text-decoration:none}
.barre nav a{margin-left:1.2rem;text-decoration:none;border-bottom:1px solid var(--trait)}
main{max-width:1080px;margin:0 auto;padding:0 16px 4rem}
h1{font-size:clamp(1.6rem,4vw,2.4rem);font-weight:400;letter-spacing:.2em;margin:2rem 0 .4rem}
h2{font-size:1.05rem;font-weight:400;letter-spacing:.2em;border-bottom:1px solid var(--encre);padding-bottom:.4rem;margin:3.4rem 0 1.4rem}
.planche{max-width:1080px;margin:0 auto}
.planche a.grand{display:block;cursor:zoom-in}
.planche img{width:100%;height:auto;display:block}
.planche .texte{font-size:.85rem;line-height:1.8;margin:.8rem 0 0;user-select:text}
.planche .num{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 .6rem}
.planche .num span{font-size:1.1rem;letter-spacing:.2em}
.suite{display:flex;justify-content:space-between;max-width:1080px;margin:1.6rem auto 0}
.suite a{text-decoration:none;border-bottom:1px solid var(--trait)}
.vignettes{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1.6rem 1.2rem}
.vignettes a{text-decoration:none;display:block}
.vignettes img{width:100%;height:auto;display:block;border:1px solid var(--encre)}
.vignettes span{display:block;margin-top:.4rem}
footer{text-align:center;padding:2rem 16px 3rem;border-top:1px solid var(--trait)}
footer .liens{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.4rem;margin-bottom:1.4rem}
footer .liens a{text-decoration:none;border-bottom:1px solid var(--trait)}
footer p{margin:.4rem 0 0}
.outil{display:block;max-width:240px;margin:3rem auto 0;text-decoration:none;text-align:center}
.outil img{width:100%;height:auto;display:block;border:1px solid var(--trait)}
.outil span{display:block;margin-top:.4rem;letter-spacing:.2em}
.tete{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.macaron{flex:0 0 auto;width:6rem;height:6rem;border-radius:50%;background:#b8372a;color:#fff;text-decoration:none;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.3;letter-spacing:.06em;transform:rotate(-8deg);box-shadow:0 6px 16px -8px rgba(22,19,16,.6);margin-top:1.4rem;transition:transform .3s}
.macaron:hover{transform:rotate(-8deg) scale(1.06)}
.macaron span{font-size:.8rem}
.macaron b{font-weight:400;font-size:.95rem;letter-spacing:.02em}
.question{display:flex;justify-content:center;align-items:flex-end;gap:1.2rem;margin:4rem 0 0}
.question .q{font-size:1.2rem;letter-spacing:.12em;text-decoration:none;border-bottom:1px solid var(--encre);margin-bottom:1.2rem}
.question .q:hover{color:#b8372a;border-color:#b8372a}
.chien{display:block;flex:0 0 auto}
.chien .fig{display:block;position:relative;transition:transform .35s ease}
.chien img{display:block;height:150px;width:auto}
.chien:hover .fig{transform:translateY(-6px)}
.chien .queue{position:absolute;left:0;top:0;height:100%;width:auto;transform-origin:86% 88.5%;animation:remue .55s ease-in-out infinite alternate}
@keyframes remue{from{transform:rotate(-7deg)}to{transform:rotate(9deg)}}
@media (prefers-reduced-motion:reduce){.chien .queue{animation:none}}