:root{--emf-build:"EMF_BUILD_5cb1d86300f2"}
/* =====================================================================
   em-form.css — Formulaire natif Excellence Maths (composant partagé refonte)
   Porté depuis l'export Claude Design (fidélité stricte). Tout est préfixé
   .emf- et porté par #emf-root pour ne rien fuiter. Tokens DS auto-suffisants
   (scopés #emf-root, valeurs de la charte) : le module ne dépend d'aucun ordre
   de chargement et n'écrase aucune variable globale du site.
   Depuis 2026-07-31, la COQUILLE est partagée avec le module candidature
   professeur (#emp-root, emp-form.css) : les tokens + atomes DS scopés sont
   portés par les DEUX racines (sélecteurs doublés #emf-root/#emp-root), les
   classes .emf- restent communes. Aucun effet hors pages porteuses d'#emp-root.
   Réf : SCHEMA-EVENEMENTS-FORMULAIRE.md (contrat) + Brief-formulaire.md.

   2026-08-10 — TOUTE règle dont le SUJET est un <button> du module est préfixée
   #emf-root / #emp-root, et doit le rester. Raison : sur les pages habillées par
   em-site-chrome (Elementor : /professeur/, /cgv/, articles), le kit Elementor
   charge post-9.css qui pose
     .elementor-kit-9 button { background-color:#2960CE; color:#FFF; border-style:none;
                               font-family:"Rethink Sans"; font-size:16px; font-weight:500 }
     .elementor-kit-9 button:hover, :focus { background-color:#FFF; color:#2960CE }
   Spécificité 0-1-1, contre 0-1-0 pour un `.emf-choice` nu : le kit gagnait et tous
   les boutons d'option du formulaire s'affichaient en aplat bleu. Le préfixe racine
   (1-1-0) repasse devant. Les gabarits refonte ne chargent pas post-9.css et n'ont
   jamais été touchés. Le reset `.em-chrome button` d'em-chrome.css ne couvre pas le
   cas : em-site-chrome.php imprime #emf-root HORS du wrapper .em-chrome.
   ===================================================================== */

/* ---- Tokens DS scopés au module (aucune fuite hors #emf-root) ---- */
#emf-root, #emp-root {
  /* Typo alignée au site (Inter/Lora, déjà self-hostées via em-fonts.css) */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-ui: 'Inter', system-ui, -apple-system, sans-serif;
  --font-serif: 'Lora', Georgia, 'Times New Roman', serif;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

  /* Couleurs (charte) */
  --em-navy: #1F2738; --em-blue: #2960CE; --em-gold: #F9C124; --em-gold-deep: #DFA400;
  --em-blue-denim: #2B4E93; --em-blue-mid: #8DA7DD; --em-blue-grey: #B2BCCF;
  --em-white: #FFFFFF; --em-grey-50: #FBFBFB;
  --em-subtitle: #2F3746; --em-text: #4D5A72; --em-text-soft: #5E6D8B;
  --em-middle-grey: #B5BBC8; --em-border: #E1E5EA;
  --em-green-light: #EBF9ED; --em-red: #F0584F;
  --em-blue-tint-08: rgba(41,96,206,0.08); --em-blue-tint-04: rgba(41,96,206,0.04);
  --em-blue-tint-24: rgba(41,96,206,0.24); --em-gold-tint-12: rgba(249,193,36,0.12);

  /* Aliases sémantiques (consommés par les atomes Button) */
  --action-bg: #2960CE; --action-bg-hover: #2454B5; --action-fg: #FFFFFF;
  --action-gold-bg: #F9C124; --action-gold-fg: #1F2738;

  /* Rayons / ombres */
  --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px;
  --shadow-card: 0 8px 24px rgba(41,96,206,0.08);
  --shadow-pop: 0 18px 48px rgba(31,39,56,0.12);
  --shadow-focus: 0 0 0 3px var(--em-blue-tint-24);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 140ms; --dur: 220ms; --dur-slow: 360ms;

  /* Accents internes au module */
  --emf-green-text: #1B8A50;
  --emf-scrim: rgba(20, 27, 43, 0.58);
}

/* ---- Atomes DS reproduits en CSS (Button / Input du bundle, sans CSS-in-JS) ---- */
#emf-root .em-btn, #emp-root .em-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; height: 56px; padding: 17px 24px; box-sizing: border-box;
  font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: 16px;
  line-height: 1; border-radius: var(--radius-xs); border: 1.5px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}
#emf-root .em-btn i, #emp-root .em-btn i { font-size: 0.95em; }
#emf-root .em-btn--sm, #emp-root .em-btn--sm { height: 44px; padding: 11px 18px; font-size: 14px; gap: 8px; }
#emf-root .em-btn--lg, #emp-root .em-btn--lg { height: 64px; padding: 20px 32px; font-size: 18px; gap: 12px; }
#emf-root .em-btn--primary, #emp-root .em-btn--primary { background: var(--action-bg); color: var(--action-fg); }
#emf-root .em-btn--primary:hover, #emp-root .em-btn--primary:hover { background: var(--action-bg-hover); transform: translateY(-1px); box-shadow: var(--shadow-card); }
#emf-root .em-btn--primary:active, #emp-root .em-btn--primary:active { transform: translateY(1px); }
#emf-root .em-btn--gold, #emp-root .em-btn--gold { background: var(--action-gold-bg); color: var(--action-gold-fg); }
#emf-root .em-btn--secondary, #emp-root .em-btn--secondary { background: var(--em-white); color: var(--em-blue); border-color: var(--em-blue); }
#emf-root .em-btn--dark, #emp-root .em-btn--dark { background: var(--em-navy); color: var(--em-white); }
#emf-root .em-btn[disabled], #emp-root .em-btn[disabled] { opacity: .45; cursor: not-allowed; }

#emf-root .em-field, #emp-root .em-field { display: flex; flex-direction: column; gap: 8px; }
#emf-root .em-field__label, #emp-root .em-field__label { font-family: var(--font-sans); font-weight: var(--fw-medium); font-size: 14px; color: var(--em-subtitle); }
#emf-root .em-field__label span, #emp-root .em-field__label span { color: var(--em-red); margin-left: 4px; }
#emf-root .em-field__control, #emp-root .em-field__control {
  display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 16px;
  background: var(--em-white); border: 1px solid var(--em-border); border-radius: var(--radius-xs);
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
#emf-root .em-field__control input, #emp-root .em-field__control input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font-family: var(--font-serif); font-size: 16px; color: var(--em-navy);
  /* Neutralisation explicite de hello-elementor (pages habillées) : sa règle
     `input[type=text|email|…]{border:1px solid #666;border-radius:3px;padding:.5rem 1rem}`
     ne pose plus la bordure (bloquée par `border:none` ci-dessus), mais son padding et son
     line-height passaient — texte décalé de 14 px vs les gabarits. Ces trois lignes ne sont
     pas décoratives : elles rendent le rendu identique dans les deux contextes. */
  padding: 0; border-radius: 0; line-height: normal;
}
#emf-root .em-field__error, #emp-root .em-field__error { font-family: var(--font-sans); font-size: 13px; color: var(--em-red); }
#emf-root .em-field__hint, #emp-root .em-field__hint { font-family: var(--font-serif); font-size: 13px; color: var(--em-text); }

/* ----- Reset doux interne ----- */
#emf-root, #emf-root *, #emp-root, #emp-root * { box-sizing: border-box; }

