@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Dancing+Script:wght@400..700&family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700&display=swap');

:root {
  /* pastels d'origine (papiers) */
  --menthe:  #8FD9AE;
  --aqua:    #B6E3D8;
  --lavande: #E3D0E4;
  --rose:    #E3AFD5;
  /* tons bohèmes ajoutés */
  --cream:   #FBF4E6;
  --kraft:   #DFC9A8;
  --clay:    #C98B6B;
  --sage:    #BBD0A6;
  --sage-deep:#93B4A9;
  /* encre & accents */
  --ink:   #463240;
  --plum:  #6E5563;
}

* { box-sizing: border-box; }

body {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  color: var(--ink);
  line-height: 1.7;
  background-color: #F3E9D6;
  background-image:
    radial-gradient(120% 80% at 50% -10%, rgba(227,175,213,0.18), transparent 60%),
    radial-gradient(100% 60% at 100% 100%, rgba(147,180,169,0.18), transparent 55%);
  background-attachment: fixed;
}
/* grain de papier sur toute la page */
body::before {
  content:''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27140%27%20height%3D%27140%27%3E%20%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.9%27%20numOctaves%3D%272%27%20stitchTiles%3D%27stitch%27%2F%3E%20%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3C%2Ffilter%3E%20%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23n%29%27%2F%3E%3C%2Fsvg%3E");
  background-size: 140px 140px;
  opacity: 0.05;
}

/* ---------- EN-TÊTE ---------- */
header {
  position: relative;
  text-align: center;
  padding: 76px 20px 64px;
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2760%27%20height%3D%2760%27%20viewBox%3D%270%200%2060%2060%27%3E%20%3Cg%20fill%3D%27none%27%20stroke%3D%27%23B4CB9F%27%20stroke-width%3D%272.2%27%20stroke-linecap%3D%27round%27%3E%20%3Cpath%20d%3D%27M30%2054%20C%2030%2038%2032%2022%2040%208%27%2F%3E%20%3Cpath%20d%3D%27M33%2036%20C%2022%2036%2016%2030%2014%2021%20C%2025%2022%2031%2028%2034%2036%27%2F%3E%20%3Cpath%20d%3D%27M35%2024%20C%2046%2024%2052%2018%2054%209%20C%2043%2010%2037%2016%2035%2024%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 8% 70%/54px no-repeat,
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2790%27%20height%3D%2790%27%20viewBox%3D%270%200%2090%2090%27%3E%20%3Cg%20fill%3D%27none%27%20stroke%3D%27%2393B4A9%27%20stroke-width%3D%272.2%27%20stroke-linecap%3D%27round%27%3E%20%3Cpath%20d%3D%27M45%2084%20C%2045%2060%2044%2036%2052%2010%27%2F%3E%20%3Cpath%20d%3D%27M48%2058%20C%2035%2056%2028%2048%2025%2037%20C%2038%2037%2046%2045%2049%2056%27%2F%3E%20%3Cpath%20d%3D%27M50%2044%20C%2063%2042%2070%2034%2073%2023%20C%2060%2023%2052%2031%2049%2042%27%2F%3E%20%3Cpath%20d%3D%27M49%2030%20C%2039%2028%2033%2021%2031%2011%20C%2041%2012%2048%2019%2050%2029%27%2F%3E%3C%2Fg%3E%20%3Cg%20fill%3D%27%23E3AFD5%27%3E%3Ccircle%20cx%3D%2752%27%20cy%3D%279%27%20r%3D%273.2%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 92% 26%/72px no-repeat,
    linear-gradient(135deg, #F4E7D6 0%, #ECDCE4 100%);
}
header h1 {
  font-family: 'Dancing Script', cursive;
  font-weight: 700;
  font-size: 3.9rem;
  color: var(--ink);
  margin: 0 0 6px;
}
header p {
  font-family: 'Caveat', cursive;
  font-size: 1.5rem;
  color: var(--plum);
  margin: 0;
}
/* bord déchiré en bas de l'en-tête */
header::after {
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='18' viewBox='0 0 80 18' preserveAspectRatio='none'%3E%3Cpath d='M0 18 L0 8 Q 10 2 20 7 T 40 7 T 60 8 T 80 6 L80 18 Z' fill='%23ffffff'/%3E%3C/svg%3E") repeat-x bottom/80px 18px;
}

/* ---------- MENU ---------- */
nav {
  background: #ffffff;
  padding: 15px;
  text-align: center;
  position: sticky; top: 0; z-index: 20;
  box-shadow: 0 2px 10px rgba(70,50,64,0.08);
}
nav a {
  display:inline-block;
  font-family: 'Caveat', cursive;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--plum);
  text-decoration: none;
  margin: 3px 8px;
  padding: 4px 14px;
  border-radius: 50px;
  transition: color .2s, background .2s, transform .2s;
}
nav a:hover { background: var(--rose); color: var(--ink); transform: rotate(-2deg); }

