/* ============================================================
   Surcouche commune à TOUTES les pages du site.
   À charger EN DERNIER dans le <head> :
   <link rel="stylesheet" href="styles-fond-papier.css">
   ============================================================ */

/* 1. Palette partagée */
:root {
  --cream: #e8e6e1;
  --sand: #d5d1ca;
  --white: #f4f2ee;
}

/* 2. Fond papier fibreux clair */
body {
  background-color: #f2eee8;
  background-image: url("images/paper-texture.jpg");
  background-repeat: repeat;
  background-size: 500px 500px;
  background-position: top left;
  background-attachment: fixed;
}

/* Voile clair au-dessus de la texture */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: rgba(242, 238, 232, 0.60);
}

/* 3. NOUVEAU : le même dégradé "ombre" appliqué sur l'image de fond,
      fixe en haut de l'écran, sur toutes les pages. */
body { position: relative; }

body::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 340px;          /* hauteur du dégradé : ajuste ici */
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, var(--sand) 0, transparent 100%);
}

/* 4. Bandeau assorti au fond */
header {
  background: rgba(232, 230, 225, 0.96);
}

/* 4a. Taille du logo — réglable en direct via le panneau (touche "L") */
:root {
  --logo-size: 48px;
  /* L'image contient une marge transparente : 56px donnent un monogramme visible d'environ 46px. */
  --logo-size-mobile: 50px;
}

.logo-wrap img {
  width: var(--logo-size) !important;
  height: var(--logo-size) !important;
  max-width: var(--logo-size) !important;
}

@media (max-width: 800px) {
  .logo-wrap img {
    width: var(--logo-size-mobile) !important;
    height: var(--logo-size-mobile) !important;
    max-width: var(--logo-size-mobile) !important;
  }
}

/* 5. Bouton Boutique Etsy — TAILLE IDENTIQUE sur toutes les pages */
.nav-shop,
.mobile-shop-bar .btn {
  background: #8a7968;
  border-color: #8a7968;
  color: var(--white);
  border-radius: 999px;
  font-size: .72rem;
  line-height: 1.2;
  padding: 10px 21px;
  letter-spacing: 1.2px;
  box-shadow: 0 4px 12px rgba(102, 86, 71, .14);
}

.nav-shop:hover,
.mobile-shop-bar .btn:hover {
  background: #766554;
  border-color: #766554;
  transform: translateY(-2px);
  box-shadow: 0 8px 19px rgba(102, 86, 71, .22);
}

/* 6. Héros : plus de dégradé local, c'est le fond (point 3) qui le porte
      -> rendu strictement identique Index / Créations */
.hero,
.page-hero {
  background: transparent;
}

.hero {
  padding: 112px 24px 66px;
}

@media (max-width: 600px) {
  .hero {
    padding: 92px 18px 50px;
  }
}

/* 7. Section témoignages : fond transparent pour laisser voir le fond papier */
.reviews-section {
  background: transparent;
}


#about,
#reviews,
#process {
  position: relative;
}

#about::before,
#reviews::before,
#process::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 240px;
  height: 1.5px;
  background: var(--sand);
}
.hero-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease;
  object-fit: cover;
}

.hero-slide.active {
  opacity: 1;
  position: relative; /* le 1er slide garde le flux normal pour le ratio de la boîte */
}

/* à partir du 2e slide, on force le positionnement absolu pour le superposer au 1er */
.hero-slide:not(:first-child) {
  position: absolute;
}
.nav-links a {
  position: relative;
  text-decoration: none;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px; /* espace sous le texte */
  width: 0;
  height: 1px;
  background: var(--clay);
  transition: width 0.4s ease;
}

.nav-links a:hover::after {
  width: 100%;
}

/* Masquer le carrousel d’images aléatoires sur mobile */
@media (max-width: 800px) {
  .hero-photo {
    display: none;
  }

  .hero-inner {
    text-align: center;
    margin: 0 auto;
  }

  .hero .btn,
  .hero .btn-outline {
    margin-left: auto;
    margin-right: auto;
  }

  .hero .btn-outline {
    margin-left: 0;
  }
}