/* Boring Supplies — système typographique et pages éditoriales */
:root{ --bg:#ffffff; --ink:#0a0a0a; --seal:#d92b16; --mute:rgba(10,10,10,.62); --line:rgba(10,10,10,.1);
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:"Inter","Helvetica Neue",Arial,system-ui,sans-serif; color-scheme:light; }
*{ box-sizing:border-box; margin:0; }
html{ background:var(--bg); -webkit-text-size-adjust:100%; }
body{ background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.6; }
img{ max-width:100%; display:block; }
a{ color:inherit; }
em{ font-family:var(--serif); font-style:italic; }
.wrap{ width:min(1120px,92vw); margin:0 auto; }
.narrow{ width:min(720px,92vw); margin:0 auto; }

/* ---- le sceau, seule signature en haut de page ---- */
.site-head{ display:flex; justify-content:center; padding:26px 20px 0; }
.site-head a{ display:block; line-height:0; transition:opacity .25s; }
.site-head a:hover{ opacity:.72; }
.stamp{ height:104px; width:auto; }
@media(max-width:680px){ .stamp{ height:76px; } .site-head{ padding-top:18px; } }
/* sur l'accueil, le sceau se pose au-dessus du hero */
.site-head.over{ position:absolute; top:0; left:0; right:0; z-index:4; padding-top:22px; pointer-events:none; }
.site-head.over a{ pointer-events:auto; }

/* ---- le titre animé, en haut de la page à propos ---- */
#about-hero{ position:relative; min-height:78vh; overflow:hidden; display:flex; align-items:center; }
#hands{ position:absolute; inset:0; width:100%; height:100%; }
#title{ position:relative; z-index:2; width:min(1120px,92vw); margin:0 auto; padding:60px 0; }
.htitle{ font-family:var(--sans); font-weight:600; letter-spacing:-.03em; line-height:1.06;
  font-size:clamp(38px,6vw,84px); max-width:min(860px,92vw); }
.htitle em{ font-weight:600; letter-spacing:-.02em; display:inline-block;
  white-space:nowrap; text-align:center; }
.htitle-sub{ margin-top:22px; font-size:clamp(15px,1.6vw,18px); line-height:1.55;
  opacity:.6; max-width:46ch; }
/* pendant la frappe : chaque lettre apparaît, le curseur suit */
.htitle .ch{ opacity:0; }
.htitle.typing .ch.on, .htitle.done .ch{ opacity:1; }
.htitle .caret{ display:inline-block; width:.06em; min-width:2px; height:.82em; margin:0 .02em -.08em;
  background:var(--ink); vertical-align:baseline; animation:blink .9s steps(1) infinite; }
.htitle.done .caret{ display:none; }
@keyframes blink{ 0%,50%{ opacity:1 } 50.01%,100%{ opacity:0 } }
.htitle em.settle{ animation:settle .42s cubic-bezier(.2,1.3,.35,1) both; }
@keyframes settle{ 0%{ transform:scale(1.08) } 60%{ transform:scale(.985) } 100%{ transform:none } }
@media(prefers-reduced-motion:reduce){
  .htitle .ch{ opacity:1 !important; } .htitle .caret{ display:none; }
}
.about{ padding-bottom:40px; }
.about .section:first-child .seck{ border-top:0; padding-top:0; }
.about .prose a{ text-decoration:none; border-bottom:1px solid rgba(10,10,10,.3); }

/* ---- le sceau du coin et son sommaire ---- */
#menu-btn{ position:fixed; right:22px; bottom:22px; z-index:45; border:0; background:none;
  padding:0; cursor:pointer; line-height:0; transition:transform .25s cubic-bezier(.2,.8,.3,1); }
#menu-btn img{ height:68px; width:auto; filter:drop-shadow(0 6px 16px rgba(10,10,10,.18)); }
#menu-btn:hover{ transform:translateY(-3px) rotate(-2deg); }
#menu-btn:focus-visible{ outline:2px solid var(--seal); outline-offset:6px; }
#menu-panel{ position:fixed; right:22px; bottom:104px; z-index:46; width:min(392px,calc(100vw - 44px));
  max-height:min(70vh,620px); overflow:auto; background:var(--bg); border:1px solid rgba(10,10,10,.14);
  box-shadow:0 26px 64px rgba(10,10,10,.2); opacity:0; transform:translateY(10px) scale(.99);
  transition:opacity .24s ease, transform .28s cubic-bezier(.2,.8,.3,1); }
