/* ============================================================
   Tournoi de pétanque, allée 4
   Esthétique : affiche de fête de quartier provençale, papier
   crème, terre battue, boules métal, cochonnet jaune.
   ============================================================ */

:root{
  --paper:        #f4ecdb;   /* papier crème */
  --paper-2:      #efe4cd;
  --ink:          #2c2620;   /* encre brun foncé */
  --ink-soft:     #5d5447;
  --terre:        #c2542f;   /* terre battue / terracotta */
  --terre-deep:   #a6401f;
  --olive:        #4a5739;   /* vert pétanque */
  --cochonnet:    #e7a838;   /* jaune cochonnet */
  --cochonnet-2:  #f0c150;
  --steel-1:      #cfd3d8;
  --steel-2:      #9aa0a8;
  --steel-3:      #6e747c;
  --line:         #d8cbb0;
  --shadow:       rgba(60, 42, 22, .16);

  --font-display: "Fraunces", Georgia, serif;
  --font-body:    "Mulish", -apple-system, system-ui, sans-serif;

  --maxw: 720px;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; overflow-x:hidden; }

body{
  font-family:var(--font-body);
  color:var(--ink);
  background:
    radial-gradient(120% 80% at 80% -10%, #faf3e3 0%, transparent 55%),
    radial-gradient(120% 90% at 0% 110%, #ecdfc4 0%, transparent 50%),
    var(--paper);
  min-height:100vh;
  width:100%;
  max-width:100%;
  position:relative;
  font-size:clamp(17px, 1.1vw + 14px, 19px);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  overflow-wrap:break-word;
}

/* aucun enfant ne doit déborder horizontalement */
.step, .sheet, .hero-inner, .ask-inner, .thanks-inner{ max-width:100%; }

/* paper grain overlay */
.grain{
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Steps : un écran à la fois ---------- */
.step{
  display:none;
  min-height:100vh;
  padding:clamp(28px, 6vw, 64px) clamp(20px, 5vw, 48px) 90px;
  align-items:center;
  justify-content:center;
}
.step.is-active{ display:flex; animation:stepIn .55s cubic-bezier(.2,.8,.2,1) both; }
.step[hidden]{ display:none; }

@keyframes stepIn{
  from{ opacity:0; transform:translateY(18px) scale(.99); }
  to{ opacity:1; transform:none; }
}

/* ---------- Typographie ---------- */
.display{
  font-family:var(--font-display);
  font-weight:900;
  font-optical-sizing:auto;
  line-height:.98;
  letter-spacing:-.015em;
  font-size:clamp(2.6rem, 7.5vw, 4.6rem);
  color:var(--ink);
  text-wrap:balance;
}
.display em{
  font-style:italic; font-weight:500;
  color:var(--terre);
}
.display--md{ font-size:clamp(2rem, 5.5vw, 3.2rem); line-height:1.02; }

.kicker{
  display:inline-flex; align-items:center; gap:.55em;
  font-weight:800; font-size:.78rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--terre-deep);
  margin-bottom:1.1rem;
}
.kicker-dot{
  width:.5em; height:.5em; border-radius:50%;
  background:var(--terre); box-shadow:0 0 0 4px rgba(194,84,47,.18);
}

.lede{
  font-size:clamp(1.05rem, 1.6vw, 1.2rem);
  color:var(--ink-soft); max-width:52ch; margin-top:1.3rem;
  line-height:1.65;
}
.lede--center{ margin-left:auto; margin-right:auto; }

.signed-hint{
  margin-top:2rem; font-family:var(--font-display); font-style:italic;
  font-weight:500; color:var(--ink-soft); font-size:1.15rem;
}
.signed-hint--big{ font-size:1.35rem; margin-top:1.5rem; }

/* ============================================================
   STEP 1 — HERO
   ============================================================ */
.step--hero{ position:relative; }
.hero-inner{ max-width:var(--maxw); width:100%; position:relative; z-index:2; }
.hero-inner .btn{ margin-top:2.2rem; }

.hero-deco{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  color:var(--terre); opacity:.9;
}
.traj{
  position:absolute; top:18%; right:4%; width:min(46vw, 420px); height:auto;
  color:var(--terre); opacity:.35;
}

/* ---------- Boules métal ---------- */
.boule{
  position:absolute; border-radius:50%;
  background:
    radial-gradient(circle at 34% 30%, #fff 0%, var(--steel-1) 18%, var(--steel-2) 55%, var(--steel-3) 100%);
  box-shadow:
    inset -6px -8px 16px rgba(0,0,0,.35),
    inset 4px 5px 10px rgba(255,255,255,.5),
    0 14px 26px var(--shadow);
}
/* stries de la boule */
.boule::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:repeating-linear-gradient(
    115deg, transparent 0 7px, rgba(0,0,0,.06) 7px 8px);
  mix-blend-mode:multiply;
}
.boule--a{
  width:clamp(90px,16vw,150px); height:clamp(90px,16vw,150px);
  top:14%; right:9%;
  animation:rollIn 1.1s cubic-bezier(.2,.85,.25,1) .15s both, floaty 6s ease-in-out 1.4s infinite;
}
.boule--b{
  width:clamp(58px,10vw,96px); height:clamp(58px,10vw,96px);
  top:34%; right:30%;
  animation:rollIn 1.1s cubic-bezier(.2,.85,.25,1) .35s both, floaty 5s ease-in-out 1.6s infinite reverse;
}
.cochonnet{
  position:absolute; top:50%; right:21%;
  width:clamp(22px,3.6vw,34px); height:clamp(22px,3.6vw,34px);
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff4d6 0%, var(--cochonnet-2) 35%, var(--cochonnet) 70%, #c98a1c 100%);
  box-shadow:inset -3px -4px 7px rgba(0,0,0,.28), 0 6px 12px var(--shadow);
  animation:pop 0.5s ease .9s both, floaty 4.5s ease-in-out 1.5s infinite;
}

@keyframes rollIn{
  0%{ transform:translateX(60vw) rotate(0); opacity:0; }
  60%{ opacity:1; }
  100%{ transform:translateX(0) rotate(540deg); opacity:1; }
}
@keyframes pop{
  0%{ transform:scale(0); } 70%{ transform:scale(1.18); } 100%{ transform:scale(1); }
}
@keyframes floaty{
  0%,100%{ transform:translateY(0) rotate(540deg); }
  50%{ transform:translateY(-12px) rotate(548deg); }
}
.boule--b{ animation-name:rollIn, floaty; }

/* ============================================================
   STEP 2 — EXPLICATION (feuille épinglée)
   ============================================================ */
.sheet{
  position:relative; max-width:var(--maxw); width:100%;
  background:linear-gradient(180deg, #fbf5e7, #f6eedb);
  border:1px solid var(--line);
  border-radius:6px;
  padding:clamp(28px, 5vw, 56px);
  box-shadow:0 22px 50px -16px var(--shadow), 0 2px 0 rgba(255,255,255,.7) inset;
}
.sheet::before{ /* coin corné */
  content:""; position:absolute; bottom:0; right:0;
  border-width:0 0 30px 30px; border-style:solid;
  border-color:transparent transparent var(--paper-2) transparent;
  filter:drop-shadow(-2px -2px 2px rgba(0,0,0,.08));
  border-radius:0 0 6px 0;
}
.sheet-pin{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  width:26px; height:26px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #e8755a, var(--terre) 60%, var(--terre-deep));
  box-shadow:0 4px 8px rgba(0,0,0,.3), inset -2px -3px 4px rgba(0,0,0,.3), inset 2px 2px 3px rgba(255,255,255,.4);
}
.sheet .display--md{ margin-top:.3rem; }

.letter{ margin-top:1.6rem; }
.letter p{ margin-bottom:1rem; font-size:1.08rem; line-height:1.7; }
.letter strong{ color:var(--terre-deep); }

/* timeline */
.timeline{
  display:flex; flex-direction:column; gap:0;
  margin:2rem 0; padding-left:1.6rem; position:relative;
}
.timeline::before{
  content:""; position:absolute; left:5px; top:8px; bottom:8px;
  width:3px; background:repeating-linear-gradient(var(--line) 0 6px, transparent 6px 11px);
}
.tl-item{
  position:relative; padding:.7rem 0 .7rem .4rem; display:flex;
  flex-direction:column; gap:.25rem;
}
.tl-item::before{
  content:""; position:absolute; left:-1.6rem; top:1.15rem;
  width:13px; height:13px; border-radius:50%;
  background:var(--paper); border:3px solid var(--terre);
}
.tl-item--final::before{ background:var(--cochonnet); border-color:var(--terre-deep); }
.tl-badge{
  align-self:flex-start;
  font-family:var(--font-display); font-weight:600; font-style:italic;
  font-size:1.15rem; color:var(--terre-deep);
}
.tl-badge--final{ color:var(--olive); font-weight:900; font-style:normal; }
.tl-item p{ color:var(--ink-soft); }

/* reassure box */
.reassure{
  margin-top:1.4rem; padding:1.4rem 1.5rem;
  background:rgba(74,87,57,.07);
  border:1px dashed rgba(74,87,57,.4);
  border-radius:10px;
}
.reassure h3{
  font-family:var(--font-display); font-weight:600; font-style:italic;
  font-size:1.3rem; color:var(--olive); margin-bottom:.7rem;
}
.reassure ul{ list-style:none; display:flex; flex-direction:column; gap:.7rem; }
.reassure li{ position:relative; padding-left:1.7rem; font-size:1rem; line-height:1.55; }
.reassure li::before{
  content:"✓"; position:absolute; left:0; top:-1px;
  color:var(--olive); font-weight:900;
}
.reassure strong{ color:var(--ink); }

/* ============================================================
   STEP 3 — LA QUESTION
   ============================================================ */
.step--ask{ position:relative; }
.ask-inner{ max-width:560px; width:100%; text-align:center; position:relative; }
.ask-boule{
  display:block; width:64px; height:64px; border-radius:50%;
  margin:0 auto 1.6rem;
  background:radial-gradient(circle at 34% 30%, #fff 0%, var(--steel-1) 18%, var(--steel-2) 55%, var(--steel-3) 100%);
  box-shadow:inset -5px -6px 12px rgba(0,0,0,.35), inset 3px 4px 8px rgba(255,255,255,.5), 0 10px 20px var(--shadow);
  animation:floaty 5s ease-in-out infinite;
}
.ask-boule::after{
  content:""; display:block; width:14px; height:14px; border-radius:50%;
  background:var(--cochonnet); position:relative; top:78px; left:50%;
  transform:translateX(-50%); box-shadow:0 4px 8px var(--shadow);
  animation:floaty 4s ease-in-out infinite;
}
.choice{
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:center;
  margin:2.2rem 0 1.6rem;
}
.choice-emoji{ font-size:1.3em; margin-right:.1em; }

/* ============================================================
   STEP 4 — FORMULAIRE
   ============================================================ */
.sheet--form{ max-width:640px; }
.form-intro{ color:var(--ink-soft); margin:.6rem 0 1.8rem; }

form{ display:flex; flex-direction:column; gap:1.3rem; }
.field-row{ display:flex; gap:1rem; }
.field-row .field{ flex:1; }
.field{ display:flex; flex-direction:column; gap:.45rem; border:none; }
.field--group{ gap:.7rem; }
.field-label{
  font-weight:800; font-size:.95rem; color:var(--ink);
  letter-spacing:.01em;
}
.field-label i{ color:var(--terre); font-style:normal; }
.field-opt{ font-weight:500; color:var(--ink-soft); font-size:.85em; }
.field-hint{ font-size:.88rem; color:var(--ink-soft); line-height:1.45; margin-top:.1rem; }

input[type=text], input[type=email], input[type=tel], textarea{
  font-family:inherit; font-size:1.05rem; color:var(--ink);
  background:#fffdf7;
  border:2px solid var(--line); border-radius:10px;
  padding:.8rem .95rem; width:100%; transition:border-color .15s, box-shadow .15s;
}
input::placeholder, textarea::placeholder{ color:#b3a68c; }
input:focus, textarea:focus{
  outline:none; border-color:var(--terre);
  box-shadow:0 0 0 4px rgba(194,84,47,.14);
}
textarea{ resize:vertical; min-height:60px; }

.checks{ display:flex; flex-wrap:wrap; gap:.6rem; }
.check{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.55rem .9rem; border:2px solid var(--line); border-radius:999px;
  background:#fffdf7; cursor:pointer; user-select:none;
  font-size:.98rem; transition:all .15s; font-weight:600;
}
.check:hover{ border-color:var(--terre); }
.check input{ accent-color:var(--terre); width:1.05rem; height:1.05rem; cursor:pointer; }
.check:has(input:checked){
  background:rgba(194,84,47,.1); border-color:var(--terre); color:var(--terre-deep);
}

.privacy-note{
  font-size:.92rem; color:var(--ink-soft); line-height:1.5;
  background:rgba(74,87,57,.07); border-radius:8px; padding:.8rem 1rem;
}
.form-error{
  color:var(--terre-deep); font-weight:700; background:rgba(194,84,47,.1);
  padding:.7rem 1rem; border-radius:8px; border:1px solid rgba(194,84,47,.3);
}

/* ============================================================
   STEP 5 / BYE — MERCI
   ============================================================ */
.thanks-inner{ max-width:580px; width:100%; text-align:center; position:relative; }
.big-boule{
  display:block; width:92px; height:92px; border-radius:50%; margin:0 auto 1.8rem;
  background:radial-gradient(circle at 34% 30%, #fff 0%, var(--steel-1) 18%, var(--steel-2) 55%, var(--steel-3) 100%);
  box-shadow:inset -6px -8px 16px rgba(0,0,0,.35), inset 4px 5px 10px rgba(255,255,255,.5), 0 14px 26px var(--shadow);
  animation:winSpin 1s cubic-bezier(.2,.8,.2,1) both;
}
.boule--solo{
  display:block; position:static; width:80px; height:80px; margin:0 auto 1.8rem;
}
@keyframes winSpin{
  from{ transform:scale(0) rotate(-180deg); } to{ transform:scale(1) rotate(0); }
}
.confetti{ position:absolute; inset:-20px 0 auto; height:0; }
.confetti span{
  position:absolute; top:0; width:10px; height:14px; border-radius:2px;
  opacity:0; animation:fall 2.4s ease-in forwards;
}
.confetti span:nth-child(1){ left:8%;  background:var(--terre);     animation-delay:.05s; }
.confetti span:nth-child(2){ left:22%; background:var(--cochonnet); animation-delay:.25s; }
.confetti span:nth-child(3){ left:36%; background:var(--olive);     animation-delay:.12s; }
.confetti span:nth-child(4){ left:50%; background:var(--terre);     animation-delay:.34s; }
.confetti span:nth-child(5){ left:62%; background:var(--cochonnet); animation-delay:.08s; }
.confetti span:nth-child(6){ left:75%; background:var(--olive);     animation-delay:.29s; }
.confetti span:nth-child(7){ left:88%; background:var(--terre);     animation-delay:.18s; }
.confetti span:nth-child(8){ left:94%; background:var(--cochonnet); animation-delay:.4s;  }
@keyframes fall{
  0%{ transform:translateY(-10px) rotate(0); opacity:1; }
  100%{ transform:translateY(60vh) rotate(540deg); opacity:0; }
}

/* ============================================================
   BOUTONS
   ============================================================ */
.btn{
  font-family:var(--font-body); font-weight:800; font-size:1.02rem;
  border:none; border-radius:999px; cursor:pointer;
  padding:.85rem 1.5rem; display:inline-flex; align-items:center; gap:.5rem;
  transition:transform .12s, box-shadow .18s, background .18s; line-height:1.1;
}
.btn:active{ transform:translateY(1px) scale(.99); }
.btn--lg{ padding:1.05rem 1.9rem; font-size:1.1rem; }

.btn--primary{
  background:linear-gradient(180deg, #d2603a, var(--terre));
  color:#fff7ee; box-shadow:0 10px 22px -6px rgba(166,64,31,.55);
}
.btn--primary:hover{ box-shadow:0 14px 28px -6px rgba(166,64,31,.7); transform:translateY(-2px); }

.btn--yes{
  background:linear-gradient(180deg, #56663f, var(--olive));
  color:#f6f3e6; box-shadow:0 10px 22px -6px rgba(74,87,57,.55);
  font-size:1.15rem; padding:1.1rem 2rem;
}
.btn--yes:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -6px rgba(74,87,57,.7); }

.btn--no{
  background:transparent; color:var(--ink-soft);
  border:2px solid var(--line); padding:1.1rem 1.8rem;
}
.btn--no:hover{ border-color:var(--ink-soft); color:var(--ink); }

.btn--ghost{
  background:transparent; color:var(--ink-soft); padding:.6rem 1rem;
  font-weight:700; font-size:.95rem;
}
.btn--ghost:hover{ color:var(--terre-deep); }

.btn-arrow{ transition:transform .18s; }
.btn--primary:hover .btn-arrow{ transform:translateX(4px); }

.cta-row{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1rem; margin-top:2rem; }
.cta-row--center{ justify-content:center; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{
  position:fixed; bottom:0; left:0; right:0; z-index:5;
  text-align:center; padding:.65rem 1rem;
  font-size:.78rem; color:var(--ink-soft);
  background:linear-gradient(transparent, var(--paper) 40%);
  pointer-events:none;
}
.foot p{ max-width:680px; margin:0 auto; opacity:.85; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:560px){
  .field-row{ flex-direction:column; gap:1.3rem; }
  .traj{ display:none; }
  .boule--b{ display:none; }
  .boule--a{ top:5%; right:0; opacity:.8; }
  .cochonnet{ display:none; }
  .foot{ font-size:.7rem; }
  .choice{ flex-direction:column; }
  .choice .btn{ width:100%; justify-content:center; }
}

/* ============================================================
   ACCESSIBILITÉ — réduit le mouvement si demandé
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; }
  html{ scroll-behavior:auto; }
}