/* Makyh : une seule encre, des planches d'herbier, un fil. */
:root{
  --paper:#F3F0E7; --paper-2:#E8E4D8; --ink:#1B2D23; --ink-2:#46564C; --line:#1B2D2333;
  --pad:clamp(16px,4vw,48px);
  --body:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",Verdana,sans-serif;
  --serif:"Spectral",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--paper:#111915;--paper-2:#18221D;--ink:#E7E3D6;--ink-2:#AEB8AF;--line:#E7E3D62e}
}
:root[data-theme="dark"]{--paper:#111915;--paper-2:#18221D;--ink:#E7E3D6;--ink-2:#AEB8AF;--line:#E7E3D62e}

*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:120px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;padding-bottom:env(safe-area-inset-bottom,0px)}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.serif,.display{font-family:var(--serif);font-weight:300}
.tag{font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
.tag i{font-family:var(--serif);text-transform:none;letter-spacing:0;font-size:15px}
.wrap{max-width:1440px;margin:0 auto;padding:0 var(--pad)}

/* La phrase-menu, collée en haut */
.top{position:sticky;top:0;z-index:10;background:var(--paper);border-bottom:1px solid var(--ink);padding-top:env(safe-area-inset-top,0px)}
.top .wrap{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 24px;padding-top:14px;padding-bottom:14px}
.top p{margin:0;flex:1 1 30em;font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(19px,2.2vw,30px);line-height:1.2}
.top p a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.16em}
.top p a:hover,.top p a[aria-current="page"]{text-decoration-thickness:2px}
.top .mark{font-style:normal;font-weight:400;letter-spacing:.2em;text-transform:uppercase;font-size:.62em;text-decoration:none !important;margin-right:.4em;vertical-align:.14em}
.top .write{white-space:nowrap}
.top .write[aria-current="page"]{text-decoration-thickness:2px}

/* Les gravures : une seule encre, qui suit la couleur du thème */
.plate{display:block;background:var(--ink);-webkit-mask:var(--src) center/contain no-repeat;mask:var(--src) center/contain no-repeat}
.sprig{display:inline-block;height:.9em;width:.8em;vertical-align:-.08em;margin:0 .32em;transform:scale(2);transform-origin:50% 72%;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
h1:hover .sprig{transform:scale(2.1) rotate(-6deg)}

/* Ouverture de page */
.hero{padding-top:clamp(40px,7vw,96px);padding-bottom:clamp(40px,6vw,80px);border-bottom:1px solid var(--line)}
.hero h1{font-family:var(--serif);font-weight:300;font-size:clamp(40px,6.4vw,96px);line-height:1.02;letter-spacing:-.015em;margin:.8em 0 .5em;max-width:15em}
.hero h1 em{font-style:italic}
.hero .lede{max-width:34em;color:var(--ink-2);font-size:20px;margin:0}
.hero .actions{margin-top:32px}

/* Sections en colonnes, comme une revue */
.row{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:var(--pad);padding-top:clamp(48px,7vw,96px);padding-bottom:clamp(48px,7vw,96px);border-bottom:1px solid var(--line)}
.row > .tag{padding-top:.6em;margin:0}
.row h2{font-family:var(--serif);font-size:clamp(32px,3.8vw,54px);line-height:1.08;margin:0 0 .6em;font-weight:300}
.row h2 em{font-style:italic}
.row p{color:var(--ink-2);margin:0 0 1em;max-width:38em}
.cols{columns:2 22em;column-gap:var(--pad);color:var(--ink-2)}
.cols p{margin:0 0 1em;break-inside:avoid}
.row.flush{border-bottom:0;padding-bottom:28px}

/* L'herbier : index des trois planches */
.herbier{border-top:1px solid var(--ink)}
.planche{display:grid;grid-template-columns:minmax(0,3fr) 150px minmax(0,4fr) minmax(0,5fr) 40px;gap:var(--pad);align-items:center;padding:22px 0;border-bottom:1px solid var(--line);text-decoration:none}
.planche .plate{height:170px;width:100%;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.planche:hover .plate{transform:translateY(-4px) rotate(-2deg) scale(1.04)}
.planche h3{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(34px,3.4vw,52px);line-height:1;margin:0 0 6px}
.planche .latin{font-family:var(--serif);font-style:italic;color:var(--ink-2);font-size:16px;margin:0}
.planche p.what{color:var(--ink-2);margin:0;font-size:17px;line-height:1.55}
.planche .arrow{font-size:26px;justify-self:end;transition:transform .3s}
.planche:hover .arrow{transform:translateX(6px)}
.planche:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.12em}

/* Situations (Accompagner) */
.sit q{display:block;font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(30px,3.4vw,48px);line-height:1.12;quotes:"« " " »";margin:0 0 28px;max-width:18em}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px var(--pad);margin:0 0 24px;padding-top:18px;border-top:1px solid var(--line)}
.facts dt{font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);margin-bottom:6px}
.facts dd{margin:0;color:var(--ink-2);font-size:17px}
.ask{margin:8px 0 0;padding-top:18px;border-top:1px dashed var(--line);font-family:var(--serif);font-style:italic;font-size:22px;line-height:1.35;color:var(--ink) !important;max-width:32em}

