:root{
  --bg:#121212;
  --panel:rgba(18,18,18,.72);
  --border:#2a2a2a;
  --text-main:#e8e8e8;
  --text-secondary:#b8b8b8;
  --max:1100px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text-main);font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.65}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
main{max-width:var(--max);margin:0 auto;padding:3rem 1.5rem 4rem}
h1,h2,h3{font-family:'Libre Baskerville',serif;font-weight:700;letter-spacing:.01em}
h1{font-size:2.2rem;margin:.2rem 0 1.2rem}
h2{font-size:1.25rem;color:var(--text-secondary);margin:.2rem 0 1.2rem}
p{margin:0 0 1rem;color:var(--text-main)}
ul{color:var(--text-main)}
small, .muted{color:var(--text-secondary)}

/* Header nav */
header.site-header{
  position:sticky;top:0;z-index:2000;
  background:rgba(18,18,18,.9);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--border);
}
.nav{max-width:var(--max);margin:0 auto;padding:.8rem 1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.nav-title{font-family:'Libre Baskerville',serif;font-size:.95rem;letter-spacing:.05em;white-space:nowrap}
.nav-menu{display:flex;flex-wrap:wrap;gap:1rem;justify-content:flex-end}
.nav-menu a{font-size:.9rem;color:var(--text-secondary)}
.nav-menu a:hover{color:var(--text-main);text-decoration:none}

/* Hero */
.hero{
  position:relative;min-height:90vh;
  display:flex;align-items:center;justify-content:center;
  background:
    linear-gradient(rgba(18,18,18,0.45), rgba(18,18,18,0.65)),
    url('../images/accueil/fond-accueil.jpg') center/cover no-repeat;
}
.hero-content{max-width:var(--max);padding:3rem 1.5rem}
.hero-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:3rem;align-items:center}
@media (max-width: 900px){.hero-grid{grid-template-columns:1fr}}

.cover{display:flex;justify-content:center}
.cover img{max-width:290px;width:100%;height:auto;box-shadow:0 10px 30px rgba(0,0,0,.6)}

/* Buy banner */
.buy-banner{
  position:fixed;left:0;right:0;bottom:0;z-index:1500;
  padding:.75rem 1rem;
  background:rgba(0,0,0,.8);
  border-top:1px solid var(--border);
  text-align:center;
  color:var(--text-secondary);
  font-size:.9rem;
}

/* Cards (Lieux / Personnages lists) */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2rem;margin-top:2.2rem}
.card{
  display:block;padding:2rem;border:1px solid var(--border);
  background:rgba(18,18,18,.6);
  transition:background .25s ease, transform .25s ease;
}
.card:hover{background:rgba(18,18,18,.82);transform:translateY(-4px);text-decoration:none}
.card h3{margin:0 0 .6rem;font-size:1.15rem}
.card p{margin:0;color:var(--text-secondary)}

