/* ==========================================================================
   GEEK'N'POP FESTIVAL — Feuille de style commune
   Direction : "carnet de scrapbook geek" — planches, autocollants, trame BD
   (Reprise à l'identique du site modèle — Sites Modeles/geeknpop/assets/style.css)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Manrope:ital,wght@0,400;0,500;0,600;0,700;0,800;1,600&display=swap');

:root{
  /* Palette */
  --encre:      #142019;
  --encre-2:    #1c2b23;
  --bambou:     #1f7a4c;
  --bambou-d:   #14512f;
  --neon:       #c7e83a;
  --neon-d:     #a9c722;
  --papier:     #faf6ec;
  --papier-2:   #f1ead9;
  --terracotta: #a85a2e;
  --ciel:       #4a90c4;
  --blanc:      #ffffff;

  --font-display: 'Anton', 'Arial Narrow', sans-serif;
  --font-body: 'Manrope', system-ui, sans-serif;

  --radius-sticker: 10px;
  --border-ink: 3px solid var(--encre);
  --shadow-sticker: 6px 6px 0 var(--encre);
  --shadow-sticker-sm: 4px 4px 0 var(--encre);
  --max-w: 1180px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--encre);
  background:var(--papier);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:400;
  line-height:1.05;
  margin:0 0 .4em;
  letter-spacing:.01em;
}
p{ margin:0 0 1em; max-width:62ch; }
.wrap{ max-width:var(--max-w); padding:0 24px; margin-left:auto; margin-right:auto; }
section{ position:relative; }

/* Halftone dot texture, used as a decorative corner accent */
.dots{
  position:absolute;
  width:140px; height:140px;
  background-image:radial-gradient(currentColor 2.4px, transparent 2.6px);
  background-size:14px 14px;
  opacity:.35;
  pointer-events:none;
}

/* Skip link */
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--neon); color:var(--encre);
  padding:10px 16px; z-index:200; font-weight:700;
}
.skip-link:focus{ left:12px; top:12px; }

.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-body); font-weight:800; font-size:.95rem;
  padding:12px 22px; border-radius:999px; border:3px solid var(--encre);
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform .12s ease, box-shadow .12s ease;
  box-shadow:4px 4px 0 var(--encre);
}
.btn:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--encre); }
.btn:active{ transform:translate(0,0); box-shadow:2px 2px 0 var(--encre); }
.btn--neon{ background:var(--neon); color:var(--encre); }
.btn--ink{ background:var(--encre); color:var(--papier); }
.btn--outline{ background:transparent; color:var(--encre); }
.btn--outline.on-dark{ color:var(--papier); border-color:var(--papier); box-shadow:4px 4px 0 var(--neon); }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:800; font-size:.82rem; letter-spacing:.06em;
  background:var(--neon); color:var(--encre); padding:5px 14px;
  border-radius:999px; border:2px solid var(--encre); margin-bottom:18px;
  transform:rotate(-2deg);
}
.h-display{ font-size:clamp(2.4rem, 5.4vw, 4.4rem); }
.h-sub{ font-size:clamp(1.5rem, 2.6vw, 2.1rem); }
.lede{ font-size:1.15rem; max-width:60ch; }

/* ---------- Sticker card ---------- */
.sticker{
  background:var(--papier); border:var(--border-ink); border-radius:var(--radius-sticker);
  box-shadow:var(--shadow-sticker); padding:26px; position:relative;
}
.sticker.rot-l{ transform:rotate(-1.6deg); }
.sticker.rot-r{ transform:rotate(1.4deg); }
.tape{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%) rotate(-3deg);
  width:70px; height:26px; background:rgba(199,232,58,.85);
  border:2px solid var(--encre); opacity:.9;
}

/* ---------- Misc ---------- */
.tag{
  display:inline-block; font-weight:800; font-size:.78rem; letter-spacing:.03em;
  background:var(--papier); border:2px solid var(--encre); border-radius:999px;
  padding:3px 12px; margin:0 6px 6px 0;
}
.center{ text-align:center; margin-left:auto; margin-right:auto; }
.small{ font-size:.9rem; opacity:.85; }

