@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Montserrat:wght@400;500;600&display=swap');
:root{
 --paper:#f6efe5;--paper2:#fbf7f0;--ink:#2e2925;--muted:#8d8075;
 --rose:#ae5d60;--line:#dcb9aa;--soft:#eadbd2;--shadow:0 18px 50px rgba(79,57,46,.07);
}
*{box-sizing:border-box}
html{background:var(--paper)}
body{margin:0;color:var(--ink);background:url('../img/paper.svg') repeat,var(--paper);font-family:'Cormorant Garamond',Georgia,serif}
.shell{width:min(760px,100%);margin:auto;padding:28px 16px 64px}
.brand{text-align:center;font-family:Montserrat,sans-serif;font-size:.76rem;font-weight:600;letter-spacing:.32em;text-transform:uppercase}
.brandline{display:flex;align-items:center;justify-content:center;gap:18px;margin:10px auto 18px}
.brandline:before,.brandline:after{content:"";width:72px;height:1px;background:var(--line)}
.rose-mini{width:24px;height:28px}
.duo,.single{display:block;width:min(720px,100%);margin:0 auto 18px;mix-blend-mode:multiply}
.single{width:min(560px,100%)}
.title{font-size:clamp(3.2rem,12vw,6.3rem);line-height:.9;text-align:center;font-weight:500;letter-spacing:-.03em;margin:0 auto 20px}
.title em{font-weight:400}
.orn{width:70px;height:1px;background:var(--line);margin:16px auto 24px}
.sub{text-align:center;font-family:Montserrat,sans-serif;font-size:.95rem;line-height:1.65;color:#504a46}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border:1px solid var(--rose);border-radius:999px;background:transparent;color:var(--rose);font-family:Montserrat,sans-serif;text-transform:uppercase;letter-spacing:.18em;font-size:.78rem;text-decoration:none}
.center{text-align:center}
.timeline{margin:8px auto 30px}
.track{display:grid;grid-template-columns:repeat(5,1fr);position:relative}
.track:before{content:"";position:absolute;left:10%;right:10%;top:16px;height:1px;background:var(--soft)}
.step{position:relative;text-align:center;z-index:1}
.step a,.step span.wrap{display:flex;flex-direction:column;align-items:center;text-decoration:none;color:inherit;gap:7px}
.node{width:32px;height:32px;border-radius:50%;background:var(--paper);border:1px solid var(--soft);display:flex;align-items:center;justify-content:center;font-family:Montserrat,sans-serif;font-size:.68rem;color:#aa9c92}
.step.read .node{background:var(--rose);border-color:var(--rose);color:white}
.step.open .node{border:2px solid var(--rose);color:var(--rose)}
.caption{font-family:Montserrat,sans-serif;font-size:.5rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.legend{text-align:center;margin-top:13px;font-style:italic;color:#7b6f66}
.thread{margin:0 auto 30px}
.threadhead{display:flex;align-items:center;gap:12px;color:var(--muted);margin-bottom:12px}
.threadhead:before,.threadhead:after{content:"";height:1px;background:var(--soft);flex:1}
.threadhead span{font-family:Montserrat,sans-serif;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase}
.threaditem{padding:14px 0 18px;border-bottom:1px solid var(--soft)}
.threadmeta{display:flex;justify-content:space-between;color:var(--rose);font-family:Montserrat,sans-serif;font-size:.63rem;letter-spacing:.1em;text-transform:uppercase}
.threadspeaker{color:#776b62;font-style:italic;text-transform:none;letter-spacing:0;font-family:'Cormorant Garamond',serif;font-size:1rem}
.threadtext{white-space:pre-line;font-size:1.18rem;line-height:1.45}
.daytag{text-align:center;color:var(--rose);font-family:Montserrat,sans-serif;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;margin-bottom:18px}
.choices{display:grid;grid-template-columns:1fr;gap:18px}
.choice{position:relative;border:1px solid var(--line);border-radius:24px;background:rgba(251,247,240,.55);padding:18px;text-align:center}
.choice img{display:block;width:100%;max-width:280px;aspect-ratio:4/3;object-fit:contain;margin:0 auto 8px;mix-blend-mode:multiply}
.choice button{all:unset;cursor:pointer;display:block;width:100%}
.name{font-size:2rem;letter-spacing:.12em;font-weight:600}
.desc{display:block;font-family:Montserrat,sans-serif;font-size:.86rem;color:#504a46;margin-top:4px}
.card{border:1px solid var(--line);border-radius:24px;background:rgba(251,247,240,.55);padding:24px;box-shadow:var(--shadow)}
.speaker{text-align:center;font-family:Montserrat,sans-serif;letter-spacing:.22em;font-size:.78rem;margin-bottom:18px}
.message{white-space:pre-line;font-size:clamp(1.45rem,5vw,1.95rem);line-height:1.4}
.destroy{text-align:center;font-style:italic;color:#756a62;margin:20px 0}
.timerbox{border:1px solid var(--line);border-radius:24px;padding:24px;background:rgba(251,247,240,.52);text-align:center}
.timer{font-size:clamp(3rem,12vw,5rem);color:var(--rose);letter-spacing:.08em;line-height:1}
.small{font-family:Montserrat,sans-serif;font-size:.76rem;color:var(--rose)}
.quip{font-style:italic;color:#756a62;margin-top:18px;min-height:2.4em}
.riddle{border:1px solid var(--line);border-radius:24px;padding:28px 22px;background:rgba(251,247,240,.52);text-align:center}
.timeform{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:22px}
.timefield{width:145px;min-height:52px;border:1px solid var(--rose);border-radius:14px;background:rgba(255,255,255,.35);text-align:center;font-family:Montserrat,sans-serif;font-size:1rem}
.hint{margin-top:18px;padding-top:16px;border-top:1px solid var(--soft);white-space:pre-line;font-style:italic;font-size:1.16rem}
.letter{white-space:pre-line;font-size:clamp(1.4rem,4.8vw,1.86rem);line-height:1.52}
.adminbar{margin:-18px auto 20px;padding:9px 12px;background:#2d2926;color:white;border-radius:999px;font-family:Montserrat,sans-serif;font-size:.66rem;text-align:center;overflow:auto;white-space:nowrap}
.adminbar a{color:white;text-decoration:none;margin:0 6px}
.note{padding:14px 16px;border-top:1px solid var(--soft);border-bottom:1px solid var(--soft);text-align:center;font-style:italic;color:#756a62;margin-bottom:22px}
@media(min-width:680px){.choices{grid-template-columns:1fr 1fr}}


/* V5.3 — interactions visibles */
.btn{
  cursor:pointer;
  transition:background-color .18s ease,color .18s ease,transform .12s ease,box-shadow .18s ease;
}
.btn:hover,
.btn:focus-visible{
  background:var(--rose);
  color:#fff;
  box-shadow:0 8px 22px rgba(174,93,96,.18);
  outline:none;
}
.btn:active{
  transform:translateY(1px) scale(.99);
  box-shadow:0 3px 10px rgba(174,93,96,.15);
}
.choice{
  transition:border-color .18s ease,box-shadow .18s ease,transform .12s ease,background-color .18s ease;
}
.choice:hover,
.choice:focus-within{
  border-color:var(--rose);
  box-shadow:0 10px 28px rgba(174,93,96,.11);
  background:rgba(251,247,240,.78);
}
.choice:active{transform:translateY(1px)}
.choice button{cursor:pointer}
.timeline a .node{transition:background-color .18s ease,color .18s ease,transform .12s ease}
.timeline a:hover .node{
  background:var(--rose);
  color:#fff;
  transform:translateY(-1px);
}


/* =========================================================
   V5.4 — densité verticale / lecture mobile plus fluide
   ========================================================= */

/* Fil des jours précédents : compact, lisible, sans grands blancs */
.thread{
  margin:0 auto 20px;
}
.threadhead{
  margin-bottom:8px;
}
.threaditem{
  padding:10px 0 12px;
}
.threadmeta{
  margin-bottom:4px;
}
.threadtext{
  font-size:1.08rem;
  line-height:1.34;
}

/* Les retours ligne issus du contenu restent, mais on réduit fortement
   l'effet de "paragraphes géants" sur mobile. */
.threadtext br + br,
.message br + br,
.letter br + br{
  line-height:.55;
}

/* Messages du jour : carte moins haute, texte plus dense */
.card{
  padding:20px 22px;
}
.message{
  font-size:clamp(1.32rem,4.6vw,1.72rem);
  line-height:1.34;
}
.speaker{
  margin-bottom:12px;
}
.destroy{
  margin:14px 0 18px;
}

/* Images : présence conservée mais moins de hauteur consommée */
.duo{
  margin-bottom:14px;
}
.single{
  width:min(500px,92%);
  margin:0 auto 14px;
}

/* En-têtes et repères */
.timeline{
  margin:6px auto 22px;
}
.legend{
  margin-top:9px;
}
.daytag{
  margin-bottom:12px;
}
.title{
  margin-bottom:14px;
}
.orn{
  margin:12px auto 18px;
}
.sub{
  margin-top:0;
  margin-bottom:18px;
}

/* Révélation J4 : éviter une succession de grosses cartes très longues */
body .card + .card{
  margin-top:10px;
}

/* Grande lettre : plus éditoriale, moins "un bloc = une page" */
.letter{
  font-size:clamp(1.28rem,4.4vw,1.66rem);
  line-height:1.42;
}

/* Mobile : on serre encore légèrement */
@media(max-width:520px){
  .shell{
    padding-top:22px;
    padding-bottom:44px;
  }
  .brandline{
    margin-bottom:12px;
  }
  .duo{
    width:100%;
    margin-bottom:10px;
  }
  .single{
    width:100%;
    margin-bottom:10px;
  }
  .timeline{
    margin-bottom:18px;
  }
  .threaditem{
    padding:8px 0 10px;
  }
  .threadtext{
    font-size:1.02rem;
    line-height:1.28;
  }
  .card{
    padding:18px 18px;
  }
  .message{
    font-size:1.24rem;
    line-height:1.31;
  }
  .speaker{
    margin-bottom:10px;
  }
  .destroy{
    margin:12px 0 16px;
  }
}


/* =========================================================
   V5.5 — compacité réelle + correction J5
   ========================================================= */

.pgap{
  display:block;
  height:.55em;
}

/* Le duo reste une signature visuelle, mais ne monopolise plus l'écran */
.duo{
  width:min(640px,100%);
  max-height:210px;
  object-fit:cover;
  object-position:center 47%;
}

/* L'hirondelle du message devient un portrait d'accompagnement */
.single{
  width:min(390px,82%);
  max-height:225px;
  object-fit:cover;
  object-position:center;
}

/* Le fil historique doit se lire comme des notes, pas comme des cartes géantes */
.thread{
  margin-bottom:14px;
}
.threaditem{
  padding:7px 0 8px;
}
.threadtext{
  font-size:1rem;
  line-height:1.24;
}
.threadmeta{
  margin-bottom:2px;
}

/* Message du jour */
.card{
  padding:16px 18px 17px;
}
.message{
  font-size:1.20rem;
  line-height:1.27;
}
.speaker{
  margin-bottom:8px;
}
.destroy{
  margin:9px 0 13px;
  line-height:1.2;
}

/* Réduire les respirations purement décoratives */
.timeline{margin-bottom:14px}
.legend{margin-top:6px}
.daytag{margin-bottom:8px}
.brandline{margin-bottom:10px}
.title{margin-bottom:10px}
.orn{margin:8px auto 14px}
.sub{margin-bottom:14px}

/* La révélation J4 doit rester spectaculaire sans devenir interminable */
.note{
  margin-bottom:12px;
  padding:9px 12px;
}
.card + .note,
.note + .card{
  margin-top:8px;
}

/* Lettre finale */
.letter{
  font-size:1.22rem;
  line-height:1.34;
}

/* Boutons plus proches du contenu */
.center .btn{
  margin-top:4px;
}

@media(max-width:520px){
  .shell{
    padding:16px 14px 34px;
  }
  .duo{
    max-height:185px;
    margin-bottom:7px;
  }
  .single{
    width:78%;
    max-height:190px;
    margin-bottom:7px;
  }
  .track:before{top:14px}
  .node{width:28px;height:28px}
  .timeline{margin-bottom:12px}
  .threadhead{margin-bottom:5px}
  .threaditem{padding:6px 0 7px}
  .threadtext{
    font-size:.96rem;
    line-height:1.20;
  }
  .card{
    padding:14px 15px 15px;
    border-radius:20px;
  }
  .message{
    font-size:1.14rem;
    line-height:1.24;
  }
  .pgap{height:.42em}
  .destroy{
    font-size:.94rem;
    margin:8px 0 11px;
  }
}


/* V5.6 — dernière page */
.letter{
  max-width:680px;
  margin:0 auto;
  padding:4px 2px 28px;
}
@media(max-width:520px){
  .letter{
    font-size:1.16rem;
    line-height:1.31;
  }
}


/* =========================================================
   V5.7 — compacité forte + simulation réelle
   ========================================================= */
.pgap{height:.18em}

/* Le fil historique devient presque un résumé éditorial */
.threaditem{padding:4px 0 5px}
.threadtext{font-size:.94rem;line-height:1.16}
.threadmeta{margin-bottom:1px}
.threadhead{margin-bottom:3px}
.thread{margin-bottom:10px}

/* Message principal */
.card{padding:13px 15px 14px}
.message{font-size:1.11rem;line-height:1.20}
.speaker{margin-bottom:6px}
.destroy{margin:6px 0 9px}

/* Réduction des illustrations */
.duo{max-height:165px;margin-bottom:6px}
.single{max-height:160px;width:70%;margin-bottom:5px}

/* Espaces généraux */
.brandline{margin:6px auto 7px}
.timeline{margin:3px auto 10px}
.legend{margin-top:4px}
.daytag{margin-bottom:5px}
.note{padding:7px 10px;margin-bottom:8px}
.title{margin-bottom:7px}
.orn{margin:6px auto 10px}
.sub{margin-bottom:10px}

/* Grande lettre : lecture continue */
.letter{font-size:1.08rem;line-height:1.24}
.letter .pgap{height:.22em}

@media(max-width:520px){
  .shell{padding:12px 12px 28px}
  .duo{max-height:150px}
  .single{max-height:145px;width:66%}
  .threadtext{font-size:.91rem;line-height:1.14}
  .message{font-size:1.07rem;line-height:1.18}
  .letter{font-size:1.02rem;line-height:1.20}
  .pgap{height:.14em}
}