:root {
  /* Palette Dayahl */
  --bg: #262626;                         /* fond sombre principal */
  --panel: rgba(52,57,64,0.64);          /* #343940 translucide */
  --panel-border: rgba(255,255,255,0.10);
  --text: #F2E4C9;                       /* texte par défaut sur sombre */
  --muted: rgba(242,228,201,0.85);       /* texte atténué sur sombre */
  --accent: #BF877A;                     /* boutons / liens accent */

  /* Bande claire (actus) */
  --beige:#F2E4C9;                       /* fond clair */
  --ink:#262626;                         /* texte principal sur clair */
  --ink-sub:#343940;                     /* texte secondaire sur clair */
  --link-accent:#BF877A;                 /* liens sur clair */

  /* UI */
  --radius: 14px;
  --shadow: 0 10px 30px rgba(0,0,0,0.35);
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: url('img/fond.png') no-repeat center center fixed, var(--bg);
  background-size: cover;
  color: var(--text);
}

/* 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: 35px 10px;
  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;
}

/* PANNEAUX GLASS (sections sombres) */
.panel {
  background: var(--panel);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem;
  margin-left: 3rem;
  margin-right: 3rem;
  margin-bottom: 3rem;
}

/* ROMANS GRID */
.romans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(160px,1fr));
  gap: 16px;
  margin-top: 1rem;
}
.romans-grid img {
  width: 100%;
  border-radius:10px;
  transition: transform .3s;
}
.romans-grid img:hover { transform: translateY(-2px) scale(1.02); }

/* BANDE ACTUS (fond clair + texte foncé) */
.actus-band {
  background: var(--beige);
  color: var(--ink);
}
.actus-band .container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 44px 16px;
}
.actus-band h2, .actus-band h3 { color: var(--ink); margin-top:0; }
.actus-band .items {
  display: grid;
  gap: 16px;
}
.actus-band p { color: var(--ink-sub); }
.actus-band a {
  color: var(--link-accent);
  text-decoration: none;
  font-weight: 700;
}
.actus-band a:hover { text-decoration: underline; }

@media (min-width: 768px) {
  .actus-band .items {
    grid-template-columns: 1fr 1fr;
    gap: 20px 28px;
  }
}

/* FOOTER */
footer {
  text-align: center;
  padding: 1rem;
  background-color: rgba(0,0,0,0.8);
  font-size: 0.9rem;
}

/* ===== Pages internes déjà existantes (on garde) ===== */

/* Actualités (page dédiée) – fond sombre + cartes */
body.page-actualites {
  background: url('img/fond.png') no-repeat center center fixed, var(--bg);
  background-size: cover;
  color: var(--text);
}
.actus-list {
  max-width: 860px;
  margin: 40px auto 60px;
  display: grid;
  gap: 40px;
  padding: 0 16px;
}
.actu-card {
  text-align: center;
  background: var(--panel);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}
.actu-card h2 {
  color: var(--text);
  margin: 0 0 6px 0;
  font-size: 1.6rem;
}
.actu-card .subtitle {
  font-style: italic;
  color: var(--muted);
  margin: 0 0 12px 0;
  font-size: 1rem;
}
.actu-card img {
  width: 320px;
  height: auto;
  display: block;
  margin: 0 auto 12px;
  border-radius: 12px;
}
.actu-card .desc { line-height: 1.6; }

/* ===== Lieux (charte + panneaux) ===== */
.lieux-list{
  max-width: 1100px;
  margin: 32px auto 60px;
  padding: 0 16px;
  display: grid;
  gap: 22px;
}

.lieu-card{
  text-align: center;            /* panel déjà appliqué par la classe .panel */
}

.lieu-card h2{
  margin: 0 0 6px;
  font-size: 1.6rem;
  color: var(--text);
}

.lieu-card .subtitle{
  font-style: italic;
  color: var(--muted);
  margin: 0 0 12px;
}

