/* ==========================================================================
   windboy - feuille de style principale
   Palette : ciel du soir, prairie, soleil. Inspirée de Kel (OMORI) et des
   couchers de soleil sur champs.
   ========================================================================== */

/* -- Polices -------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Patrick+Hand&family=Nunito:wght@400;600;700&display=swap");

/* -- Variables -------------------------------------------------------------- */
:root {
  --cream:       #fff6e8;
  --paper:       #fffaf1;
  --sun:         #ffc94a;
  --sun-soft:    #ffe29a;
  --dawn:        #ff9b54;
  --ember:       #e8734a;
  --ink:         #4a3324;
  --ink-soft:    #8a6b4f;
  --shadow:      rgba(74, 51, 36, 0.15);

  --font-hand:   "Patrick Hand", cursive;
  --font-body:   "Nunito", sans-serif;

  --radius: 18px;
}

/* -- Reset ------------------------------------------------------------------ */
* {
  box-sizing: border-box;
}

body {
  position: relative;
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.6;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='12' cy='12' r='5' fill='%23FFC94A' stroke='%23E8734A' stroke-width='2'/%3E%3Cg stroke='%23E8734A' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='12' y1='1' x2='12' y2='4'/%3E%3Cline x1='12' y1='20' x2='12' y2='23'/%3E%3Cline x1='1' y1='12' x2='4' y2='12'/%3E%3Cline x1='20' y1='12' x2='23' y2='12'/%3E%3C/g%3E%3C/svg%3E") 12 12, auto;
}

/* grain discret sur toute la page, pour la texture "petit site fait main" */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection {
  background: var(--ember);
  color: var(--paper);
}

/* scrollbar aux couleurs du site (Firefox) */
html {
  scrollbar-color: var(--ember) var(--sun-soft);
  scrollbar-width: thin;
}

/* scrollbar aux couleurs du site (Chrome/Safari) */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: var(--sun-soft);
}

::-webkit-scrollbar-thumb {
  background: var(--ember);
  border: 3px solid var(--sun-soft);
  border-radius: 6px;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--ember);
  text-decoration: none;
}

a:hover {
  text-decoration: underline wavy;
  text-decoration-thickness: 1px;
}

h1, h2, h3 {
  font-family: var(--font-hand);
  color: var(--ink);
  margin: 0 0 0.4em;
}

.container {
  width: 90%;
  max-width: 760px;
  margin: 0 auto;
}

/* -- Site header (utilisé sur toutes les pages sauf l'accueil) -------------- */
.site-header {
  position: relative;
  background-image: url("../img/wallpaper.jpg");
  background-size: cover;
  background-position: center 75%;
  padding: 1.6rem 0 2.2rem;
  text-align: center;
  border-bottom: 4px solid var(--sun-soft);
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(140, 70, 20, 0.55) 0%, rgba(180, 100, 30, 0.35) 100%);
}

.site-header .logo,
.site-header .site-nav {
  position: relative;
  z-index: 1;
}

.site-header .logo {
  font-family: var(--font-hand);
  font-size: 2.4rem;
  color: var(--paper);
  -webkit-text-stroke: 3px var(--ember);
  paint-order: stroke fill;
  text-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
  letter-spacing: 1px;
}

.site-nav {
  margin-top: 0.8rem;
  display: flex;
  justify-content: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}

.site-nav a {
  background: var(--paper);
  color: var(--ink);
  padding: 0.35rem 1.1rem;
  border-radius: 10px;
  font-weight: 700;
  border: 2px solid var(--ember);
  box-shadow: 3px 3px 0 0 rgba(74, 51, 36, 0.35);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.site-nav a:hover {
  background: var(--sun-soft);
  text-decoration: none;
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 0 rgba(74, 51, 36, 0.35);
}

.site-nav a.current {
  background: var(--ember);
  color: var(--paper);
}

/* -- Hero (page d'accueil) --------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 640px;
  padding: 3rem 0;
  background-image: url("../img/wallpaper.jpg");
  background-size: cover;
  background-position: center 60%;
}

/* voile chaud pour que le texte reste lisible sur la photo */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    180deg,
    rgba(120, 60, 20, 0.35) 0%,
    rgba(180, 90, 30, 0.13) 30%,
    rgba(180, 90, 30, 0.13) 100%
  );
}

