/* ============ Le Roman Permanent — feuille de lecture ============ */
:root{
  --bg:#0d0f12;
  --bg-soft:#111419;
  --card:#161a21;
  --card-hover:#1b2028;
  --border:#2b303a;
  --text:#eae5d8;
  --text-dim:#9aa2b0;
  --text-faint:#6b7280;
  --accent:#8fb2dd;
  --accent-strong:#c9d8ef;
  --ok:#9fdcbc;
  --err:#ffb49b;
  --serif:Georgia,"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua","Noto Serif",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --radius:12px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
#abonner{scroll-margin-top:1.25rem}
body{
  margin:0;
  background:var(--bg);
  background-image:radial-gradient(circle at 15% 0%, rgba(80,110,150,.08), transparent 45%);
  background-attachment:fixed;
  color:var(--text);
  font-family:var(--serif);
  font-size:clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.wrap{
  max-width:43rem;
  margin:0 auto;
  padding:1.25rem 1.1rem 5rem;
}
/* ---------- Entêtes ---------- */
header{
  border-bottom:1px solid var(--border);
  padding-bottom:1.1rem;
  margin-bottom:2rem;
}
header.topbar{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:.6rem 1rem;
}
h1{
  font-size:clamp(1.6rem, 1.3rem + 1.2vw, 2.15rem);
  line-height:1.25;
  margin:.35rem 0 .6rem;
  text-wrap:balance;
  letter-spacing:.01em;
}
h2{
  font-size:clamp(1.2rem, 1.05rem + .7vw, 1.45rem);
  color:var(--accent-strong);
  border-left:3px solid var(--accent);
  padding-left:.7rem;
  margin:2.6rem 0 1rem;
  text-wrap:balance;
}
h3{font-size:1.15em; margin:.4rem 0; text-wrap:balance}
p{margin:0 0 1.15em; text-wrap:pretty}
a{color:var(--accent); text-decoration:none; border-bottom:1px solid transparent; transition:color .15s ease,border-color .15s ease}
@media (hover:hover){ a:hover{color:var(--accent-strong); border-bottom-color:var(--accent)} }
a:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:3px}
.meta{color:var(--text-dim); font-size:.85em; font-family:var(--sans); letter-spacing:.02em}
/* ---------- Lien d'abonnement dans l'en-tête ---------- */
.abonne-link{
  margin-left:auto;
  font-family:var(--sans);
  font-size:.9rem;
  font-weight:600;
  background:linear-gradient(180deg,#45678c,#3a5a7a);
  color:#fff;
  border-radius:999px;
  padding:.55rem 1.1rem;
  white-space:nowrap;
  border-bottom:none;
}
@media (hover:hover){ .abonne-link:hover{color:#fff; filter:brightness(1.12)} }
/* ---------- Alertes ---------- */
.alert{padding:.9rem 1.1rem; border-radius:var(--radius); margin:1.2rem 0; font-family:var(--sans); font-size:.95rem; animation:fadein .3s ease}
.alert.ok{background:#11241a; border:1px solid #2c5a40; color:var(--ok)}
.alert.err{background:#291309; border:1px solid #6b3d2b; color:var(--err)}
@keyframes fadein{from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:none}}
/* ---------- Formulaire d'abonnement ---------- */
form.sub{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:1.4rem;
  margin:1.4rem 0 1.8rem;
}
form.sub label{display:block; margin-bottom:.45rem; color:var(--text-dim); font-family:var(--sans); font-size:.92rem}
form.sub input[type=email]{
  width:100%;
  padding:.85rem 1rem;
  font-size:1rem;                       /* 16px+ empêche le zoom auto sur iOS */
  font-family:var(--sans);
  background:#0c0e11;
  border:1px solid #3a404c;
  color:var(--text);
  border-radius:10px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
form.sub input[type=email]:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(143,178,221,.25)}
form.sub button{
  margin-top:.9rem;
  width:100%;
  padding:.85rem 1.4rem;
  font-size:1.05rem;
  font-family:var(--sans);
  font-weight:600;
  background:linear-gradient(180deg,#45678c,#3a5a7a);
  color:#fff;
  border:none;
  border-radius:10px;
  cursor:pointer;
  transition:filter .15s ease, transform .06s ease;
  -webkit-tap-highlight-color:transparent;
}
@media (min-width:560px){ form.sub button{width:auto} form.sub input[type=email]{font-size:1.05rem} }
@media (hover:hover){ form.sub button:hover{filter:brightness(1.12)} }
form.sub button:active{transform:translateY(1px)}
/* ---------- Chapitres ---------- */
.chap{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.5rem 1.4rem;
  margin:1.1rem 0;
  box-shadow:var(--shadow);
}
.chap h3{margin-top:0}
.chap-body{
  font-size:clamp(1.0625rem, 1rem + .3vw, 1.22rem);
  line-height:1.85;
}
blockquote{
  border-left:3px solid var(--accent);
  margin:1.2rem 0;
  padding:.4rem 1.1rem;
  color:#cfc9b8;
  font-style:italic;
}
/* ---------- Hero : résumé du chapitre ---------- */
.hero{
  background:linear-gradient(180deg, rgba(143,178,221,.07), rgba(143,178,221,.03));
  border:1px solid var(--border);
  border-left:3px solid var(--accent);
  border-radius:var(--radius);
  padding:1rem 1.25rem 1.05rem;
  margin:0 0 1.4rem;
}
.hero-label{
  display:block;
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:.45rem;
}
.hero p{margin:0; color:#cfc9b8; font-style:italic; font-size:.98em; line-height:1.7}
.hero .meta{margin-top:.55rem; font-style:normal}
/* ---------- À cet instant de l'histoire ---------- */
.etat{
  background:linear-gradient(180deg, rgba(120,190,160,.08), rgba(120,190,160,.03));
  border:1px solid var(--border);
  border-left:3px solid #7cc2a0;
  border-radius:var(--radius);
  padding:1.05rem 1.25rem 1.05rem;
  margin:0 0 1.5rem;
}
.etat-label{
  display:block;
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#8fd3ae;
  margin-bottom:.45rem;
}
.etat p{margin:0 0 .5rem; color:#d6e2d8; line-height:1.7}
.etat .meta{margin:0}
/* ---------- Couverture (page d'accueil du vhost uniquement) ---------- */
/* ---------- Timeline : rejouer la progression ---------- */
.timeline{
  list-style:none;
  margin:1.4rem 0;
  padding:0;
  position:relative;
}
.timeline::before{
  content:"";
  position:absolute;
  left:9px;
  top:.4rem;
  bottom:.4rem;
  width:2px;
  background:var(--border);
}
.timeline-item{position:relative; padding:0 0 1.5rem 2.4rem}
.timeline-dot{
  position:absolute;
  left:2px;
  top:.45rem;
  width:16px;
  height:16px;
  border-radius:50%;
  background:var(--bg);
  border:3px solid var(--accent);
  box-shadow:0 0 0 3px rgba(143,178,221,.15);
}
.timeline-item:last-child .timeline-dot{border-color:#8fd3ae}
.timeline-content{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1rem 1.15rem;
}
.timeline-etat{margin:.2rem 0 .4rem; font-size:.98rem; line-height:1.65; color:#ddd7c9}
.timeline-lien{margin:0}
.timeline-lien a{font-family:var(--sans); font-size:.9rem}
/* ---------- Les personnages ---------- */
.intro{color:var(--text-dim); font-size:.95rem; margin-bottom:1.1rem}
.cta-personnages{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:.8rem 1.2rem;
  margin:1.6rem 0 1rem;
  padding:1.1rem 1.3rem;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.cta-personnages p{margin:0; color:var(--text-dim)}
.cta-personnages a{
  font-family:var(--sans);
  font-weight:600;
  background:linear-gradient(180deg,#45678c,#3a5a7a);
  color:#fff;
  border-radius:999px;
  padding:.6rem 1.2rem;
  white-space:nowrap;
}
@media (hover:hover){ .cta-personnages a:hover{color:#fff; filter:brightness(1.12)} }
/* ---------- Encart marketing : les lecteurs du matin ---------- */
.promo-sub{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1rem 1.4rem;
  margin:0 0 1.4rem;
  padding:1.35rem 1.5rem;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:linear-gradient(135deg, rgba(143,178,221,.10), rgba(124,194,160,.06));
  box-shadow:var(--shadow);
}
.promo-sub h3{margin:0 0 .35rem; font-size:1.25rem; color:var(--accent-strong)}
.promo-sub p{margin:0; color:var(--text-dim); font-size:.95rem; line-height:1.6}
.promo-sub-micro{margin-top:.45rem; font-family:var(--sans); font-size:.78rem; letter-spacing:.02em; color:var(--text-faint)}
.promo-sub-cta{
  font-family:var(--sans);
  font-weight:600;
  font-size:1.02rem;
  color:#fff;
  background:linear-gradient(180deg,#6aa05f,#4e7f4b);
  border-radius:999px;
  padding:.8rem 1.5rem;
  white-space:nowrap;
  box-shadow:0 6px 18px rgba(78,127,75,.35);
}
@media (hover:hover){ .promo-sub-cta:hover{color:#fff; filter:brightness(1.1)} }
@media (max-width:560px){
  .promo-sub-cta{width:100%; text-align:center}
}
.personnages{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:1rem;
}
.personnage{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1rem 1.1rem 1.05rem;
  box-shadow:var(--shadow);
  transition:border-color .15s ease, transform .15s ease;
}
@media (hover:hover){ .personnage:hover{border-color:var(--accent); transform:translateY(-2px)} }
.personnage-tete{display:flex; align-items:baseline; gap:.6rem; justify-content:space-between; margin-bottom:.4rem}
.personnage h3{margin:0; font-size:1.1rem; color:var(--accent-strong)}
.personnage .perso-role{margin:.2rem 0 .4rem; color:var(--text-dim); font-family:var(--sans); font-size:.86rem}
.personnage .perso-loc{margin:.2rem 0 .5rem; color:var(--text-faint); font-family:var(--sans); font-size:.85rem}
.personnage .perso-etat{margin:.1rem 0 0; font-size:.95rem; line-height:1.6; color:var(--text)}
.badge{
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.03em;
  border-radius:999px;
  padding:.2rem .6rem;
  white-space:nowrap;
}
.badge-oui{background:#11241a; border:1px solid #2c5a40; color:var(--ok)}
.badge-non{background:#2a1d18; border:1px solid #6b4634; color:#e0a98a}
/* ---------- Navigation chapitre ---------- */
.nav{
  margin-top:2.4rem;
  display:flex;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}
.nav a{
  font-family:var(--sans);
  font-size:.95rem;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:9px;
  padding:.65rem 1rem;
  transition:background .15s ease,border-color .15s ease;
}
@media (hover:hover){ .nav a:hover{background:var(--card-hover); border-color:var(--accent)} }
.nav a:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
/* ---------- Pied ---------- */
footer{margin-top:3.5rem; color:var(--text-faint); font-size:.85rem; font-family:var(--sans); line-height:1.6; border-top:1px solid var(--border); padding-top:1.4rem}
/* ---------- Pages confirm / désabonnement ---------- */
.page-centered{max-width:40rem; margin:0 auto; padding:1.25rem 1.1rem 5rem; text-align:center}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:2.2rem 1.6rem;
  margin-top:2rem;
  text-align:left;
}
.card h1{margin-top:0}
.ok{color:var(--ok)}
.err{color:var(--err)}
/* ---------- Accessibilité mobile / tablette ---------- */
@media (max-width:480px){
  body{line-height:1.7}
  .wrap{padding:1rem .85rem 4.5rem}
  .chap{padding:1.2rem 1rem}
  form.sub{padding:1.1rem}
  header{padding-bottom:.9rem; margin-bottom:1.5rem}
  h2{margin-top:2.1rem}
}
@media print{
  body{background:#fff; color:#111}
  .chap, form.sub, .card{background:#fff; border-color:#ccc; box-shadow:none}
  a{color:#111}
}