/* ==========================================================
   Le Journal de RevolutionRP — feuille de style du lecteur
   ---------------------------------------------------------
   Lecture simple : une page crème centrée, sans ombre portée,
   les pages glissent rapidement les unes sur les autres.
   Flèches de navigation à gauche et à droite de l'écran.
   Pas de zoom, pas de sommaire, pas d'effet 3D.
   ========================================================== */

:root {
  color-scheme: light;

  /* papier */
  --papier:        #f4efe2;
  --papier-clair:  #fbf8f0;
  --papier-tache:  #e8dfc9;
  --rebord:        #d9cfb4;

  /* encre */
  --encre:         #1c1a17;
  --encre-douce:   #4a453c;
  --encre-pale:    #7d766a;
  --rouge-encre:   #8c2f2f;

  /* décor */
  --bureau:        #2a2622;
  --bureau-clair:  #3a342d;
  --or:            #a98a4b;

  --rayon: 3px;
}

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

html, body {
  height: 100%;
}

body {
  background:
      radial-gradient(ellipse at 50% 0%, #3d372f 0%, var(--bureau) 60%, #201d19 100%);
  color: var(--encre);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* Fibre du papier : bruit très léger, jamais de motif qui accroche l'œil. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background-image:
    repeating-linear-gradient(0deg, rgba(120,100,70,.020) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(120,100,70,.016) 0 1px, transparent 1px 4px);
  z-index: 1;
}

a { color: var(--rouge-encre); }

button { font-family: inherit; }

/* ==========================================================
   BANDEAU
   ========================================================== */

.bandeau {
  position: relative;
  z-index: 5;
  background: linear-gradient(180deg, #1b1815 0%, #26221d 100%);
  color: #e8dfcb;
  border-bottom: 1px solid #4a3f2f;
}

.bandeau .in {
  max-width: 1180px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.masthead-mini {
  display: flex;
  align-items: baseline;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}

.masthead-mini .nom {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}

.masthead-mini .nom em {
  font-style: normal;
  color: var(--or);
}

.masthead-mini .sous {
  font-size: 11.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #9a9080;
}

.bandeau .spacer { flex: 1; }

.edition-puce {
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #b8ad97;
  border: 1px solid #4a4033;
  border-radius: 999px;
  padding: 4px 12px;
}

.edition-puce b { color: var(--or); }

.bandeau a.lien {
  color: #d8cfba;
  text-decoration: none;
  font-size: 13.5px;
  letter-spacing: .6px;
  padding: 6px 10px;
  border-radius: 4px;
}

.bandeau a.lien:hover { background: rgba(255,255,255,.07); color: #fff; }

.bouton-archives {
  background: none;
  border: 1px solid #4a4033;
  border-radius: 4px;
  color: #d8cfba;
  font-size: 17px;
  line-height: 1;
  padding: 5px 10px;
  cursor: pointer;
}

.bouton-archives:hover { background: rgba(255,255,255,.07); color: #fff; }

/* ==========================================================
   CORPS : barre latérale + colonne de lecture
   ========================================================== */

.corps {
  flex: 1;
  display: flex;
  min-height: 0;
  position: relative;
  z-index: 2;
}

.col-lecture {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ==========================================================
   BARRE LATÉRALE : anciens journaux
   ========================================================== */

.archives {
  width: 282px;
  flex: none;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #211d19;
  border-right: 1px solid #3a332a;
  color: #e8dfcb;
  padding: 16px 14px;
  gap: 10px;
  overflow-y: auto;
}

.archives-tete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.archives-tete h2 {
  font-size: 15px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #f0e2c4;
}

.archives-tete .sous-titre {
  font-size: 12px;
  letter-spacing: .6px;
  color: #9a9080;
  margin-top: 2px;
}

.archives-fermer {
  display: none;
  background: none;
  border: 1px solid #4a4033;
  border-radius: 4px;
  color: #d8cfba;
  font-size: 20px;
  line-height: 1;
  padding: 2px 9px 5px;
  cursor: pointer;
}

.archives-fermer:hover { background: rgba(255,255,255,.07); color: #fff; }

.archives-recherche {
  width: 100%;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 13.5px;
  background: #171410;
  border: 1px solid #4a4033;
  border-radius: 4px;
  color: #e8dfcb;
}

.archives-recherche::placeholder { color: #7d766a; }

.archives-recherche:focus {
  outline: none;
  border-color: var(--or);
}

.nav-editions {
  display: flex;
  gap: 8px;
}

.cmd.mini {
  flex: 1;
  padding: 7px 8px;
  font-size: 12.5px;
}

.archives-liste {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 10px;
}

.archives .groupe-edition h3 {
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--or);
  border-bottom: 1px solid #3a332a;
  padding-bottom: 5px;
  margin-bottom: 4px;
}

.archives .groupe-edition h3 .nb {
  color: #7d766a;
  font-weight: 400;
}

.archives ul { list-style: none; }

.archives li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 4px;
  cursor: pointer;
  border-left: 2px solid transparent;
}

.archives li:hover { background: rgba(255,255,255,.05); }

.archives li.actif {
  background: rgba(169,138,75,.12);
  border-left-color: var(--or);
}

.archives li .num {
  font-size: 11.5px;
  color: #7d766a;
  min-width: 26px;
  font-weight: 700;
}

.archives li .titre {
  flex: 1;
  font-size: 14px;
  line-height: 1.35;
}

.archives li.actif .titre { color: #fff; }

.archives li .auteur {
  font-size: 11.5px;
  color: #9a9080;
  font-style: italic;
}

.archives .aucun {
  text-align: center;
  color: #9a9080;
  font-style: italic;
  font-size: 13.5px;
  padding: 18px 0;
}

/* ==========================================================
   PLAN DE TRAVAIL : la page qui glisse
   ========================================================== */

.scene {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 20px 20px;
  position: relative;
  z-index: 2;
}

.livre {
  position: relative;
  flex: none;
}

.double {
  position: relative;
  transform-origin: top left;
}

/* La pile : une seule page visible, la suivante glisse par-dessus.
   Léger décalage + très légère rotation aléatoire (posés par JS
   via --tilt / --dx / --dy) pour un effet de pile de journaux.
   Les feuilles du dessous dépassent à peine, sans aucune ombre. */
.pile {
  position: relative;
  flex: none;
  width: 794px;
  height: 1123px;
  overflow: hidden;
  background: var(--papier);
  border: 1px solid var(--rebord);
  border-radius: var(--rayon);
  z-index: 2;
  transform: rotate(var(--tilt, 0deg)) translate(var(--dx, 0px), var(--dy, 0px));
  transition: transform .35s ease;
  background-image:
    radial-gradient(ellipse at 20% 10%, rgba(255,255,255,.55) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 90%, rgba(190,175,140,.28) 0%, transparent 55%),
    repeating-linear-gradient(0deg, rgba(140,120,90,.022) 0 1px, transparent 1px 3px);
}

/* Feuilles du dessous : posées derrière, légèrement décalées
   et inclinées, teintes un peu plus sombres pour la profondeur. */
.fonds-pile {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.fonds-pile .fond {
  position: absolute;
  inset: 0;
  border: 1px solid var(--rebord);
  border-radius: var(--rayon);
}

.fonds-pile .fond-1 { background: #efe7d2; transform: rotate(-.7deg) translate(-5px, 3px); }
.fonds-pile .fond-2 { background: #e9dfc6; transform: rotate(.55deg) translate(5px, 6px); }
.fonds-pile .fond-3 { background: #e2d5b8; transform: rotate(-.3deg) translate(-2px, 10px); }

/* Chaque page empilée. Seule la page active est visible au repos. */
.page {
  position: absolute;
  inset: 0;
  background: var(--papier);
  border-radius: var(--rayon);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  background-image:
    radial-gradient(ellipse at 20% 10%, rgba(255,255,255,.55) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 90%, rgba(190,175,140,.28) 0%, transparent 55%),
    repeating-linear-gradient(0deg, rgba(140,120,90,.022) 0 1px, transparent 1px 3px);
}

.page.avant { opacity: 1; pointer-events: auto; }

/* Page d'arrivée : posée au-dessus, démarre hors champ. */
.page.arrive {
  opacity: 1;
  pointer-events: none;
  z-index: 2;
}

.page.arrive-droite { transform: translateX(101%); }
.page.arrive-gauche { transform: translateX(-101%); }

/* Glissement rapide vers sa position finale, par-dessus la page en cours. */
.page.glisse {
  transform: translateX(0);
  transition: transform .3s cubic-bezier(.3,.7,.3,1);
}

@media (prefers-reduced-motion: reduce) {
  .page.glisse { transition: none; }
}

/* ==========================================================
   FLÈCHES DE NAVIGATION (gauche / droite de l'écran)
   ========================================================== */

.fleche {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 58px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  line-height: 1;
  color: #e8dfcb;
  background: rgba(27,24,21,.72);
  border: 1px solid #55493a;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s, opacity .15s;
  user-select: none;
}

.fleche:hover:not(:disabled) { background: rgba(74,66,56,.9); }
.fleche:disabled { opacity: .25; cursor: not-allowed; }

.fleche-gauche { left: 18px; }
.fleche-droite { right: 18px; }

/* ==========================================================
   CONTENU DE LA PAGE
   ---------------------------------------------------------
   Les zones sont posées en absolu dans un repère de 794 x 1123
   (A4). Le lecteur met ce repère à l'échelle du viewport :
   ce qu'on voit ici est exactement la page construite dans
   l'éditeur.
   ========================================================== */

.feuille-interne {
  position: absolute;
  top: 0;
  left: 0;
  width: 794px;
  height: 1123px;
  transform-origin: top left;
  overflow: hidden;
}

.zone {
  position: absolute;
  box-sizing: border-box;
  overflow: hidden;
}

.zone.texte { overflow: visible; }
.zone.texte > .contenu { width: 100%; height: 100%; overflow: hidden; }

.zone.texte .contenu p { margin: 0 0 .55em; }
.zone.texte .contenu p:last-child { margin-bottom: 0; }
.zone.texte .contenu h1,
.zone.texte .contenu h2,
.zone.texte .contenu h3 { margin: 0 0 .4em; line-height: 1.1; }
.zone.texte .contenu ul,
.zone.texte .contenu ol { margin: 0 0 .5em 1.2em; padding: 0; }
.zone.texte .contenu .drop::first-letter {
  float: left;
  font-size: 3.1em;
  line-height: .82;
  padding: 4px 7px 0 0;
  font-weight: 700;
}

.zone.image .cadre {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.zone.image img {
  width: 100%;
  height: 100%;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.zone.image .legende {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  font-family: Georgia, serif;
  font-style: italic;
  color: var(--encre-douce);
  text-align: center;
  padding: 3px 6px;
  background: linear-gradient(180deg, rgba(244,239,226,0) 0%, rgba(244,239,226,.92) 40%);
}

/* En-tête et pied de page, hors zone éditable. */
.pied-page {
  position: absolute;
  left: 46px;
  right: 46px;
  bottom: 20px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 9.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--encre-pale);
  border-top: 1px solid rgba(60,50,35,.25);
  padding-top: 6px;
  pointer-events: none;
}

.pied-page .numero { font-weight: 700; }

/* ========================================================== */

.vide {
  width: 794px;
  height: 1123px;
  background: var(--papier);
  border-radius: var(--rayon);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--encre-douce);
  text-align: center;
  padding: 40px;
}

.vide .grand {
  font-size: 34px;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--encre);
}

.vide p { max-width: 460px; font-size: 15px; }

/* ==========================================================
   COMMANDES (compteur + plein écran uniquement)
   ========================================================== */

.commandes {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 8px 20px 26px;
  flex-wrap: wrap;
}

.cmd {
  background: linear-gradient(180deg, #3d372f 0%, #2c2721 100%);
  color: #e8dfcb;
  border: 1px solid #55493a;
  border-radius: 4px;
  padding: 9px 16px;
  font-size: 14px;
  letter-spacing: .5px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}

.cmd:hover:not(:disabled) { background: #4a4238; border-color: #6d5f49; }
.cmd:disabled { opacity: .35; cursor: not-allowed; }

.compteur {
  color: #b8ad97;
  font-size: 13.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  min-width: 190px;
  text-align: center;
}

.compteur b { color: var(--or); }

/* ==========================================================
   ESPACE RÉDACTION (encadré de connexion)
   ========================================================== */

.voile {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(18,15,12,.82);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.voile.ouvert { display: flex; }

.carte {
  width: min(430px, 100%);
  background: var(--papier);
  border-radius: 4px;
  padding: 28px 30px;
}

.carte h2 {
  font-size: 21px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 4px;
}

.carte .explication {
  text-align: center;
  font-size: 13.5px;
  color: var(--encre-douce);
  margin-bottom: 18px;
  line-height: 1.55;
}

.champ { margin-bottom: 12px; }

.champ label {
  display: block;
  font-size: 11.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--encre-pale);
  margin-bottom: 4px;
}

.champ input {
  width: 100%;
  padding: 9px 11px;
  font-family: inherit;
  font-size: 15px;
  background: var(--papier-clair);
  border: 1px solid var(--rebord);
  border-radius: 3px;
  color: var(--encre);
}

.champ input:focus {
  outline: none;
  border-color: var(--or);
}

.carte .valider {
  width: 100%;
  margin-top: 8px;
  padding: 11px;
  background: var(--encre);
  color: var(--papier-clair);
  border: none;
  border-radius: 3px;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
}

.carte .valider:hover:not(:disabled) { background: #322d26; }
.carte .valider:disabled { opacity: .5; cursor: wait; }

.message {
  margin-top: 14px;
  padding: 11px 13px;
  border-radius: 3px;
  font-size: 13.5px;
  line-height: 1.5;
  display: none;
}

.message.visible { display: block; }
.message.attente { background: #efe6cd; border: 1px solid #d8c69a; }
.message.erreur { background: #f4dede; border: 1px solid #d0a0a0; }
.message.ok { background: #dfeedd; border: 1px solid #a8c4a4; }

.message .ref {
  font-family: "Courier New", monospace;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 2px;
}

.carte .pied {
  margin-top: 14px;
  text-align: center;
  font-size: 12px;
  color: var(--encre-pale);
}

.carte .pied a { color: var(--rouge-encre); }

/* ==========================================================
   CHARGEMENT
   ========================================================== */

.attente-chargement {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(18,15,12,.7);
  display: none;
  align-items: center;
  justify-content: center;
  color: #e0d6c0;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: 14px;
}

.attente-chargement.ouvert { display: flex; }

/* ==========================================================
   PIED
   ========================================================== */

.pied-site {
  position: relative;
  z-index: 5;
  background: #1b1815;
  border-top: 1px solid #3a332a;
  color: #8d8474;
  font-size: 12.5px;
  padding: 14px 20px;
  text-align: center;
  letter-spacing: .4px;
}

.pied-site a { color: #b8ad97; }

/* ==========================================================
   ADAPTATIONS
   ========================================================== */

@media (max-width: 900px) {
  .archives {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 50;
    width: min(320px, 86vw);
    transform: translateX(-105%);
    transition: transform .25s ease;
  }

  body.archives-ouvertes .archives { transform: translateX(0); }

  .archives-fermer { display: block; }
}

@media (max-width: 720px) {
  .bandeau .in { padding: 10px 14px; gap: 10px; }
  .masthead-mini .nom { font-size: 16px; letter-spacing: 1.6px; }
  .scene { padding: 16px 10px 10px; }
  .compteur { min-width: 100%; order: -1; }
  .fleche {
    width: 44px;
    height: 66px;
    font-size: 26px;
  }
  .fleche-gauche { left: 6px; }
  .fleche-droite { right: 6px; }
}