/* ---------- STRUCTURE ---------- */
main { max-width: 940px; margin: 46px auto; padding: 0 18px; }
section { margin-bottom: 50px; }

h2 {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 2.6rem;
  color: var(--ink);
  text-align: center;
  margin: 0 0 2px;
}
h2::after {
  content:''; display:block; width: 130px; height: 14px; margin: 2px auto 0;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27130%27%20height%3D%2714%27%20viewBox%3D%270%200%20130%2014%27%3E%20%3Cpath%20d%3D%27M3%209%20Q%2016%202%2030%208%20T%2058%208%20T%2086%208%20T%20127%207%27%20fill%3D%27none%27%20stroke%3D%27%23C98B6B%27%20stroke-width%3D%273%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
}
.lead, .empty {
  font-family: 'Caveat', cursive;
  font-size: 1.3rem;
  text-align: center;
  color: var(--plum);
  margin: 8px 0 22px;
}

/* ---------- LA PLANCHE DE SCRAPBOOK ---------- */
.board {
  position: relative;
  display: flex; flex-wrap: wrap;
  justify-content: center; align-items: flex-start;
  gap: 30px 34px;
  padding: 34px 26px;
  border-radius: 14px;
  background-color: var(--cream);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27140%27%20height%3D%27140%27%3E%20%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.9%27%20numOctaves%3D%272%27%20stitchTiles%3D%27stitch%27%2F%3E%20%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3C%2Ffilter%3E%20%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23n%29%27%2F%3E%3C%2Fsvg%3E");
  background-size: 140px 140px;
  box-shadow: inset 0 0 0 2px rgba(201,139,107,0.25),
              inset 0 0 60px rgba(70,50,64,0.05),
              0 6px 18px rgba(70,50,64,0.10);
  outline: 2px dashed rgba(201,139,107,0.4);
  outline-offset: -10px;
}
/* petite branche fleurie dans un coin de chaque planche */
.board::after {
  content:''; position:absolute; right: 10px; bottom: 6px;
  width: 78px; height: 78px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2790%27%20height%3D%2790%27%20viewBox%3D%270%200%2090%2090%27%3E%20%3Cg%20fill%3D%27none%27%20stroke%3D%27%2393B4A9%27%20stroke-width%3D%272.2%27%20stroke-linecap%3D%27round%27%3E%20%3Cpath%20d%3D%27M45%2084%20C%2045%2060%2044%2036%2052%2010%27%2F%3E%20%3Cpath%20d%3D%27M48%2058%20C%2035%2056%2028%2048%2025%2037%20C%2038%2037%2046%2045%2049%2056%27%2F%3E%20%3Cpath%20d%3D%27M50%2044%20C%2063%2042%2070%2034%2073%2023%20C%2060%2023%2052%2031%2049%2042%27%2F%3E%20%3Cpath%20d%3D%27M49%2030%20C%2039%2028%2033%2021%2031%2011%20C%2041%2012%2048%2019%2050%2029%27%2F%3E%3C%2Fg%3E%20%3Cg%20fill%3D%27%23E3AFD5%27%3E%3Ccircle%20cx%3D%2752%27%20cy%3D%279%27%20r%3D%273.2%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center/contain no-repeat;
  opacity: .55; transform: rotate(8deg); pointer-events: none;
}

/* ---------- UN POST-IT / MORCEAU DE PAPIER ---------- */
.note {
  --tilt: 0deg;
  position: relative;
  width: 234px;
  padding: 26px 20px 20px;
  color: var(--ink);
  background-color: var(--cream);
  box-shadow: 2px 6px 14px rgba(70,50,64,0.18);
  transform: rotate(var(--tilt));
  transition: transform .22s ease, box-shadow .22s ease;
}
/* washi tape en haut */
.note::before {
  content:''; position:absolute; top:-10px; left:50%;
  width: 86px; height: 26px; margin-left: -43px;
  transform: rotate(-4deg);
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.35) 0 6px, rgba(255,255,255,0) 6px 12px),
    rgba(201,139,107,0.45);
  border-left: 1px dashed rgba(70,50,64,.15);
  border-right: 1px dashed rgba(70,50,64,.15);
  box-shadow: 0 1px 2px rgba(70,50,64,.12);
}
.note:nth-child(even)::before { transform: rotate(5deg); background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.35) 0 6px, rgba(255,255,255,0) 6px 12px),
    rgba(147,180,169,0.5); }
