/* =========================================================
   MDJLabs — v5
   §09 CONTACT : flow 3 slides + pastilles multi-select
   + suggestions e-mail (bloc sous le champ).
   Bloc autonome. Mêmes tokens / rayons / espacements que
   .msg-chip et .field select. Ne touche pas au HTML.
   Charge APRÈS v4.css → ces règles priment sur la v4.
   ========================================================= */

/* ---------------------------------------------------------
   1 — FLOW SLIDES
   .slides#contact-slides > .slide ×3 (une seule visible,
   les autres portent [hidden] que le CSS respecte).
   --------------------------------------------------------- */
.slides {
  position: relative;
}

/* [hidden] respecté : la slide masquée disparaît du flux. */
.slide[hidden] {
  display: none;
}

/* Entrée douce quand la slide (re)passe en display:block.
   Pas de fill-mode : l'état de base reste VISIBLE (opacity:1),
   donc rien n'est piégé en impression / au 1er rendu / si le
   mouvement est coupé — l'animation ne fait que jouer 0→1. */
.slide {
  animation: v5SlideIn var(--dur) var(--ease);
}
@keyframes v5SlideIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ---- Barre de progression -------------------------------- */
.slide-prog {
  display: flex;
  gap: var(--s-2);
  margin: 0 0 var(--s-6);
}
.slide-seg {
  flex: 1 1 0;
  height: 3px;
  border-radius: 999px;
  background: var(--bg-3);
  transition: background var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
/* Segment des étapes ≤ courante : rempli accent + lueur. */
.slide-seg.is-on {
  background: var(--acc);
  box-shadow: 0 0 8px var(--acc-glow);
}

/* ---- Navigation ------------------------------------------ */
.slide-nav {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-top: var(--s-6);
}

/* Bouton plein « Continuer » — unique surface accentuée de
   la zone (cohérent avec le primary du système). Poussé à
   droite ; « Retour » reste à gauche. */
.slide-next {
  margin-left: auto;
  font-family: var(--ff-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--fg-inv);
  background: var(--acc);
  border: 1px solid var(--acc-line);
  border-radius: var(--r-sm);
  padding: 11px 22px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.slide-next:hover {
  background: var(--acc-hi);
  box-shadow: 0 0 0 3px var(--acc-soft);
}
.slide-next:focus-visible {
  outline: none;
  box-shadow: var(--glow-focus);
}

/* Bouton discret « Retour » — ghost, sans surface. */
.slide-back {
  font-family: var(--ff-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--fg-2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  padding: 11px 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.slide-back:hover {
  color: var(--fg-0);
  border-color: var(--line-strong);
}
.slide-back:focus-visible {
  outline: none;
  box-shadow: var(--glow-focus);
}

/* ---------------------------------------------------------
   2 — PASTILLES (multi-select + choix unique)
   Base chip/tag, cohérente avec .msg-chip.
   --------------------------------------------------------- */
.pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: var(--s-2) 0 0;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--fg-1);
  background: var(--bg-2);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}

/* Coche d'état (gouttière réservée au repos → pas de
   télescopage à la sélection). Signal NON chromatique. */
.pill::before {
  content: "";
  width: 0;
  height: 9px;
  margin-left: -2px;
  overflow: hidden;
  opacity: 0;
  flex: 0 0 auto;
  transition: width var(--dur-fast) var(--ease),
              opacity var(--dur-fast) var(--ease);
}

/* Repos → Survol : surface qui s'éclaire + filet plus marqué.
   Le remplissage accent reste RÉSERVÉ à la sélection. */
.pill:hover {
  color: var(--fg-0);
  background: var(--bg-3);
  border-color: var(--fg-2);
}

/* Focus visible : anneau du système, distinct de la
   sélection (lisible sans dépendre de la couleur). */
.pill:focus-visible {
  outline: none;
  box-shadow: var(--glow-focus);
}

/* Sélectionné — multi-select [aria-pressed] ET choix unique
   [role=radio][aria-checked] traités à l'identique. Repérable
   par TROIS signaux non-chromatiques cumulés : remplissage,
   filet renforcé (anneau interne) et coche « ✓ » en préfixe. */
.pill[aria-pressed="true"],
.pill[role="radio"][aria-checked="true"] {
  color: var(--fg-inv);
  background: var(--acc);
  border-color: var(--acc-line);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--acc-hi);
}
.pill[aria-pressed="true"]::before,
.pill[role="radio"][aria-checked="true"]::before {
  content: "✓";
  width: 11px;
  margin-left: 0;
  opacity: 1;
  font-weight: 700;
  line-height: 1;
}
/* La sélection prime visuellement même au survol. */
.pill[aria-pressed="true"]:hover,
.pill[role="radio"][aria-checked="true"]:hover {
  background: var(--acc-hi);
  border-color: var(--acc-line);
}

/* ---------------------------------------------------------
   3 — CORRECTIF LISIBILITÉ
   Au repos, le nom produit peut porter sa couleur de marque
   (--pl/--ps/--pf/--pr). Sur pastille SÉLECTIONNÉE/remplie,
   tout passe en couleur neutre lisible sur l'accent : la
   marque seule ne porte jamais l'information (daltonisme).
   --------------------------------------------------------- */
.pill[aria-pressed="true"] *,
.pill[role="radio"][aria-checked="true"] * {
  color: var(--fg-inv) !important;
  text-shadow: none !important;
}

/* ---------------------------------------------------------
   4 — E-MAIL : champ pleine largeur + suggestions sous le champ
   Annule le comportement « inline / absolu » de la v4.
   --------------------------------------------------------- */
.field-email {
  position: static;            /* plus de conteneur positionné */
}
/* #f-email se comporte comme #f-nom : pleine largeur, pas de
   gouttière réservée à droite. */
.field-email > input,
#f-email {
  padding-right: 14px;
}

