/* Textes — sommaire de l'œuvre écrite */

.bleed-1{top:-200px;left:-220px;width:560px;height:480px;}
.bleed-2{top:380px;right:-200px;width:520px;height:440px;}
.bleed-3{top:1380px;left:-220px;width:560px;height:440px;}
.bleed-4{bottom:-200px;right:-160px;width:560px;height:480px;}
.scrib.s1{top:90px;right:30%;width:60px;height:32px;transform:rotate(-10deg);}
.scrib.s2{top:1100px;left:42%;width:42px;height:42px;transform:rotate(8deg);}

/* Index hero */
.idx-hero{
  position:relative;z-index:5;
  padding:48px 80px 24px 80px;
  display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:end;
}
.idx-hero .left{padding-bottom:8px;}
.eyebrow-hand{
  font-family:var(--hand);color:var(--coral);
  font-size:36px;font-weight:600;transform:rotate(-2deg);
  display:inline-flex;align-items:center;gap:12px;margin-bottom:6px;
}
.eyebrow-hand .x{width:18px;height:18px;display:inline-block;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 6 L19 19 M19 6 L5 19' stroke='%23F2774E' stroke-width='2.8' fill='none' stroke-linecap='round'/></svg>") center/contain no-repeat;
  transform:rotate(-10deg);}
.h1{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(72px,8vw,128px);line-height:0.94;
  letter-spacing:-0.02em;margin:0 0 18px 0;
}
.h1 .it{font-style:italic;font-weight:400;}
.idx-hero .right{
  font-family:var(--serif);font-style:italic;
  font-size:21px;line-height:1.5;color:var(--ink-soft);
  max-width:440px;padding-bottom:22px;
  position:relative;
}
.idx-hero .right::before{
  content:"«";position:absolute;left:-44px;top:-30px;
  font-style:normal;font-size:90px;line-height:1;color:var(--sage);
}
.idx-hero .right strong{color:var(--ink);font-style:normal;font-weight:600;}

/* Filter row */
.filter-row{
  position:relative;z-index:5;
  padding:24px 80px 0 80px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  border-top:1px dashed rgba(35,38,63,0.18);
  padding-top:28px;
}
.filter-left{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.filter-label{
  font-family:var(--sans);font-size:11px;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--ink-mute);margin-right:6px;
}
.f-chip{
  font-family:var(--sans);font-size:12px;letter-spacing:0.06em;
  font-weight:500;color:var(--ink);
  padding:8px 14px 8px 12px;border-radius:2px;
  background:rgba(247,244,236,0.7);
  border:1px solid rgba(35,38,63,0.14);
  cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;
  text-decoration:none;
}
.f-chip.is-on{
  border-color:var(--ink);
  background:var(--paper);
  box-shadow:inset 0 0 0 1px var(--ink);
}
.f-chip .dot{width:9px;height:9px;border-radius:50%;background:var(--ink-mute);}
.f-chip[data-tint="theatre"]  .dot{background:var(--sage);}
.f-chip[data-tint="recit"]    .dot{background:var(--peach);}
.f-chip[data-tint="roman"]    .dot{background:var(--lilac);}
.f-chip[data-tint="chanson"]  .dot{background:var(--coral);}
.filter-count{
  font-family:var(--hand);font-size:30px;color:var(--coral);
  transform:rotate(-2deg);line-height:1;
  display:flex;align-items:baseline;gap:6px;
}
.filter-count small{
  font-family:var(--sans);font-size:11px;
  letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-mute);
  transform:rotate(2deg);
}

