/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: white;
  color: black;
  font-family: Verdana;
}
/* ==========================================================================
   THEME.CSS — esthétique « papier ancien »
   --------------------------------------------------------------------------
   À coller tel quel dans /css/theme.css et à lier après ton base.css :
   <link rel="stylesheet" href="/css/theme.css">

   Contient :
   1. Polices (Google Fonts)
   2. Palette et variables
   3. Texture de papier (grain + taches de rousseur)
   4. Typographie
   5. Menu / navigation
   6. Boutons "cachet de cire"
   7. Cartes de contes (bords froissés, coin corné)
   8. Formulaire newsletter
   9. Ornements et séparateurs
   10. Footer
   11. Accessibilité (focus, mouvement réduit)
   12. Effet de page qui se tourne entre les pages du site
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. POLICES
   Cinzel : titres façon lettrine gravée / manuscrit enluminé
   EB Garamond : corps de texte, vieux style très lisible
   IM Fell English SC : petites capitales pour le menu et les légendes,
   dessinée d'après des caractères d'imprimerie du XVIIIe siècle
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=IM+Fell+English+SC&display=swap');

/* --------------------------------------------------------------------------
   2. PALETTE
   -------------------------------------------------------------------------- */
:root{
  --paper: #ede1c3;
  --paper-deep: #e0cf9f;
  --paper-shadow: #b9a06a;
  --ink: #3a2c1d;
  --ink-soft: #5b4630;
  --ink-faded: #8a7355;
  --wax-red: #7c2d22;
  --wax-red-dark: #521e17;
  --gold: #a3792f;
  --gold-soft: #c79f4e;
  --border-ink: #4a3826;
  --foxing: rgba(139, 98, 57, 0.16);

  --font-display: 'Cinzel', 'Times New Roman', serif;
  --font-body: 'EB Garamond', 'Georgia', serif;
  --font-label: 'IM Fell English SC', 'Georgia', serif;
}

/* --------------------------------------------------------------------------
   3. BASE + TEXTURE DE PAPIER
   Le grain et les taches de rousseur sont fabriqués uniquement avec des
   dégradés CSS (aucune image, aucune data-URI à héberger ou à faire
   transiter par l'éditeur de code) : copier-coller sans risque.
   -------------------------------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: 1.125rem;
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    radial-gradient(ellipse at top left, rgba(255,255,255,0.20), transparent 55%),
    radial-gradient(ellipse at bottom right, rgba(0,0,0,0.10), transparent 60%);
  line-height: 1.7;
  position: relative;
  overflow-x: hidden;
}

/* grain de papier, en pur CSS (deux trames fines croisées + un grain diagonal plus lâche) */
body::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.6;
  mix-blend-mode: multiply;
  background-image:
    repeating-linear-gradient(0deg, rgba(58,44,29,0.05) 0px, transparent 1px, transparent 2px),
    repeating-linear-gradient(90deg, rgba(58,44,29,0.05) 0px, transparent 1px, transparent 2px),
    repeating-linear-gradient(45deg, rgba(58,44,29,0.03) 0px, transparent 2px, transparent 4px);
  background-size: 3px 3px, 3px 3px, 6px 6px;
}

/* taches de rousseur */
body::after{
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 11% 16%, var(--foxing) 0%, transparent 6%),
    radial-gradient(circle at 83% 9%,  var(--foxing) 0%, transparent 4%),
    radial-gradient(circle at 68% 74%, var(--foxing) 0%, transparent 8%),
    radial-gradient(circle at 24% 88%, var(--foxing) 0%, transparent 5%),
    radial-gradient(circle at 92% 54%, var(--foxing) 0%, transparent 4%),
    radial-gradient(circle at 45% 40%, var(--foxing) 0%, transparent 3%);
}

