/* ==========================================================
   Couche d'animation : douce, fluide, sans rien casser du style
   ========================================================== */
@property --p { syntax: "<number>"; inherits: true; initial-value: 0; }

:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

html { scroll-behavior: smooth; }
body { overflow-x: hidden; position: relative; }
.top, main, .foot { position: relative; z-index: 1; }

/* ---------- Fond aurore, lent et diffus ---------- */
.aurora { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.aurora i {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5;
  will-change: transform;
  animation: drift 26s var(--ease-io) infinite alternate;
}
.aurora i:nth-child(1) { width: 46vmax; height: 46vmax; left: -14vmax; top: -16vmax; background: radial-gradient(circle, rgba(107,43,255,.38), transparent 68%); }
.aurora i:nth-child(2) { width: 40vmax; height: 40vmax; right: -12vmax; top: 18vh; background: radial-gradient(circle, rgba(0,214,194,.30), transparent 68%); animation-duration: 32s; animation-delay: -9s; }
.aurora i:nth-child(3) { width: 36vmax; height: 36vmax; left: 18vw; bottom: -18vmax; background: radial-gradient(circle, rgba(255,120,200,.24), transparent 68%); animation-duration: 38s; animation-delay: -16s; }
@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(5vmax, 4vmax, 0) scale(1.12); }
  to   { transform: translate3d(-4vmax, 7vmax, 0) scale(.95); }
}

/* ---------- Entrée de page ---------- */
@keyframes rise {
  from { opacity: 0; transform: translateY(22px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
.top, .intro h1, .intro p, .panel, .foot {
  animation: rise .9s var(--ease-out) backwards;
}
.top { animation-delay: .05s; }
.intro h1 { animation-delay: .15s; }
.intro p { animation-delay: .3s; }
.panel { animation-delay: .45s; }
.foot { animation-delay: .7s; }

.mark { transition: transform .5s var(--ease-spring), box-shadow .5s var(--ease-out); animation: glow 4.5s ease-in-out infinite; }
.brand:hover .mark { transform: rotate(-8deg) scale(1.08); }
@keyframes glow {
  0%, 100% { box-shadow: 0 0 0 2px var(--accent), 0 0 14px rgba(107,43,255,.45); }
  50%      { box-shadow: 0 0 0 2px var(--accent), 0 0 26px rgba(107,43,255,.8); }
}

/* ---------- Panneau ---------- */
.panel {
  transition: box-shadow .6s var(--ease-out), transform .6s var(--ease-out);
}
.panel:focus-within {
  box-shadow: 0 1px 0 var(--line), 0 28px 60px -26px rgba(107,43,255,.38);
}

/* ---------- Frise ---------- */
.timeline { transition: --p .7s var(--ease-io); }
.track { background: linear-gradient(to right, var(--accent) calc(var(--p) * 100%), var(--line) 0); }
.playhead { left: calc(var(--p) * 100%); transition: none; }
.kf { transition: background .4s var(--ease-out), border-color .4s var(--ease-out), transform .5s var(--ease-spring), box-shadow .4s; }
.timeline li.current .kf { transform: rotate(45deg) scale(1.35); box-shadow: 0 0 0 5px rgba(107,43,255,.14); }
.timeline li.done .kf { animation: pop .5s var(--ease-spring); }
.kf-label { transition: color .35s, opacity .35s, transform .45s var(--ease-out); }
.timeline li.current .kf-label { transform: translateY(1px); }
@keyframes pop { 0% { transform: rotate(45deg) scale(.6); } 100% { transform: rotate(45deg) scale(1); } }

/* ---------- Transition entre étapes ---------- */
.step.enter-next { animation: stepIn-next .65s var(--ease-out) backwards; }
.step.enter-prev { animation: stepIn-prev .65s var(--ease-out) backwards; }
@keyframes stepIn-next { from { opacity: 0; transform: translateX(36px); } to { opacity: 1; transform: none; } }
@keyframes stepIn-prev { from { opacity: 0; transform: translateX(-36px); } to { opacity: 1; transform: none; } }

/* Les éléments de l'étape apparaissent en cascade */
.step.enter-next > *, .step.enter-prev > * {
  animation: rise .7s var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 70ms + 60ms);
}
.step > :nth-child(1) { --i: 0; } .step > :nth-child(2) { --i: 1; } .step > :nth-child(3) { --i: 2; }
.step > :nth-child(4) { --i: 3; } .step > :nth-child(5) { --i: 4; } .step > :nth-child(6) { --i: 5; }
.step > :nth-child(7) { --i: 6; } .step > :nth-child(n+8) { --i: 7; }

/* ---------- Champs ---------- */
input[type="text"], input[type="email"], input[type="tel"], input[type="date"], select, textarea {
  transition: border-color .3s var(--ease-out), box-shadow .35s var(--ease-out), background .3s, transform .3s var(--ease-out);
}
input:hover, select:hover, textarea:hover { border-color: #b9b5e0; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(107,43,255,.16), 0 8px 22px -10px rgba(107,43,255,.5);
}
.field label, .field legend { transition: color .3s; }
.field:focus-within > label:not(.check), .field:focus-within > legend { color: var(--accent); }

.err { animation: errIn .4s var(--ease-out) backwards; }
@keyframes errIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.field.invalid input, .field.invalid select, .field.invalid textarea { animation: shake .5s var(--ease-out); }
@keyframes shake {
  20% { transform: translateX(-6px); } 40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); } 80% { transform: translateX(2px); }
}
#type-other:not([hidden]) { animation: rise .55s var(--ease-out) backwards; }