/* Simple list styling */
.personnages-list{list-style:none;padding-left:0;margin-top:2rem}
.personnages-list li{margin:.55rem 0}
.personnages-list a{color:var(--text-main)}
.personnages-list a:hover{color:#ffffff}

/* Intro overlay (quote) */
.intro-overlay{
  position:fixed;inset:0;background:#121212;
  display:flex;align-items:center;justify-content:center;
  z-index:5000;opacity:1;transition:opacity 2.5s ease;
}
.intro-overlay.fade-out{opacity:0;pointer-events:none}
.intro-quote{
  max-width:900px;padding:3rem 2rem;text-align:center;
  font-family:'Libre Baskerville',serif;
  font-size:2.1rem;line-height:1.5;color:#f0f0f0;
}
.intro-quote span{
  display:block;margin-top:2rem;font-size:1rem;
  letter-spacing:.05em;color:#b5b5b5;
}

/* Watermark backgrounds */
body.bibliographie{
  background:
    linear-gradient(rgba(18,18,18,0.7), rgba(18,18,18,0.7)),
    url('../images/cartes/aran-plan-filigrane.jpg') center/contain no-repeat fixed;
}
body.makingoff{
  background:
    radial-gradient(circle at center, rgba(18,18,18,0.65) 0%, rgba(18,18,18,0.85) 60%, rgba(0,0,0,0.95) 100%),
    url('../images/illustrations/navire-filigrane.png') center/contain no-repeat fixed;
}


/* Personnages pages background */

/* Two-column character layout */
.character-grid{
  display:grid;
  grid-template-columns: 1fr 1.4fr;
  gap:3rem;
  align-items:flex-start;
}
.character-grid img{
  max-width:100%;
  height:auto;
}
@media (max-width: 900px){
  .character-grid{grid-template-columns:1fr}
}

/* Personnages: fond commun (dégradé sur noir) */
body.personnage{
  background:
    linear-gradient(rgba(0,0,0,0.60), rgba(0,0,0,0.70)),
    url('../images/personnages/fond-personnages.jpg') center/cover no-repeat fixed;
}

/* Mise en page personnage: image à gauche, texte à droite */
.character-grid{
  display:grid;
  grid-template-columns: 1fr 1.45fr;
  gap:3rem;
  align-items:flex-start;
}
.character-grid .portrait img{
  width:100%;
  height:auto;
  max-width:420px;
  display:block;
  box-shadow:0 10px 30px rgba(0,0,0,.55);
}
@media (max-width: 900px){
  .character-grid{grid-template-columns:1fr}
  .character-grid .portrait img{max-width:320px;margin:0 auto;}
}


/* Extrait du roman */
.excerpt{
  color:#b21e1e; /* rouge profond */
  font-style:italic;
  line-height:1.7;
}
.excerpt p::before{
  content:"« ";
}
.excerpt p::after{
  content:" »";
}

/* Character name above excerpt */
.character-name{
  font-family:'Libre Baskerville', serif;
  font-size:2.2rem;
  margin:0 0 1.2rem 0;
  color:#f0f0f0;
}

/* Portrait sizing and alignment */
.character-grid{
  align-items:flex-start;
}
.character-grid .portrait img{
  max-width:480px; /* enlarged portrait */
  margin-top:0;    /* align top with text */
}

/* Align portrait with first italic line (below character name) */
.character-grid .portrait{
  padding-top:3.2rem; /* matches character-name block height */
}
.character-name{
  margin-bottom:1.2rem;
}

/* Navigation: bold titles and allow line breaks */
.nav-menu a{
  font-weight:700;
  line-height:1.2;
  white-space:normal;
  text-align:center;
}
.nav-menu a span{
  display:block;
}
/* ALIGN PORTRAIT WITH FIRST ITALIC LINE (ignore character name) */
.character-grid{
  align-items:flex-start;
}
.character-grid .portrait{
  margin-top:3.6rem; /* equals character-name block height */
}



/* ===== NEUTRALISATION ANCIEN FOOTER ===== */
footer:not(.site-footer),
.page-footer,
.old-footer{
  display: none !important;
}

/* Supprime toute bande noire basse parasite */
body::after,
main::after{
  content: none !important;
}


/* === FOOTER STICKY GLOBAL (AJUSTEMENT UNIQUE) === */
.site-footer{
  position: sticky;
  bottom: 0;
  z-index: 1000;
}


/* === FIX LIEUX DU ROMAN : IMAGES GRAND FORMAT (sans toucher au reste) === */
.lieux img,
.lieux-du-roman img {
  width: 100%;
  max-width: 100%;
  height: auto;
}


/* === UNIFICATION BANDEAU + TITRES ORANGE (NE RIEN TOUCHER D'AUTRE) === */
.nav-title a,
.nav-menu a {
  color: #f28c28 !important;
}

.nav-title {
  font-family: inherit !important;
  font-size: inherit !important;
  letter-spacing: inherit !important;
}

.nav-title a {
  text-transform: capitalize;
}


/* === FIX FOOTER PAGES COURTES (PERSONNAGES) : AUCUNE MODIF AILLEURS === */
html, body { height: 100%; }
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }
.site-footer { margin-top: auto !important; flex-shrink: 0; }


/* === FORCE IMAGES LIEUX DU ROMAN EN GRAND FORMAT (CORRECTION CIBLEE) === */
.lieux-du-roman img,
.lieux img {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
}


/* =========================================================
   PATCH — HEADER IDENTIQUE À L’INDEX (override)
   (à laisser EN FIN de fichier)
   ========================================================= */
header.site-header{
  position: sticky !important;
  top: 0 !important;
  z-index: 2000 !important;
  background: rgba(0,0,0,.65) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border-bottom: 1px solid rgba(255,255,255,.15) !important;
}

header.site-header .nav{
  max-width: var(--max) !important;
  margin: 0 auto !important;
  padding: .9rem 1.5rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
}

header.site-header .nav-title a{
  color: #f28c28 !important;
  text-decoration: none !important;
}

header.site-header .nav-menu a{
  color:#f28c28 !important;
  background: rgba(200,200,200,.14) !important;
  border:1px solid rgba(242,140,40,.35) !important;
  padding:.35em .8em !important;
  border-radius:6px !important;
  text-decoration:none !important;
}

header.site-header .nav-menu a:hover{
  background: rgba(200,200,200,.24) !important;
  border-color: rgba(242,140,40,.75) !important;
}

header.site-header .nav-lang a,
header.site-header .lang a{
  font-size:22px !important;
  line-height:1 !important;
  text-decoration:none !important;
}


/* =========================================================
   Mobile: keep top nav (site-header) on one line + horizontal scroll
   Prevents the buttons from stacking vertically on iPhone
   ========================================================= */
@media (max-width: 768px){
  header.site-header .nav-menu{
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
    gap: .75rem;
  }
  header.site-header .nav-menu a{
    flex: 0 0 auto;
    white-space: nowrap;
  }
  header.site-header .nav-menu::-webkit-scrollbar{display:none;}
}


/* =========================================================
   MOBILE FIX – FOOTER CTA
   Empêche le bouton "acheter le livre" de passer sur 2 lignes
   ========================================================= */
@media (max-width: 768px){
  footer a{
    white-space: nowrap;
  }
}


/* =========================================================
   FOOTER CLEANUP
   Masquer le bouton "like" (❤)
   ========================================================= */
footer .like-btn,
.site-footer .like-btn{
  display: none !important;
}