/* ============================================
   lucasmarens.com — Lettres d'Halvern
   Papier, encre, tampon.
   ============================================ */

:root{
  --papier:#F4F0E6;
  --papier-fonce:#ECE6D6;
  --encre:#1A1A1A;
  --encre-pale:#55524A;
  --tampon:#A33C3C;
  --ligne:#D8D0BC;
}

*{margin:0;padding:0;box-sizing:border-box}

body{
  background:var(--papier);
  color:var(--encre);
  font-family:'Lora',Georgia,serif;
  font-size:1.06rem;
  line-height:1.75;
}

/* ---------- Navigation ---------- */
header{
  border-bottom:2px solid var(--encre);
  background:var(--papier);
  position:sticky;top:0;z-index:50;
}
.nav{
  max-width:1000px;margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.logo{
  font-family:'Special Elite',Courier,monospace;
  font-size:1.25rem;letter-spacing:.06em;
  text-decoration:none;color:var(--encre);
}
.logo span{color:var(--tampon)}
nav.menu{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
nav.menu a{
  text-decoration:none;color:var(--encre-pale);
  font-family:'Special Elite',Courier,monospace;font-size:.92rem;
}
nav.menu a:hover,nav.menu a.actif{color:var(--tampon)}
.cta{
  background:var(--tampon);color:var(--papier)!important;
  padding:8px 16px;border:none;
  font-family:'Special Elite',Courier,monospace;font-size:.9rem;
  text-decoration:none;display:inline-block;
}
.cta:hover{background:#8B3232}

/* ---------- Hero ---------- */
.hero{
  max-width:780px;margin:0 auto;padding:80px 24px 56px;text-align:center;
}
.hero .tampon{
  display:inline-block;
  border:3px solid var(--tampon);color:var(--tampon);
  font-family:'Special Elite',Courier,monospace;
  padding:10px 22px;font-size:1.05rem;letter-spacing:.08em;
  transform:rotate(-2.5deg);
  margin-bottom:36px;text-transform:uppercase;
}
.hero h1{
  font-family:'Special Elite',Courier,monospace;
  font-size:clamp(1.6rem,4vw,2.4rem);
  font-weight:normal;line-height:1.35;margin-bottom:22px;
}
.hero p{color:var(--encre-pale);max-width:600px;margin:0 auto 34px}
.hero .cta{font-size:1rem;padding:13px 28px}

/* ---------- Cartes ---------- */
.cartes{
  max-width:1000px;margin:0 auto;padding:20px 24px 70px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:22px;
}
.carte{
  background:var(--papier-fonce);
  border:1px solid var(--ligne);
  border-top:4px solid var(--encre);
  padding:28px 24px;
  display:flex;flex-direction:column;
}
.carte .etiquette{
  font-family:'Special Elite',Courier,monospace;
  font-size:.8rem;color:var(--tampon);letter-spacing:.1em;
  text-transform:uppercase;margin-bottom:12px;
}
.carte h3{
  font-family:'Special Elite',Courier,monospace;
  font-weight:normal;font-size:1.15rem;margin-bottom:12px;line-height:1.4;
}
.carte p{font-size:.95rem;color:var(--encre-pale);flex:1}
.carte a{
  margin-top:18px;color:var(--tampon);text-decoration:none;
  font-family:'Special Elite',Courier,monospace;font-size:.9rem;
}
.carte a:hover{text-decoration:underline}

/* ---------- Contenu article ---------- */
.page{max-width:700px;margin:0 auto;padding:60px 24px 40px}
.page h1{
  font-family:'Special Elite',Courier,monospace;
  font-weight:normal;font-size:2rem;margin-bottom:8px;line-height:1.3;
}
.page .sous-titre{
  font-style:italic;color:var(--encre-pale);margin-bottom:44px;font-size:1rem;
}
.page h2{
  font-family:'Special Elite',Courier,monospace;
  font-weight:normal;font-size:1.3rem;
  margin:48px 0 16px;padding-bottom:8px;
  border-bottom:1px solid var(--ligne);
}
.page p{margin-bottom:18px}
.page .exergue{
  border-left:4px solid var(--tampon);
  padding:6px 0 6px 22px;margin:34px 0;
  font-style:italic;font-size:1.15rem;line-height:1.6;
}

/* ---------- Fiches carnet ---------- */
.fiche{
  background:var(--papier-fonce);
  border:1px solid var(--ligne);
  padding:26px 26px 22px;margin-bottom:26px;
  position:relative;
}
.fiche::before{
  content:"LE CARNET";
  position:absolute;top:-11px;left:18px;
  background:var(--papier);padding:0 10px;
  font-family:'Special Elite',Courier,monospace;
  font-size:.75rem;color:var(--tampon);letter-spacing:.12em;
}
.fiche h3{
  font-family:'Special Elite',Courier,monospace;
  font-weight:normal;font-size:1.2rem;margin-bottom:14px;
}
.fiche p{
  font-family:'Special Elite',Courier,monospace;
  font-size:.93rem;line-height:1.7;color:var(--encre);
  margin-bottom:10px;
}
.fiche .lien-episode{
  display:inline-block;margin-top:8px;
  color:var(--tampon);text-decoration:none;
  font-family:'Special Elite',Courier,monospace;font-size:.88rem;
}
.fiche .lien-episode:hover{text-decoration:underline}

/* ---------- Lexique ---------- */
.lexique{margin:24px 0}
.lexique dt{
  font-family:'Special Elite',Courier,monospace;
  color:var(--tampon);margin-top:18px;font-size:1.02rem;
}
.lexique dd{margin-left:0;color:var(--encre);font-style:italic}

/* ---------- Bloc abonnement ---------- */
.abonnement{
  background:var(--encre);color:var(--papier);
  padding:60px 24px;text-align:center;
}
.abonnement h2{
  font-family:'Special Elite',Courier,monospace;
  font-weight:normal;font-size:1.5rem;margin-bottom:12px;
}
.abonnement p{color:#C9C4B8;max-width:520px;margin:0 auto 28px;font-size:.98rem}
.abonnement iframe{
  border:1px solid #444;background:white;max-width:480px;width:100%;height:150px;
}

/* ---------- Footer ---------- */
footer{
  border-top:2px solid var(--encre);
  padding:40px 24px 50px;text-align:center;
}
footer .devise{
  font-family:'Special Elite',Courier,monospace;
  font-size:1.05rem;margin-bottom:18px;
}
footer .devise span{color:var(--tampon)}
footer p{font-size:.85rem;color:var(--encre-pale);margin-bottom:8px}
footer a{color:var(--encre-pale)}
footer a:hover{color:var(--tampon)}

@media(max-width:640px){
  .hero{padding:56px 20px 40px}
  .nav{justify-content:center}
}