.lieu-card img{
  width: 320px;                  /* taille normalisée */
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 12px;
  border-radius: 12px;
}

.lieu-card .desc{
  line-height: 1.6;
}

/* petit respiro mobile */
@media (max-width: 768px){
  .lieu-card{ padding: 16px; }
}

/* ===== Univers - Cartes côte à côte avec cadre moderne ===== */
.univers-categories.centered {
  display: flex;
  flex-wrap: wrap;           /* retour ligne sur petits écrans */
  justify-content: center;   /* centrage horizontal */
  gap: 24px;                  /* espace entre les cartes */
  margin: 48px auto 60px;
  max-width: 1100px;
  padding: 0 16px;
}

.univers-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  position: relative;
  width: 260px;               /* largeur fixe comme histoire */
  border-radius: 12px;
  background: var(--card-bg, rgba(255,255,255,0.03)); /* léger fond moderne */
  box-shadow: var(--shadow, 0 2px 10px rgba(0,0,0,0.2));
  overflow: hidden;           /* pour que l'overlay reste dans la carte */
  padding: 12px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.univers-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.3);
}

.univers-card h2 {
  color: var(--text);
  margin: 8px 0 4px;
  font-size: 1.1rem;
}

.univers-card .subtitle {
  font-style: italic;
  color: var(--muted);
  margin: 0 0 8px;
  font-size: 0.9rem;
}

.univers-card img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  transition: transform 0.4s ease;
}

/* Overlay au survol */
.univers-card::after {
  content: attr(data-overlay-text);
  position: absolute;
  bottom: 12px;
  left: 12px;
  right: 12px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.9rem;
  font-style: italic;
  opacity: 0;
  transform: translateY(100%);
  transition: all 0.3s ease;
  border-radius: 6px;
}

.univers-card:hover img {
  transform: scale(1.05);
}

.univers-card:hover::after {
  opacity: 1;
  transform: translateY(0);
}

/* mobile tweaks */
@media (max-width: 600px) {
  .univers-card {
    width: 200px;
  }
}

/* Texte introductif sous le CTA "Découvrir les romans" */
/* Espace plus grand sous le bouton Découvrir les romans */
.hero .cta {
  margin-bottom: 1.8em; /* plus d'espace qu'avant */
}

/* Texte d'introduction sous le bouton */
.hero-intro-text {
  font-size: 1rem;
  line-height: 1.6;
  color: #cce6f4; /* Bleu clair cohérent avec la charte graphique */
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}

/* Bande disclaimer */
.disclaimer-band {
  background: rgba(27, 43, 52, 0.85); /* bleu-gris foncé semi-opaque */
  color: #cce6f4; /* texte bleu clair */
  padding: clamp(12px, 2vw, 20px);
  padding-left: 5rem;
  padding-right: 5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  font-size: 0.9rem;
  text-align: center;
  line-height: 1.5;
}

.disclaimer-band p {
  margin: 0;
}

/* Responsive */
@media (max-width: 600px) {
  .hero-intro-text {
    font-size: 0.95rem;
  }
  .disclaimer-band {
    font-size: 0.9rem;
    padding: 14px;
  }
}



/* ===== Page HISTOIRE - Cartes côte à côte ===== */
.histoire-categories {
  display: flex;
  flex-wrap: wrap;           /* retour à la ligne si écran petit */
  justify-content: center;   /* centrage horizontal */
  gap: 24px;                  /* espace entre les cartes */
  margin: 32px auto;
  max-width: 1100px;
  padding: 0 16px;
}

.histoire-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  color: var(--text);
  width: 260px;               /* largeur fixe comme univers */
}

.histoire-card h2 {
  margin: 8px 0 4px;
  font-size: 1.1rem;
}

.histoire-card p {
  margin: 0 0 8px;
  font-size: 0.9rem;
  color: var(--muted);
}

/* image stable */
.histoire-card img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: var(--shadow);
  transition: transform 0.3s ease;
}