/* =====================================================================
   OVERLAY + MODALE
   ===================================================================== */
.emf-overlay {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  background: var(--emf-scrim);
  -webkit-backdrop-filter: blur(7px) saturate(1.05);
  backdrop-filter: blur(7px) saturate(1.05);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease-out);
}
.emf-overlay[data-open="true"] { opacity: 1; pointer-events: auto; }
.emf-overlay[data-scrim="dark"] {
  background: rgba(18, 24, 38, 0.78);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.emf-modal {
  position: relative;
  width: 700px;
  max-width: 100%;
  max-height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
  background: var(--em-white);
  border: 1px solid var(--em-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  transform: translateY(14px) scale(0.98);
  opacity: 0;
  transition: transform 0.34s var(--ease-out), opacity 0.34s var(--ease-out);
}
.emf-overlay[data-open="true"] .emf-modal { transform: none; opacity: 1; }

/* colonne principale (en-tête + corps) — permet l'aside en split */
.emf-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; min-height: 0; }

/* ---- Variante PLEIN ÉCRAN ---- */
.emf-overlay[data-container="fullscreen"] { padding: 0; }
.emf-overlay[data-container="fullscreen"] .emf-modal {
  width: 100%; height: 100%; max-height: 100%;
  border: none; border-radius: 0; box-shadow: none;
}
.emf-overlay[data-container="fullscreen"] .emf-head { padding: 20px 48px; }
.emf-overlay[data-container="fullscreen"] .emf-segs { max-width: 430px; }
.emf-overlay[data-container="fullscreen"] .emf-body { padding: 6vh 48px 60px; }
.emf-overlay[data-container="fullscreen"] .emf-body-inner { max-width: 660px; margin: 0 auto; }

/* ---- Variante SPLIT ---- */
.emf-overlay[data-container="split"] .emf-modal {
  width: 1080px;
  flex-direction: row;
  height: min(780px, calc(100vh - 64px));
  max-height: calc(100vh - 64px);
}
.emf-aside {
  position: relative;
  width: 400px;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--em-navy);
  display: flex;
  flex-direction: column;
}
.emf-aside-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 72% center;
}
.emf-aside-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(17, 40, 87, 0.55) 0%, rgba(17, 40, 87, 0.62) 42%, rgba(16, 24, 40, 0.94) 100%);
}
.emf-aside-content {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 34px 34px 30px;
}
.emf-aside-logo { width: 190px; height: auto; display: block; }
.emf-aside-list { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 15px; }
.emf-aside-list li {
  display: flex; gap: 12px; align-items: flex-start;
  font-family: var(--font-serif);
  font-size: 14.5px; line-height: 1.5;
  color: rgba(255, 255, 255, 0.94);
}
.emf-aside-list li i {
  color: var(--em-gold);
  font-size: 13px;
  margin-top: 4px;
  flex-shrink: 0;
}
.emf-aside-rating {
  display: flex; align-items: center; gap: 9px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-family: var(--font-ui);
  font-size: 12.5px; font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}
.emf-aside-rating .emf-stars { color: var(--em-gold); letter-spacing: 1.5px; font-size: 12px; }
.emf-aside-rating b { color: #fff; }
.emf-aside-phone {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 13px;
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: #fff;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.emf-aside-phone i { color: var(--em-gold); font-size: 12.5px; }
.emf-aside-phone:hover { color: var(--em-gold); }

/* =====================================================================
   EN-TÊTE : progression capture (1-3) puis cadre "étape suivante" (4-5)
   ===================================================================== */
.emf-head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px 16px;
  border-bottom: 1px solid var(--em-border);
  background: var(--em-white);
}
.emf-head-main { flex: 1; min-width: 0; }

#emf-root .emf-iconbtn, #emp-root .emf-iconbtn {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--em-border);
  background: var(--em-white);
  color: var(--em-text);
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
#emf-root .emf-iconbtn:hover, #emp-root .emf-iconbtn:hover { border-color: var(--em-blue); color: var(--em-blue); background: var(--em-blue-tint-04); }
#emf-root .emf-iconbtn:active, #emp-root .emf-iconbtn:active { transform: translateY(1px); }
#emf-root .emf-head-back, #emp-root .emf-head-back { margin-right: -4px; }

/* — phase capture : étiquette + barre 3 segments — */
.emf-steplabel {
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--em-blue);
  margin-bottom: 9px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.emf-steplabel .emf-steplabel-sub { color: var(--em-middle-grey); font-weight: 600; letter-spacing: 0.3px; }
.emf-segs { display: flex; gap: 6px; }
.emf-seg {
  height: 5px;
  flex: 1;
  border-radius: 999px;
  background: var(--em-border);
  overflow: hidden;
  position: relative;
}
.emf-seg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--em-blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-out);
}
.emf-seg[data-fill="full"]::after { transform: scaleX(1); }
.emf-seg[data-fill="active"]::after { transform: scaleX(1); background: var(--em-blue); }

/* — phase post-capture (offre / paiement) — */
.emf-postcap { display: flex; align-items: center; gap: 11px; }
.emf-savedchip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--emf-green-text);
}
.emf-savedchip .emf-check {
  width: 19px; height: 19px;
  border-radius: 50%;
  background: var(--em-green-light);
  color: var(--emf-green-text);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px;
}
.emf-postcap-eye {
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--em-middle-grey);
  padding-left: 11px;
  border-left: 1px solid var(--em-border);
}

/* =====================================================================
   CORPS + ÉCRANS
   ===================================================================== */
.emf-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 34px 52px 42px;
  -webkit-overflow-scrolling: touch;
}
.emf-screen { animation: emf-screen-in 0.3s var(--ease-out) both; }
@keyframes emf-screen-in {
  from { opacity: 0; transform: translateX(10px); }
  to   { opacity: 1; transform: none; }
}
/* entrée douce en cascade des blocs de chaque écran */
.emf-screen > * { opacity: 0; animation: emf-child-in 0.42s var(--ease-out) forwards; }
.emf-screen > *:nth-child(1) { animation-delay: 0.03s; }
.emf-screen > *:nth-child(2) { animation-delay: 0.08s; }
.emf-screen > *:nth-child(3) { animation-delay: 0.13s; }
.emf-screen > *:nth-child(4) { animation-delay: 0.18s; }
.emf-screen > *:nth-child(5) { animation-delay: 0.23s; }
.emf-screen > *:nth-child(6) { animation-delay: 0.28s; }
.emf-screen > *:nth-child(7) { animation-delay: 0.33s; }
.emf-screen > *:nth-child(8) { animation-delay: 0.38s; }
@keyframes emf-child-in {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}

/* — titres : motif barres or+bleu, eyebrow, sous-titre — */
.emf-bars { display: inline-flex; gap: 3px; align-self: stretch; flex-shrink: 0; }
.emf-bars i { width: 4px; border-radius: 3px; display: block; }
.emf-bars i:first-child { background: var(--em-gold); }
.emf-bars i:last-child { background: var(--em-blue); }

.emf-titlewrap { margin-bottom: 22px; }
.emf-eyebrow {
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--em-blue);
  margin-bottom: 12px;
  display: block;
}
.emf-titlerow { display: flex; gap: 13px; align-items: flex-start; }
.emf-title {
  font-family: var(--font-ui);
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.4px;
  line-height: 1.22;
  color: var(--em-navy);
  text-wrap: balance;
}
.emf-title .emf-hl { color: var(--em-blue); }
.emf-subtitle {
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.55;
  color: var(--em-text);
  margin-top: 10px;
  max-width: 46ch;
}