/* ---------- Pastilles ---------- */
.chip span {
  transition: background .35s var(--ease-out), border-color .35s var(--ease-out), color .3s,
              transform .4s var(--ease-spring), box-shadow .4s var(--ease-out);
}
.chip:hover span { transform: translateY(-2px); box-shadow: 0 8px 18px -10px rgba(107,43,255,.55); }
.chip:active span { transform: scale(.96); }
.chip input:checked + span { animation: chipOn .5s var(--ease-spring); box-shadow: 0 10px 22px -10px rgba(23,20,58,.6); }
@keyframes chipOn { 0% { transform: scale(.93); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } }

.check input { transition: transform .3s var(--ease-spring); }
.check input:checked { transform: scale(1.12); }
.color input { transition: transform .3s var(--ease-spring), box-shadow .3s; }
.color input:hover { transform: scale(1.08); box-shadow: 0 6px 14px -6px rgba(23,20,58,.4); }
.colors { transition: opacity .4s var(--ease-out); }

/* ---------- Fichiers ---------- */
.dropzone input[type="file"] { transition: border-color .3s, background .3s, transform .3s var(--ease-out); }
.dropzone input[type="file"]:hover { border-color: var(--accent); background: #f4f0ff; transform: translateY(-1px); }
.dropzone input[type="file"]::file-selector-button { transition: transform .3s var(--ease-spring), background .3s; }
.filelist li { animation: rise .5s var(--ease-out) backwards; transition: background .3s; }
.filelist li:hover { background: #eeebfb; }
.filelist .rm { transition: transform .25s var(--ease-out), opacity .25s; }
.filelist .rm:hover { transform: scale(1.1); }

/* ---------- Boutons ---------- */
.btn {
  position: relative; overflow: hidden;
  transition: transform .4s var(--ease-spring), box-shadow .4s var(--ease-out), background .3s, border-color .3s, opacity .3s;
}
.btn.primary { box-shadow: 0 10px 24px -12px rgba(107,43,255,.8); }
.btn.primary::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-120%);
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transition: transform .8s var(--ease-out);
}
.btn.primary:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(107,43,255,.85); }
.btn.primary:hover::after { transform: translateX(120%); }
.btn.ghost:hover { transform: translateX(-2px); }
.btn:active { transform: scale(.97); }
.btn:not([hidden]) { animation: rise .6s var(--ease-out) backwards; }

/* ---------- Envoi ---------- */
.progress:not([hidden]) { animation: rise .5s var(--ease-out) backwards; }
.fill {
  transition: width .5s var(--ease-out);
  background: linear-gradient(90deg, var(--accent), var(--glow), var(--accent));
  background-size: 200% 100%; animation: flow 1.8s linear infinite;
}
@keyframes flow { to { background-position: -200% 0; } }

