/* ==========================================================================
   GJS · CONTACT
   Formulaire en 3 étapes · Autres moyens de contact (WhatsApp, rendez-vous)
   · Après l'envoi (section noire : les trois temps reliés par un pointillé)
   ========================================================================== */

.contact__layout {
  display: grid;
  gap: 48px;
  align-items: start;
}

@media (min-width: 1024px) {
  .contact__layout {
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 56px;
  }
}

.form-card {
  padding: 28px 20px;
  background: var(--card);
  border: var(--border) solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 6px 6px 0 var(--shadow-color);
}

@media (min-width: 720px) {
  .form-card { padding: 40px 36px; }
}

.form > * + * {
  margin-top: 28px;
}

.form__intro {
  font-size: var(--fs-small);
  color: var(--fg-2);
}

/* Progression : 3 étapes */
.progress {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  counter-reset: progress;
}

.progress li {
  counter-increment: progress;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 6px 10px;
  border: var(--border-thin) solid var(--ink);
  border-radius: var(--radius);
  background: var(--cream);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.2;
}

.progress li::before {
  content: counter(progress);
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
}

.progress li.is-current {
  background: var(--lime);
  box-shadow: 3px 3px 0 var(--ink);
  font-weight: 600;
}

.progress li.is-done {
  background: var(--ink);
  color: var(--cream);
}

/* Mobile : seules l'étape en cours affiche son nom, les autres leur numéro */
@media (max-width: 479px) {
  .progress { display: flex; }
  .progress li { justify-content: center; min-width: 48px; }
  .progress li.is-current { flex: 1; justify-content: flex-start; }
  .js .progress li:not(.is-current) span { display: none; }
}

.form__step {
  border: 0;
  min-width: 0;
}

.form__step > * + * {
  margin-top: 20px;
}

.form__legend {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1;
  text-transform: uppercase;
}

.form__sub {
  border: 0;
  min-width: 0;
}

.form__sub legend {
  margin-bottom: 12px;
  font-weight: 600;
}

.form__fields {
  display: grid;
  gap: 20px;
}

@media (min-width: 720px) {
  .form__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field--full { grid-column: 1 / -1; }
}

.form__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px;
  padding-top: 24px;
  border-top: var(--border-thin) solid var(--ink);
}

.form__nav [data-form-next],
.form__nav [data-form-submit] {
  margin-left: auto;
}

/* Téléphone : boutons pleine largeur, faciles à atteindre du pouce */
@media (max-width: 479px) {
  .form__nav { flex-direction: column-reverse; }
  .form__nav .btn { width: 100%; margin-left: 0; }
}

.form__errors {
  padding: 16px 18px;
  background: var(--cream);
  border: 4px dashed var(--ink);
  border-radius: var(--radius);
}

.form__errors ul {
  margin-top: 8px;
  padding-left: 20px;
  list-style: square;
}

.form__errors a {
  font-weight: 600;
  text-decoration: underline;
}

.form__honeypot input {
  background: var(--cream);
  border: 1px solid var(--ink);
}

.form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form.is-sending {
  opacity: 0.7;
  pointer-events: none;
}

/* Sans JS : toutes les étapes visibles, la progression est inutile */
.no-js .progress,
.no-js .form__nav [data-form-next],
.no-js .form__nav [data-form-prev] {
  display: none;
}

/* Succès */
.success {
  padding: 48px 24px;
  text-align: center;
}

.success > * + * {
  margin-top: 20px;
}

.success .sticker {
  font-size: var(--fs-h2);
  --tilt: -4deg;
}

.success p {
  margin-inline: auto;
  max-width: 46ch;
}

/* Autres moyens de contact */
.contact-aside {
  display: grid;
  gap: 18px;
}

.contact-block {
  position: relative;
  padding: 22px 20px;
  border: var(--border-thin) solid var(--ink);
  border-radius: var(--radius);
  background: var(--cream);
}

.contact-block > * + * {
  margin-top: 10px;
}

.contact-block__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1;
  text-transform: uppercase;
}

.contact-block .btn {
  width: 100%;
}