/* =====================================================================
   ÉCRAN 1 — NIVEAU (cibles tap larges, sobres)
   ===================================================================== */
.emf-levels { display: flex; flex-direction: column; gap: 11px; }
#emf-root .emf-level, #emp-root .emf-level {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  text-align: left;
  padding: 17px 20px;
  background: var(--em-white);
  border: 1.5px solid var(--em-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: var(--font-ui);
  transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
#emf-root .emf-level:hover, #emp-root .emf-level:hover { border-color: var(--em-blue-mid); background: var(--em-blue-tint-04); transform: translateY(-2px); box-shadow: var(--shadow-card); }
#emf-root .emf-level:active, #emp-root .emf-level:active { transform: translateY(0); }
.emf-level-txt { flex: 1; min-width: 0; }
.emf-level-name { display: block; font-size: 17px; font-weight: 600; color: var(--em-navy); line-height: 1.2; }
.emf-level-desc { display: block; font-size: 13px; color: var(--em-text-soft); margin-top: 3px; }
.emf-level-end {
  flex-shrink: 0;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--em-middle-grey);
  font-size: 14px;
  transition: color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.emf-level:hover .emf-level-end { color: var(--em-blue); transform: translateX(3px); }

/* état SÉLECTIONNÉ (après clic) — bleu franc, ferme */
#emf-root .emf-level[data-state="selected"], #emp-root .emf-level[data-state="selected"] {
  border-color: var(--em-blue);
  background: var(--em-blue-tint-08);
  box-shadow: 0 0 0 3px var(--em-blue-tint-24);
}
.emf-level[data-state="selected"] .emf-level-name { color: var(--em-blue); }
.emf-level[data-state="selected"] .emf-level-end {
  color: #fff; background: var(--em-blue); border-radius: 50%; transform: none;
}

/* état SUGGÉRÉ (pré-sélection contextuelle) — accent OR, distinct du bleu */
#emf-root .emf-level[data-state="suggested"], #emp-root .emf-level[data-state="suggested"] {
  border-color: var(--em-gold);
  background: var(--em-gold-tint-12);
  box-shadow: 0 0 0 3px rgba(249, 193, 36, 0.18);
}
.emf-level[data-state="suggested"] .emf-level-end { color: var(--em-gold-deep); transform: none; }
.emf-suggested-tag {
  position: absolute;
  top: -9px;
  left: 16px;
  font-family: var(--font-ui);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #fff;
  background: var(--em-gold-deep);
  padding: 3px 9px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.emf-foot-actions { margin-top: 22px; display: flex; align-items: center; gap: 14px; }
.emf-foot-hint { font-family: var(--font-serif); font-size: 13.5px; color: var(--em-text-soft); }

/* =====================================================================
   ÉCRAN 2 — SITUATION (groupes aérés, choix segmentés)
   ===================================================================== */
.emf-groups { display: flex; flex-direction: column; gap: 24px; }
.emf-group {}
.emf-group-label {
  display: block;
  font-family: var(--font-ui);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--em-subtitle);
  margin-bottom: 11px;
}
.emf-choices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.emf-choices[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
#emf-root .emf-choice, #emp-root .emf-choice {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.25;
  gap: 9px;
  padding: 12px 14px;
  min-height: 52px;
  background: var(--em-white);
  border: 1.5px solid var(--em-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--em-subtitle);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.emf-choice i { font-size: 13px; color: var(--em-middle-grey); transition: color var(--dur) var(--ease-out); }
#emf-root .emf-choice:hover, #emp-root .emf-choice:hover { border-color: var(--em-blue-mid); background: var(--em-blue-tint-04); transform: translateY(-1px); }
#emf-root .emf-choice[data-selected="true"], #emp-root .emf-choice[data-selected="true"] {
  border-color: var(--em-blue);
  background: var(--em-blue-tint-08);
  color: var(--em-blue);
  font-weight: 600;
  box-shadow: 0 0 0 3px var(--em-blue-tint-24);
}
.emf-choice[data-selected="true"] i { color: var(--em-blue); }

/* =====================================================================
   ÉCRAN 3 — COORDONNÉES (l'écran phare)
   ===================================================================== */
.emf-fields { display: flex; flex-direction: column; gap: 16px; }
.emf-fields-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* survol/focus pour les champs DS (Input rend .em-field__control) */
#emf-root .em-field__control:focus-within, #emp-root .em-field__control:focus-within {
  border-color: var(--em-blue) !important;
  box-shadow: var(--shadow-focus);
}
#emf-root .em-field__control:hover, #emp-root .em-field__control:hover { border-color: var(--em-blue-mid); }
#emf-root .em-field__control[data-error="true"], #emp-root .em-field__control[data-error="true"] { border-color: var(--em-red) !important; }
/* Le champ téléphone a son propre conteneur : sans cette ligne son erreur resterait muette
   visuellement, alors même que le message s'affiche (défaut réparé le 14/09/2026). */
#emf-root .emf-phone-control[data-error="true"], #emp-root .emf-phone-control[data-error="true"] { border-color: var(--em-red) !important; }

/* champ téléphone international léger */
.emf-phonefield { position: relative; }
.emf-field-label {
  display: block;
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--em-subtitle);
  margin-bottom: 7px;
}
.emf-phone-control {
  display: flex;
  align-items: stretch;
  background: var(--em-white);
  border: 1px solid var(--em-border);
  border-radius: var(--radius-xs);
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.emf-phone-control:hover { border-color: var(--em-blue-mid); }
.emf-phone-control:focus-within { border-color: var(--em-blue); box-shadow: var(--shadow-focus); }
#emf-root .emf-dial, #emp-root .emf-dial {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 11px 0 13px;
  border: none;
  border-right: 1px solid var(--em-border);
  background: transparent;
  border-radius: var(--radius-xs) 0 0 var(--radius-xs);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  color: var(--em-subtitle);
  transition: background var(--dur-fast) var(--ease-out);
}
#emf-root .emf-dial:hover, #emp-root .emf-dial:hover { background: var(--em-blue-tint-04); }
.emf-dial .emf-flag { font-size: 16px; line-height: 1; }
.emf-dial i { font-size: 9px; color: var(--em-middle-grey); }
/* Préfixé racine : sans cela, la règle valait 0-1-1 — exactement la spécificité de
   `input[type=tel]` de hello-elementor sur les pages habillées. Le champ n'échappait à sa
   bordure grise #666 que parce qu'em-form.css est chargé APRÈS style.min.css. Une tenue par
   l'ordre de chargement, pas par construction. */