/* Étapes */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--pad);counter-reset:s}
.steps li{counter-increment:s;border-top:1px solid var(--ink);padding-top:14px}
.steps li::before{content:"0" counter(s);font-family:var(--mono);font-size:12.5px;color:var(--ink-2);display:block}
.steps h3{font-family:var(--serif);font-weight:300;font-style:italic;font-size:28px;line-height:1.15;margin:8px 0 10px}
.steps p{margin:0;font-size:17px}

/* Listes */
.refs{list-style:none;margin:0;padding:0;display:grid;gap:0;max-width:44em}
.refs li{border-top:1px solid var(--line);padding:16px 0;color:var(--ink-2)}
.refs strong{color:var(--ink);font-weight:700}

/* Boutons */
.actions{display:flex;flex-wrap:wrap;gap:14px}
.btn{display:inline-flex;align-items:center;gap:14px;min-height:52px;padding:0 26px;border:1px solid var(--ink);border-radius:999px;text-decoration:none;font:inherit;font-weight:700;color:var(--ink);background:transparent;cursor:pointer;transition:background .25s,color .25s}
.btn:hover,.btn.solid{background:var(--ink);color:var(--paper)}
.btn.solid:hover{background:transparent;color:var(--ink)}

/* Formulaire */
.form{display:grid;gap:20px;max-width:720px;margin-top:28px}
.form .pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.form label{display:grid;gap:8px;font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
.form input,.form textarea{font:inherit;font-family:var(--body);font-size:18px;text-transform:none;letter-spacing:0;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--ink);border-radius:0;padding:10px 0;min-height:48px;width:100%}
.form textarea{border:1px solid var(--ink);padding:12px 14px;resize:vertical}
.form .hint{margin:0;font-size:15px}
.form button{justify-self:start}

/* Mentions légales */
.legal dl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:0;max-width:52em;margin:32px 0 0}
.legal dt,.legal dd{border-top:1px solid var(--line);padding:14px 0;margin:0}
.legal dt{font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;padding-top:18px}
.legal dd{color:var(--ink-2)}
.note{border:1px dashed var(--ink);padding:16px 20px;max-width:44em;font-size:16px}

/* Fin de page */
.end{padding-top:clamp(56px,9vw,130px);padding-bottom:clamp(56px,9vw,130px)}
.end h2{font-family:var(--serif);font-size:clamp(40px,6vw,90px);line-height:1.02;margin:.35em 0 .4em;max-width:14em;font-weight:300}
.end p{color:var(--ink-2);max-width:32em;font-size:20px;margin:0 0 32px}

footer{border-top:1px solid var(--ink)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;padding-top:20px;padding-bottom:28px}
footer .links{display:flex;flex-wrap:wrap;gap:8px 24px}
footer .tag a{color:var(--ink-2)}

/* Le fil */
main{position:relative}
main > *{position:relative;z-index:1}
main > .fil{position:absolute;top:0;left:0;width:100%;z-index:0;pointer-events:none;overflow:visible;color:var(--ink)}
.fil path{fill:none;stroke-linecap:round}
.fil .ghost{stroke:var(--line);stroke-width:1;stroke-dasharray:1 6}
.fil .drawn{stroke:var(--ink);stroke-opacity:.5;stroke-width:1.1}
.fil circle{fill:var(--paper);stroke:var(--ink);stroke-opacity:.55;stroke-width:1;transition:fill .4s}
.fil circle.on{fill:var(--ink);fill-opacity:.7}

@media (max-width:900px){
  .row{grid-template-columns:minmax(0,1fr);gap:16px}
  .planche{grid-template-columns:96px minmax(0,1fr);grid-template-areas:"img tag" "img name" "img what";gap:6px 18px;align-items:start}
  .planche .plate{grid-area:img;height:150px}
  .planche > .tag{grid-area:tag}.planche .name{grid-area:name}.planche .what{grid-area:what;margin-top:6px}
  .planche .arrow{display:none}
  .facts,.steps,.form .pair,.legal dl{grid-template-columns:minmax(0,1fr)}
  .legal dd{border-top:0;padding-top:0}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important}}
.reveal{font:inherit;color:var(--ink);background:none;border:0;border-bottom:1px solid var(--ink);padding:0;cursor:pointer}
.legal h2{margin-top:0}