.histoire-card img:hover {
  transform: scale(1.05);
}

/* mobile : cartes en colonne */
@media (max-width: 600px) {
  .histoire-card {
    width: 200px;
  }
}


/* ===== Musiques (corrigé : mêmes règles que Lieux) ===== */
body.page-musiques{
  background: url('img/fond.png') no-repeat center center fixed, var(--bg);
  background-size: cover;
  color: var(--text);
}

/* conteneur centré comme Lieux */
.music-list{
  max-width: 1100px;
  margin: 32px auto 60px;
  padding: 0 16px;
  display: grid;
  gap: 22px;
}

/* carte = panel + centrage */
.music-card{
  text-align: center;
  background: var(--panel);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}

/* titre + description */
.music-card h2{
  color: var(--text);
  margin: 0 0 10px;
  font-size: 1.4rem;
}
.music-card .desc{
  line-height: 1.6;
  color: var(--muted);
  margin: 10px 0 0;
}

/* vignette normalisée (≈320px comme Lieux) */
.music-card .thumb{
  display: inline-block;
}
.music-card .thumb img{
  width: 320px;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 12px;
  border-radius: 12px;
  transition: transform .25s ease;
}
.music-card .thumb:hover img{
  transform: translateY(-2px) scale(1.02);
}

/* petit respiro mobile */
@media (max-width: 768px){
  .music-card{ padding:16px; }
}



/* === Actus: titre centré/gras + rotateur === */
.actus-band h2 {
  text-align: center;
  font-weight: 800;
  letter-spacing: .2px;
  margin-bottom: 18px;
}

/* Conteneur du rotateur */
.actus-band .news-rotator {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  height: 120px;              /* hauteur stable pour éviter les sauts */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Un item d'actualité (positionné absolument pour l'animation) */
.actus-band .news-rotator article {
  left: 50%;
  position: absolute;
  width: 100%;
  text-align: center;
  opacity: 0;
  transform: translateX(-150%);   /* arrive de la gauche */
  transition: transform .8s ease, opacity .8s ease;
  will-change: transform, opacity;
}

.actus-band .news-rotator article h3 { margin: 0 0 6px; }
.actus-band .news-rotator article p { margin: 0; }

/* États d'animation */
.actus-band .news-rotator article.enter {
  opacity: 1;
  transform: translateX(-50%);    /* centré (via left:50% dans HTML/CSS par défaut) */
}
.actus-band .news-rotator article.exit {
  opacity: 0;
  transform: translateX(150%);    /* sort vers la droite */
}

/* Lien "Voir toutes les actualités" centré et plus visible */
.actus-band .more {
  text-align: center;
  margin-top: 18px;
}
.actus-band .more a {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 1.05rem;
  text-decoration: none;
  border: 2px solid var(--link-accent);
}
.actus-band .more a:hover {
  background: var(--link-accent);
  color: white;
  text-decoration: none;
}

/* Responsive: ajuste la hauteur si le contenu est plus grand sur mobile */
@media (max-width: 520px) {
  .actus-band .news-rotator { height: 150px; }
}