#emf-root .emf-phone-control input, #emp-root .emf-phone-control input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  padding: 12px 14px;
  font-family: var(--font-serif);
  font-size: 15.5px;
  color: var(--em-navy);
  border-radius: 0; line-height: normal;
}
#emf-root .emf-phone-control input::placeholder, #emp-root .emf-phone-control input::placeholder { color: var(--em-middle-grey); }
.emf-phone-pop {
  position: absolute;
  z-index: 30;
  top: calc(100% - 18px);
  left: 0;
  min-width: 230px;
  background: var(--em-white);
  border: 1px solid var(--em-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-pop);
  padding: 5px;
  animation: emf-screen-in 0.16s var(--ease-out) both;
}
#emf-root .emf-phone-opt, #emp-root .emf-phone-opt {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: none;
  background: transparent;
  border-radius: var(--radius-xs);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 13.5px;
  color: var(--em-subtitle);
}
#emf-root .emf-phone-opt:hover, #emp-root .emf-phone-opt:hover { background: var(--em-blue-tint-04); }
#emf-root .emf-phone-opt[data-selected="true"], #emp-root .emf-phone-opt[data-selected="true"] { background: var(--em-blue-tint-08); color: var(--em-blue); font-weight: 600; }
.emf-phone-opt .emf-flag { font-size: 15px; }
.emf-phone-opt-name { flex: 1; }
.emf-phone-opt-dial { color: var(--em-text-soft); font-size: 12.5px; }

/* ── Sélecteur d'indicatif à 243 pays (14/09/2026) ──────────────────────────────────────────
   Le popover portait 8 boutons et tenait sans contrainte. À 243 il lui faut trois choses, et
   aucune n'est cosmétique : un champ de RECHERCHE (sans lui la liste est inutilisable, c'est la
   condition du choix « tous les pays »), une hauteur BORNÉE avec défilement (sinon le popover
   dépasse l'écran et la modale ne défile pas avec lui), et une largeur un peu plus généreuse —
   « Saint-Vincent-et-les-Grenadines » ne tient pas dans 230 px. */
.emf-phone-pop { min-width: 272px; max-width: 320px; padding: 0; overflow: hidden; }
#emf-root .emf-phone-opt-search, #emp-root .emf-phone-opt-search {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 11px; border-bottom: 1px solid var(--em-border); background: var(--em-white);
}
.emf-phone-opt-search i { font-size: 11.5px; color: var(--em-middle-grey); flex: none; }
#emf-root .emf-phone-opt-search input, #emp-root .emf-phone-opt-search input {
  flex: 1; min-width: 0;
  border: none; outline: none; box-shadow: none; background: transparent;
  padding: 0; min-height: auto; border-radius: 0;
  font-family: var(--font-ui); font-size: 14px; color: var(--em-navy); line-height: normal;
  -webkit-appearance: none; appearance: none;
}
.emf-phone-opt-search input::-webkit-search-cancel-button { display: none; }
.emf-phone-opt-list { max-height: 254px; overflow-y: auto; overscroll-behavior: contain; padding: 5px; }
.emf-phone-opt-sep { height: 1px; margin: 5px 4px; background: var(--em-border); }
.emf-phone-opt-vide { padding: 14px 12px; font-size: 13px; color: var(--em-text-soft); text-align: center; }
/* Ligne active au clavier : le même fond que le survol, pour que flèches et souris se lisent
   pareil. Sans elle, la navigation au clavier dans 243 entrées est aveugle. */
#emf-root .emf-phone-opt[data-actif="true"], #emp-root .emf-phone-opt[data-actif="true"] {
  background: var(--em-blue-tint-08);
}

/* ── Les deux propositions : indicatif et orthographe du domaine ────────────────────────────
   Même gabarit visuel que .emf-nudge (une information, une action), en plus discret : ce sont
   des suggestions, pas des erreurs. Elles ne prennent la place d'aucun message d'erreur. */
.emf-dial-suggest, .emf-mail-suggest {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px;
  margin-top: 6px; font-family: var(--font-ui); font-size: 12.5px; line-height: 1.45;
  color: var(--em-subtitle);
}
.emf-dial-suggest i { font-size: 11.5px; color: var(--em-blue); }
#emf-root .emf-dial-suggest .emf-linkbtn, #emf-root .emf-mail-suggest .emf-linkbtn,
#emp-root .emf-dial-suggest .emf-linkbtn, #emp-root .emf-mail-suggest .emf-linkbtn {
  font-size: 12.5px; font-weight: 600;
}
.emf-field-hint {
  margin-top: 6px;
  font-family: var(--font-ui);
  font-size: 12.5px;
  color: var(--em-text-soft);
}

/* nudge téléphone — micro-état doux, jamais bloquant */
.emf-nudge {
  margin-top: 11px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 13px 15px;
  background: var(--em-gold-tint-12);
  border: 1px solid rgba(249, 193, 36, 0.4);
  border-radius: var(--radius-sm);
  animation: emf-screen-in 0.24s var(--ease-out) both;
}
.emf-nudge-ic { color: var(--em-gold-deep); font-size: 15px; margin-top: 2px; flex-shrink: 0; }
.emf-nudge-txt { font-family: var(--font-serif); font-size: 13.5px; line-height: 1.5; color: var(--em-subtitle); }
.emf-nudge-actions { margin-top: 9px; display: flex; gap: 16px; align-items: center; }
#emf-root .emf-linkbtn, #emp-root .emf-linkbtn {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--font-ui); font-size: 13.5px; font-weight: 600; color: var(--em-blue);
}
#emf-root .emf-linkbtn:hover, #emp-root .emf-linkbtn:hover { color: var(--em-blue-denim); }
#emf-root .emf-linkbtn.is-quiet, #emp-root .emf-linkbtn.is-quiet { color: var(--em-text-soft); font-weight: 500; }
#emf-root .emf-linkbtn.is-quiet:hover, #emp-root .emf-linkbtn.is-quiet:hover { color: var(--em-subtitle); }

/* encadré crédit d'impôt (domicile / hybride) */
.emf-tax {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 15px;
  background: var(--em-green-light);
  border-radius: var(--radius-sm);
}
.emf-tax i { color: var(--emf-green-text); font-size: 15px; flex-shrink: 0; }
.emf-tax span { font-family: var(--font-ui); font-size: 13.5px; font-weight: 600; color: var(--emf-green-text); }

/* réassurance compacte — une ligne, uniquement quand le panneau latéral n'existe pas */
.emf-reassure-compact {
  display: none;
  margin-top: 16px;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--em-text-soft);
}
.emf-reassure-compact .emf-star { color: var(--em-gold); }
.emf-reassure-compact .emf-rc-line { display: block; }

/* =====================================================================
   TRAITEMENT T1 (variante B) — LE FUNNEL COURT.
   Le bras B s'arrête à l'écran 3 : rien à styler pour un écran d'offre ou de
   paiement qui n'existe pas. Ce que B ajoute visuellement se limite à deux
   choses : la chip de contexte au-dessus des champs (atome existant de
   l'écran 4, réemployé) et le rappel du numéro dans la confirmation.
   Les deux bandeaux de réassurance qui ont précédé ce traitement ont été
   écartés en recette ; leurs règles sont sorties d'ici avec leur code —
   copy exacte et motifs dans experiences/candidates-ecartees.md.
   ===================================================================== */
.emf-coords-chip { margin-bottom: 18px; }

/* confirmation du bras B : le numéro depuis lequel on appelle. Sans lui, l'appel
   arrive en inconnu — et un appel inconnu ne se décroche pas. */
.emf-confirm-tel {
  margin-top: 18px;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 15px;
  background: var(--em-blue-tint-04);
  border-radius: var(--radius-md);
  text-align: left;
}
.emf-confirm-tel i { color: var(--em-blue); font-size: 13px; margin-top: 3px; flex-shrink: 0; }
.emf-confirm-tel span {
  font-family: var(--font-serif);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--em-text);
}
.emf-confirm-tel b { color: var(--em-navy); white-space: nowrap; }