/* tout le contenu réel passe au-dessus des textures */
body > *{ position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   4. TYPOGRAPHIE
   -------------------------------------------------------------------------- */
h1, h2, h3, h4{
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.02em;
  line-height: 1.25;
  margin: 1.2em 0 0.5em;
}
h1{ font-size: clamp(2rem, 5vw, 2.8rem); text-align: center; }
h2{ font-size: 1.8rem; }
h3{ font-size: 1.35rem; }

p{ margin: 0 0 1.1em; text-align: justify; hyphens: auto; }

a{
  color: var(--gold);
  text-decoration: underline;
  text-decoration-color: var(--gold-soft);
  text-underline-offset: 3px;
}
a:hover{ color: var(--wax-red); }

/* lettrine en début de conte : ajouter la classe "conte-texte" au conteneur */
.conte-texte > p:first-of-type::first-letter{
  font-family: var(--font-display);
  font-size: 3.6rem;
  float: left;
  line-height: 0.8;
  padding: 0.06em 0.1em 0 0;
  color: var(--wax-red);
}

.legende, .meta{
  font-family: var(--font-label);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faded);
}

/* --------------------------------------------------------------------------
   5. MENU / NAVIGATION
   Markup attendu : <nav class="menu"><a>Accueil</a><a>Contes</a>...</nav>
   -------------------------------------------------------------------------- */
nav.menu{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 0.9em 0.5em;
  background: linear-gradient(var(--paper-deep), var(--paper));
  border-top: 2px solid var(--border-ink);
  border-bottom: 2px solid var(--border-ink);
}
nav.menu a{
  font-family: var(--font-label);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
}
nav.menu a::after{
  content: "❧";
  margin: 0 0.9em;
  color: var(--gold-soft);
  font-size: 0.9em;
}
nav.menu a:last-child::after{ content: none; margin: 0; }
nav.menu a:hover,
nav.menu a[aria-current="page"]{ color: var(--wax-red); }

/* --------------------------------------------------------------------------
   6. BOUTONS "CACHET DE CIRE"
   -------------------------------------------------------------------------- */
.btn-cire{
  display: inline-block;
  padding: 0.65em 1.7em;
  font-family: var(--font-label);
  font-size: 0.95rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--paper);
  background: radial-gradient(circle at 30% 28%, var(--wax-red) 0%, var(--wax-red-dark) 75%);
  border: none;
  border-radius: 3px;
  cursor: pointer;
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.25),
    inset 0 -3px 5px rgba(0,0,0,0.35),
    0 3px 6px rgba(0,0,0,0.3);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-cire:hover{ color: var(--paper); transform: translateY(-1px); }
.btn-cire:active{ transform: translateY(1px); }

/* --------------------------------------------------------------------------
   7. CARTES DE CONTES
   -------------------------------------------------------------------------- */
.conte-carte{
  position: relative;
  background: var(--paper-deep);
  border: 1px solid var(--border-ink);
  padding: 1.5em;
  box-shadow: 0 4px 10px rgba(58,44,29,0.28);
  transform: rotate(-0.4deg);
}
.conte-carte:nth-child(even){ transform: rotate(0.5deg); }
.conte-carte h3{ margin-top: 0; }

/* coin corné, façon page qu'on a beaucoup manipulée */
.conte-carte::after{
  content: "";
  position: absolute;
  right: 0; bottom: 0;
  width: 0; height: 0;
  border-style: solid;
  border-width: 0 0 26px 26px;
  border-color: transparent transparent var(--paper) transparent;
  box-shadow: -2px -2px 5px rgba(0,0,0,0.25);
}

