/* =========================================================
   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,
#modal.is-sent .modal-consent,
#modal.is-sent .modal-wa {
  display: none;
}
#modal.is-sent .modal-ok {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

/* 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. */

/* ---------------------------------------------------------
   2 — OPT-IN NEWSLETTER · .modal-consent
   Case discrète sous le submit, jamais pré-cochée, secondaire
   (RGPD : ne doit pas ressembler à une action principale).
   --------------------------------------------------------- */
.modal-consent {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  margin-top: var(--s-3);
  font-family: var(--ff-sans);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--fg-2);
  cursor: pointer;
  text-wrap: pretty;
}
.modal-consent input[type="checkbox"] {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin: 1px 0 0;
  accent-color: var(--acc);   /* coche native teintée accent */
  cursor: pointer;
}
.modal-consent input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: var(--glow-focus);
  border-radius: var(--r-xs);
}
/* Lien « confidentialité » : souligné à l'accent. */
.modal-consent a {
  color: var(--acc);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.modal-consent a:hover {
  color: var(--acc-hi);
}

/* ---------------------------------------------------------
   3 — BOUTON WHATSAPP · .modal-wa (modale) + .form-wa (form)
   Secondaire (jamais la couleur primaire du submit) : contour
   + teinte WhatsApp discrète. Reprend le langage de .nl-ok .wa.
   --------------------------------------------------------- */
.modal-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);
}
.modal-wa { margin-top: var(--s-3); }
.modal-wa:hover,
.form-wa:hover {
  color: var(--fg-0);
  background: color-mix(in oklab, #25D366 12%, transparent);
  border-color: var(--wa-fg);
}
.modal-wa:focus-visible,
.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;
}
.fs-msg {
  font-family: var(--ff-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--acc-hi);
  text-wrap: pretty;
}

/* Bloc opt-in : question + deux chips OUI/NON, effort symétrique. */
.fs-optin {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-2) var(--s-3);
}
.fs-q {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-2);
}

/* Chips OUI / NON — même grammaire que .email-chip / .msg-chip. */
.fs-yes,
.fs-no {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  border-radius: 999px;
  padding: 6px 16px;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
/* OUI = accent (action encouragée). */
.fs-yes {
  color: var(--fg-inv);
  background: var(--acc);
  border: 1px solid var(--acc-line);
  font-weight: 600;
}
.fs-yes:hover {
  background: var(--acc-hi);
}
/* NON = neutre / ghost (effort symétrique, sans surface accent). */
.fs-no {
  color: var(--fg-1);
  background: var(--bg-2);
  border: 1px solid var(--line-strong);
}
.fs-no:hover {
  color: var(--fg-0);
  background: var(--bg-3);
  border-color: var(--fg-2);
}
.fs-yes:focus-visible,
.fs-no:focus-visible {
  outline: none;
  box-shadow: var(--glow-focus);
}

/* Confirmation discrète après clic (révélée par JS). */
.fs-done[hidden] { display: none; }
.fs-done {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--acc);
}

/* ---------------------------------------------------------
   MOBILE ≤480px — boutons pleine largeur, pas de débordement
   --------------------------------------------------------- */
@media (max-width: 480px) {
  .modal-wa,
  .form-wa {
    display: flex;
    width: 100%;
  }
  .fs-optin {
    width: 100%;
  }
  .fs-yes,
  .fs-no {
    flex: 1 1 0;
  }
}

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