/* Bloc de suggestions : flux normal, SOUS l'input, tous écrans.
   Masqué par défaut ([hidden] respecté). */
.email-suggest {
  position: static;
  transform: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-2);
  pointer-events: auto;
}
.email-suggest[hidden] {
  display: none;
}

/* Une puce = un e-mail candidat complet (max 3). Discrète,
   harmonisée avec .msg-chip. */
.email-chip {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--fg-1);
  background: var(--bg-2);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 5px 12px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.email-chip:hover,
.email-chip:focus-visible {
  color: var(--fg-inv);
  background: var(--acc);
  border-color: var(--acc-line);
  outline: none;
}

/* ---------------------------------------------------------
   5 — HARMONISATION .msg-suggest / .msg-chip
   Même grammaire que les pastilles ci-dessus.
   --------------------------------------------------------- */
.msg-suggest[hidden] {
  display: none;
}
.msg-suggest-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.msg-chip {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--fg-1);
  background: var(--bg-2);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.msg-chip:hover,
.msg-chip:focus-visible {
  color: var(--fg-inv);
  background: var(--acc);
  border-color: var(--acc-line);
  outline: none;
}

/* ---------------------------------------------------------
   MOBILE — ≤480px
   --------------------------------------------------------- */
@media (max-width: 480px) {
  .slide-nav {
    gap: var(--s-2);
  }
  .slide-next,
  .slide-back {
    padding: 12px 16px;
  }
  .email-chip {
    font-size: 11px;
    padding: 6px 12px;
  }
}

/* ---------------------------------------------------------
   MOUVEMENT RÉDUIT — bascule instantanée
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .slide {
    animation: none;
  }
  .slide-seg,
  .slide-next,
  .slide-back,
  .pill,
  .pill::before,
  .email-chip,
  .msg-chip {
    transition: none;
  }
}

/* =========================================================
   MDJLabs — v5 · GREFFE CTA MULTICANAL
   Habillage des éléments fonctionnels déjà dans le DOM
   (markup + JS livrés). Aucune structure ni classe modifiée.
   Réutilise les tokens existants ; cohérent avec #modal et
   le formulaire 3-slides. À la suite des règles v5.
   ========================================================= */

/* Teinte WhatsApp discrète, locale à la greffe (pas de token
   global inventé) : sert uniquement de signal secondaire. */