/* bord déchiré, à poser sur un bandeau ou un panneau plein-largeur */
.bord-dechire{ position: relative; }
.bord-dechire::before,
.bord-dechire::after{
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 10px;
  background-color: var(--paper);
}
.bord-dechire::before{
  top: -5px;
  clip-path: polygon(0% 100%,4% 0%,8% 100%,12% 0%,16% 100%,20% 0%,24% 100%,28% 0%,32% 100%,36% 0%,40% 100%,44% 0%,48% 100%,52% 0%,56% 100%,60% 0%,64% 100%,68% 0%,72% 100%,76% 0%,80% 100%,84% 0%,88% 100%,92% 0%,96% 100%,100% 0%);
}
.bord-dechire::after{
  bottom: -5px;
  clip-path: polygon(0% 0%,4% 100%,8% 0%,12% 100%,16% 0%,20% 100%,24% 0%,28% 100%,32% 0%,36% 100%,40% 0%,44% 100%,48% 0%,52% 100%,56% 0%,60% 100%,64% 0%,68% 100%,72% 0%,76% 100%,80% 0%,84% 100%,88% 0%,92% 100%,96% 0%,100% 100%);
}

/* --------------------------------------------------------------------------
   8. NEWSLETTER
   -------------------------------------------------------------------------- */
.newsletter{
  max-width: 34rem;
  margin: 3em auto;
  padding: 1.8em;
  text-align: center;
  background: var(--paper-deep);
  border: 1px solid var(--border-ink);
}
.newsletter p{ text-align: center; color: var(--ink-soft); }
.newsletter form{
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em;
  justify-content: center;
  margin-top: 1em;
}
.newsletter input[type="email"]{
  flex: 1 1 14rem;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.6em 0.9em;
  background: var(--paper);
  border: 1px solid var(--border-ink);
  border-radius: 2px;
  color: var(--ink);
}
.newsletter input[type="email"]::placeholder{ color: var(--ink-faded); font-style: italic; }

/* --------------------------------------------------------------------------
   9. ORNEMENTS
   -------------------------------------------------------------------------- */
.ornement{
  text-align: center;
  margin: 2.2em 0;
  color: var(--gold-soft);
  font-size: 1.2rem;
  letter-spacing: 0.6em;
}
.ornement::before{ content: "❧ ❧ ❧"; }

/* --------------------------------------------------------------------------
   10. FOOTER
   -------------------------------------------------------------------------- */
footer{
  margin-top: 3em;
  padding: 2em 1em;
  text-align: center;
  font-family: var(--font-label);
  font-size: 0.85rem;
  color: var(--ink-faded);
  border-top: 2px solid var(--border-ink);
}

/* --------------------------------------------------------------------------
   11. ACCESSIBILITÉ
   -------------------------------------------------------------------------- */
a:focus-visible,
.btn-cire:focus-visible,
nav.menu a:focus-visible{
  outline: 2px solid var(--gold-soft);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* --------------------------------------------------------------------------
   12. EFFET DE PAGE QUI TOURNE ENTRE LES PAGES DU SITE
   --------------------------------------------------------------------------
   Ceci utilise la View Transitions API "cross-document" : dès qu'on clique
   un lien vers une autre page du même site, le navigateur anime lui-même
   le passage entre l'ancienne et la nouvelle page — sans JavaScript.

   Compatibilité (2026) : Chrome/Edge/Opera à partir de la version 126,
   Safari à partir de la 18.2. Firefox est en cours de rattrapage.
   Là où ce n'est pas supporté, la navigation se fait normalement, sans
   animation : rien ne casse, c'est une amélioration progressive pure.
   -------------------------------------------------------------------------- */
@supports (view-transition-name: none){
  @view-transition{
    navigation: auto;
  }
}

::view-transition-group(root){
  perspective: 1800px;
}

::view-transition-old(root),
::view-transition-new(root){
  animation-duration: 0.85s;
  animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transform-origin: left center;
}

::view-transition-old(root){ animation-name: tourner-page-sortie; }
::view-transition-new(root){ animation-name: tourner-page-entree; }

@keyframes tourner-page-sortie{
  from{ transform: rotateY(0deg);    filter: brightness(1);    }
  to  { transform: rotateY(-100deg); filter: brightness(0.5); }
}
@keyframes tourner-page-entree{
  from{ transform: rotateY(100deg);  filter: brightness(0.5); }
  to  { transform: rotateY(0deg);    filter: brightness(1);   }
}

@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root),
  ::view-transition-new(root){ animation: none !important; }
}