body {
    font-family: Arial, sans-serif;
    color: var(--text); /* texte général en blanc */
    margin: 0;
    padding: 0;
    text-align: center;
    background: url('img/fondperso.png') no-repeat center center fixed;
    background-size: cover;
}

/* NAVIGATION (fond foncé #343940, texte clair) */
nav {
  background-color: #343940;
  display: flex;
  justify-content: center;
  padding: 1rem;
  flex-wrap: wrap;
}
nav a {
  color: #F2E4C9;
  margin: 0 2rem;
  text-decoration: none;
  font-weight: bold;
  padding: 6px 10px;
  border-radius: 10px;
}
nav a:hover { background: rgba(255,255,255,0.08); }

/* HERO (centré, texte clair) */
.hero {
  position: relative;
  min-height: 48vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 48px 16px;
  color: var(--text);
}
.hero::before {
  content:"";
  position:absolute; inset:0;
  background:url('img/fond.png') center/cover no-repeat fixed;
  opacity:.45;
}
.hero > .inner { position:relative; max-width:900px; margin:0 auto; }
.hero h1 { margin:0 0 8px; font-size:clamp(28px,4vw,44px); }
.hero p { margin:0 0 18px; color:var(--muted); }
.hero .cta {
  display:inline-block;
  padding:12px 18px;
  border-radius:10px;
  background:var(--accent);
  color:#1d1d1d;
  text-decoration:none;
  font-weight:700;
}

header h1 {
    color: #fff;
}

.character-container {
    max-width: 800px;
    margin: auto;
    padding: 20px;
    background: rgba(0, 0, 0, 0.4); /* fond semi-transparent pour lisibilité */
    border-radius: 10px;
}

.character-container img {
    max-width: 100%;
    border-radius: 10px;
}

.character-container h2 {
    margin-top: 15px;
    color: #fff;
}

/* Correction pour citations */
.character-container blockquote,
.character-card blockquote {
    font-style: italic;
    background: var(--quote-bg);
    color: var(--quote-text);
    margin: 12px 0;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 1.05em;
}

.character-container p,
.character-card p {
    color: var(--text); /* texte palette */
    line-height: 1.6;
}

.tome-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
}

.tome-nav button {
    background: none;
    border: none;
    font-size: 24px;
    color: #fff;
    cursor: pointer;
}

.bottom-tabs {
    margin-top: 20px;
    background: var(--tabs-bg);
    padding: 10px 0;
}

.bottom-tabs a {
    color: #fff;
    text-decoration: none;
    margin: 0 10px;
}

.bottom-tabs a:hover {
    text-decoration: underline;
    opacity: .85;
}


/* === [DAYAHL — Thèmes dynamiques par tome | palettes] ===
Règles :
- Fonds & onglets : couleur la plus foncée de la palette
- Citation : fond = 2e plus claire ; texte = foncé pour contraste
- Texte : couleur la plus claire
*/

:root{
  --text:#ffffff;
  --bg:#262626;
  --tabs-bg:#262626;
  --quote-bg:#262626;
  --quote-text:#F2CCB6;
  --card-bg: rgba(0,0,0,.45);
}

/* Tome 1 — palette bleue & beige
#343940, #262626, #F2E4C9, #F2CCB6, #BF877A */
body[data-tome="1"]{
  --text:#F2E4C9;        /* la plus claire */
  --bg:#262626;          /* la plus foncée */
  --tabs-bg:#262626;
  --quote-bg:#262626;    /* 2e plus claire */
  --quote-text:#F2CCB6;  /* texte foncé pour contraste */
  background: url('img/fond_t1.png') no-repeat center center fixed !important;
  background-size: cover !important;
}

/* Tome 2 — palette vert & jaune
#1D1E18, #A0A676, #D9C355, #D9B95B, #262117 */
body[data-tome="2"]{
  --text:#FFFDAC;        /* la plus claire parmi les 2 jaunes */
  --bg:#1D1E18;          /* la plus foncée */
  --tabs-bg:#1D1E18;
  --quote-bg:#1D1E18;    /* 2e plus claire */
  --quote-text:#D9B95B;  /* foncé */
  background: url('img/fond_t2.png') no-repeat center center fixed !important;
  background-size: cover !important;
}

/* Tome 3 — palette bleu-violet & orange
#090126, #1B1640, #41358C, #F0A64F, #FCF8F5 */
body[data-tome="3"]{
  --text:#FCF8F5;        /* la plus claire */
  --bg:#090126;          /* la plus foncée */
  --tabs-bg:#090126;
  --quote-bg:#090126;    /* 2e plus claire */
  --quote-text:#F0A64F;  /* foncé (indigo) */
  background: url('img/fond_t3.png') no-repeat center center fixed !important;
  background-size: cover !important;
}

/* Tome 4 — palette rouge
#620E0E, #330009, #D98B2B, #BF522A, #240503 */
body[data-tome="4"]{
  --text:#D98B2B;        /* la plus claire du set */
  --bg:#240503;          /* la plus foncée */
  --tabs-bg:#240503;
  --quote-bg:#240503;    /* 2e plus claire */
  --quote-text:#BF522A;  /* foncé (bordeaux) */
  background: url('img/fond_t4.png') no-repeat center center fixed !important;
  background-size: cover !important;
}


/* Cartes personnages (styles génériques) */
.character-card{
  background: var(--card-bg);
  color: var(--text);
  border-radius: 12px;
  padding: 16px;
  text-align: left;
}
.character-card blockquote{ color: var(--quote); }

/* Barre de sélection globale */
.tome-global{
  display:flex; align-items:center; justify-content:center; gap:12px;
  margin: 10px 0 24px;
}
.tome-global button{
  background:none; border:none; color:var(--text); font-size:24px; cursor:pointer;
}
.tome-global #tome-label{ font-weight:700; letter-spacing:.5px; }


/* Centre & grid for characters */
.characters-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;max-width:1200px;margin:0 auto;padding:0 16px;}
.characters-grid img{width:100%;height:auto;display:block;border-radius:10px;}

/* Liens bas de page */
.page-links{
  text-align:center;
  margin: 32px auto 16px;
}
.page-links .nav-link{
  display:inline-block;
  margin: 0 10px;
  padding: 8px 16px;
  background: var(--card-bg);
  color: var(--text);
  text-decoration: none;
  border-radius: 8px;
  transition: background 0.3s;
}
.page-links .nav-link:hover{
  background: rgba(255,255,255,0.12);
}

.tome-global{ gap:8px; }
.tome-global button{ font-size:28px; padding:6px 10px; }
#tome-label{ font-size:1.1rem; }

@media (max-width:768px){
  .characters-grid{ display:grid; grid-template-columns:1fr; gap:16px; }
  .character-card{ padding:14px; }
}

/* Bouton ON/OFF descriptions */
.toggle-desc-container {
    text-align: center;
    margin: 15px 0 25px 0;
}

#toggle-descriptions {
    background-color: #cbb89d; /* beige charte */
    color: #1a2a3a; /* bleu foncé charte */
    border: none;
    padding: 8px 20px;
    font-size: 1rem;
    font-family: inherit;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

#toggle-descriptions:hover {
    background-color: #b29e85;
    transform: scale(1.03);
}

#toggle-descriptions[aria-pressed="true"] {
    background-color: #1a2a3a; /* bleu foncé */
    color: #fff;
}