/* ==========================================================================
   Contact — styles spécifiques à la page
   ========================================================================== */

/* --- Hero --- */
.phero{position:relative;background:#3772FF;overflow:hidden;color:#fff;text-align:center}
.phero-in{padding:80px 0 110px;position:relative;z-index:2}
.h1{font-family:'Lilita One',cursive;font-size:clamp(40px,5vw,68px);line-height:1.05;margin:14px 0 0;text-shadow:4px 5px 0 #171c34}
.lead{font-size:19px;line-height:1.65;color:rgba(255,255,255,.92);max-width:640px;margin:22px auto 0}
.kick-w{color:#ffc337}
.pherofusee{position:absolute;right:6%;bottom:8%;width:150px;animation:float 3.6s ease-in-out infinite;filter:drop-shadow(6px 8px 0 rgba(23,28,52,.28));z-index:1}
@keyframes float{0%,100%{transform:translate(var(--px,0px),var(--py,0px)) rotate(2deg)}50%{transform:translate(var(--px,0px),var(--py,0px)) translateY(-20px) rotate(-3deg)}}

/* --- Titres --- */
.h2{font-family:'Lilita One',cursive;font-size:clamp(30px,3.4vw,42px);color:#171c34;margin:0;line-height:1.12}
.h3{font-family:'Lilita One',cursive;font-size:22px;margin:0 0 12px;color:#171c34}

/* --- Grille formulaire + aside --- */
.cgrid{display:grid;grid-template-columns:1.25fr .75fr;gap:56px;align-items:start}

/* --- Formulaire --- */
.form{background:#fff;border:3px solid #171c34;border-radius:28px;box-shadow:9px 9px 0 #171c34;padding:44px;position:relative;overflow:hidden}
.form.shaking{animation:shakeX .4s linear infinite}
.form.launching>*:not(.lov){opacity:0;transition:opacity .35s ease}
@keyframes shakeX{0%,100%{translate:0 0}20%{translate:-3px 1px}40%{translate:3px -1px}60%{translate:-2px -2px}80%{translate:2px 1px}}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.fg{display:flex;flex-direction:column;gap:8px;margin-top:22px}
.fg label{font-family:'Lilita One',cursive;font-size:16px;letter-spacing:.4px}
.in{font-family:Inter,sans-serif;font-size:15.5px;color:#171c34;background:#FFF6E6;border:3px solid #171c34;border-radius:14px;padding:13px 16px;outline:none;transition:box-shadow .15s,background .15s;width:100%;box-sizing:border-box}
.in:focus{background:#fff;box-shadow:4px 4px 0 #ffc337}
textarea.in{resize:vertical;min-height:120px}

/* --- Boutons budget --- */
.bgrp{display:flex;flex-wrap:wrap;gap:10px}
.bopt{font-family:'Lilita One',cursive;font-size:14.5px;color:#171c34;background:#fff;border:3px solid #171c34;border-radius:999px;padding:9px 18px;cursor:pointer;box-shadow:0 3px 0 #171c34;transition:transform .12s,box-shadow .12s,background .12s}
.bopt:hover{transform:translateY(2px);box-shadow:0 1px 0 #171c34}
.bopt-on{background:#3772FF;color:#fff}

/* --- Animation décollage fusée --- */
.lov{position:absolute;inset:0;pointer-events:none;z-index:6}
.lrkt{position:absolute;left:6%;bottom:14px;width:84px;filter:drop-shadow(4px 6px 0 rgba(23,28,52,.25))}
.lrkt img{width:100%;display:block;position:relative;z-index:2}
.lrkt.go{animation:liftoff 1.5s cubic-bezier(.55,-.25,.85,.4) forwards}
@keyframes liftoff{0%{transform:translate(0,0) rotate(0deg)}12%{transform:translate(2px,-4px) rotate(-2.5deg)}24%{transform:translate(-2px,-2px) rotate(2.5deg)}36%{transform:translate(4px,-8px) rotate(-1.5deg)}100%{transform:translate(900px,-900px) rotate(0deg)}}
.lflame{position:absolute;left:30%;margin-left:-13px;bottom:-30px;width:26px;height:38px;rotate:45deg;z-index:1;background:radial-gradient(ellipse at 50% 15%,#fff 0,#ffc337 38%,#ff7b2f 72%,transparent 78%);border-radius:50% 50% 62% 62%;filter:blur(1px);transform-origin:top center;animation:flick .1s infinite alternate}
@keyframes flick{from{transform:scaleY(.85) scaleX(.92)}to{transform:scaleY(1.15) scaleX(1.05)}}
.lsmoke{position:absolute;bottom:6px;width:24px;height:24px;border-radius:50%;background:#dcd6c9;border:2px solid rgba(23,28,52,.12);animation:smk .9s ease-out forwards}
@keyframes smk{from{opacity:.9;transform:translate(0,0) scale(.6)}to{opacity:0;transform:translate(var(--sx,0px),-14px) scale(2.8)}}

/* --- Message de confirmation --- */
.sent{background:#2ee66b;border:3px solid #171c34;border-radius:14px;padding:16px 20px;font-weight:700;font-size:15px;color:#171c34;margin-top:22px;display:flex;gap:10px;align-items:center;box-shadow:4px 4px 0 #171c34;animation:sentpop .55s cubic-bezier(.34,1.56,.64,1) both}
@keyframes sentpop{from{opacity:0;transform:scale(.7) translateY(14px)}to{opacity:1;transform:scale(1) translateY(0)}}
.noanim .lrkt.go,.noanim .sent,.noanim .form.shaking{animation:none}

/* --- Cartes aside --- */
.aside{display:flex;flex-direction:column;gap:26px}
.acard{background:#fff;border:3px solid #171c34;border-radius:24px;box-shadow:7px 7px 0 #171c34;padding:30px}
.acard-j{background:#ffc337}
.acard-n{background:#171c34;color:#fff}
.acard-n .h3{color:#ffc337}
.atxt{font-size:15px;line-height:1.65;color:#3d4260;margin:0}
.acard-n .atxt{color:#cecccc}
.big{font-family:'Lilita One',cursive;font-size:22px;color:#171c34;text-decoration:none;display:block;margin-top:6px}
.big:hover{color:#3772FF}
.acard-n .big{color:#fff}
.acard-n .big:hover{color:#ffc337}

/* --- FAQ --- */
.faq{max-width:820px;margin:56px auto 0;display:grid;gap:18px;text-align:left}
.fitem{background:#fff;border:3px solid #171c34;border-radius:20px;box-shadow:5px 5px 0 #171c34;overflow:hidden}
.fitem summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;font-family:'Lilita One',cursive;font-size:19px;transition:background .15s}
.fitem summary::-webkit-details-marker{display:none}
.fitem summary:hover{background:#FFF6E6}
.fplus{flex-shrink:0;width:34px;height:34px;border-radius:50%;background:#ffc337;border:3px solid #171c34;box-shadow:0 3px 0 #171c34;display:flex;align-items:center;justify-content:center;font-size:22px;line-height:1;transition:transform .25s,background .25s}
.fitem[open] .fplus{transform:rotate(45deg);background:#3772FF;color:#fff}
.fans{padding:2px 24px 22px;font-size:15.5px;line-height:1.65;color:#3d4260;margin:0;text-align:left}
.fitem[open] .fans{animation:fdrop .3s ease}
@keyframes fdrop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* --- Responsive --- */
@media (max-width:960px){.cgrid{grid-template-columns:1fr}.fgrid{grid-template-columns:1fr 1fr}.hdr .navlinks{display:none}}
@media (max-width:620px){.frow{grid-template-columns:1fr}.fgrid{grid-template-columns:1fr}.form{padding:30px 22px}}