/* Le carnet à onglets : des feuilles ouvertes, une marge, deux regards. */
:root {
  --paper:#f4f0e7; --card:#fffdf7; --ink:#292b26; --ink-soft:#56584f;
  --muted:#6f6d62; --line:#bcb8a9; --line-soft:#d9d4c8;
  --red:#a8372d; --red-soft:#f0e2d9; --gold:#806432;
  --sticky:#eee1b8; --tape:#dfcca57d; --shadow:none;
  --font-display:"Cormorant Garamond",Georgia,serif;
  --font-body:Georgia,"Times New Roman",serif;
  --font-hand:"Patrick Hand","Caveat",cursive;
  --font-brush:"Permanent Marker",cursive;
  --font-ui:system-ui,-apple-system,"Segoe UI",sans-serif;
}
* { box-sizing:border-box; }
[hidden] { display:none!important; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; scrollbar-color:var(--line) var(--paper); }
body { margin:0; color:var(--ink); background:var(--paper); font:17px/1.6 var(--font-body); }
img { max-width:100%; }
a { color:inherit; text-underline-offset:5px; }
button,input,textarea,select { font:inherit; }
button,a,input,textarea { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
input,textarea { caret-color:var(--red); }
:focus-visible { outline:2px solid var(--red); outline-offset:4px; }
::selection { background:#a8372d26; }
.wrap { width:min(1360px,100% - 80px); margin-inline:auto; }
.head-row { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:70px; }
.brand { display:block; width:44px; height:44px; padding:4px; }
.brand svg { width:100%; height:100%; }
.site-nav { display:flex; gap:30px; }
.site-nav a { font:13px/1.5 var(--font-ui); text-decoration:none; padding:14px 0; }
.site-nav a:hover,.site-nav a.active { text-decoration:underline; text-decoration-color:var(--red); text-underline-offset:7px; }
.gallery-page .site-header { position:absolute; top:12px; right:40px; z-index:2; }
.gallery-page .head-row { width:auto; }
.gallery-page .brand { display:none; }
.hero { display:flex; align-items:center; gap:40px; position:relative; padding:27px 0 24px; min-height:142px; }
.hero h1 { font:400 clamp(3.8rem,6.8vw,6.2rem)/1.04 var(--font-brush); letter-spacing:-.04em; margin:0; transform:rotate(-3deg); }
.hero-tools { width:160px; height:66px; object-fit:contain; align-self:flex-end; mix-blend-mode:multiply; }
.btn { display:inline-flex; justify-content:center; align-items:center; gap:8px; padding:12px 18px; min-height:44px; font:13px/1.4 var(--font-ui); border:1px solid var(--ink); border-radius:2px; color:var(--paper); background:var(--ink); text-decoration:none; }
.btn:hover { background:#484b42; }
.btn:disabled { opacity:.45; cursor:default; }
.btn-outline { color:var(--ink); background:transparent; }
.btn-outline:hover { background:#292b2608; }
.link-hand { font:1.25rem/1.4 var(--font-hand); }
.link-hand:hover { color:var(--red); }
.timeline-block { display:flex; gap:20px; align-items:center; border-bottom:1px solid var(--line); margin-bottom:28px; }
.timeline { position:relative; display:flex; flex:1; gap:2px; overflow-x:auto; padding:5px 2px 9px; scrollbar-width:thin; }
.day-dot { flex:1 0 38px; min-height:44px; display:grid; align-content:center; text-align:center; position:relative; text-decoration:none; font:14px var(--font-ui); border:1px solid transparent; border-bottom:0; border-radius:3px 3px 0 0; }
.day-dot:hover { background:#fff9; }
.day-dot.is-empty { color:var(--muted); }
.day-dot.is-today .num { text-decoration:underline; text-underline-offset:5px; }
.day-dot.is-active { background:var(--ink); color:var(--paper); }
.pips { position:absolute; bottom:4px; left:0; right:0; display:flex; justify-content:center; gap:4px; }
.pips i,.sw { width:3px; height:3px; border-radius:50%; display:inline-block; }
.pips .on-e,.sw-e { background:var(--ink); }
.pips .on-m,.sw-m { background:var(--red); }
.is-active .pips i[class^=on] { background:var(--paper); }
.timeline-legend { display:none; }
.gallery { padding-bottom:65px; }
.open-spread { scroll-margin-top:20px; transform-origin:left center; }
.notebook-page { display:grid; grid-template-columns:minmax(165px,.53fr) minmax(0,2fr); gap:40px; padding:22px 0 35px; }
.page-margin { display:flex; flex-direction:column; align-items:flex-start; padding:5px 0; }
.page-date { display:flex; flex-direction:column; gap:1px; font-size:.85rem; }
.page-date>span:first-child { font:12px var(--font-ui); color:var(--muted); margin-bottom:7px; }
.page-margin h2 { font:500 clamp(2.4rem,4vw,4.25rem)/.98 var(--font-display); letter-spacing:-.035em; overflow-wrap:anywhere; margin:28px 0 25px; }
.page-links { width:100%; }
.card-link { display:inline-flex; gap:14px; align-items:center; min-height:44px; padding:8px 0; font:12px/1.4 var(--font-ui); text-decoration:none; border-bottom:1px solid var(--line); }
.card-link:hover { color:var(--red); border-color:var(--red); }
.card-link svg,.page-turns svg,.archive-open svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.3; }
.page-turns { margin-top:auto; padding-top:40px; display:flex; align-items:center; gap:18px; font:12px var(--font-ui); }
.page-turns i { color:var(--muted); font-style:normal; margin:0 5px; }
.page-turns button { border:1px solid var(--line); background:transparent; display:grid; place-items:center; width:44px; height:44px; border-radius:50%; color:var(--ink); }
.page-turns button:hover { background:var(--card); }
.page-turns button:disabled { opacity:.3; cursor:default; }
.duo { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
.panel { min-width:0; }
.drawing { margin:0; overflow:hidden; background:var(--card); border:1px solid var(--line-soft); padding:6px; }
.drawing button.zoom { position:relative; display:block; border:0; padding:0; width:100%; background:transparent; cursor:zoom-in; }
.drawing button.zoom::after { content:''; position:absolute; right:8px; bottom:8px; width:30px; height:30px; background:var(--card); color:var(--ink); border-radius:50%; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23292b26' stroke-width='1.5'%3E%3Cpath d='M6 18 18 6M8 6h10v10'/%3E%3C/svg%3E"); background-size:20px; background-position:center; background-repeat:no-repeat; opacity:0; }
.drawing button.zoom:hover::after,.drawing button.zoom:focus-visible::after { opacity:1; }
.drawing img { display:block; width:100%; height:clamp(300px,35vw,530px); object-fit:contain; background:var(--card); }
.notebook-page .duo>.panel { position:relative; }
.notebook-page .duo>.panel::before,.detail .duo>.panel::before { content:''; position:absolute; z-index:2; width:58px; height:19px; left:calc(50% - 29px); top:-9px; transform:rotate(-6deg); background:var(--tape); pointer-events:none; }
.notebook-page .duo>.panel:first-child .drawing { transform:rotate(-.75deg); }
.notebook-page .duo>.panel:last-child .drawing { transform:rotate(.65deg); }
.notebook-page .duo>.panel:last-child::before { transform:rotate(7deg); }
.empty { min-height:clamp(300px,35vw,530px); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:15px 8px; color:var(--muted); font:1.35rem var(--font-hand); }
.empty svg { width:30px; height:30px; opacity:.7; margin-bottom:12px; }
.panel-foot { display:flex; justify-content:space-between; align-items:baseline; gap:8px; padding:17px 5px 0; }
.panel-foot h3 { font:500 1.6rem/1.2 var(--font-display); margin:0; }
.who-dot { display:none; }
.grade-badge { color:var(--red); font:1.8rem/1.1 var(--font-hand); transform:rotate(-5deg); white-space:nowrap; }
.blank-page { color:var(--muted); font:1.1rem/1.4 var(--font-hand); max-width:19ch; }
.archive { margin-top:50px; }
.archive-heading { display:flex; align-items:baseline; justify-content:space-between; gap:20px; padding-bottom:20px; }
.archive-heading h2 { font:500 2.3rem/1.1 var(--font-display); margin:0; }
.archive-heading>span { font:12px var(--font-ui); color:var(--muted); }
.archive-list { border-top:1px solid var(--ink); }
.archive-row { display:grid; grid-template-columns:minmax(0,1fr) 270px 44px; align-items:center; gap:25px; border-bottom:1px solid var(--line-soft); min-height:81px; scroll-margin-top:20px; }
.archive-row.is-open { background:#fff5; }
.archive-day { min-width:0; display:grid; grid-template-columns:52px minmax(0,1fr) 100px; gap:18px; align-items:center; padding:15px 0; text-decoration:none; }
.archive-day:hover .archive-theme { color:var(--red); }
.archive-number { font:400 2.2rem/1 var(--font-display); color:var(--muted); }
.archive-theme { font:500 1.75rem/1.15 var(--font-display); overflow-wrap:anywhere; }
.is-blank .archive-theme { color:var(--muted); font-style:italic; }
.archive-date { font-size:12px; color:var(--muted); }
.archive-artists { display:grid; grid-template-columns:1fr 1fr; gap:15px; }
.archive-artist { font-size:13px; }
.archive-artist>span { display:block; font:12px/1.5 var(--font-ui); color:var(--muted); }
.archive-artist.has-image>span { color:var(--red); }
.archive-open { display:grid; place-items:center; width:44px; height:44px; }
.archive-open:hover { color:var(--red); }
.detail-wrap { max-width:1180px; padding-bottom:60px; }
.detail-wrap>p { margin:15px 0 25px!important; }
.day-card.detail { position:relative; padding:28px 35px 40px; background:var(--card); border:1px solid var(--line-soft); }
.day-head { display:flex; align-items:center; gap:15px; font-size:.9rem; }
.day-num { font-weight:600; white-space:nowrap; }
.day-date { color:var(--muted); }
.spacer { flex:1; }
.day-doodle { width:30px; height:30px; }
.day-theme { font:500 clamp(3rem,6vw,5rem)/1 var(--font-display); margin:22px 0 40px; overflow-wrap:anywhere; }
.day-theme.is-empty { color:var(--muted); font-style:italic; }
.theme-rule { display:none; }
.detail .duo>.panel { position:relative; }
.detail .drawing img { height:auto; max-height:65vh; min-height:0; }
.detail .panel-foot { padding-top:12px; }
.day-nav { display:flex; gap:25px; }
.day-nav a { display:inline-flex; align-items:center; min-height:44px; font:12px var(--font-ui); }
.correction-title { font:500 2.2rem var(--font-display); border-top:1px solid var(--line); padding-top:28px; margin:35px 0 24px; }
.correction-sheet+.correction-sheet { margin-top:35px; }
.correction-sheet h3 { font:1.35rem var(--font-hand); margin:0 0 14px; }
.correction-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(180px,.46fr); align-items:start; gap:30px; }
.prof-note { position:relative; background:var(--sticky); padding:24px; margin-top:10px; transform:rotate(1deg); font:1.3rem/1.4 var(--font-hand); overflow-wrap:anywhere; }
.prof-note::before { content:''; position:absolute; top:-9px; left:35%; width:58px; height:19px; background:var(--tape); transform:rotate(-5deg); }
.prof-note p { margin:14px 0 0; white-space:pre-wrap; }
.note-grade { display:block; font:3.7rem/1.2 var(--font-hand); color:var(--red); border-bottom:1px solid #89774745; padding-bottom:14px; }
.note-label { font-size:1.3rem; }
.note-only { grid-template-columns:minmax(0,340px); }
.notice { padding:45px 24px; margin:30px 0; text-align:center; border:1px dashed var(--line); color:var(--ink-soft); }
.notice .hand { display:block; font:1.8rem var(--font-hand); }
.lightbox { position:fixed; inset:0; z-index:100; background:#292b26f5; display:flex; align-items:center; justify-content:center; padding:40px 20px 70px; }
.lightbox img { max-width:94vw; max-height:80vh; object-fit:contain; }
.lightbox figcaption { position:fixed; bottom:16px; left:5%; right:5%; color:var(--paper); text-align:center; font:1.35rem var(--font-hand); }
.lb-close { position:fixed; top:15px; right:15px; width:44px; height:44px; background:var(--paper); color:var(--ink); border:0; border-radius:50%; font-size:1.2rem; }
.site-footer { padding:25px 20px 40px; text-align:center; border-top:1px solid var(--line); color:var(--muted); font-size:.85rem; }
.site-footer p { margin:0; }
.site-footer a { color:var(--ink); }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.toast-stack { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:200; display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none; width:min(90vw,500px); }
.toast { padding:12px 20px; background:var(--ink); color:var(--paper); text-align:center; font-size:.95rem; }
.sprout-lane { position:fixed; inset:0; z-index:45; pointer-events:none; overflow:visible; }
.sprout { position:absolute; top:0; left:0; width:64px; height:64px; border:0; padding:0; background:none; pointer-events:auto; cursor:pointer; will-change:transform; }
.sprout-art { display:flex; justify-content:center; height:64px; }
.sprout img,.sprout svg { display:block; height:64px; width:auto; max-width:64px; }
.sprout .alarm { position:absolute; top:-27px; left:27px; color:var(--red); font:700 30px var(--font-hand); opacity:0; }
.sprout.scared .alarm { opacity:1; }
.sprout.hop .sprout-art { animation:sprouthop .45s ease; }
@keyframes sprouthop { 45% { translate:0 -22px; rotate:8deg; } }
@media(max-width:1000px) {
  .wrap { width:calc(100% - 48px); }
  .gallery-page .site-header { right:24px; }
  .hero-tools { width:120px; }
  .notebook-page { grid-template-columns:155px minmax(0,1fr); gap:25px; }
  .duo { gap:18px; }
  .archive-row { grid-template-columns:minmax(0,1fr) 210px 44px; gap:15px; }
  .archive-date { display:none; }
  .archive-day { grid-template-columns:42px minmax(0,1fr); gap:14px; }
}
@media(max-width:650px) {
  body { font-size:16px; }
  .wrap { width:calc(100% - 32px); }
  .head-row { min-height:58px; }
  .site-nav { gap:20px; }
  .site-nav a { font-size:12px; }
  .gallery-page .site-header { position:static; }
  .gallery-page .head-row { justify-content:flex-end; width:calc(100% - 32px); min-height:45px; }
  .hero { min-height:85px; padding:0 0 10px; gap:24px; }
  .hero h1 { font-size:clamp(3.5rem,14vw,5rem); }
  .hero-tools { width:84px; height:45px; }
  .timeline-block { margin-bottom:4px; }
  .day-dot { flex:0 0 44px; }
  .notebook-page { display:flex; flex-direction:column; gap:18px; padding:6px 0 20px; }
  .page-margin { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 14px; width:100%; }
  .page-date { flex-direction:row; gap:12px; grid-column:1/-1; font-size:12px; }
  .page-date>span:first-child { margin:0; }
  .page-margin h2 { margin:0; font-size:2.5rem; }
  .page-links { grid-column:1; }
  .card-link { font-size:12px; min-height:40px; }
  .page-turns { grid-column:2; grid-row:2/4; margin:0; padding:0; gap:6px; align-self:end; }
  .page-turns>span { display:none; }
  .page-turns button { width:44px; height:44px; }
  .duo { gap:16px; }
  .drawing { padding:3px; }
  .drawing img,.empty { height:250px; min-height:250px; }
  .panel-foot { flex-wrap:wrap; padding:12px 0 0; }
  .panel-foot h3 { font-size:1.5rem; }
  .grade-badge { font-size:1.5rem; }
  .notebook-page .duo>.panel::before { width:44px; height:15px; top:-7px; left:calc(50% - 22px); }
  .archive { margin-top:28px; }
  .archive-heading { display:block; padding-bottom:18px; }
  .archive-heading h2 { font-size:1.9rem; margin-bottom:8px; }
  .archive-row { grid-template-columns:minmax(0,1fr) 44px; gap:0 12px; padding:12px 0; }
  .archive-day { grid-template-columns:34px minmax(0,1fr); padding:0; gap:10px; }
  .archive-theme { font-size:1.5rem; }
  .archive-number { font-size:1.8rem; }
  .archive-artists { grid-column:1; padding-left:44px; display:flex; gap:16px; }
  .archive-artist { font-size:12px; }
  .archive-artist>span { display:block; font-size:12px; margin-left:0; }
  .archive-open { grid-column:2; grid-row:1/3; }
  .day-card.detail { padding:22px 18px; }
  .detail .duo { grid-template-columns:1fr; gap:28px; }
  .detail .day-head { flex-wrap:wrap; gap:10px; }
  .day-nav { width:100%; justify-content:space-between; }
  .detail .day-theme { margin:15px 0 30px; font-size:3.5rem; }
  .detail .drawing img { max-height:none; }
  .correction-layout { grid-template-columns:1fr; gap:18px; }
  .prof-note { margin:0 5px; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
  .sprout-lane { display:none; }
}
.grade-hidden { font:12px var(--font-ui); color:var(--red); padding:7px 0; }
.grades-link { display:inline-flex; align-items:center; min-height:44px; padding:9px 12px; border:1px solid var(--red); color:var(--red); font:12px/1.4 var(--font-ui); text-decoration:none; }
.grades-link:hover { background:var(--red-soft); }
.page-links .grades-link { margin:0 0 10px; }
.grade-invitation { padding:25px 0; }
.grade-invitation p { font:1.2rem var(--font-body); }
.day-release-info { font:14px/1.6 var(--font-ui); color:var(--muted); }
@media(max-width:650px) {
        .page-links .grades-link { padding:8px 10px; margin-bottom:5px; }
}

.gallery-page .site-header { display:none; }
@media(max-width:650px) { .hero { padding-top:18px; } }