.note:nth-child(3n)::before { transform: rotate(-2deg); background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.4) 0 5px, rgba(255,255,255,0) 5px 10px),
    rgba(227,175,213,0.5); }
.note:hover {
  transform: rotate(0deg) translateY(-6px) scale(1.03);
  box-shadow: 4px 14px 26px rgba(70,50,64,.26);
  z-index: 5;
}

/* couleurs de papier */
.c-menthe  { background-color: var(--menthe); }
.c-aqua    { background-color: var(--aqua); }
.c-lavande { background-color: var(--lavande); }
.c-rose    { background-color: var(--rose); }
.c-sage    { background-color: var(--sage); }
.c-kraft   { background-color: var(--kraft); }
.c-cream   { background-color: var(--cream);
  background-image: repeating-linear-gradient(transparent 0 26px, rgba(110,85,99,.14) 26px 27px); }

/* ---------- NOTES DE CONTENU (albums, livres, chansons) ---------- */
.note--shelf { width: 252px; }
.note--shelf h3 {
  font-family: 'Dancing Script', cursive;
  font-weight: 700; font-size: 1.7rem;
  margin: 0 0 10px; color: var(--ink);
}
.note--shelf p { margin: 0; font-size: .95rem; }
.note--shelf ul { margin: 0; padding-left: 0; list-style: none; font-size: .9rem; }
.note--shelf li {
  margin: 6px 0;
  padding-left: 24px;
  position: relative;
}
/* Puce personnalisée : note de musique par défaut (albums + chansons) */
.note--shelf li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%20%3Cg%20fill%3D%27%23C98B6B%27%3E%20%3Cellipse%20cx%3D%278%27%20cy%3D%2717.5%27%20rx%3D%274.3%27%20ry%3D%273.2%27%20transform%3D%27rotate%28-18%208%2017.5%29%27%2F%3E%20%3Crect%20x%3D%2711.1%27%20y%3D%274.5%27%20width%3D%271.9%27%20height%3D%2713.2%27%2F%3E%20%3Cpath%20d%3D%27M12.8%204.5%20C%2018.5%205.5%2019.5%2010%2016.3%2013%20C%2018.8%209.3%2016.2%207%2012.8%208%20Z%27%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E");
}
/* Dans la section Livres : on remplace la note par une icône de livre */
#livres .note--shelf li::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%20%3Cg%20fill%3D%27none%27%20stroke%3D%27%23C98B6B%27%20stroke-width%3D%272%27%20stroke-linejoin%3D%27round%27%20stroke-linecap%3D%27round%27%3E%20%3Cpath%20d%3D%27M4%205.5%20C%207%204.3%209.5%204.3%2012%206.2%20C%2014.5%204.3%2017%204.3%2020%205.5%20L20%2018%20C%2017%2016.8%2014.5%2016.8%2012%2018.7%20C%209.5%2016.8%207%2016.8%204%2018%20Z%27%2F%3E%20%3Cpath%20d%3D%27M12%206.2%20L12%2018.7%27%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E");
}

/* ---------- POLAROID (à propos) ---------- */
.polaroid {
  width: 300px;
  background: #fff;
  padding: 14px 14px 0;
  box-shadow: 2px 8px 18px rgba(70,50,64,.22);
  transform: rotate(var(--tilt, -3deg));
  transition: transform .22s ease, box-shadow .22s ease;
}
.polaroid:hover { transform: rotate(0deg) translateY(-6px) scale(1.03); box-shadow: 4px 14px 26px rgba(70,50,64,.26); }
.polaroid .photo {
  height: 150px; border-radius: 2px;
  background: linear-gradient(135deg, var(--menthe), var(--rose));
  display:flex; align-items:center; justify-content:center;
  font-family:'Caveat',cursive; font-size:1.4rem; color: var(--ink);
}
.polaroid figcaption {
  font-family:'Caveat',cursive; font-size: 1.5rem;
  text-align:center; padding: 10px 4px 16px; color: var(--plum);
}