:root {
  --wa-line: color-mix(in oklab, #25D366 55%, var(--line-strong));
  --wa-fg:   color-mix(in oklab, #25D366 70%, var(--fg-0));
}

/* ---------------------------------------------------------
   1 — MODALE #modal · état post-envoi (is-sent)
   Le JS pose .is-sent au succès. La v4 ne masquait que
   .modal-form → l'opt-in et le bouton WhatsApp restaient
   affichés à côté du « C'est noté ». On masque les trois et
   on révèle .modal-ok en flex. (#modal = id → prime sur la
   règle .modal.is-sent .modal-ok de v4.)
   --------------------------------------------------------- */
#modal.is-sent .modal-form {
  display: none;
}
/* État post-envoi : on masque aussi l'en-tête du formulaire (eyebrow / titre /
   sous-titre) et l'échappatoire « formulaire complet » → seul le slot
   post-conversion (.pc-step) reste dans la carte, sans empilement parasite. */
#modal.is-sent .modal-eyebrow,
#modal.is-sent #modal-title,
#modal.is-sent .modal-sub,
#modal.is-sent .modal-long { display: none; }

/* Mode « notify » vs « waitlist » : un seul habillage cohérent
   couvre les deux (le JS ne pose que les textes — aucun hook
   d'état distinct n'existe). Si l'on veut différencier l'eyebrow
   du mode « préviens-moi », il faudra un hook explicite côté
   markup/JS (p.ex. #modal[data-mode="notify"]) — non inventé ici. */

/* ---------------------------------------------------------
   3 — BOUTON WHATSAPP · .form-wa (form)
   Secondaire (jamais la couleur primaire du submit) : contour
   + teinte WhatsApp discrète. Reprend le langage de .nl-ok .wa.
   --------------------------------------------------------- */
.form-wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font-family: var(--ff-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--wa-fg);
  background: transparent;
  border: 1px solid var(--wa-line);
  border-radius: var(--r-sm);
  padding: 9px 14px;
  cursor: pointer;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.form-wa:hover {
  color: var(--fg-0);
  background: color-mix(in oklab, #25D366 12%, transparent);
  border-color: var(--wa-fg);
}
.form-wa:focus-visible {
  outline: none;
  box-shadow: var(--glow-focus);
}

/* ---------------------------------------------------------
   4 — CONFIRMATION FORMULAIRE · .form-sent > {.fs-msg,.fs-optin,.form-wa}
   Compose proprement, centré comme l'accusé de réception :
   message → opt-in OUI/NON → WhatsApp.
   --------------------------------------------------------- */
.form.is-sent .form-sent {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
  text-align: center;
}
/* Le slot PREND LA PLACE du formulaire au succès : on masque la saisie, le widget
   Turnstile et la ligne « promesse » (analogue de .modal-card.is-sent .modal-form). */
.form.is-sent #contact-slides,
.form.is-sent .cf-turnstile,
.form.is-sent .promise { display: none; }
.fs-msg {
  font-family: var(--ff-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--acc-hi);
  text-wrap: pretty;
}

/* ---------------------------------------------------------
   MOBILE ≤480px — boutons pleine largeur, pas de débordement
   --------------------------------------------------------- */
@media (max-width: 480px) {
  /* e-mail de la modale sur sa propre ligne (pleine largeur), bouton dessous —
     évite l'input écrasé à côté du bouton sur petit écran. */
  .modal-form input { flex: 1 1 100%; min-width: 0; }
  .modal-form .btn { width: 100%; }
  .form-wa {
    display: flex;
    width: 100%;
  }
}

/* ---------------------------------------------------------
   MOUVEMENT RÉDUIT
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .form-wa {
    transition: none;
  }
}

/* =========================================================
   MDJLabs — v5 · GREFFE PARCOURS POST-CONVERSION (.pc-*)
   ---------------------------------------------------------
   Famille unifiée du « slot d'action ». Après conversion, le
   contenu du slot est REMPLACÉ sur place (pas de scroll) :
     saisie → Newsletter (Oui / Non explicites, ZÉRO case à
     cocher) → Bonus (WhatsApp + LinkedIn) → sortie.
   Même grammaire dans .form-sent ET dans .modal-card. Réutilise
   les tokens v5, le langage de .slide-next / .modal-wa, et les
   teintes --wa-* déjà déclarées plus haut. N'écrase aucune
   règle v5 livrée — bloc ADDITIF, à coller en fin de fichier.
   ========================================================= */

/* Teinte LinkedIn discrète, locale à la greffe (pendant exact
   de --wa-* ci-dessus) : sert UNIQUEMENT de signal secondaire,
   jamais de surface primaire. Theme-aware via var(--fg-0). */
:root {
  --li-line: color-mix(in oklab, #0A66C2 50%, var(--line-strong));
  --li-fg:   color-mix(in oklab, #0A66C2 58%, var(--fg-0));
}

/* ---------------------------------------------------------
   0 — LE SLOT · hauteur réservée stable
   Un seul .pc-step visible à la fois ([hidden] respecté). On
   réserve une hauteur PLANCHER commune aux deux sous-états :
   le passage Newsletter ⇄ Bonus ne décale ni le bouton, ni ce
   qui suit le slot — « le curseur ne bouge pas ». On RÉSERVE
   (min-height) plutôt que de transitionner la hauteur : sûr en
   impression, au 1er rendu et sous mouvement réduit.
   Variable surchargeable par contexte (carte plus étroite que
   le formulaire → léger surplus côté modale).
   --------------------------------------------------------- */
.pc-step {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-height: var(--pc-slot-h, 162px);
  /* Entrée douce identique aux slides. Pas de fill-mode :
     l'état de base reste visible (rien piégé en opacity:0). */
  animation: v5SlideIn var(--dur) var(--ease);
}
.pc-step[hidden] { display: none; }

/* [hidden] doit TOUJOURS l'emporter — même sur les éléments à
   display explicite (flex / inline-flex) que le JS bascule
   (ex. masquer .pc-q + .pc-actions à la révélation de .pc-done).
   Sélecteur d'attribut → spécificité supérieure, sans !important. */
.pc-q[hidden],
.pc-actions[hidden],
.pc-wa[hidden],
.pc-li[hidden],
.pc-close[hidden] { display: none; }

/* Alignement épousant l'hôte : centré dans l'accusé .form-sent
   (cohérent avec .fs-*), aligné à gauche dans la carte modale
   (cohérent avec le contenu de .modal-card). Structure de
   classes IDENTIQUE — seul l'alignement suit le conteneur. */
.form-sent .pc-step  { align-items: center;  text-align: center; }
.modal-card .pc-step { align-items: stretch; text-align: left; }
.modal-card.is-sent .modal-form { display: none; }   /* le slot prend la place du formulaire */

/* ---------------------------------------------------------
   1 — ACCUSÉ COURT « Reçu ✓ » · mono, accent (langage .fs-msg)
   --------------------------------------------------------- */
.pc-msg {
  margin: 0;                  /* reset marge UA <p> : la hauteur du
                                 slot reste prévisible (gap maître) */
  font-family: var(--ff-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  line-height: 1.4;
  color: var(--acc-hi);
  text-wrap: pretty;
}

/* ---------------------------------------------------------
   2 — QUESTION « Recevoir nos actus ? » · petites caps mono
   --------------------------------------------------------- */
.pc-q {
  margin: 0;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-2);
}

/* ---------------------------------------------------------
   3 — RANGÉE OUI / NON · effort symétrique, deux boutons
   explicites (transparence : pas de case pré-cochée).
   --------------------------------------------------------- */
.pc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.form-sent .pc-actions { justify-content: center; }

/* Gabarit commun → deux boutons jumeaux (même poids visuel). */
.pc-yes,
.pc-no {
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  border-radius: var(--r-sm);
  padding: 10px 20px;
  cursor: pointer;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
/* OUI = unique surface accentuée du slot (langage .slide-next). */
.pc-yes {
  color: var(--fg-inv);
  background: var(--acc);
  border: 1px solid var(--acc-line);
  font-weight: 600;
}
.pc-yes:hover {
  background: var(--acc-hi);
  box-shadow: 0 0 0 3px var(--acc-soft);
}
/* NON MERCI = ghost neutre, JAMAIS d'accent (sortie symétrique). */
.pc-no {
  color: var(--fg-1);
  background: var(--bg-2);
  border: 1px solid var(--line-strong);
}
.pc-no:hover {
  color: var(--fg-0);
  background: var(--bg-3);
  border-color: var(--fg-2);
}
.pc-yes:focus-visible,
.pc-no:focus-visible {
  outline: none;
  box-shadow: var(--glow-focus);
}

/* ---------------------------------------------------------
   4 — « Inscrit ✓ » · confirmation discrète révélée par JS
   (le JS retire [hidden] après OUI, avant la bascule Bonus).
   --------------------------------------------------------- */
.pc-done[hidden] { display: none; }
.pc-done {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-family: var(--ff-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--acc);
}

/* ---------------------------------------------------------
   5 — LIGNE PRIVACY POSITIVE · ton rassurant, mono discret.
   Le lien « notre politique » est souligné À L'ACCENT (jamais
   le bleu souligné par défaut), avec offset et hover accent.
   --------------------------------------------------------- */
.pc-privacy {
  margin: auto 0 0;           /* pied du slot : épinglée en bas de la
                                 hauteur réservée (zone « fine print ») */
  font-family: var(--ff-mono);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--fg-2);
  text-wrap: pretty;
}
.pc-privacy a {
  color: var(--acc);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--dur-fast) var(--ease);
}
.pc-privacy a:hover { color: var(--acc-hi); }
.pc-privacy a:focus-visible {
  outline: none;
  box-shadow: var(--glow-focus);
  border-radius: var(--r-xs);
}

/* ---------------------------------------------------------
   6 — BONUS · accroche « on reste en contact ? » (langage .fs-msg)
   --------------------------------------------------------- */
.pc-hook {
  margin: 0;
  font-family: var(--ff-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  line-height: 1.4;
  color: var(--acc-hi);
  text-wrap: pretty;
}

/* ---------------------------------------------------------
   7 — WHATSAPP + LINKEDIN · secondaires, contour + teinte de
   marque discrète. Même gabarit que .modal-wa/.form-wa
   (cohérence). JAMAIS la couleur primaire.
   --------------------------------------------------------- */
.pc-wa,
.pc-li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font-family: var(--ff-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  background: transparent;
  border-radius: var(--r-sm);
  padding: 10px 14px;
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
/* WhatsApp — réutilise --wa-* de la greffe CTA multicanal. */
.pc-wa { color: var(--wa-fg); border: 1px solid var(--wa-line); }
.pc-wa:hover {
  color: var(--fg-0);
  background: color-mix(in oklab, #25D366 12%, transparent);
  border-color: var(--wa-fg);
}
/* LinkedIn — grammaire identique, teinte #0A66C2. */
.pc-li { color: var(--li-fg); border: 1px solid var(--li-line); }
.pc-li:hover {
  color: var(--fg-0);
  background: color-mix(in oklab, #0A66C2 14%, transparent);
  border-color: var(--li-fg);
}
.pc-wa:focus-visible,
.pc-li:focus-visible {
  outline: none;
  box-shadow: var(--glow-focus);
}

/* ---------------------------------------------------------
   8 — « Fermer » · sortie très discrète (ghost, jamais accent).
   --------------------------------------------------------- */
.pc-close,
.pc-reset {
  margin-top: auto;            /* poussé en pied du slot réservé */
  align-self: center;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--fg-2);
  background: transparent;
  border: 0;
  padding: var(--s-1) var(--s-2);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--dur-fast) var(--ease);
}
.pc-close:hover, .pc-reset:hover { color: var(--fg-0); }
.pc-close:focus-visible {
  outline: none;
  box-shadow: var(--glow-focus);
  border-radius: var(--r-xs);
}

/* ---------------------------------------------------------
   MOBILE ≤480px
   Oui/Non en deux colonnes égales pleine largeur ; WhatsApp /
   LinkedIn empilés pleine largeur (cf. .modal-wa/.form-wa).
   --------------------------------------------------------- */
@media (max-width: 480px) {
  .pc-actions { width: 100%; }
  .pc-yes,
  .pc-no { flex: 1 1 0; }
  .pc-wa,
  .pc-li { width: 100%; }
}

/* ---------------------------------------------------------
   MOUVEMENT RÉDUIT · pas d'entrée animée, pas de transition.
   (La hauteur est RÉSERVÉE, pas transitionnée → rien à couper.)
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .pc-step { animation: none; }
  .pc-yes,
  .pc-no,
  .pc-wa,
  .pc-li,
  .pc-close,
  .pc-privacy a { transition: none; }
}

/* =========================================================
   MDJLabs — v5 · CORRECTIFS UX (post-prod)
   ========================================================= */

/* Vibration des pastilles quand un choix requis manque (slide sujet / profil).
   Le module JS pose .pick-shake (retiré en fin d'animation) + aria-invalid. */
@keyframes mdjShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}
.pick-shake { animation: mdjShake 0.4s ease; }
@media (prefers-reduced-motion: reduce) { .pick-shake { animation: none; } }

/* Écran de confirmation + opt-in newsletter centré verticalement dans l'espace
   du formulaire (la hauteur d'origine est figée par le JS au moment de l'envoi). */
.form.is-sent {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Masque RÉEL du perchoir « Accéder à l'Alpha » quand le formulaire est à l'écran (mobile) :
   prime sur la règle .sticky-cta { display:flex } du média mobile de v4.css. */
.sticky-cta.sc-hidden { display: none; }