/* microcopy confidentialité (RGPD) */
.emf-privacy {
  margin-top: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--em-text-soft);
  text-align: center;
}
.emf-privacy i { color: var(--em-middle-grey); font-size: 11px; }

.emf-submit-wrap { margin-top: 22px; }
.emf-submit-wrap .em-btn { width: 100%; }

/* =====================================================================
   ÉCRAN 4 — OFFRE
   ===================================================================== */
.emf-chip-context {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  background: var(--em-blue-tint-08);
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--em-blue);
  margin-bottom: 20px;
}
.emf-chip-context i { font-size: 11px; }

/* curseur fréquence */
/* Conteneur d'offre (fix ④) : wrapper invisible au layout — ses enfants se comportent
   comme des enfants directs de .emf-body-inner. Sert d'ancre au listener délégué de l'offre. */
.emf-offer-root { display: contents; }
.emf-freq { margin-bottom: 22px; }
.emf-freq-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; }
.emf-freq-label { font-family: var(--font-ui); font-size: 14.5px; font-weight: 600; color: var(--em-subtitle); }
.emf-freq-val { font-family: var(--font-ui); font-weight: 700; color: var(--em-navy); white-space: nowrap; }
.emf-freq-val b { font-size: 22px; }
.emf-freq-val span { font-size: 14px; color: var(--em-text-soft); font-weight: 600; margin-left: 2px; }

.emf-range {
  -webkit-appearance: none;
  appearance: none;
  /* `margin: 0` explicite : le défaut navigateur d'un input[type=range] est 2px, mais
     hello-elementor pose `input{margin:0}` sur les pages habillées — le curseur y était
     donc 2px plus étroit que sur les gabarits. Valeur figée des deux côtés. */
  margin: 0;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background-color: var(--em-border);
  cursor: pointer;
  outline: none;
}
.emf-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--em-white);
  border: 2.5px solid var(--em-blue);
  box-shadow: 0 3px 10px rgba(41, 96, 206, 0.32);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out);
  margin-top: -9px;
}
.emf-range::-webkit-slider-thumb:hover { transform: scale(1.08); }
.emf-range::-moz-range-thumb {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--em-white);
  border: 2.5px solid var(--em-blue);
  box-shadow: 0 3px 10px rgba(41, 96, 206, 0.32);
  cursor: pointer;
}
.emf-range::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; }
.emf-range::-moz-range-track { height: 6px; border-radius: 999px; }
.emf-ticks {
  display: flex;
  justify-content: space-between;
  margin-top: 11px;
  padding: 0 2px;
}
#emf-root .emf-tick, #emp-root .emf-tick {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  color: var(--em-middle-grey);
  background: none; border: none; cursor: pointer; padding: 2px 4px;
  transition: color var(--dur-fast) var(--ease-out);
}
#emf-root .emf-tick:hover, #emp-root .emf-tick:hover { color: var(--em-text); }
#emf-root .emf-tick[data-active="true"], #emp-root .emf-tick[data-active="true"] { color: var(--em-blue); }

/* bloc héros — reste à charge mensuel, l'élément le plus contrasté */
.emf-hero {
  background: var(--em-grey-50);
  border: 1px solid var(--em-border);
  border-radius: var(--radius-lg);
  padding: 24px 26px;
  margin-bottom: 16px;
  text-align: center;
}
.emf-hero-label {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--em-text-soft);
  margin-bottom: 6px;
}
.emf-hero-amount {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--em-navy);
  line-height: 1;
  letter-spacing: -1px;
  animation: emf-amount-in 0.32s var(--ease-out) both;
}
@keyframes emf-amount-in {
  from { opacity: 0.3; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}
.emf-hero-amount b { font-size: 52px; font-weight: 600; }
.emf-hero-amount span { font-size: 22px; color: var(--em-text); letter-spacing: 0; }
.emf-hero-strike {
  margin-top: 10px;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--em-text-soft);
}
.emf-hero-strike s { color: var(--em-middle-grey); text-decoration-thickness: 1px; }
.emf-hero-tax {
  margin-top: 9px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--emf-green-text);
}
.emf-hero-tax i { font-size: 12px; }

/* trois durées */
.emf-durations { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
#emf-root .emf-dur, #emp-root .emf-dur {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 14px 8px 13px;
  background: var(--em-white);
  border: 1.5px solid var(--em-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: var(--font-ui);
  transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
#emf-root .emf-dur:hover, #emp-root .emf-dur:hover { border-color: var(--em-blue-mid); transform: translateY(-2px); }
.emf-dur-term { font-size: 13.5px; font-weight: 600; color: var(--em-subtitle); }
.emf-dur-amount { font-size: 17px; font-weight: 700; color: var(--em-navy); }
.emf-dur-amount span { font-size: 12px; font-weight: 600; color: var(--em-text-soft); }
#emf-root .emf-dur[data-selected="true"], #emp-root .emf-dur[data-selected="true"] {
  border-color: var(--em-blue);
  background: var(--em-blue-tint-08);
  box-shadow: 0 0 0 3px var(--em-blue-tint-24);
}
.emf-dur[data-selected="true"] .emf-dur-term { color: var(--em-blue); }
.emf-dur-badge {
  position: absolute;
  top: -9px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-ui);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--em-navy);
  background: var(--em-gold);
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

/* ligne d'essai */
.emf-essai {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 13px 15px;
  background: var(--em-blue-tint-04);
  border-radius: var(--radius-sm);
  margin-bottom: 20px;
  font-family: var(--font-serif);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--em-subtitle);
}
.emf-essai i { color: var(--em-blue); font-size: 14px; margin-top: 3px; flex-shrink: 0; }

/* boutons d'action */
.emf-actions { display: flex; flex-direction: column; gap: 10px; }
.emf-actions .em-btn--primary { width: 100%; }
#emf-root .emf-secondary, #emp-root .emf-secondary {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  background: transparent;
  border: 1px solid var(--em-border);
  border-radius: var(--radius-xs);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  color: var(--em-text);
  cursor: pointer;
  transition: all var(--dur) var(--ease-out);
}
#emf-root .emf-secondary:hover, #emp-root .emf-secondary:hover { border-color: var(--em-blue-mid); color: var(--em-subtitle); background: var(--em-blue-tint-04); }
.emf-secondary b { font-weight: 700; color: var(--em-subtitle); }

.emf-reassure-short {
  margin-top: 14px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--em-text-soft);
  text-align: center;
}
.emf-reassure-short i { color: var(--em-middle-grey); font-size: 12px; line-height: 1.5; }

.emf-rappel { margin-top: 16px; text-align: center; }
#emf-root .emf-rappel button, #emp-root .emf-rappel button { font-size: 13px; }
/* T2 (12/09/2026) — le rappel PROMU du mode abonnement : un vrai bouton secondaire sous
   l'écran d'offre, sa note, et le champ numéro qui n'apparaît que si la session n'en a pas
   laissé. La règle `.emf-rappel button { font-size: 13px }` ci-dessus vise le lien gris ;
   elle gagnerait sur `.em-btn--lg` (même spécificité, écrite après) — d'où le sélecteur plus
   spécifique ci-dessous, qui rend au bouton promu sa taille de bouton. */