/* bord "déchiré" façon papier, à la place d'un simple fondu */
.torn-edge {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  height: 52px;
  background: var(--cream);
  clip-path: polygon(
    0% 46%, 4% 14%, 8% 52%, 12% 20%, 16% 58%, 20% 24%, 24% 62%, 28% 16%,
    32% 50%, 36% 22%, 40% 60%, 44% 18%, 48% 54%, 52% 26%, 56% 64%, 60% 14%,
    64% 52%, 68% 22%, 72% 58%, 76% 18%, 80% 56%, 84% 24%, 88% 60%, 92% 16%,
    96% 50%, 100% 22%,
    100% 100%, 0% 100%
  );
}

/* fines scanlines façon vieux moniteur, très discrètes */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    180deg,
    rgba(74, 51, 36, 0.05) 0px,
    rgba(74, 51, 36, 0.05) 1px,
    transparent 1px,
    transparent 3px
  );
  mask-image: linear-gradient(180deg, black 0%, black 55%, transparent 85%);
  -webkit-mask-image: linear-gradient(180deg, black 0%, black 55%, transparent 85%);
}

.hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
}

.hero-content .sun-badge {
  position: relative;
  z-index: 2;
  width: 110px;
  margin: 0 auto -34px;
  border-radius: 50%;
  border: 5px solid var(--paper);
  box-shadow: 0 6px 16px var(--shadow);
  animation: float 5s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* plaque de logo façon vieille bannière de site perso */
.logo-plaque {
  position: relative;
  z-index: 1;
  display: block;
  width: fit-content;
  margin: 0 auto 2.5rem;
  padding: 2.3rem 2.4rem 1.1rem;
  transform: rotate(-1.4deg);
  background:
    repeating-conic-gradient(rgba(0, 0, 0, 0.04) 0% 25%, transparent 0% 50%) 0 0 / 4px 4px,
    linear-gradient(180deg, var(--dawn) 0%, var(--ember) 100%);
  border: 4px solid var(--ink);
  border-radius: 16px;
  text-align: center;
  box-shadow:
    0 10px 22px rgba(74, 51, 36, 0.45),
    inset 0 2px 0 rgba(255, 255, 255, 0.3),
    inset 0 -4px 0 rgba(0, 0, 0, 0.2);
}

.hero-content .site-title {
  font-family: var(--font-hand);
  font-size: 3.2rem;
  line-height: 1;
  color: var(--paper);
  -webkit-text-stroke: 3px var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.2);
  margin: 0 0 0.5rem;
}

.hero-content .tagline {
  display: block;
  padding-top: 0.5rem;
  border-top: 2px dashed rgba(255, 250, 241, 0.6);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.5px;
  color: var(--paper);
  text-shadow: 1px 1px 0 rgba(74, 51, 36, 0.4);
}

.hero-content .intro {
  display: block;
  width: fit-content;
  max-width: 440px;
  margin: 0 auto 1.8rem;
  padding: 0 1rem;
  color: var(--paper);
  font-size: 1.15rem;
  font-weight: 800;
  -webkit-text-stroke: 5px var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.2);
}

/* -- Boutons de catégories --------------------------------------------------- */
.category-links {
  display: flex;
  justify-content: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}

.category-card {
  position: relative;
  background:
    repeating-conic-gradient(rgba(74, 51, 36, 0.035) 0% 25%, transparent 0% 50%) 0 0 / 3px 3px,
    linear-gradient(160deg, var(--paper) 0%, var(--sun-soft) 100%);
  border: 2px solid var(--ember);
  border-radius: 16px;
  padding: 1.7rem 1.6rem 1.4rem;
  width: 220px;
  text-align: center;
  box-shadow: 5px 5px 0 0 var(--ember);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.category-card:nth-child(1) { transform: rotate(-2deg); }
.category-card:nth-child(2) { transform: rotate(1.5deg); }

.category-card:hover {
  box-shadow: 8px 8px 0 0 var(--ember);
  text-decoration: none;
}

.category-card:nth-child(1):hover { transform: rotate(-2deg) translate(-3px, -3px); }
.category-card:nth-child(2):hover { transform: rotate(1.5deg) translate(-3px, -3px); }

.category-card:nth-child(1):active { transform: rotate(-2deg) translate(0, 0); }
.category-card:nth-child(2):active { transform: rotate(1.5deg) translate(0, 0); }
.category-card:active {
  box-shadow: 2px 2px 0 0 var(--ember);
}


.category-card .icon-badge {
  width: 54px;
  height: 54px;
  margin: 0 auto 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fffaf1, var(--sun) 75%);
  border: 2px solid var(--ember);
  color: var(--ember);
}

.category-card .icon-badge svg {
  width: 26px;
  height: 26px;
}