/* Cards grid */
.cards{
  position:relative;z-index:5;
  padding:32px 80px 32px 80px;
  display:grid;grid-template-columns:repeat(2,1fr);gap:28px;
}
.card{
  position:relative;
  background:var(--paper);
  border:1px solid rgba(35,38,63,0.12);
  border-radius:3px;
  padding:34px 36px 30px 36px;
  text-decoration:none;color:var(--ink);
  overflow:hidden;isolation:isolate;
  min-height:340px;
  display:flex;flex-direction:column;gap:18px;
}
.card::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:repeating-linear-gradient(to bottom,
    transparent 0, transparent 27px,
    rgba(201,210,224,0.45) 27px, rgba(201,210,224,0.45) 28px);
}
.card .wash{position:absolute;inset:auto -25% -40% -25%;height:70%;z-index:1;pointer-events:none;}
.card .wash svg{width:100%;height:100%;}
.card .top{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;}
.card .num{
  font-family:var(--hand);font-size:34px;color:var(--coral);
  line-height:1;transform:rotate(-3deg);
}
.card .year{
  font-family:var(--sans);font-size:11px;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--ink-mute);
}
.card h3{
  position:relative;z-index:2;
  font-family:var(--serif);font-weight:500;
  font-size:42px;line-height:1.02;letter-spacing:-0.015em;
  margin:0;
}
.card h3 .it{font-style:italic;font-weight:400;}
.card .exergue{
  position:relative;z-index:2;
  font-family:var(--serif);font-style:italic;
  font-size:18px;line-height:1.55;color:var(--ink);
  padding:6px 0 6px 28px;
  margin:0;
  max-width:440px;
}
.card .exergue::before{
  content:"«";position:absolute;left:-2px;top:-10px;
  font-style:normal;font-size:54px;line-height:1;color:var(--peach);
}
.card .foot-row{
  position:relative;z-index:2;
  margin-top:auto;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  font-family:var(--sans);font-size:11px;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--ink-mute);
}
.card .arr{
  font-family:var(--serif);font-style:italic;color:var(--coral);
  font-size:16px;text-transform:none;letter-spacing:0;
}
.card .scrib-x{
  position:absolute;z-index:3;pointer-events:none;
}

/* Featured/large card */
.card.is-feat{grid-column:span 2;min-height:280px;}
.card.is-feat h3{font-size:64px;}
.card.is-feat .exergue{font-size:22px;max-width:560px;}

/* Foot CTA */
.tail{
  position:relative;z-index:5;
  padding:24px 80px 60px 80px;
  display:flex;align-items:baseline;gap:20px;justify-content:space-between;
}
.tail .note{
  font-family:var(--hand);font-size:30px;color:var(--coral);
  line-height:1.1;transform:rotate(-2deg);max-width:560px;
}
.tail .arrow-cta{
  font-family:var(--serif);font-style:italic;font-size:20px;color:var(--ink-soft);
}

/* Mobile */
@media (max-width:860px){
  .cards{grid-template-columns:1fr;}
  .card.is-feat{grid-column:auto;}
  .card.is-feat h3{font-size:48px;}
}
@media (max-width:720px){
  .idx-hero{grid-template-columns:1fr;padding:24px 22px 12px 22px;gap:22px;}
  .idx-hero .right{font-size:18px;padding-bottom:0;}
  .idx-hero .right::before{left:-4px;top:-36px;font-size:72px;}
  .h1{font-size:64px;line-height:0.96;}
  .filter-row{padding:22px 22px 0 22px;flex-direction:column;align-items:flex-start;gap:12px;}
  .filter-count{align-self:flex-end;}
  .cards{padding:24px 22px 24px 22px;gap:18px;}
  .card{padding:24px 22px 22px 22px;min-height:auto;}
  .card h3{font-size:34px;}
  .card.is-feat h3{font-size:36px;}
  .card .exergue{font-size:17px;}
  .tail{padding:16px 22px 40px 22px;flex-direction:column;align-items:flex-start;gap:10px;}
  .tail .note{font-size:24px;}
  .bleed-1{width:380px;height:340px;top:-120px;left:-180px;}
  .bleed-2{width:340px;height:300px;top:660px;right:-180px;}
  .bleed-3{display:none;}
  .bleed-4{width:380px;height:340px;bottom:-180px;right:-180px;}
}