#menu-panel.open{ opacity:1; transform:none; }
.menu-in{ padding:22px 22px 18px; }
.menu-in > .seck{ margin-bottom:16px; }
.menu-list{ list-style:none; padding:0; margin:0 0 6px; }
.menu-list li{ border-top:1px solid var(--line); }
.menu-list li:first-child{ border-top:0; }
.menu-list a{ display:flex; gap:14px; align-items:center; padding:11px 0; text-decoration:none; }
.menu-list img{ width:64px; height:48px; object-fit:cover; background:#f2f2f2; flex:none; }
.menu-list .tx{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.menu-list .t{ font-size:14.5px; font-weight:600; letter-spacing:-.015em; line-height:1.2; }
.menu-list .s{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; opacity:.5; }
.menu-list li.ici .t{ color:var(--seal); }
.menu-list a:hover .t{ opacity:.65; }
.menu-about{ display:block; margin-top:14px; padding-top:15px; border-top:1px dashed rgba(10,10,10,.2);
  font-size:13.5px; text-decoration:none; opacity:.75; }
.menu-about:hover{ opacity:1; }
@media(max-width:620px){
  #menu-btn{ right:14px; bottom:14px; }
  #menu-btn img{ height:56px; }
  #menu-panel{ right:14px; left:14px; bottom:82px; width:auto; }
}
@media(prefers-reduced-motion:reduce){ #menu-btn, #menu-panel{ transition:none; } }

/* ---- blocs communs ---- */
.seck{ display:block; font-size:11px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; opacity:.45; }
.chip{ display:inline-block; font-size:12px; font-weight:500; white-space:nowrap; background:rgba(10,10,10,.06);
  padding:5px 11px; border-radius:999px; }
.chip.cat{ text-transform:uppercase; letter-spacing:.12em; font-size:10.5px; }
.btn{ display:inline-block; text-align:center; padding:11px 22px; border-radius:999px; font-size:13.5px;
  font-weight:500; text-decoration:none; color:var(--ink); transition:opacity .25s; }
.btn:hover{ opacity:.75; }
.btn.primary{ background:var(--ink); color:#fff; }
.btn.ghost{ border:1px solid rgba(10,10,10,.4); }

/* ---- accueil : archives ---- */
#archives{ padding:60px 0 20px; border-top:1px solid var(--line); margin-top:40px; }
#archives .head{ display:flex; justify-content:space-between; align-items:baseline; gap:20px; flex-wrap:wrap; margin-bottom:30px; }
#archives h2{ font-weight:600; font-size:clamp(26px,3.2vw,40px); letter-spacing:-.025em; line-height:1.05; }
.filters{ display:flex; gap:8px; flex-wrap:wrap; }
.filters button{ font:inherit; font-size:12.5px; padding:6px 13px; border-radius:999px; border:1px solid rgba(10,10,10,.22);
  background:none; cursor:pointer; color:var(--ink); transition:all .2s; }
.filters button.on, .filters button:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px 28px; }
.card{ text-decoration:none; display:block; }
.card.hide{ display:none; }
.card .cover{ aspect-ratio:4/3; overflow:hidden; background:#f2f2f2; margin-bottom:14px; }
.card .cover img{ width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.2,1); }
.card:hover .cover img{ transform:scale(1.03); }
.card .meta{ display:flex; gap:10px; align-items:center; font-size:11px; letter-spacing:.14em; text-transform:uppercase; opacity:.5; margin-bottom:8px; }
.card h3{ font-weight:600; font-size:20px; letter-spacing:-.02em; line-height:1.15; margin-bottom:5px; }
.card .sub{ font-family:var(--serif); font-size:14.5px; opacity:.6; margin-bottom:8px; }
.card .acc{ font-size:13.5px; line-height:1.55; opacity:.72; }
@media(max-width:900px){ .grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .grid{ grid-template-columns:1fr; gap:34px; } }

/* ---- ce qui sort les prochains jours ---- */
#a-venir{ padding:56px 0 70px; border-top:1px solid var(--line); margin-top:56px; }
#a-venir .head{ display:flex; justify-content:space-between; align-items:baseline; gap:20px; flex-wrap:wrap; margin-bottom:26px; }
#a-venir h2{ font-weight:600; font-size:clamp(26px,3.2vw,40px); letter-spacing:-.025em; line-height:1.05; }
#a-venir .count{ font-size:13px; opacity:.5; padding-bottom:8px; }
.venir{ list-style:none; padding:0; border-top:1px dashed rgba(10,10,10,.18); }
.venir li{ display:grid; grid-template-columns:150px minmax(0,1fr) minmax(0,1.1fr); gap:20px; align-items:baseline;
  padding:18px 0 17px; border-bottom:1px dashed rgba(10,10,10,.18); position:relative; }
.venir .d{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; opacity:.45; }
.venir .t{ font-family:var(--serif); font-size:20px; letter-spacing:-.01em; }
.venir .i{ font-size:13.5px; line-height:1.5; opacity:.55; }
/* un point plein : la pièce est écrite, elle sortira toute seule le jour dit */
.venir li.prete .d::before{ content:""; display:inline-block; width:5px; height:5px; border-radius:50%;
  background:var(--seal); margin-right:9px; vertical-align:middle; }
@media(max-width:760px){
  .venir li{ grid-template-columns:1fr; gap:5px; padding:16px 0; }
  .venir .d{ order:-1; }
}

/* ---- page pièce ---- */
.piece{ position:relative; }
.piece-head{ padding:48px 0 34px; }
.piece-head .meta{ display:flex; gap:10px; align-items:center; margin-bottom:22px; flex-wrap:wrap; }
.piece-head .date{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; opacity:.5; }
.piece-head .perma{ font-size:12px; letter-spacing:.06em; opacity:.5; text-decoration:none;
  border-bottom:1px solid rgba(10,10,10,.25); transition:opacity .2s; }
.piece-head .perma:hover{ opacity:.9; }
.piece-head h1{ font-weight:600; font-size:clamp(40px,7vw,96px); line-height:.98; letter-spacing:-.035em; margin-bottom:16px; max-width:14ch; }
.piece-head .sub{ font-family:var(--serif); font-size:clamp(18px,2.2vw,24px); opacity:.62; margin-bottom:24px; }
.piece-head .acc{ font-family:var(--serif); font-style:italic; font-size:clamp(20px,2.6vw,30px); line-height:1.3; max-width:30ch; letter-spacing:-.01em; }
figure.hero-img{ margin:24px 0 0; }
figure.hero-img img{ width:100%; aspect-ratio:16/10; object-fit:cover; background:#f2f2f2; }
figcaption{ font-size:12px; opacity:.5; margin-top:10px; line-height:1.5; }
figcaption a{ text-decoration:none; border-bottom:1px solid rgba(10,10,10,.2); }
.section{ margin-top:64px; }
.section .seck{ margin-bottom:24px; padding-top:26px; border-top:1px dashed rgba(10,10,10,.18); }
.prose p{ font-size:17px; line-height:1.72; margin-bottom:20px; }
.prose p:first-of-type::first-letter{ font-family:var(--serif); font-size:3.2em; line-height:.85; float:left; padding:8px 10px 0 0; }
.tbl{ width:100%; overflow-x:auto; }
table{ width:100%; border-collapse:collapse; font-size:14.5px; }
th{ text-align:left; font-size:11px; letter-spacing:.14em; text-transform:uppercase; opacity:.5; font-weight:600; padding:0 14px 12px 0; border-bottom:1px solid var(--ink); }
td{ padding:14px 14px 14px 0; border-bottom:1px solid var(--line); vertical-align:top; line-height:1.5; }
td:first-child{ font-weight:600; }
td .note{ display:block; font-size:12.5px; opacity:.6; margin-top:4px; }
td a{ text-decoration:none; border-bottom:1px solid rgba(10,10,10,.25); }
td a:hover{ border-color:var(--ink); }
.prix td:nth-child(2){ font-family:var(--serif); font-size:16px; }
.callout{ margin-top:32px; border:1px solid rgba(10,10,10,.15); border-radius:16px; padding:26px 28px; font-size:16px; line-height:1.65; }
.callout .seck{ border:0; padding:0; margin-bottom:12px; }
.conseil{ margin:70px 0 0; padding:36px 0; border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); }
.conseil .seck{ margin-bottom:16px; }
.conseil p{ font-family:var(--serif); font-size:clamp(22px,3vw,34px); line-height:1.3; letter-spacing:-.015em; }
.juridique{ font-size:14px; line-height:1.65; opacity:.72; }
.sources{ font-size:12.5px; line-height:1.9; opacity:.6; word-break:break-all; }
.sources a{ text-decoration:none; }
.pn{ margin-top:70px; display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.pn a{ text-decoration:none; padding:20px 0; border-top:1px solid var(--line); }
.pn a.next{ text-align:right; }
.pn .lab{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; opacity:.45; display:block; margin-bottom:6px; }
.pn .t{ font-weight:600; font-size:17px; letter-spacing:-.015em; }

/* ---- les photos scotchées sur les bords ---- */
/* Quatre tirages posés à gauche et à droite, débordant hors de l'écran, tenus par
   un bout de ruban adhésif. Ils arrivent depuis leur bord au fil du défilement,
   restent en place pendant la lecture, puis le mood board les pousse vers le haut. */
.reading{ position:relative; }
.floaters{ position:fixed; inset:0; z-index:0; pointer-events:none; display:none;
  will-change:transform; }
.floater{ position:absolute; width:var(--w); margin:0; will-change:transform; }
/* au repos, chacune attend hors de l'écran, de son côté */
.floater.g{ left:calc(0px - var(--deborde)); transform:translateX(-145%); }
.floater.d{ right:calc(0px - var(--deborde)); transform:translateX(145%); }
/* la feuille : marge blanche façon tirage, inclinaison, ombre portée */
.sheet{ display:block; background:#fff; padding:9px 9px 11px; position:relative;
  transform:rotate(var(--r));
  box-shadow:0 1px 0 rgba(10,10,10,.06), 0 16px 34px rgba(10,10,10,.16); }
.sheet img{ width:100%; aspect-ratio:var(--ar); object-fit:cover; background:#efedea; }

/* le ruban adhésif : translucide, mat, avec deux arêtes plus marquées */
.sheet::before, .sheet::after{ content:""; position:absolute; z-index:2;
  background:linear-gradient(180deg, rgba(226,219,203,.62), rgba(206,197,178,.5));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(120,110,92,.16); }
/* une seule bande, centrée en haut */
.sheet.bande::before{ display:none; }
.sheet.bande::after{ width:98px; height:27px; top:-13px; left:50%;
  transform:translateX(-50%) rotate(var(--tr)); }
/* ou deux bouts en biais, sur les coins hauts */
.sheet.coins::before{ width:86px; height:24px; top:6px; left:-30px; transform:rotate(-45deg); }
.sheet.coins::after{ width:86px; height:24px; top:6px; right:-30px; transform:rotate(45deg); }

/* il faut de la marge de chaque côté de la colonne de lecture */
@media(min-width:1280px){ .floaters{ display:block; } }
@media(prefers-reduced-motion:reduce){
  .floater.g, .floater.d{ transform:none; }
}
/* la colonne de lecture est opaque : les photos passent bien derrière le texte */
.piece-body{ position:relative; z-index:1; width:min(796px,94vw); margin:0 auto;
  padding:0 38px; background:var(--bg); }
@media(max-width:820px){ .piece-body{ padding:0; width:min(720px,92vw); } }
/* le reste de la page doit couvrir les photos, pas les laisser transparaître */
.piece-head, .piece > .wrap, .moodboard, #archives, footer{ position:relative; z-index:1;
  background:var(--bg); }

/* ---- le mood board final : grande échelle, même blanc que le reste ---- */
.moodboard{ margin-top:110px; padding-top:54px; border-top:1px solid var(--ink); }
.moodboard .wide{ width:min(1480px,94vw); margin:0 auto; }
.moodboard .head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  flex-wrap:wrap; margin-bottom:52px; }
.moodboard h2{ font-family:var(--serif); font-weight:400; font-size:clamp(38px,6.4vw,88px);
  letter-spacing:-.03em; line-height:.98; margin-top:14px; }
.moodboard h2 em{ font-style:italic; }
.moodboard .count{ font-size:13px; opacity:.5; padding-bottom:8px; }
.board{ display:grid; grid-template-columns:repeat(12,1fr); gap:34px 26px; }
.board figure{ margin:0; grid-column:span var(--span); }
.board img{ width:100%; aspect-ratio:var(--ar); object-fit:cover; background:#f2f2f2; }
.board figcaption{ margin-top:11px; }
@media(max-width:1000px){
  .board{ grid-template-columns:repeat(6,1fr); gap:26px 20px; }
  .board figure{ grid-column:span 3; }
  .board figure:nth-child(7n+1){ grid-column:span 6; }
}
@media(max-width:620px){
  .moodboard{ margin-top:70px; }
  .board{ grid-template-columns:1fr; gap:30px; }
  .board figure, .board figure:nth-child(7n+1){ grid-column:1/-1; }
  .board img{ aspect-ratio:4/3; }
}

/* ---- footer ---- */
footer{ background:var(--bg); border-top:1px solid var(--line); padding:64px 0 0; overflow:hidden; }
.moodboard + footer{ border-top:0; }
.foot-grid{ display:flex; justify-content:space-between; gap:48px; flex-wrap:wrap; margin-bottom:52px; }
.foot-brand .stamp{ height:88px; margin-bottom:12px; }
.foot-brand p{ font-size:13px; opacity:.55; max-width:32ch; }
.foot-col h4{ font-size:11px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; opacity:.45; margin-bottom:13px; }
.foot-col a{ display:block; font-size:13.5px; text-decoration:none; opacity:.75; margin-bottom:9px; transition:opacity .25s; }
.foot-col a:hover{ opacity:1; }
.foot-bottom{ padding-bottom:8px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:12px; opacity:.45;
  border-top:1px dashed rgba(10,10,10,.15); padding-top:22px; }
.foot-mark{ margin:44px calc(50% - 50vw) -.16em; text-align:center; font-family:var(--serif); font-weight:400;
  font-size:13.8vw; line-height:.9; letter-spacing:-.03em; white-space:nowrap; opacity:.07; user-select:none; pointer-events:none; }
.foot-mark em{ font-style:italic; }