.category-card .name {
  display: block;
  font-family: var(--font-hand);
  font-size: 1.6rem;
  color: var(--ink);
  letter-spacing: 0.5px;
}

.category-card .desc {
  display: block;
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-top: 0.3rem;
}

/* -- Section "about" sur l'accueil ------------------------------------------- */
.about {
  padding: 3rem 0;
}

.about-box {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  background: var(--paper);
  border-radius: var(--radius);
  padding: 1.6rem;
  box-shadow: 0 4px 14px var(--shadow);
  flex-wrap: wrap;
}

.about-box img {
  width: 120px;
  border-radius: 14px;
  border: 4px solid var(--sun-soft);
}

.about-box .text {
  flex: 1;
  min-width: 220px;
}

/* -- Listes de billets (stories.html / daily.html) --------------------------- */
.page-intro {
  padding: 2.2rem 0 0.5rem;
  text-align: center;
}

.page-intro h1 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.page-intro .heading-icon {
  width: 28px;
  height: 28px;
  color: var(--ember);
}

.page-intro p {
  color: var(--ink-soft);
}

.post-list {
  padding: 1.5rem 0 3rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.post-card {
  background: var(--paper);
  border-left: 6px solid var(--ember);
  border-radius: 10px;
  padding: 1.1rem 1.4rem;
  box-shadow: 0 3px 10px var(--shadow);
}

.post-card .date {
  font-size: 0.8rem;
  color: var(--ember);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.post-card h2 {
  font-size: 1.5rem;
  margin: 0.2rem 0 0.4rem;
}

.post-card .excerpt {
  color: var(--ink-soft);
  margin: 0 0 0.5rem;
}

.post-card .read-more {
  font-weight: 700;
}

/* petite bande de photos entre les sections */
.field-strip {
  display: flex;
  gap: 6px;
  overflow: hidden;
  height: 90px;
  margin: 2rem 0;
  border-radius: 10px;
}

.field-strip img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  filter: saturate(1.1);
}

/* -- Page d'un billet --------------------------------------------------------- */
.post {
  padding: 2.4rem 0 4rem;
}

.post .back-link {
  display: inline-block;
  margin-bottom: 1.2rem;
  font-weight: 700;
}

.post .date {
  color: var(--ember);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.5px;
}

.post h1 {
  font-size: 2.4rem;
  margin-top: 0.3rem;
}

.post-body {
  background: var(--paper);
  border-radius: var(--radius);
  padding: 1.8rem;
  box-shadow: 0 4px 14px var(--shadow);
}

.post-body p {
  margin: 0 0 1rem;
}

.post-body p:last-child {
  margin-bottom: 0;
}

/* -- Pied de page -------------------------------------------------------------- */
.site-footer {
  text-align: center;
  padding: 2rem 0 3rem;
  color: var(--ink-soft);
  font-size: 0.85rem;
}

.site-footer .divider {
  width: 70px;
  height: 3px;
  margin: 0 auto 0.8rem;
  background: repeating-linear-gradient(
    90deg,
    var(--ember) 0, var(--ember) 6px,
    transparent 6px, transparent 12px
  );
}

.footer-extras {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: 1.2rem;
}

.site-footer .footer-link {
  display: inline-block;
  padding: 0.5rem 1.3rem;
  background: linear-gradient(180deg, var(--dawn) 0%, var(--ember) 100%);
  border: 2px solid var(--ink);
  border-radius: 999px;
  color: var(--paper);
  font-weight: 700;
  box-shadow:
    2px 2px 0 0 rgba(74, 51, 36, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.site-footer .footer-link:hover {
  transform: translate(-2px, -2px);
  box-shadow:
    4px 4px 0 0 rgba(74, 51, 36, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  text-decoration: none;
}

/* petit badge façon vieux bouton 88x31 de webring, avec un léger effet bombé */
.badge-noai {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 120px;
  padding: 0.35rem 0.4rem;
  background: linear-gradient(180deg, var(--paper) 0%, var(--sun-soft) 100%);
  border: 2px solid var(--ink);
  border-radius: 5px;
  box-shadow:
    2px 2px 0 0 var(--ember),
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -2px 0 rgba(0, 0, 0, 0.15);
  font-family: "Courier New", monospace;
  font-size: 0.62rem;
  line-height: 1.35;
  letter-spacing: 0.4px;
  color: var(--ink);
}

/* -- Responsive ---------------------------------------------------------------- */
@media (max-width: 480px) {
  .hero-content .site-title { font-size: 2.4rem; }
  .about-box { flex-direction: column; text-align: center; }
  .post h1 { font-size: 1.9rem; }
}