/* Accueil — « la première page du carnet » */

/* ── Hero ───────────────────────────────────────────────── */
.hero{
  position:relative;z-index:5;
  padding:48px 80px 100px 80px;
  display:grid;grid-template-columns:1.05fr 0.95fr;gap:56px;
  align-items:center;
}
.hero-text{position:relative;}
.devise{
  font-family:var(--hand);
  color:var(--coral);
  font-size:42px;font-weight:600;
  line-height:1;
  transform:rotate(-2.5deg);
  display:inline-flex;align-items:center;gap:14px;
  margin-bottom:18px;
  margin-left:6px;
}
.devise .x-mark{
  display:inline-block;width:22px;height:22px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 5 L20 20 M20 5 L4 20' stroke='%23F2774E' stroke-width='2.8' fill='none' stroke-linecap='round'/></svg>") center/contain no-repeat;
  transform:translateY(-4px) rotate(-12deg);
}

.h1{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(64px, 7.4vw, 116px);
  line-height:0.94;
  letter-spacing:-0.015em;
  margin:0 0 36px 0;
  color:var(--ink);
}
.h1 .name-2{display:block;font-style:italic;font-weight:400;color:var(--ink);position:relative;}
.h1 .name-2::after{
  content:"";position:absolute;left:-6px;right:32%;bottom:-10px;height:10px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'><path d='M2 7 Q 28 2 60 6 T 122 5 Q 158 8 198 4' stroke='%23F2774E' stroke-width='2.6' fill='none' stroke-linecap='round'/></svg>") center/100% 100% no-repeat;
}

.accroche{
  position:relative;
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:clamp(26px,2.2vw,34px);
  line-height:1.32;
  color:var(--ink);
  margin:0 0 28px 0;
  padding:6px 0 6px 60px;
  max-width:560px;
}
.accroche .open-quote{
  position:absolute;left:-4px;top:-26px;
  font-family:var(--serif);font-style:normal;
  font-size:140px;line-height:1;color:var(--peach);
  z-index:0;
}
.accroche .text{position:relative;z-index:1;}
.presentation{
  font-family:var(--serif);
  font-size:18px;line-height:1.6;
  color:var(--ink-soft);
  max-width:480px;
  margin:0 0 36px 0;
}
.presentation strong{color:var(--ink);font-weight:600;font-style:italic;}

.hero-meta{
  display:flex;gap:28px;align-items:center;
  font-family:var(--sans);
  font-size:12px;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--ink-mute);
}
.hero-meta .sep{width:36px;height:1px;background:var(--ink-mute);}

/* Portrait stage */
.portrait-stage{
  position:relative;
  aspect-ratio:1/1;
  width:100%;
  max-width:560px;
  justify-self:end;
}
.portrait-stage .washes{
  position:absolute;inset:-12% -12% -12% -12%;z-index:0;pointer-events:none;
}
.portrait-stage img{
  position:relative;z-index:2;
  width:100%;height:100%;
  display:block;
  object-fit:cover;
  border-radius:50%;
  mix-blend-mode:multiply;
}
.portrait-stage .deco{position:absolute;z-index:3;pointer-events:none;}
.deco.x-1{top:6%;right:-2%;width:46px;height:46px;transform:rotate(8deg);}
.deco.x-2{bottom:8%;left:-4%;width:34px;height:34px;transform:rotate(-14deg);}
.deco.hatch-1{top:46%;right:-6%;width:60px;height:36px;transform:rotate(-6deg);}
.deco svg{width:100%;height:100%;display:block;}

/* ── Doors section ──────────────────────────────────────── */
.doors-wrap{
  position:relative;z-index:5;
  padding:32px 80px 80px 80px;
  border-top:1px dashed rgba(35,38,63,0.18);
}
.section-eyebrow{
  display:flex;align-items:baseline;gap:18px;
  font-family:var(--sans);
  font-size:12px;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--ink-mute);
  margin-bottom:6px;
  padding-top:30px;
}
.section-eyebrow .num{
  font-family:var(--hand);
  font-size:38px;color:var(--coral);
  letter-spacing:0;text-transform:none;
  line-height:1;transform:translateY(6px) rotate(-3deg);
}
.section-title{
  font-family:var(--serif);
  font-weight:500;font-size:clamp(36px,3.6vw,52px);
  line-height:1.05;letter-spacing:-0.01em;
  margin:0 0 8px 0;
  max-width:680px;
}
.section-title em{
  font-family:var(--hand);
  font-style:normal;color:var(--coral);
  font-size:1.04em;
}
.section-sub{
  font-family:var(--serif);font-style:italic;
  font-size:18px;color:var(--ink-soft);
  margin:0 0 40px 0;max-width:560px;
}