.contact-block a:not(.btn) {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.page-hero__inner + .contact__layout {
  margin-top: var(--s-block);
}

/* ---- Après l'envoi : 3 temps (section du site de Joachim V2) ----------------
   Affichettes à bord noir et ombre dure. Au survol (ordinateur) ou au passage au
   centre de l'écran (mobile, classe .is-lit posée par sections/after-send.js) :
   la carte se soulève, un trait citron se trace en haut et le numéro en contour
   se remplit d'encre par le bas. Uniquement transform et opacity. */

.after-steps {
  display: grid;
  gap: 32px;
}

@media (min-width: 960px) {
  .after-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    align-items: stretch;
  }
}

.after-step {
  --lift: 0px;
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
  padding: 28px 24px 32px;
  transform: rotate(var(--tilt, -1deg)) translate(var(--lift), var(--lift));
  transition: transform 0.6s var(--ease-expo);
}

.after-step:nth-child(2) { --tilt: 0.8deg; }
.after-step:nth-child(3) { --tilt: -0.5deg; }

/* Même matière que les boutons : ::before = fond + bordure, ::after = ombre dure (en transform) */
.after-step::before,
.after-step::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  pointer-events: none;
}

.after-step::before {
  z-index: -1;
  background: var(--card);
  border: var(--border) solid var(--ink);
}

.after-step::after {
  z-index: -2;
  background: var(--shadow-color);
  transform: translate(calc(6px - var(--lift)), calc(6px - var(--lift)));
  transition: transform 0.6s var(--ease-expo);
}

@media (min-width: 720px) {
  .after-step { padding: 32px 32px 36px; }
}

/* Trait citron qui se trace en haut de la carte (le filet de Gabin, au marqueur) */
.after-step__bar {
  position: absolute;
  top: var(--border);
  left: var(--border);
  right: var(--border);
  height: 12px;
  background: var(--lime);
  border-bottom: var(--border-thin) solid var(--ink);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.7s var(--ease-expo);
}

/* Numéro en contour ; sa copie pleine (::after) monte derrière un masque */
.after-step__num {
  position: relative;
  justify-self: start;
  overflow: hidden;
  padding-top: 0.06em;
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 3.6rem + 3vw, 6.5rem);
  line-height: 0.86;
  color: transparent;
  -webkit-text-stroke: var(--border-thin) var(--ink);
}

.after-step__num::after {
  content: attr(data-num);
  position: absolute;
  inset: 0;
  padding-top: inherit;
  color: var(--ink);
  transform: translateY(102%);
  transition: transform 0.6s var(--ease-expo);
}

.after-step__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
}

.after-step__text {
  max-width: 36ch;
  color: var(--fg-2);
}

/* Le premier échange est gratuit (Soufil) : sticker collé dans le coin de la carte */
.after-step__sticker {
  position: absolute;
  top: 34px;
  right: 22px;
  z-index: 1;
}

.after-step__sticker .sticker { --tilt: var(--tilt-right); }

.after-step.is-lit { --lift: -4px; }
.after-step.is-lit .after-step__bar,
.after-step.is-lit .after-step__num::after { transform: none; }

@media (hover: hover) {
  .after-step:hover { --lift: -4px; }
  .after-step:hover .after-step__bar,
  .after-step:hover .after-step__num::after { transform: none; }
}

/* Le JS les révèle à l'arrivée à l'écran (sans JS ou en mouvement réduit : tout est affiché) */
.has-motion:not([data-motion="reduced"]) .after-steps:not(.is-anim-ready) .after-step,
.has-motion:not([data-motion="reduced"]) .after-steps:not(.is-anim-ready) .after-step__sticker { opacity: 0; }

/* Mouvement réduit : pas de soulèvement ni de tracé animé, numéros pleins */
[data-motion="reduced"] .after-step,
[data-motion="reduced"] .after-step::after,
[data-motion="reduced"] .after-step__bar,
[data-motion="reduced"] .after-step__num::after { transition: none; }
[data-motion="reduced"] .after-step__num::after { transform: none; }