/* === Romans page band === */
.romans-band{
  max-width: 1200px;
  margin: 20px auto 32px;
  padding: 18px 22px 24px;
  background: rgba(240,240,240,.15);  /* bande sombre transparente */
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.romans-band h2{
  text-align: center;
  margin: 0 0 12px;
  font-weight: 800;
}

/* Center page h1 */
main > h1{
  text-align: center;
  margin-top: 10px;
  margin-bottom: 8px;
}

/* Grid of covers */
.romans-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 22px;
  align-items: stretch;
}
.romans-grid img{
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
  background: #0e0e0e;
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 6px 14px rgba(0,0,0,.35);
}
.romans-grid img:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 22px rgba(0,0,0,.45);
}
@media (max-width: 980px){
  .romans-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 680px){
  .romans-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* === Timeline (tome 1 palette) === */
.timeline-title{
  text-align: center;
  margin: 20px 0 10px;
  font-weight: 800;
}
.timeline{
  --tl-bg: #F2E4C9;      /* clair */
  --tl-accent: #F2CCB6;  /* second clair */
  --tl-ink: #262626;     /* foncé */
  --tl-ink-soft: rgba(38,38,38,.7);

  max-width: 900px;
  margin: 0 auto 40px;
  background: var(--tl-bg);
  color: var(--tl-ink);
  border-radius: 14px;
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
.timeline::before{
  content: "";
  position: absolute;
  left: 22px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  background: var(--tl-accent);
  border-radius: 3px;
}
.tl-item{
  position: relative;
  padding-left: 56px;
  margin: 12px 0;
}
.tl-dot{
  position: absolute;
  left: 14px;
  top: 10px;
  width: 18px;
  height: 18px;
  background: #BF877A;
  border: 3px solid white;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0,0,0,.2);
}
.tl-card{
  background: #fff6;
  backdrop-filter: blur(2px);
  border: 1px solid #0001;
  border-radius: 10px;
  padding: 10px 12px;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.tl-card h3{
  margin: 0 0 6px;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--tl-ink);
}
.tl-card p{
  margin: 0;
  color: var(--tl-ink-soft);
}
.tl-item:hover .tl-card{
  transform: translateX(6px);
  background: #fff8;
  box-shadow: 0 8px 20px rgba(0,0,0,.15);
}
/* Présentation romans uniquement pour l'index */
.index-romans h2,
.index-romans p.muted {
  text-align: center;
}

/* Desktop : 8 colonnes qui tiennent sans scroll */
.romans-row-index {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 18px;
  align-items: start;
  justify-items: center;
  padding-top: 12px;
  overflow: hidden; /* pas de barre de scroll */
}

.romans-row-index a,
.romans-row-index img {
  width: 100%;
  max-width: 210px;          /* borne haute pour éviter des vignettes géantes */
}

.romans-row-index img {
  height: auto;
  border-radius: 10px;
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 6px 14px rgba(0,0,0,.35);
}

.romans-row-index img:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 22px rgba(0,0,0,.45);
}