/* ---------- NOTES DES VISITEURS ---------- */
.note--guest .note__text {
  font-family: 'Dancing Script', cursive;
  font-weight: 600; font-size: 1.4rem; line-height: 1.4;
  margin: 0 0 10px; word-break: break-word;
}
.note--guest .note__author {
  font-family:'Caveat',cursive; font-size: 1.05rem;
  margin: 0; text-align: right; color: var(--plum);
}
.note__del {
  position:absolute; top:4px; right:7px;
  border:none; background:transparent; color: var(--ink);
  font-size:18px; line-height:1; cursor:pointer; opacity:0; transition:opacity .2s;
}
.note:hover .note__del { opacity:.55; }
.note__del:hover { opacity:1; }

/* ---------- FORMULAIRE ---------- */
.composer {
  position: relative;
  max-width: 560px; margin: 0 auto 30px;
  background:#fff; padding:22px; border-radius:10px;
  box-shadow: 0 10px 26px rgba(70,50,64,.12);
  outline: 2px dashed rgba(201,139,107,.4); outline-offset:-9px;
}
.composer::after {
  content:''; position:absolute; top:-14px; right:-10px;
  width:34px; height:34px; transform: rotate(12deg);
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2734%27%20height%3D%2734%27%20viewBox%3D%270%200%2034%2034%27%3E%20%3Cpath%20d%3D%27M17%202%20L19.5%2013%20L31%2017%20L19.5%2021%20L17%2032%20L14.5%2021%20L3%2017%20L14.5%2013%20Z%27%20fill%3D%27%23F2D27A%27%20stroke%3D%27%234A3A45%27%20stroke-width%3D%271.4%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
}
.composer textarea {
  width:100%; border:1px solid var(--kraft); border-radius:8px;
  padding:12px 14px; font-family:'Poppins',sans-serif; font-size:1rem;
  color:var(--ink); resize:vertical; background:#fffdf8;
}
.composer textarea:focus, .composer input:focus { outline:2px solid var(--rose); outline-offset:1px; }
.composer__row { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:12px; }
.composer input {
  flex:1 1 150px; border:1px solid var(--kraft); border-radius:50px;
  padding:10px 16px; font-family:'Poppins',sans-serif; font-size:.95rem;
  color:var(--ink); background:#fffdf8;
}
.swatches { display:flex; gap:7px; }
.swatch {
  width:26px; height:26px; border-radius:50%;
  border:2px solid #fff; box-shadow:0 0 0 1px rgba(70,50,64,.25);
  cursor:pointer; transition:transform .15s, box-shadow .15s;
}
.swatch:hover { transform:scale(1.12); }
.swatch.on { box-shadow:0 0 0 2px var(--ink); transform:scale(1.12); }
.pin-btn {
  border:none; background:var(--clay); color:#fff;
  font-family:'Caveat',cursive; font-weight:700; font-size:1.25rem;
  padding:8px 22px; border-radius:50px; cursor:pointer;
  transition:background .2s, transform .2s;
}
.pin-btn:hover { background:var(--ink); transform:translateY(-2px) rotate(-1deg); }

/* ---------- PIED DE PAGE ---------- */
footer {
  text-align:center; padding:30px 16px; margin-top:10px;
  background:var(--ink); color:#F3E9D6;
  font-family:'Caveat',cursive; font-size:1.2rem;
}

/* ---------- ANIMATIONS ---------- */
@keyframes pop {
  0% { transform: rotate(var(--tilt)) scale(.6); opacity:0; }
  60% { transform: rotate(var(--tilt)) scale(1.08); }
  100% { transform: rotate(var(--tilt)) scale(1); opacity:1; }
}
.note.pop { animation: pop .42s ease; }
@keyframes shake { 0%,100%{transform:translateX(0);} 25%{transform:translateX(-6px);} 75%{transform:translateX(6px);} }
.shake { animation: shake .4s ease; }
@media (prefers-reduced-motion: reduce) { * { animation:none!important; transition:none!important; } }

/* ---------- MOBILE ---------- */
@media (max-width:600px) {
  header h1 { font-size:3rem; }
  h2 { font-size:2.1rem; }
  .note, .note--shelf, .polaroid { width:100%; max-width:320px; }
  .board { padding:26px 14px; }
  .pin-btn { flex:1 1 100%; }
}