/* ---------- Confirmation ---------- */
section.done:not([hidden]) { animation: rise .9s var(--ease-out) backwards; }
section.done:not([hidden]) > * { animation: rise .7s var(--ease-out) backwards; }
section.done > :nth-child(2) { animation-delay: .35s; } section.done > :nth-child(3) { animation-delay: .45s; }
section.done > :nth-child(4) { animation-delay: .55s; }
.tick { width: 64px; height: 64px; display: block; margin-bottom: 16px; }
.tick circle { fill: none; stroke: var(--accent); stroke-width: 3; stroke-dasharray: 176; stroke-dashoffset: 176; transform-origin: center; transform: rotate(-90deg); }
.tick path { fill: none; stroke: var(--glow); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; }
section.done:not([hidden]) .tick circle { animation: draw .9s var(--ease-io) .2s forwards; }
section.done:not([hidden]) .tick path { animation: draw .5s var(--ease-out) .85s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

a { transition: color .3s, opacity .3s; }
a:hover { opacity: .75; }

/* ---------- Accessibilité ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .aurora i { animation: none !important; }
  .top, .intro h1, .intro p, .panel, .foot { animation: none !important; opacity: 1 !important; filter: none !important; }
  .tick circle, .tick path { stroke-dashoffset: 0 !important; }
}

/* Portail d'arrivée depuis la page d'accueil */
.portal {
  position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; pointer-events: all;
  background: radial-gradient(circle at 50% 50%, #8a4dff 0%, #6b2bff 35%, #2a1470 80%);
}
.portal .mark { width: 84px; height: 84px; font-size: 2rem; border-radius: 24px; }

/* ==========================================================
   Page de formulaire : finitions
   ========================================================== */
.top { display: flex; justify-content: space-between; align-items: center; }
.top-back {
  text-decoration: none; font-weight: 700; font-size: .95rem; color: var(--ink); padding: 8px 16px; border-radius: 999px;
  border: 1.5px solid var(--line); background: rgba(255,255,255,.6); backdrop-filter: blur(8px);
  transition: transform .4s var(--ease-spring), border-color .3s, background .3s;
}
.top-back::before { content: "←"; display: inline-block; margin-right: 8px; transition: transform .4s var(--ease-spring); }
.top-back:hover { opacity: 1; border-color: var(--accent); background: #fff; transform: translateX(-2px); }
.top-back:hover::before { transform: translateX(-4px); }

.grad {
  background: linear-gradient(100deg, var(--accent), #b04bff 40%, var(--glow) 80%, var(--accent));
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gradMove 8s linear infinite;
}
@keyframes gradMove { to { background-position: -250% 0; } }

/* Panneau avec liseré lumineux */
.panel { position: relative; overflow: hidden; border: 1px solid rgba(217,215,238,.7); background: rgba(255,255,255,.92); backdrop-filter: blur(14px); }
.panel::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: linear-gradient(90deg, var(--accent), var(--glow)); transform-origin: left;
  transform: scaleX(calc(.2 + var(--pp, 0) * .8)); transition: transform .7s var(--ease-io);
}

.kicker {
  margin: 0 0 6px; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
}
.step h2 { font-size: 1.9rem; margin-bottom: 24px; }

/* Pastilles de choix, plus généreuses */
.chip span { min-height: 50px; padding: 10px 20px; }
.chip input:checked + span { background: linear-gradient(135deg, var(--accent), #8f55ff); border-color: transparent; box-shadow: 0 12px 26px -12px rgba(107,43,255,.9); }
.chip input:checked + span small { color: rgba(255,255,255,.8); }
.chip input[type="checkbox"]:checked + span::after { content: "✓"; margin-left: 10px; font-weight: 800; }
.step .chips .chip { animation: rise .6s var(--ease-out) backwards; }
.step .chips .chip:nth-child(1) { animation-delay: .15s; } .step .chips .chip:nth-child(2) { animation-delay: .2s; }
.step .chips .chip:nth-child(3) { animation-delay: .25s; } .step .chips .chip:nth-child(4) { animation-delay: .3s; }
.step .chips .chip:nth-child(5) { animation-delay: .35s; } .step .chips .chip:nth-child(n+6) { animation-delay: .4s; }

/* Pictogrammes de format */
.chip input[name="format"] + span { position: relative; padding-left: 58px; }
.chip input[name="format"] + span::before {
  content: ""; position: absolute; left: 20px; top: 50%; translate: 0 -50%; border: 2px solid currentColor; border-radius: 3px; opacity: .75;
}
.chip input[value^="Vertical"] + span::before { width: 12px; height: 21px; }
.chip input[value^="Carré"] + span::before { width: 17px; height: 17px; }
.chip input[value^="Horizontal"] + span::before { width: 22px; height: 13px; }
.chip input[value^="À conseiller"][name="format"] + span { padding-left: 20px; }
.chip input[value^="À conseiller"][name="format"] + span::before { display: none; }

/* Champs validés */
.field.ok input:not([type="checkbox"]) {
  border-color: #27b58f; padding-right: 44px;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2327b58f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l5 5L20 7'/></svg>") no-repeat right 14px center / 20px;
}
.count { display: block; text-align: right; font-size: .8rem; color: var(--muted); margin-top: 4px; transition: color .3s; }
.count.near { color: var(--danger); }

/* Zones de dépôt */
.dz { position: relative; }
.dropzone input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 2; padding: 0; border: 0; }
.dropzone input[type="file"]::file-selector-button { cursor: pointer; }
.drop-ui {
  display: grid; justify-items: center; gap: 2px; text-align: center; padding: 26px 16px; border-radius: 18px;
  border: 2px dashed #c9c4ee; background: linear-gradient(180deg, #faf9ff, #f3f0ff);
  transition: border-color .3s, background .3s, transform .4s var(--ease-spring), box-shadow .4s;
}
.drop-ui svg { width: 34px; height: 34px; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 6px; transition: transform .5s var(--ease-spring); }
.drop-ui b { font-size: 1rem; }
.drop-ui span { color: var(--muted); font-size: .9rem; }
.dz:hover .drop-ui, .dropzone.drag .drop-ui { border-color: var(--accent); background: #efe9ff; transform: translateY(-2px); box-shadow: 0 16px 34px -20px rgba(107,43,255,.7); }
.dz:hover .drop-ui svg, .dropzone.drag .drop-ui svg { transform: translateY(-5px) scale(1.08); }
.dropzone.drag .drop-ui { transform: scale(1.015); }
.dz:focus-within .drop-ui { outline: 3px solid var(--accent); outline-offset: 2px; }
.filelist li { padding: 8px 12px 8px 8px; }
.thumb { width: 40px; height: 40px; border-radius: 9px; object-fit: cover; flex: none; background: #e6e2fa; }
.thumb.ico { display: grid; place-items: center; font-size: .68rem; font-weight: 800; color: var(--accent); }

/* Indicateur de brouillon */
.saved { align-self: center; font-size: .82rem; color: var(--muted); opacity: 0; transform: translateY(4px); transition: opacity .4s, transform .4s var(--ease-out); margin-inline: auto; }
.saved::before { content: "✓ "; color: #27b58f; font-weight: 800; }
.saved.on { opacity: 1; transform: none; }

/* Barre d'actions collée en bas sur mobile */
@media (max-width: 559px) {
  .actions { position: sticky; bottom: 0; z-index: 5; margin: 24px -18px -24px; padding: 14px 18px calc(14px + env(safe-area-inset-bottom)); background: linear-gradient(to top, #fff 70%, rgba(255,255,255,0)); }
  .saved { display: none; }
}

/* Confettis */
.confetti { position: fixed; inset: 0; z-index: 50; pointer-events: none; overflow: hidden; }
.confetti i {
  position: absolute; left: 50%; top: 62%; border-radius: 2px;
  animation: burst 2.4s cubic-bezier(.15,.7,.3,1) var(--d) forwards;
}
@keyframes burst {
  0% { transform: translate(0,0) rotate(0); opacity: 1; }
  45% { transform: translate(var(--x), var(--y)) rotate(calc(var(--r) * .5)); opacity: 1; }
  100% { transform: translate(calc(var(--x) * 1.15), 55vh) rotate(var(--r)); opacity: 0; }
}
section.done h2 { background: linear-gradient(100deg, var(--ink), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (prefers-reduced-motion: reduce) { .grad { animation: none; } }
.field:focus-within > label.check, .field:focus-within > legend.check { color: inherit; }

.packs .chip span b { font-weight: 800; margin-left: 4px; }
.packs .chip input:checked + span b { color: #fff; }
a.btn { text-decoration: none; display: inline-block; text-align: center; }
a.btn.primary { color: var(--accent-ink); }