.emf-rappel--promu { margin-top: 14px; text-align: center; }
#emf-root .emf-rappel--promu .em-btn--lg { width: 100%; font-size: 18px; }
#emf-root .emf-rappel--promu .em-btn--sm { width: 100%; font-size: 14px; }
.emf-rappel-note { margin-top: 8px; font-size: 13.5px; line-height: 1.45; color: var(--em-text-soft); }
.emf-rappel-tel { margin-top: 12px; text-align: left; display: flex; flex-direction: column; gap: 8px; }
#emf-root .emf-rappel-tel input { width: 100%; }

/* — Plan B : abonnement masqué — */
.emf-planb-primary {
  background: var(--em-white);
  border: 1.5px solid var(--em-blue);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-card);
}
.emf-planb-eyebrow {
  font-family: var(--font-ui);
  font-size: 11px; font-weight: 700; letter-spacing: 0.7px; text-transform: uppercase;
  color: var(--em-blue); margin-bottom: 8px;
}
.emf-planb-rate { font-family: var(--font-serif); font-weight: 600; color: var(--em-navy); line-height: 1; }
.emf-planb-rate b { font-size: 40px; }
.emf-planb-rate span { font-size: 18px; color: var(--em-text); }
.emf-planb-desc { font-family: var(--font-serif); font-size: 13.5px; line-height: 1.5; color: var(--em-text); margin-top: 10px; }
.emf-stage-entry {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px 17px;
  background: var(--em-grey-50);
  border: 1px solid var(--em-border);
  border-radius: var(--radius-md);
  margin-bottom: 18px;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--dur) var(--ease-out);
}
.emf-stage-entry:hover { border-color: var(--em-blue-mid); transform: translateY(-2px); box-shadow: var(--shadow-card); }
.emf-stage-ic {
  width: 42px; height: 42px; flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--em-gold-tint-12);
  color: var(--em-gold-deep);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 17px;
}
.emf-stage-txt { flex: 1; }
.emf-stage-txt b { display: block; font-family: var(--font-ui); font-size: 14.5px; font-weight: 600; color: var(--em-navy); }
.emf-stage-txt small { font-family: var(--font-serif); font-size: 12.5px; color: var(--em-text-soft); }
.emf-stage-entry > i { color: var(--em-blue); font-size: 13px; }

/* =====================================================================
   ÉCRAN 5 — PAIEMENT
   ===================================================================== */
.emf-recap {
  background: var(--em-grey-50);
  border: 1px solid var(--em-border);
  border-radius: var(--radius-md);
  margin-bottom: 20px;
}
.emf-recap-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
}
/* rangée « Prélevé aujourd'hui : 0 € » — même carte, séparée en pointillés ;
   le 0 € doit peser visuellement autant que le prix de la rangée du dessus */
.emf-recap-today {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 16px 13px;
  border-top: 1px dashed var(--em-border);
}
.emf-recap-today-txt small { display: block; font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--em-text-soft); }
.emf-recap-today-txt span { font-family: var(--font-serif); font-size: 12.5px; line-height: 1.45; color: var(--em-text-soft); }
.emf-recap-zero { font-family: var(--font-ui); font-size: 18px; font-weight: 700; color: var(--em-navy); white-space: nowrap; }
.emf-recap-ic {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--em-blue-tint-08);
  color: var(--em-blue);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px;
}
.emf-recap-txt { flex: 1; }
.emf-recap-txt small { display: block; font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--em-text-soft); }
.emf-recap-txt b { font-family: var(--font-ui); font-size: 14.5px; font-weight: 600; color: var(--em-navy); }

/* cadre du composant de paiement (Stripe) — on stylise le cadre, pas l'intérieur */
.emf-pay-label {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--em-subtitle);
  margin-bottom: 9px;
}
.emf-pay-stripe { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--em-text-soft); }
.emf-pay-stripe i { color: #635BFF; font-size: 13px; }
.emf-pay-frame {
  border: 1px solid var(--em-border);
  border-radius: var(--radius-sm);
  background: var(--em-white);
  padding: 4px;
}
/* maquette d'intérieur, neutre, claire (l'Element Stripe réel viendra ici) */
.emf-pay-inner {
  border-radius: 6px;
  background: var(--em-grey-50);
  border: 1px dashed var(--em-border);
  padding: 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.emf-pay-row { display: flex; align-items: center; gap: 10px; }
.emf-pay-cardrow {
  display: flex; align-items: center; gap: 10px;
  background: var(--em-white);
  border: 1px solid var(--em-border);
  border-radius: 6px;
  padding: 12px 13px;
}
.emf-pay-cardrow .emf-pay-ph { flex: 1; font-family: var(--font-ui); font-size: 14px; color: var(--em-middle-grey); letter-spacing: 1px; }
.emf-pay-cardrow .emf-pay-brands { display: inline-flex; gap: 5px; color: var(--em-blue-grey); font-size: 18px; }
.emf-pay-cardrow > i { color: var(--em-middle-grey); font-size: 15px; }
.emf-pay-half {
  flex: 1;
  display: flex; align-items: center;
  background: var(--em-white);
  border: 1px solid var(--em-border);
  border-radius: 6px;
  padding: 12px 13px;
  font-family: var(--font-ui); font-size: 14px; color: var(--em-middle-grey); letter-spacing: 1px;
}
.emf-pay-stripe-note {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-ui); font-size: 11px; color: var(--em-middle-grey);
  margin-top: 8px;
}
.emf-trust {
  margin-top: 18px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-ui); font-size: 12.5px; font-weight: 500; color: var(--em-text-soft);
}
.emf-trust i { color: var(--emf-green-text); font-size: 13px; }

/* =====================================================================
   MESSAGES DE CONFIRMATION
   ===================================================================== */
.emf-confirm { text-align: center; padding: 18px 6px 8px; }
.emf-confirm-badge {
  width: 66px; height: 66px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: var(--em-green-light);
  color: var(--emf-green-text);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  animation: emf-pop 0.4s var(--ease-out) both;
}
@keyframes emf-pop { 0% { transform: scale(0.6); opacity: 0; } 60% { transform: scale(1.06); } 100% { transform: scale(1); opacity: 1; } }
.emf-confirm h2 {
  font-family: var(--font-ui);
  font-size: 24px; font-weight: 700; letter-spacing: -0.4px; color: var(--em-navy);
  margin-bottom: 12px;
}
.emf-confirm p {
  font-family: var(--font-serif);
  font-size: 16px; line-height: 1.6; color: var(--em-text);
  max-width: 42ch; margin: 0 auto 24px;
}

/* numéro de téléphone — pied de formulaire, uniquement sans panneau latéral */
.emf-phone-inline {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 12px 20px;
  border-top: 1px solid var(--em-border);
  background: var(--em-white);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--em-subtitle);
  text-decoration: none;
}
.emf-phone-inline i { color: var(--em-blue); font-size: 12px; }
.emf-phone-inline:hover { color: var(--em-blue); }

/* bloc Avance Immédiate (confirmation, branche domicile/hybride) */
.emf-confirm-tax {
  margin: 0 auto 24px;
  max-width: 440px;
  text-align: left;
  padding: 18px 20px;
  background: var(--em-green-light);
  border-radius: var(--radius-md);
}
.emf-confirm-tax-title {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 700;
  color: var(--em-navy);
  margin-bottom: 8px;
}
.emf-confirm .emf-confirm-tax p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--em-subtitle);
  margin: 0 0 14px;
  max-width: none;
  text-align: left;
}
.emf-taxcta {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 18px;
  background: var(--em-blue);
  border: none;
  border-radius: var(--radius-xs);
  font-family: var(--font-ui);
  font-size: 14.5px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  transition: all var(--dur) var(--ease-out);
}
.emf-taxcta:hover { background: var(--em-blue-denim); transform: translateY(-1px); box-shadow: var(--shadow-card); }
.emf-taxcta:active { transform: translateY(1px); }
.emf-taxcta i { font-size: 12px; color: rgba(255, 255, 255, 0.8); }