/* Responsive : on réduit le nombre de colonnes pour garder de belles tailles */
@media (max-width: 1280px) {
  .romans-row-index { grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 1024px) {
  .romans-row-index { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 768px) {
  .romans-row-index { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .romans-row-index { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 380px) {
  .romans-row-index { grid-template-columns: 1fr; }
}


/* Section auteur */
.auteur-panel {
  text-align: center;
}

.auteur-panel .auteur-card {
  max-width: 500px;
  margin: 0 auto;
  padding: 15px;
  background-color: rgba(30, 30, 30, 0.8);
  border-radius: 8px;
}

.auteur-panel .auteur-card h3 {
  font-size: 1.5rem;
  margin-bottom: 15px;
}

.auteur-panel .auteur-card .auteur-image {
  margin-bottom: 15px;
}

.auteur-panel .auteur-card img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.auteur-panel .auteur-card p {
  font-size: 1rem;
  line-height: 1.6;
  color: #e0e0e0;
}


<style>
  /* Fond & couleurs globales */
  body.page-secret {
    background: url('img/fond.png') no-repeat center center fixed;
    background-size: cover;
    color: var(--text, #F2E4C9);
    min-height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
  }

  /* Carte centrale : mêmes codes que les panneaux du site */
  .secret-card {
    max-width: 760px;
    width: 92%;
    margin: 28px auto 32px;
    text-align: center;
    background: var(--panel, rgba(52,57,64,0.64));
    border: 1px solid var(--panel-border, rgba(255,255,255,0.10));
    border-radius: var(--radius, 14px);
    box-shadow: var(--shadow, 0 10px 30px rgba(0,0,0,0.35));
    padding: clamp(16px, 3.5vw, 28px) clamp(14px, 3vw, 22px);
  }

  /* Typo plus sobre + responsive */
  .secret-card h1 {
    margin: 0 0 12px;
    font-size: clamp(18px, 2.6vw, 26px);
    line-height: 1.35;
    color: var(--text, #F2E4C9);
    font-weight: 800;
    letter-spacing: .2px;
  }
  .secret-card .lead {
    margin: 0 0 18px;
    font-size: clamp(14px, 1.6vw, 18px);
    color: var(--muted, rgba(242,228,201,0.85));
  }
  .secret-card p { line-height: 1.6; }

  /* Formulaire */
  .secret-form {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 6px;
  }
  input[type="text"] {
    padding: 10px 12px;
    font-size: clamp(14px, 1.4vw, 16px);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 10px;
    background: rgba(0,0,0,.25);
    color: var(--text, #F2E4C9);
    width: min(420px, 90%);
    outline: none;
  }
  input[type="text"]::placeholder {
    color: rgba(242,228,201,.6);
  }

  button {
    padding: 10px 14px;
    font-size: clamp(14px, 1.4vw, 16px);
    cursor: pointer;
    background: var(--accent, #BF877A);
    color: #262626;
    border: none;
    border-radius: 10px;
    font-weight: 700;
    transition: transform .12s ease, box-shadow .12s ease, background .2s ease;
  }
  button:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(0,0,0,.25); }

  /* Message d’erreur */
  .error {
    margin-top: 10px;
    min-height: 1.2em;
    color: #ffb3b3;
    font-size: clamp(13px, 1.3vw, 15px);
  }

  /* Petit respiro mobile */
  @media (max-width: 520px) {
    .secret-card { width: 94%; }
  }
</style>

/* ====== Page secrets - détail (Tra'Matai) ====== */
.page-secret-detail {
  background: url('img/fond.png') no-repeat center center fixed;
  background-size: cover;
  color: var(--text, #F2E4C9);
}

.page-secret-detail .secret-main {
  max-width: 1000px;
  margin: 24px auto 36px;
  padding: 0 16px;
}

.page-secret-detail .secret-panel {
  background: rgba(52, 57, 64, 0.64);            /* même esprit que tes panneaux */
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.35);
  padding: clamp(18px, 3.2vw, 28px);
}

.page-secret-detail .secret-title {
  text-align: center;
  margin: 0 0 clamp(16px, 3vw, 22px);
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 800;
  letter-spacing: .3px;
  color: var(--text, #F2E4C9);
}

.page-secret-detail .entry {
  text-align: center;
  margin: 0 0 clamp(22px, 4vw, 34px);
}

.page-secret-detail .entry-title {
  margin: 0 0 8px;
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 800;
  color: var(--text, #F2E4C9);
}

.page-secret-detail .entry-image {
  margin: 10px auto 14px;
  display: flex;              /* centre le contenu */
  justify-content: center;
}

.page-secret-detail .entry-image img {
  display: block;
  width: min(100%, 360px);    /* limite à 360px et reste responsive */
  height: auto;
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.35);
  margin: 0 auto;             /* ceinture + bretelles pour le centrage */
}


.page-secret-detail .desc {
  max-width: 900px;                              /* colonne de lecture confortable */
  margin: 0 auto;
  font-size: clamp(14px, 1.7vw, 18px);           /* textes moins gros + responsive */
  line-height: 1.7;
  color: var(--text, #F2E4C9);                   /* plus claire de la palette */
  text-align: justify;
  opacity: .95;
}

/* Petit respiro mobile */
@media (max-width: 540px){
  .page-secret-detail .entry-image img { max-width: 100%; }
  .page-secret-detail .secret-panel { padding: 16px; }
}

/* ====== Page secrets — Île Lawn (Tome 2) ====== */
.page-secret-lawn{
  /* Palette Tome 2 (depuis personnages.css) */
  --text: #FFFDAC;           /* la plus claire */
  --bg:   #1D1E18;           /* la plus foncée */
  --accent:#D9C355;          /* jaune doux pour titres */
  --panel-bg: rgba(29,30,24,0.78);
  --panel-border: rgba(217,185,91,0.18);
  --muted: rgba(255,253,172,0.85);
  background: url('img/fond_t2.png') no-repeat center/cover fixed;
  color: var(--text);
}

.page-secret-lawn .secret-main{
  max-width: 1000px;
  margin: 24px auto 36px;
  padding: 0 16px;
}

.page-secret-lawn .secret-panel{
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
  padding: clamp(18px, 3.2vw, 28px);
}

.page-secret-lawn .secret-title{
  text-align:center;
  margin: 0 0 clamp(16px,3vw,22px);
  font-size: clamp(22px,3vw,34px);
  font-weight: 800;
  letter-spacing: .3px;
  color: var(--text);
}

.page-secret-lawn .entry{
  text-align:center;
  margin: 0 0 clamp(22px, 4vw, 34px);
}

.page-secret-lawn .entry-title{
  margin: 0 0 4px;
  font-size: clamp(18px,2.2vw,24px);
  font-weight: 800;
  color: var(--accent);
}

.page-secret-lawn .entry-subtitle{
  font-style: italic;
  font-size: clamp(14px,1.6vw,16px);
  color: var(--muted);
  margin-bottom: 8px;
}

.page-secret-lawn .entry-image{
  margin: 10px auto 14px;
  display: flex; justify-content: center;
}

.page-secret-lawn .entry-image img{
  display:block;
  width: min(100%, 560px);
  height:auto;
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
  margin: 0 auto;
}

.page-secret-lawn .desc{
  max-width: 900px;
  margin: 0 auto;
  font-size: clamp(14px, 1.7vw, 18px);
  line-height: 1.7;
  color: var(--text);
  text-align: justify;
  opacity: .96;
}

/* Mobile respiro */
@media (max-width: 540px){
  .page-secret-lawn .secret-panel{ padding:16px; }
  .page-secret-lawn .entry-image img{ width:100%; }
}

/* ===== Histoire des Mages — panneau comme les pages secret ===== */

.page-histoire-mages {
  /* on garde le fond global du site */
  background: url('img/fond.png') no-repeat center/cover fixed;
  color: var(--text, #F2E4C9);
}

.page-histoire-mages .hist-main {
  max-width: 1000px;
  margin: 24px auto 40px;
  padding: 0 16px;
}

/* GRAND panneau semi-opaque arrondi */
.page-histoire-mages .hist-panel {
  background: rgba(52,57,64,0.64);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
  padding: clamp(18px, 3.2vw, 28px);
  width: 90%;
  max-width: 480px;
  margin: 0 auto;

}

/* Entrées centrées */
.page-histoire-mages .hist-entry {
  text-align: center;
  margin: 0 0 clamp(22px, 4vw, 34px);
}


.page-histoire-mages .hist-entry-title {
  margin: 0;
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 800;
}

.page-histoire-mages .hist-info-box p {
  margin: 6px 0 0;
  font-size: clamp(13px, 1.6vw, 16px);
  opacity: 0.9;
}

/* Image centrée + effet hover (zoom + lueur) */
.page-histoire-mages .hist-image {
  display: flex;
  justify-content: center;
}

.page-histoire-mages .hist-image a {
  display: block; /* au lieu de inline-block */
  overflow: hidden;
  border-radius: 12px;
  cursor: pointer;
}

.page-histoire-mages .hist-image img {
  display: block;
  width: min(100%, 360px);
  height: auto;
  margin: 0 auto; /* centrage horizontal */
  border-radius: 12px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.page-histoire-mages .hist-image a:hover img {
  transform: scale(1.05);
  box-shadow: 0 12px 26px rgba(0, 200, 255, 0.45);
}


/* Mobile */
@media (max-width: 540px) {
  .page-histoire-mages .hist-panel { padding: 16px; }
  .page-histoire-mages .hist-image img { width: 100%; }
}