.doors{
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
}
@media (max-width:1180px){
  .doors{grid-template-columns:repeat(2,1fr);}
}
.door{
  position:relative;
  background:var(--paper);
  padding:30px 26px 26px 26px;
  border:1px solid rgba(35,38,63,0.12);
  border-radius:3px;
  min-height:300px;
  display:flex;flex-direction:column;justify-content:space-between;
  text-decoration:none;color:var(--ink);
  overflow:hidden;
  isolation:isolate;
}
.door::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);
}
.door .wash{
  position:absolute;z-index:1;pointer-events:none;
  inset:auto -20% -30% -20%;height:75%;
}
.door .wash svg{width:100%;height:100%;}
.door-inner{position:relative;z-index:2;display:flex;flex-direction:column;height:100%;gap:12px;}
.door-num{
  font-family:var(--sans);
  font-size:11px;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--ink-mute);
  display:flex;align-items:center;gap:10px;
}
.door-num .chip{
  display:inline-block;width:10px;height:10px;border-radius:50%;
  border:1.5px solid var(--ink);
  background:transparent;padding:0;
}
.door-title{
  font-family:var(--serif);font-weight:500;
  font-size:34px;line-height:1.02;letter-spacing:-0.015em;
  margin:6px 0 0 0;
  position:relative;
}
.door .acc-x{
  position:absolute;top:18px;right:18px;
  display:inline-block;width:22px;height:22px;
  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.6' fill='none' stroke-linecap='round'/></svg>") center/contain no-repeat;
  transform:rotate(8deg);
  opacity:0.85;
}
.door-desc{
  font-family:var(--serif);font-style:italic;
  font-size:15px;color:var(--ink-soft);
  line-height:1.5;
  margin:0;
  max-width:240px;
}
.door-foot{
  display:flex;align-items:baseline;justify-content:space-between;
  font-family:var(--sans);font-size:11px;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--ink-mute);
  margin-top:auto;
}
.door-foot .arr{
  font-family:var(--serif);font-style:italic;
  font-size:16px;color:var(--coral);text-transform:none;
  letter-spacing:0;
}

.door[data-tint="peach"] .chip{background:var(--peach);border-color:var(--peach);}
.door[data-tint="sage"]  .chip{background:var(--sage);border-color:var(--sage);}
.door[data-tint="lilac"] .chip{background:var(--lilac);border-color:var(--lilac);}
.door[data-tint="coral"] .chip{background:var(--coral);border-color:var(--coral);}

/* ── Featured passage / extrait ─────────────────────────── */
.extrait{
  position:relative;z-index:5;
  padding:48px 80px 96px 80px;
  display:grid;grid-template-columns:1fr 1.4fr;gap:64px;align-items:center;
}
.extrait .label{
  font-family:var(--sans);
  font-size:12px;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--ink-mute);
  display:flex;align-items:center;gap:14px;
}
.extrait .label::before{
  content:"";display:inline-block;width:38px;height:1px;background:var(--ink-mute);
}
.extrait .ref{
  font-family:var(--hand);
  font-size:32px;color:var(--coral);line-height:1.1;
  transform:rotate(-2deg);
  margin:12px 0 0 0;
}
.extrait .ref small{
  display:block;font-family:var(--sans);
  font-size:11px;color:var(--ink-mute);letter-spacing:0.16em;
  text-transform:uppercase;font-weight:500;
  transform:rotate(2deg);margin-top:8px;
}
.extrait-text{
  position:relative;
  font-family:var(--serif);font-style:italic;
  font-size:clamp(22px,1.9vw,28px);line-height:1.45;
  color:var(--ink);
  max-width:680px;
}
.extrait-text .open-quote{
  position:absolute;left:-48px;top:-24px;
  font-style:normal;font-size:96px;line-height:1;color:var(--sage);
}
.extrait-text p{margin:0 0 16px 0;}
.extrait-text .signature{
  font-family:var(--hand);font-style:normal;
  font-size:24px;color:var(--coral);
  margin-top:14px;
}

/* Global decorative washes that bleed off-page */
.bleed-1{top:-220px;left:-260px;width:620px;height:540px;}
.bleed-2{top:340px;right:-200px;width:520px;height:480px;}
.bleed-3{top:1280px;left:-160px;width:560px;height:420px;}
.bleed-4{bottom:-220px;right:-120px;width:580px;height:520px;}

.scrib.s1{top:60px;right:48%;width:60px;height:30px;transform:rotate(-12deg);}
.scrib.s2{top:980px;left:88%;width:48px;height:48px;}
.scrib.s3{top:1740px;right:6%;width:70px;height:36px;transform:rotate(8deg);}

/* ────────── Mobile ────────── */
@media (max-width: 720px){
  .hero{
    grid-template-columns:1fr;
    padding:18px 22px 56px 22px;
    gap:28px;
  }
  .devise{font-size:36px;}
  .h1{font-size:56px;line-height:0.96;margin-bottom:24px;}
  .accroche{
    font-size:24px;padding-left:38px;
  }
  .accroche .open-quote{font-size:96px;top:-18px;left:-6px;}
  .presentation{font-size:16px;}
  .portrait-stage{order:-1;max-width:none;width:88%;margin:0 auto;}
  .deco.x-1{width:36px;height:36px;}
  .deco.x-2{width:28px;height:28px;}

  .doors-wrap{padding:24px 22px 56px 22px;}
  .doors{grid-template-columns:1fr;gap:16px;}
  .door{min-height:220px;padding:22px 20px;}
  .door-title{font-size:32px;}

  .extrait{
    grid-template-columns:1fr;gap:24px;
    padding:32px 22px 56px 22px;
  }
  .extrait-text{font-size:22px;}
  .extrait-text .open-quote{left:-4px;top:-30px;font-size:80px;}

  .bleed-1{width:380px;height:340px;top:-120px;left:-180px;}
  .bleed-2{width:340px;height:300px;top:520px;right:-180px;}
  .bleed-3{display:none;}
  .bleed-4{width:380px;height:340px;bottom:-180px;right:-180px;}
  .scrib.s1{right:8%;top:40px;}
  .scrib.s2{display:none;}
}