/* =====================================================================
   RÉDUCTION MOUVEMENT
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .emf-overlay, .emf-modal, .emf-screen, .emf-nudge, .emf-confirm-badge, .emf-hero-amount { transition: none; animation: none; }
  .emf-screen > * { animation: none; opacity: 1; }
  .emf-modal { transform: none; }
  .emf-seg::after { transition: none; }
}

/* =====================================================================
   GARDE-FOU PETITS ÉCRANS (desktop-first ; le mode mobile est piloté
   par data-mobile, posé en JS — voir plus bas. Pas de media query ici :
   le passage desktop ↔ mobile suit le signal isMobile, pas le viewport,
   pour rester fiable en conteneur à taille fixe, référence et bezel.)
   ===================================================================== */
/* =====================================================================
   MODE MOBILE — activé par data-mobile="true" sur l'overlay.
   L'attribut est posé par le JS quand le viewport ≤ 640px OU quand la page
   hôte force window.EMF_FORCE_MOBILE = true (maquette avec bezel téléphone).
   ===================================================================== */
.emf-overlay[data-mobile="true"] { padding: 0; }
.emf-overlay[data-mobile="true"] .emf-modal {
  width: 100%; max-width: 100%; height: 100%; max-height: 100%;
  border-radius: 0; border: none;
}
/* le panneau latéral (split) disparaît entièrement */
.emf-overlay[data-mobile="true"] .emf-aside { display: none; }
/* réassurance compacte + numéro en pied : reprennent le relais du panneau */
.emf-overlay[data-mobile="true"] .emf-reassure-compact { display: block; }
.emf-overlay[data-mobile="true"] .emf-phone-inline { display: flex; }

/* header compact fixe + safe area iOS (encoche) */
.emf-overlay[data-mobile="true"] .emf-head { padding: calc(14px + env(safe-area-inset-top)) 18px 14px; }

.emf-overlay[data-mobile="true"] .emf-body { padding: 22px 20px 30px; }
.emf-overlay[data-mobile="true"] .emf-body-inner { max-width: none; margin: 0; }
.emf-overlay[data-mobile="true"] .emf-title { font-size: 22px; }

/* champs empilés, un par ligne */
.emf-overlay[data-mobile="true"] .emf-fields-row { grid-template-columns: 1fr; }

/* groupes de 3 : empilés, libellés jamais tronqués */
.emf-overlay[data-mobile="true"] .emf-choices[data-cols="3"] { grid-template-columns: 1fr; }
#emf-root .emf-overlay[data-mobile="true"] .emf-choices[data-cols="3"] .emf-choice, #emp-root .emf-overlay[data-mobile="true"] .emf-choices[data-cols="3"] .emf-choice { justify-content: flex-start; text-align: left; padding: 14px 16px; }

/* écran 1 contexte : bouton Suivant pleine largeur */
.emf-overlay[data-mobile="true"] .emf-foot-actions { flex-direction: column; align-items: stretch; gap: 10px; }
.emf-overlay[data-mobile="true"] .emf-foot-actions .em-btn { width: 100%; }
.emf-overlay[data-mobile="true"] .emf-foot-hint { text-align: center; }

/* curseur fréquence : zone de contact 44 px, poignée large */
.emf-overlay[data-mobile="true"] .emf-range {
  height: 44px;
  border-radius: 0;
  background-color: transparent;
  background-size: 100% 6px;
  background-position: center;
  background-repeat: no-repeat;
}
.emf-overlay[data-mobile="true"] .emf-range::-webkit-slider-runnable-track { height: 44px; background: transparent; }
.emf-overlay[data-mobile="true"] .emf-range::-webkit-slider-thumb { width: 28px; height: 28px; margin-top: 8px; }
.emf-overlay[data-mobile="true"] .emf-range::-moz-range-track { height: 44px; background: transparent; }
.emf-overlay[data-mobile="true"] .emf-range::-moz-range-thumb { width: 28px; height: 28px; }
.emf-overlay[data-mobile="true"] .emf-ticks { margin-top: 4px; }
#emf-root .emf-overlay[data-mobile="true"] .emf-tick, #emp-root .emf-overlay[data-mobile="true"] .emf-tick { padding: 8px 4px; }

.emf-overlay[data-mobile="true"] .emf-hero { padding: 20px 18px; }
.emf-overlay[data-mobile="true"] .emf-hero-amount b { font-size: 44px; }
.emf-overlay[data-mobile="true"] .emf-durations { gap: 8px; }

/* confirmation du bras B sur mobile : un cran plus bas, comme les autres microtextes */
.emf-overlay[data-mobile="true"] .emf-confirm-tel { padding: 12px 13px; }
.emf-overlay[data-mobile="true"] .emf-confirm-tel span { font-size: 13px; }

/* numéro en pied + safe area basse (barre home) */
.emf-overlay[data-mobile="true"] .emf-phone-inline { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }

/* header écrans 4/5 : coche seule + libellé d'étape (pas de retour à la ligne) */
.emf-overlay[data-mobile="true"] .emf-savedchip-txt { display: none; }

/* typo mobile : sous-titres et micro-textes un cran plus bas —
   mais JAMAIS les champs de saisie sous 16px (sinon iOS zoome au focus) */
.emf-overlay[data-mobile="true"] .emf-subtitle { font-size: 14.5px; }
.emf-overlay[data-mobile="true"] .emf-essai,
.emf-overlay[data-mobile="true"] .emf-nudge-txt,
.emf-overlay[data-mobile="true"] .emf-foot-hint { font-size: 13px; }
.emf-overlay[data-mobile="true"] .emf-reassure-short,
.emf-overlay[data-mobile="true"] .emf-reassure-compact,
.emf-overlay[data-mobile="true"] .emf-field-hint { font-size: 12px; }
.emf-overlay[data-mobile="true"] .emf-privacy { font-size: 11.5px; }
/* Anti-zoom iOS (< 16px sur un champ → Safari zoome au focus). Préfixé racine OBLIGATOIREMENT :
   les règles de base ci-dessus valent 1-1-1 depuis leur scoping, cette surcharge devait passer
   au-dessus — sans le préfixe elle plafonnait à 0-3-1 et le téléphone repassait à 15,5 px. */
#emf-root .emf-overlay[data-mobile="true"] .em-field__control input,
#emp-root .emf-overlay[data-mobile="true"] .em-field__control input,
#emf-root .emf-overlay[data-mobile="true"] .em-field__control textarea,
#emp-root .emf-overlay[data-mobile="true"] .em-field__control textarea,
#emf-root .emf-overlay[data-mobile="true"] .emf-phone-control input,
#emp-root .emf-overlay[data-mobile="true"] .emf-phone-control input { font-size: 16px; }

/* =====================================================================
   BRANCHE STAGE (brief stage) — lien de bascule (écran 2), configurateur
   de volume (écran 4), palier dégressif. Réutilise les atomes existants
   (.emf-hero, .emf-range, .emf-actions, .emf-reassure-short).
   ===================================================================== */
