/* ============================================================
   LAYOUT GLOBAL — HEADER + FOOTER COMMUNS
   ============================================================ */

/* Variables globales */
:root {
  --sepia-ink: #4a3b2a;
  --sepia-paper: #fdf6e3;
  --vintage-white: #fffaf3;
  --accent-gold: #d4a373;
  --accent-brown: #6b4a3a;
  --accent-dark: #5a3b2a;
  --font-title: 'Playfair Display', serif;
  --font-body: 'Lora', serif;
  --editorial-bg: rgba(255, 248, 235, 0.85);
  --editorial-border: rgba(120, 90, 60, 0.45);
  --editorial-paper: url("img/texture-papier-vintage-globale.webp");
  --font-hand: 'La Belle Aurore', 'Handlee', cursive;
}


/* Reset */
body {
  margin: 0;
  padding: 0;
  background-color: rgba(255, 248, 235, 0.92);
  background-image: var(--editorial-paper);
  background-size: 180px;
  background-repeat: repeat;
  color: var(--sepia-ink);
  font-family: var(--font-body);
  line-height: 1.6;
}



/* ============================================================
   HEADER COMMUN
   ============================================================ */

header.site-header {
  background: rgba(255, 248, 235, 0.95);
  padding: 30px 20px;
  border-bottom: 4px double rgba(120, 90, 60, 0.45);
  text-align: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
  position: relative;
  z-index: 100;
}

header.site-header::before {
  content: "✦ ✦ ✦";
  position: absolute;
  top: -26px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.3rem;
  color: rgba(120, 90, 60, 0.55);
  letter-spacing: 8px;
  font-family: var(--font-title);
}

header.site-header h1 {
  font-family: var(--font-title);
  font-size: 2.8rem;
  color: var(--accent-dark);
  margin: 0;
}

/* ============================================================
   TYPOGRAPHIE — TITRES GLOBAUX
   ============================================================ */
/* H1 — Titre principal */
h1, .titre-h1 {
  font-family: var(--font-title);
  font-size: 3.2rem;
  font-weight: 700;
  letter-spacing: 1px;
  margin-top: 40px;
  margin-bottom: 25px;
  transform: rotate(-0.4deg);
  color: var(--accent-dark);
}

/* H2 — Sous-titre narratif */
h2, .titre-h2 {
  font-family: var(--font-title);
  font-size: 2.4rem;
  font-weight: 600;
  letter-spacing: 0.6px;
  margin-top: 35px;
  margin-bottom: 20px;
  color: var(--accent-dark);
}

/* H3 — Titre secondaire */
h3, .titre-h3 {
  font-family: var(--font-title);
  font-size: 1.9rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  margin-top: 28px;
  margin-bottom: 15px;
  color: var(--accent-dark);
}
/* ============================================================
   TYPOGRAPHIE — CORPS DE TEXTE
   ============================================================ */

/* Paragraphe standard */
p {
  font-family: var(--font-body);
  font-size: 1.15rem;
  line-height: 1.75;
  letter-spacing: 0.2px;
  margin-bottom: 18px;
  color: var(--accent-dark);
  max-width: 75%;
}

/* Paragraphe dans les encarts */
.encart p {
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 90%;
}

/* Paragraphe éditorial (non manuscrit) */
.editorial p {
  font-size: 1.2rem;
  line-height: 1.85;
  max-width: 78%;
  color: #3b2718;
}
/* ============================================================
   TYPOGRAPHIE — MANUSCRIT (LETTRE ANCIENNE)
   ============================================================ */

/* Titre manuscrit */
.manuscrit-titre {
  font-family: 'La Belle Aurore', 'Petit Formal Script', cursive !important;
  font-size: 2.7rem;
  line-height: 1.4;
  letter-spacing: 0.6px;
  transform: rotate(-1.2deg);
  color: #7a4a2f;
  margin-bottom: 30px;
}

/* Texte manuscrit */
.manuscrit-texte,
.intro-editoriale p,
.intro-editoriale .intro-text-p {
  font-family: 'La Belle Aurore', 'Petit Formal Script', cursive !important;
  font-size: 1.9rem;
  line-height: 2.25;
  letter-spacing: 0.3px;
  color: #3b2718;
  max-width: 76%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.75),
    0 0 3px rgba(255,255,255,0.45);
}
/* ============================================================
   ESPACES & MARGES — GRILLE PREMIUM
   ============================================================ */

/* Sections */
.section {
  margin-top: 60px;
  margin-bottom: 50px;
}

/* Paragraphes */
p {
  margin-bottom: 18px;
  line-height: 1.75;
  max-width: 75%;
}

/* Parchemin */
.parchemin {
  padding: 45px 40px;
}

/* Éléments narratifs */
.polaroid {
  margin-bottom: 30px;
}

.tampon {
  margin-top: 25px;
}

.image-bloc {
  margin: 35px 0;
}
/* ============================================================
   ELEMENTS NARRATIFS — SAFE
   ============================================================ */
/* ============================================================
   ELEMENTS NARRATIFS — SAFE
   ============================================================ */

/* Polaroid */
.polaroid {
  display: inline-block;
  background: #fff;
  padding: 12px;
  border: 1px solid rgba(0,0,0,0.15);
  box-shadow: 0 4px 8px rgba(0,0,0,0.25);
  transform: rotate(-2deg);
  margin-bottom: 30px;
}

/* Tampon */
.tampon {
  width: 120px;
  opacity: 0.85;
  transform: rotate(3deg);
  filter: drop-shadow(0 3px 4px rgba(0,0,0,0.25));
  margin-top: 25px;
}

/* Encarts narratifs */
.encart {
  background: var(--texture-carnet);
  border: 2px solid rgba(60,40,20,0.35);
  padding: 25px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.25);
  transform: rotate(-1deg);
  margin: 35px 0;
}

/* Images narratives */
.image-bloc {
  margin: 35px 0;
  box-shadow: 0 4px 8px rgba(0,0,0,0.25);
  transform: rotate(-1deg);
}
.ligne-editoriale {
  width: 85%;
  height: 1px;
  background-color: rgba(60,40,20,0.25);
  margin: 40px auto;
  display: block;
  padding: 0;
  border: none;
}



/* ============================================================
   FOOTER COMMUN — VERSION FUSIONNÉE FINALE
   ============================================================ */

.site-footer {
  background: rgba(255, 248, 235, 0.96);
  padding: 50px 10px 55px;
  border-top: 8px double rgba(120, 90, 60, 0.55);
  text-align: center;
  font-family: var(--font-title);
  color: #5a3b2a;
  box-shadow: 0 -12px 28px rgba(0,0,0,0.12);
  margin-top: 100px;
  position: relative;
}

/* décor haut */
.site-footer::before {
  content: "✦ ✦ ✦";
  position: absolute;
  top: -32px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2.8rem;
  color: rgba(142, 82, 36, 0.75);
  letter-spacing: 8px;
}

/* titre */
.footer-title {
  font-size: 2.8rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  transform: rotate(-0.4deg);
  margin-bottom: 12px;
}

/* patte */
.footer-patte-img {
  width: 90px;
  opacity: 0.95;
  filter: drop-shadow(0 4px 5px rgba(0,0,0,0.35));
}

/* phrase */
.footer-note {
  font-size: 1.65rem;
  font-weight: 600;
  opacity: 0.9;
  letter-spacing: 0.4px;
}

/* copyright */
.footer-copy {
  font-size: 1.25rem;
  opacity: 0.85;
  letter-spacing: 0.3px;
}