/* ---------- Forms  ---------- */
.form-card{
  background:var(--papier); border:var(--border-ink); border-radius:var(--radius-sticker);
  box-shadow:var(--shadow-sticker); padding:36px;
}
.field{ margin-bottom:20px; text-align:left; }
.field label{ display:block; font-weight:800; margin-bottom:6px; font-size:.92rem; }
.field .hint{ font-weight:500; opacity:.7; font-size:.85rem; margin-top:5px; }
.field input, .field select, .field textarea{
  width:100%; padding:12px 14px; border:2px solid var(--encre); border-radius:8px;
  font-family:var(--font-body); font-size:1rem; background:var(--blanc); color:var(--encre);
}
.field textarea{ resize:vertical; min-height:110px; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:3px solid var(--neon); outline-offset:1px;
}
.field-note{
  background:var(--papier-2); border:2px dashed var(--encre); border-radius:8px;
  padding:14px 16px; font-size:.9rem; margin-bottom:24px; text-align:left;
}
/* Piège à robots : champ caché visuellement mais présent dans le HTML —
   un humain ne le voit ni ne le remplit jamais, un robot de spam basique si */
.champ-piege{
  position:absolute !important;
  left:-9999px !important;
  width:1px; height:1px; overflow:hidden;
}

/* ==========================================================================
   PAGE LINKTREE — ajouts spécifiques à cette page (utilise les mêmes
   variables et classes que le reste du site : .btn, .sticker, .tape, .dots…)
   ========================================================================== */

.linktree{
  min-height:100vh;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:56px 0 48px;
  background:var(--papier);
  position:relative;
  overflow:hidden;
}

.dots--tl{ top:24px; left:24px; color:var(--bambou); }
.dots--br{ bottom:24px; right:24px; color:var(--neon); }

.linktree__inner{
  max-width:440px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  position:relative;
  z-index:1;
}

.linktree__logo{
  margin-bottom:18px;
}
.linktree__logo img{
  width:340px;
  margin:0 auto;
  filter:drop-shadow(4px 4px 0 rgba(20,32,25,.12));
}

/* Mascotte "cache-cache" derrière le badge de dates : la tête + les mains
   dépassent par-dessus le badge, le reste du corps est masqué en dessous.
   .linktree__peek-crop rogne l'image (recadrage buste/tête) et le
   margin-bottom négatif la fait chevaucher le badge, qui passe visuellement
   au premier plan (z-index) et cache le bas de l'image. */
.linktree__peek{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  margin:4px auto 6px;
}
.linktree__peek-tag{
  position:absolute;
  top:-14px;
  right:calc(50% - 118px);
  transform:rotate(6deg);
  z-index:3;
  background:var(--papier);
}
.linktree__peek-crop{
  width:280px;
  height:224px;
  overflow:hidden;
  position:relative;
  z-index:1;
  margin-bottom:-70px;
  pointer-events:none;
}
.linktree__peek-crop img{
  width:100%;
  height:auto;
  display:block;
  filter:drop-shadow(3px 4px 0 rgba(20,32,25,.18));
}
.linktree__peek .eyebrow{
  font-size:0.85rem;
  position:relative;
  z-index:2;
  padding-left: 24px;
  padding-right: 24px;
  padding-top: 12px;
  padding-bottom: 12px;
  margin-bottom:14px;
}

.linktree__links{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:16px;
  margin-top:8px;
}

.linktree__btn{
  width:100%;
  justify-content:center;
  padding:16px 22px;
  font-size:1.05rem;
  border-radius:999px;
}

.linktree__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;
  flex-shrink:0;
}
.linktree__icon svg{
  width:22px;
  height:22px;
  display:block;
}

.linktree__label{
  flex:1;
  text-align:left;
  margin-left:6px;
}

.linktree__footer{
  margin-top:32px;
}

@media (max-width:480px){
  .linktree{ padding:40px 0 32px; }
  .linktree__logo img{ width:180px; }
  .dots{ width:90px; height:90px; }
}