/* liste de choix en colonne (période de stage : libellés longs, un seul tap) */
.emf-choices[data-cols="1"] { grid-template-columns: 1fr; }

/* — lien de bascule cours↔stage (écran 2) : LIEN TEXTE discret, jamais un bouton — */
.emf-switch { margin-top: 15px; text-align: center; }
#emf-root .emf-switch-link, #emp-root .emf-switch-link {
  background: none; border: none; cursor: pointer; padding: 4px 2px;
  font-family: var(--font-ui); font-size: 13.5px; font-weight: 600;
  color: var(--em-blue); display: inline-flex; align-items: center; gap: 6px;
  transition: color var(--dur-fast) var(--ease-out);
}
.emf-switch-link i { font-size: 11px; transition: transform var(--dur-fast) var(--ease-out); }
#emf-root .emf-switch-link:hover, #emp-root .emf-switch-link:hover { color: var(--em-blue-denim); }
.emf-switch-link:hover i { transform: translateX(3px); }

/* — configurateur de volume (écran 4 stage) — */
.emf-vol { margin-bottom: 18px; }
.emf-vol-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 15px; }
.emf-vol-label { font-family: var(--font-ui); font-size: 14.5px; font-weight: 600; color: var(--em-subtitle); }
.emf-vol-val { font-family: var(--font-ui); font-weight: 700; color: var(--em-navy); white-space: nowrap; }
.emf-vol-val b { font-size: 24px; }
.emf-vol-val span { font-size: 14px; color: var(--em-text-soft); font-weight: 600; margin-left: 1px; }
.emf-vol-row { display: flex; align-items: center; gap: 12px; }
#emf-root .emf-vol-btn, #emp-root .emf-vol-btn {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--em-border); background: var(--em-white); color: var(--em-navy);
  font-size: 24px; font-weight: 600; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
#emf-root .emf-vol-btn:hover, #emp-root .emf-vol-btn:hover { border-color: var(--em-blue); color: var(--em-blue); background: var(--em-blue-tint-04); }
#emf-root .emf-vol-btn:active, #emp-root .emf-vol-btn:active { transform: translateY(1px); }
.emf-vol-slider-wrap { position: relative; flex: 1; min-width: 0; padding-top: 24px; }
.emf-vol-marker {
  position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap;
  font-family: var(--font-ui); font-size: 9.5px; font-weight: 700; letter-spacing: 0.4px;
  text-transform: uppercase; color: var(--em-navy); background: var(--em-gold);
  padding: 3px 8px; border-radius: 999px; display: inline-flex; align-items: center; gap: 4px;
}
.emf-vol-marker i { font-size: 8px; }
.emf-vol-marker::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 4px solid transparent; border-top-color: var(--em-gold);
}
.emf-vol-seances {
  margin-top: 13px; text-align: center;
  font-family: var(--font-serif); font-size: 13.5px; color: var(--em-text-soft);
}
/* réassurance obligatoire sous le curseur (brief §5) */
.emf-vol-reassure {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 12px 15px; margin-bottom: 16px;
  background: var(--em-blue-tint-04); border-radius: var(--radius-sm);
  font-family: var(--font-serif); font-size: 13px; line-height: 1.5; color: var(--em-subtitle);
}
.emf-vol-reassure i { color: var(--em-blue); font-size: 14px; margin-top: 3px; flex-shrink: 0; }
/* taux horaire effectif (ligne de détail du bloc prix — rend le dégressif lisible) */
.emf-hero-rate {
  margin-top: 9px; font-family: var(--font-ui); font-size: 12.5px; font-weight: 600;
  color: var(--em-text-soft);
}
/* nudge de palier (≥12h) — masqué s'il est vide (< 12h : aucune mention) */
.emf-vol-nudge {
  display: flex; gap: 9px; align-items: flex-start;
  margin: -2px 0 16px; padding: 11px 14px;
  background: var(--em-gold-tint-12); border-radius: var(--radius-sm);
  font-family: var(--font-ui); font-size: 12.5px; font-weight: 500; line-height: 1.45; color: var(--em-subtitle);
}
.emf-vol-nudge:empty { display: none; }
.emf-vol-nudge i { color: var(--em-gold-deep); font-size: 13px; margin-top: 2px; flex-shrink: 0; }

/* — mobile — */
#emf-root .emf-overlay[data-mobile="true"] .emf-vol-btn, #emp-root .emf-overlay[data-mobile="true"] .emf-vol-btn { width: 48px; height: 48px; }
.emf-overlay[data-mobile="true"] .emf-vol-reassure,
.emf-overlay[data-mobile="true"] .emf-vol-seances { font-size: 12.5px; }
.emf-overlay[data-mobile="true"] .emf-vol-nudge { font-size: 12px; }

/* titre « situation » : taille commune à tous les écrans (retour owner 20/08).
   Le forçage « une ligne » du 13/07 (.emf-tw-1line → 17 px desktop / 14,5 px mobile) est
   RETIRÉ : il rendait ce seul titre visiblement plus petit que les autres. Mesuré au CSS
   réel : à 25 px le titre tient de toute façon sur une ligne dans la colonne (540 px pour
   550 px disponibles, modale split 1080) ; sous 1080 px et en mobile il passe à deux lignes
   comme « Composez votre stage et découvrez son coût ». Ne pas réintroduire de police
   réduite ici : la contrainte « une ligne » se règle par le libellé, pas par la taille. */

/* sélecteur durée par séance (1h / 1h30 / 2h) — n'affecte pas le prix, seulement le découpage */
.emf-seance { margin-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.emf-seance-label { font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--em-text-soft); }
.emf-seance-opts { display: inline-flex; gap: 4px; background: var(--em-grey-50); border: 1px solid var(--em-border); border-radius: 999px; padding: 3px; }
#emf-root .emf-seance-opt, #emp-root .emf-seance-opt {
  font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--em-text-soft);
  background: transparent; border: none; border-radius: 999px; padding: 6px 14px; cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
#emf-root .emf-seance-opt:hover, #emp-root .emf-seance-opt:hover { color: var(--em-text); }
#emf-root .emf-seance-opt[data-selected="true"], #emp-root .emf-seance-opt[data-selected="true"] { background: var(--em-white); color: var(--em-blue); box-shadow: 0 1px 3px rgba(31,39,56,0.12); }

/* bouton « Retour » sur la confirmation de rappel (point 2 : retour vers l'offre, saisie intacte) */
.emf-confirm-actions { margin-top: 20px; }
#emf-root .emf-confirm-actions .emf-linkbtn, #emp-root .emf-confirm-actions .emf-linkbtn { font-size: 13.5px; display: inline-flex; align-items: center; gap: 7px; }

/* Carte après échange — décision du 18/09/2026. */
#emf-root .emf-contact-next { display:flex; align-items:flex-start; gap:12px; padding:18px; margin:20px 0; border:1px solid #c8dcf7; border-radius:14px; background:#edf4ff; color:#153963; text-align:left; }
#emf-root .emf-contact-next i { margin-top:4px; flex-shrink:0; }
#emf-root .emf-contact-next p { font-family:var(--font-sans); margin:0; font-size:16px; line-height:1.55; font-weight:600; }
#emf-root .emf-confirm-contact .emf-contact-choice { font-size:14px; color:#536477; }