/* ╔══════════════════════════════════════════════════════════════════════╗
   ║   CFA Orientation IA — Chat (refonte 2.0)                            ║
   ║   Crédits : exosteeve.fr × scroler.fr                                ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* ─── Variables ───────────────────────────────────────────────────────── */
:root {
  --cfaoi-primary: #2563eb;
  --cfaoi-primary-dark: #1e40af;
  --cfaoi-primary-light: #eff6ff;
  --cfaoi-accent: #7c3aed;
  --cfaoi-cyan: #06b6d4;
  --cfaoi-secondary: #f59e0b;
  --cfaoi-success: #10b981;
  --cfaoi-danger: #ef4444;
  --cfaoi-bg: #f8fafc;
  --cfaoi-bg-alt: #f1f5f9;
  --cfaoi-surface: #ffffff;
  --cfaoi-text: #0f172a;
  --cfaoi-text-soft: #334155;
  /* 3.5.3 — Contraste renforcé : #64748b (slate-500, ratio 4.5:1, AA limite et
   * visuellement pâle sur les sous-titres, textes de consentement et
   * descriptions) → #475569 (slate-600, ratio ~7:1, AAA). Toujours plus foncé
   * donc plus lisible, jamais moins ; reste nettement plus clair que le texte
   * principal (#0f172a), la hiérarchie visuelle est préservée. Validé sur la
   * préproduction. */
  --cfaoi-text-muted: #475569;
  --cfaoi-border: #e2e8f0;
  --cfaoi-border-soft: #f1f5f9;
  --cfaoi-radius-xl: 24px;
  --cfaoi-radius-lg: 18px;
  --cfaoi-radius-md: 12px;
  --cfaoi-radius-sm: 8px;
  --cfaoi-shadow-soft: 0 10px 40px -12px rgba(15, 23, 42, 0.1);
  --cfaoi-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);

  /* 4.2.0 — « Braise sur fond clair ». UNE définition par valeur, ici : le
     bouclier (cfaoi-theme-shield.css) les LIT via var(--cfaoi-…, repli) — le
     repli est une copie à l'octet, admise par le patron du bouclier (3.13.34).
     Le bleu fait AVANCER (toutes les actions principales portent le même
     dégradé) ; le chaud ne marque que la RÉCOMPENSE, en trois endroits bornés
     (badge « Ta recommandation est prête », filet de la carte formation,
     numéros des prochaines étapes) et jamais sous du texte blanc :
     #f97316 sur blanc = 2,80:1, décor seulement ; #c2410c est le seul chaud
     admis comme TEXTE (5,18:1 sur blanc, 4,88:1 sur #fff7ed). */
  --cfaoi-primary-deep: #1e3a8a;
  --cfaoi-warm: #f97316;
  --cfaoi-warm-deep: #c2410c;
  --cfaoi-warm-soft: #fff7ed;
  --cfaoi-warm-border: #fdba74;
  --cfaoi-grad-primary: linear-gradient(135deg, #2563eb 0%, #1d4ed8 55%, #1e40af 100%);
  --cfaoi-grad-primary-hover: linear-gradient(135deg, #1d4ed8 0%, #1e40af 55%, #1e3a8a 100%);
  --cfaoi-shadow-primary: 0 10px 24px -10px rgba(37, 99, 235, 0.55);
  --cfaoi-shadow-primary-hover: 0 16px 32px -12px rgba(37, 99, 235, 0.65);
  --cfaoi-shadow-lift: 0 12px 24px -14px rgba(15, 23, 42, 0.22);
  --cfaoi-shadow-blue-soft: 0 10px 24px -12px rgba(37, 99, 235, 0.35);
  /* Mouvement : court, dirigé vers le haut, une seule courbe. */
  --cfaoi-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --cfaoi-dur-fast: 160ms;
  --cfaoi-dur: 220ms;
  --cfaoi-dur-slow: 260ms;
}

/* ─── Wrapper ─────────────────────────────────────────────────────────── */
.cfaoi-wrapper {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
  border-radius: var(--cfaoi-radius-xl);
  box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.12);
  display: flex;
  flex-direction: column;
  height: 720px;
  max-height: 90vh;
  overflow: hidden;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  border: 1px solid rgba(148, 163, 184, 0.18);
  color: var(--cfaoi-text);
  animation: cfaoiFadeIn 0.5s ease-out;
  position: relative;
}
.cfaoi-wrapper * { box-sizing: border-box; }

@keyframes cfaoiFadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes cfaoiSlideUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 4.2.0 — Les deux entrées du lot « Braise » : une bulle ou une pastille
   MONTE de 10 px (cfaoiRise, 220 ms), une carte d'écran de 14 px avec un
   très léger scale (cfaoiRiseCard, 260 ms). Toujours opacité + translateY,
   jamais de rebond : sept pastilles qui rebondissent à la suite, c'est un
   gadget. cfaoiSlideUp / cfaoiBounce / cfaoiPulse restent, d'autres règles
   les citent.
   ⚠️ TOUJOURS `animation-fill-mode: backwards`, JAMAIS `both` (ni `forwards`).
   Mesuré à la revue de la 4.2.0 : avec `both`, la dernière image-clé
   (`transform: translateY(0)` / `none`) reste appliquée APRÈS la fin au rang
   de déclaration d'ANIMATION — et dans l'ordre de cascade (CSS Cascade 4
   §6.1) une animation bat toute déclaration d'auteur normale, quelle que soit
   sa spécificité. Tous les `transform` de survol et d'appui des pastilles,
   des trois choix d'aiguillage et des cartes annexes étaient MORTS, et le
   relief -1 px de l'option choisie (qui marchait avant le lot) avec eux ;
   seuls survivaient les `transform: none !important` des états :disabled.
   `backwards` fait exactement ce qu'on demandait à `both` — l'élément reste
   invisible pendant son `animation-delay` (l'escalier tient) — et rend la
   main à la cascade à la fin ; comme `to` EST l'état naturel (opacité 1,
   transform nul), le rendu final est identique à l'octet. */
@keyframes cfaoiRise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes cfaoiRiseCard {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

@keyframes cfaoiPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(0.85); opacity: 0.5; }
}

@keyframes cfaoiBounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40%           { transform: translateY(-6px); opacity: 1; }
}

@keyframes cfaoiPulseRecord {
  0%   { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5); }
  70%  { box-shadow: 0 0 0 14px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* 4.2.0 — Le halo du mode LIVE suit le bleu de l'action (le cyan sort : le
   bouton actif est désormais bleu, cf. le bouclier). */
@keyframes cfaoiLiveGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.5); }
  50%      { box-shadow: 0 0 0 16px rgba(37, 99, 235, 0); }
}

/* ─── Header ──────────────────────────────────────────────────────────── */
.cfaoi-chat-header {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: var(--cfaoi-text);
  padding: 16px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.05);
  z-index: 10;
  position: relative;
}

.cfaoi-header-avatar {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, var(--cfaoi-cyan), var(--cfaoi-accent));
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  flex-shrink: 0;
  box-shadow: 0 6px 18px -4px rgba(124, 58, 237, 0.4), 0 0 0 1px rgba(255,255,255,0.4) inset;
  position: relative;
}
.cfaoi-header-avatar::after {
  content: "";
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 12px;
  height: 12px;
  background: var(--cfaoi-success);
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
  animation: cfaoiPulse 2s ease-in-out infinite;
}
.cfaoi-header-avatar svg { width: 24px; height: 24px; }

.cfaoi-header-info { flex: 1; min-width: 0; }
.cfaoi-header-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--cfaoi-text);
}
.cfaoi-header-subtitle {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--cfaoi-text-muted);
  display: flex;
  align-items: center;
  gap: 5px;
}
.cfaoi-header-subtitle::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--cfaoi-success);
  border-radius: 50%;
}

.cfaoi-voice-toggle {
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 10px;
  padding: 8px;
  cursor: pointer;
  color: var(--cfaoi-text-muted);
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cfaoi-voice-toggle:hover {
  background: var(--cfaoi-primary-light);
  border-color: var(--cfaoi-primary);
  color: var(--cfaoi-primary);
}

/* ─── Progress bar (sous le header) ───────────────────────────────────── */
/* 4.2.0 — 4 px, aplat bleu (le seul indicateur d'avancement du chat : un
   composant d'interface, donc ≥ 3:1 sur sa piste — #2563eb sur #e2e8f0 =
   4,19:1 ; un dégradé chaud ou cyan tomberait entre 1,7 et 2,3). La COULEUR
   est réaffirmée par le bouclier, ici la géométrie et le mouvement. */
.cfaoi-progress {
  height: 4px;
  background: var(--cfaoi-border);
  position: relative;
  overflow: hidden;
}
.cfaoi-progress-fill {
  height: 100%;
  background: var(--cfaoi-primary);
  width: 0%;
  transition: width 600ms var(--cfaoi-ease-out, ease-out);
  border-radius: 0 100px 100px 0;
}

/* ─── Body (zone de messages) ─────────────────────────────────────────── */
.cfaoi-chat-body {
  flex: 1;
  overflow-y: auto;
  /* 2.6.0 — Padding bas augmenté (14 → 28 px) pour que le dernier
     choix d'une question QCM longue ne soit jamais collé à la barre
     d'input. Avec gap: 12px entre messages et un footer sticky en
     bas, 14 px laissait trop peu d'air visuel. */
  padding: 22px 22px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scroll-behavior: smooth;
}
.cfaoi-chat-body::-webkit-scrollbar { width: 6px; }
.cfaoi-chat-body::-webkit-scrollbar-track { background: transparent; }
.cfaoi-chat-body::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.4);
  border-radius: 100px;
}
.cfaoi-chat-body::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, 0.6); }

/* ─── Bulles de message ───────────────────────────────────────────────── */
.cfaoi-message {
  max-width: 82%;
  padding: 12px 16px;
  border-radius: var(--cfaoi-radius-lg);
  font-size: 14.5px;
  line-height: 1.5;
  animation: cfaoiRise var(--cfaoi-dur, 220ms) var(--cfaoi-ease-out, ease-out) backwards;
  position: relative;
}
.cfaoi-message-ai {
  background: var(--cfaoi-surface);
  color: var(--cfaoi-text);
  align-self: flex-start;
  border: 1px solid var(--cfaoi-border-soft);
  border-bottom-left-radius: 6px;
  box-shadow: var(--cfaoi-shadow-sm);
}
.cfaoi-message-ai::before {
  content: "";
  position: absolute;
  top: 0;
  left: -10px;
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, var(--cfaoi-cyan), var(--cfaoi-accent));
  border-radius: 50%;
  border: 3px solid var(--cfaoi-bg);
  box-shadow: 0 2px 6px -1px rgba(124, 58, 237, 0.3);
}
.cfaoi-message-user {
  background: linear-gradient(135deg, var(--cfaoi-primary), #1e40af);
  color: #ffffff;
  align-self: flex-end;
  border-bottom-right-radius: 6px;
  box-shadow: 0 6px 16px -6px rgba(37, 99, 235, 0.45);
}

/* Bouton "écouter" dans message AI */
.cfaoi-play-btn {
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--cfaoi-primary-light);
  color: var(--cfaoi-primary);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
  vertical-align: middle;
  /* 4.2.0 (revue) — les couleurs de survol vivent dans le bouclier (dégradé
     des actions, blanc) : la copie qui était ici (aplat #2563eb) divergeait et
     perdait. Le scale du survol vit dans le bloc @media (hover: hover) en fin
     de fichier (au tactile, un survol colle après le tap), la zone de frappe
     de 44 px juste avant lui. */
}

/* ─── Indicateur "Aria écrit..." ──────────────────────────────────────── */
.cfaoi-typing {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 4px;
}
.cfaoi-typing-dot {
  width: 8px;
  height: 8px;
  background: linear-gradient(135deg, var(--cfaoi-cyan), var(--cfaoi-accent));
  border-radius: 50%;
  animation: cfaoiBounce 1.2s ease-in-out infinite;
}
.cfaoi-typing-dot:nth-child(2) { animation-delay: 0.15s; }
.cfaoi-typing-dot:nth-child(3) { animation-delay: 0.3s; }

/* ─── Boutons de choix QCM ────────────────────────────────────────────── */
/* 2.5.6 — Réponses suggérées : refonte en vraies cartes/boutons lisibles.
   • Conteneur : colonne, gap régulier, plus de padding-left parasite
     (qui décalait visuellement la liste et exposait un artefact bleu).
   • Boutons : largeur 100%, fond blanc, bordure douce, rayon "carte"
     (~14px), texte aligné à gauche, retour à la ligne propre.
   • Suppression de la barre verticale ::before en accent bleu : c'est
     elle qui apparaissait à gauche de la liste comme "artefact bleu"
     (visible sur :hover / :focus / :active). Remplacée par un simple
     soulignement de bordure côté hover, plus discret. */
.cfaoi-choices-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 6px 0 8px;
  align-self: stretch;
  width: 100%;
  /* 4.2.0 — Plus d'animation sur le CONTENEUR : chaque pastille entre
     désormais seule, en escalier (cfaoiRise + animation-delay plus bas).
     Les deux ensemble donnaient une double apparition. */
}
.cfaoi-choice-button {
  display: block;
  width: 100%;
  background: var(--cfaoi-surface);
  border: 1px solid var(--cfaoi-border);
  color: var(--cfaoi-text);
  padding: 13px 16px;
  border-radius: var(--cfaoi-radius-md);
  cursor: pointer;
  text-align: left;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 500;
  font-family: inherit;
  white-space: normal;
  word-break: break-word;
  /* 4.2.0 (revue) — la transition vit dans la liste (0,2,0) en fin de fichier :
     écrite ici à (0,1,0), elle perdait contre le reset `.cfaoi-wrapper button`
     (0,1,1) du bouclier, qui déclare lui aussi `transition`. */
  position: relative;
  overflow: hidden;
  /* 4.2.0 — Entrée en escalier : 45 ms par pastille, plafonnée à la 7e
     (au-delà elles arrivent ensemble — une liste de douze choix qui défile
     pendant une demi-seconde n'aide personne). `backwards` : la pastille est
     invisible AVANT son tour (sinon elle clignote), et la cascade reprend la
     main APRÈS — avec `both`, le glissement de survol et l'appui étaient morts
     (cf. l'en-tête des @keyframes). */
  animation: cfaoiRise var(--cfaoi-dur, 220ms) var(--cfaoi-ease-out, ease-out) backwards;
}
.cfaoi-choices-container .cfaoi-choice-button:nth-child(2)    { animation-delay: 45ms; }
.cfaoi-choices-container .cfaoi-choice-button:nth-child(3)    { animation-delay: 90ms; }
.cfaoi-choices-container .cfaoi-choice-button:nth-child(4)    { animation-delay: 135ms; }
.cfaoi-choices-container .cfaoi-choice-button:nth-child(5)    { animation-delay: 180ms; }
.cfaoi-choices-container .cfaoi-choice-button:nth-child(6)    { animation-delay: 225ms; }
.cfaoi-choices-container .cfaoi-choice-button:nth-child(n+7)  { animation-delay: 270ms; }
/* 2.5.6 — La barre verticale gradient ::before est neutralisée :
   elle créait un artefact bleu visible à gauche des choix dans
   certains états (focus, transition d'animation entrée). On la
   garde dans le DOM (compat éventuelle) mais invisible. */
.cfaoi-choice-button::before {
  content: none;
}
/* 4.2.0 (revue) — Les états :hover / :focus-visible / :active de la pastille
   ne vivent QUE dans le bouclier (fond, bordure, liseré, anneau de 3 px) et,
   pour le mouvement, dans les deux règles (0,3,0) en fin de fichier. Les
   copies qui étaient ici divergeaient déjà (anneau 2 px contre 3, appui
   #eff6ff contre #dbeafe) et perdaient toutes : des déclarations mortes qui
   mentent au prochain lecteur (V8). */

/* ─── Footer (input + micro) ──────────────────────────────────────────── */
.cfaoi-chat-footer {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 14px 18px 16px;
  border-top: 1px solid rgba(15, 23, 42, 0.05);
  display: flex;
  gap: 8px;
  align-items: center;
}

.cfaoi-input-text {
  flex: 1;
  padding: 12px 16px;
  border: 1.5px solid var(--cfaoi-border);
  border-radius: 100px;
  font-size: 14px;
  font-family: inherit;
  background: var(--cfaoi-bg);
  color: var(--cfaoi-text);
  transition: all 0.2s ease;
  outline: none;
}
.cfaoi-input-text:focus {
  border-color: var(--cfaoi-primary);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}
.cfaoi-input-text::placeholder { color: var(--cfaoi-text-muted); }
.cfaoi-input-text:disabled { background: #f1f5f9; cursor: not-allowed; }

.cfaoi-btn-mic, .cfaoi-btn-live {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1.5px solid var(--cfaoi-border);
  background: var(--cfaoi-surface);
  color: var(--cfaoi-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.cfaoi-btn-mic svg, .cfaoi-btn-live svg {
  width: 24px !important;
  height: 24px !important;
}
.cfaoi-btn-mic:hover, .cfaoi-btn-live:hover {
  background: var(--cfaoi-primary-light);
  color: var(--cfaoi-primary);
  border-color: var(--cfaoi-primary);
}
/* 4.2.0 — Les COULEURS de cet état sont réaffirmées au bouclier à (0,3,0) :
   à (0,2,0) sans !important, elles perdaient contre le fond blanc du
   bouclier — le micro ne rougissait pas. Mêmes valeurs ici (#b91c1c pour
   l'icône : 5,30:1 sur #fee2e2). */
.cfaoi-btn-mic.cfaoi-recording {
  background: #fee2e2;
  color: #b91c1c;
  border-color: var(--cfaoi-danger);
  animation: cfaoiPulseRecord 1.4s ease-out infinite;
}
/* 3.13.5 — LE MICRO INVITE À RACONTER (question sur les expériences passées).
   Demande du client : « icône clignotante suggérée ».

   ⚠️ LE SIGNAL PASSE PAR `animation` ET `box-shadow`, JAMAIS PAR LA COULEUR.
   `cfaoi-theme-shield.css` écrase `color`, `background` et `border-color` sur
   `.cfaoi-wrapper .cfaoi-btn-mic` avec `!important` — un clignotement coloré
   déclaré ici serait purement et simplement invisible sur le site. Ces deux
   propriétés-là, le bouclier ne les déclare pas : c'est d'ailleurs pourquoi la
   pulsation d'enregistrement survit depuis toujours.

   Halo AMBRE et rythme plus lent (2s) que l'enregistrement (1,4s, rouge) : ce
   sont deux états différents, ils ne doivent pas se confondre. L'invitation
   tourne pendant toute la durée de la question, l'enregistrement quelques
   secondes — une pulsation d'invitation trop vive fatiguerait. */
@keyframes cfaoiPulseInvite {
  0%   { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.55); }
  70%  { box-shadow: 0 0 0 12px rgba(245, 158, 11, 0); }
  100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}
.cfaoi-btn-mic.cfaoi-mic-invite {
  animation: cfaoiPulseInvite 2s ease-out infinite;
}

.cfaoi-btn-live.cfaoi-live-active {
  background: var(--cfaoi-grad-primary);
  color: #fff;
  border-color: transparent;
  animation: cfaoiLiveGlow 1.8s ease-in-out infinite;
}

.cfaoi-btn-send {
  background: linear-gradient(135deg, var(--cfaoi-primary), var(--cfaoi-primary-dark));
  color: #ffffff;
  border: none;
  padding: 0 18px;
  height: 42px;
  border-radius: 100px;
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px -3px rgba(37, 99, 235, 0.4);
}
.cfaoi-btn-send:hover {
  box-shadow: 0 8px 20px -4px rgba(37, 99, 235, 0.5);
}
.cfaoi-btn-send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* ─── Mode LIVE (conversation continue) ───────────────────────────────── */
.cfaoi-wrapper[data-live="1"] .cfaoi-chat-footer {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.06), rgba(30, 64, 175, 0.06));
}
/* 4.2.0 — Blanc sur le cyan→violet d'origine = 2,43:1. Le bandeau est bleu
   (#1d4ed8 → #1e40af : 6,70 → 8,72:1) ; ses COULEURS vivent dans le
   bouclier — le thème impose `background: transparent !important` sur tout,
   une couleur écrite ici seule ne se rendrait jamais. */
.cfaoi-live-banner {
  display: none;
  padding: 14px 18px;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  align-items: center;
  justify-content: center;
  gap: 12px;
  letter-spacing: 0.01em;
}
.cfaoi-wrapper[data-live="1"] .cfaoi-live-banner { display: flex; }
.cfaoi-live-indicator {
  width: 12px; height: 12px;
  background: #fff; border-radius: 50%;
  position: relative;
  animation: cfaoiPulse 1.2s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(255,255,255,0.7);
}
.cfaoi-live-indicator::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.6);
  animation: cfaoiLiveRing 1.6s ease-out infinite;
}
@keyframes cfaoiLiveRing {
  0%   { transform: scale(0.8); opacity: 0.9; }
  100% { transform: scale(1.6); opacity: 0;   }
}

/* ─── Loading initial ─────────────────────────────────────────────────── */
.cfaoi-loading-initial {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  color: var(--cfaoi-text-muted);
  font-size: 14px;
}
.cfaoi-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--cfaoi-border);
  border-top-color: var(--cfaoi-primary);
  border-radius: 50%;
  animation: cfaoiSpin 0.9s linear infinite;
}
@keyframes cfaoiSpin { to { transform: rotate(360deg); } }

/* ─── Welcome screen ──────────────────────────────────────────────────── */
.cfaoi-welcome-container {
  flex: 1;
  min-height: 0;            /* 3.6.4 — sans lui, un enfant flex ne descend pas
                              sous sa hauteur de contenu et overflow-y n'agit
                              jamais (piège classique du flex). */
  display: flex;
  /* 3.6.4 — ANTI-ROGNAGE À TOUTES LES LARGEURS, pas seulement sous 480 px.
     Symptôme (devcfa, desktop) : sur l'écran d'aiguillage, la porte d'entrée
     employeur « Je dépose mon besoin » était coupée en bas du pop-up, sans
     défilement. Cause : le pop-up borne sa hauteur (`overflow: hidden`), et ce
     conteneur centrait son enfant (`align-items: center`) sans jamais défiler —
     ce qui dépassait était perdu. Le correctif de la 3.3.1 posait pourtant la
     technique canonique (flex-start + marges auto + overflow-y), mais UNIQUEMENT
     dans `@media (max-width: 480px)`, alors que le rognage ne dépend pas de la
     largeur. On la remonte ici : les marges auto de la carte centrent quand il y
     a de la place, `flex-start` colle en haut et `overflow-y` fait défiler
     sinon. Aucune valeur de police ni cible tactile n'est touchée. */
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 30px;
}
.cfaoi-welcome-card {
  text-align: center;
  max-width: 380px;
}
/* 4.2.0 (revue) — UN SEUL NIVEAU DE MONTÉE PAR ÉCRAN. La carte d'écran monte
   SAUF quand elle contient déjà des enfants qui montent à l'entrée — les trois
   choix de l'aiguillage, la carte « formation trouvée », l'encart « prochaine
   étape » : deux translations simultanées s'additionnaient (28 px au départ),
   le motif même que le lot avait retiré sur les pastilles. On garde les
   escaliers qui portent une information (ce sont les enfants) et on retire la
   montée du parent. Les cartes SANS enfant animé (accueil, identité, reprise,
   secteur, coordonnées, fin de parcours…) gardent la leur. `.cfaoi-routing-card`
   porte toujours `.cfaoi-welcome-card` (routingScreenShell) : UNE règle pour
   les deux, sinon la seconde réanimait ce que la première exclut. Sans prise en
   charge de `:has()`, la règle est ignorée : aucune montée de carte, rien de
   cassé. Le bloc reduced-motion nomme toujours les deux classes. */
.cfaoi-welcome-card:not(:has(.cfaoi-routing-choices, .cfaoi-formation-card, .cfaoi-routing-next)) {
  animation: cfaoiRiseCard var(--cfaoi-dur-slow, 260ms) var(--cfaoi-ease-out, ease-out) backwards;
}
/* La carte se centre verticalement tant qu'elle tient (marges auto), et ne
   déborde jamais vers le haut sinon. Les deux sélecteurs sont nommés car
   `.cfaoi-routing-card` pose `margin: 0 auto` et gagnerait à spécificité égale. */
.cfaoi-welcome-card,
.cfaoi-routing-card {
  margin-top: auto;
  margin-bottom: auto;
}
.cfaoi-welcome-avatar {
  width: 96px;
  height: 96px;
  margin: 0 auto 20px;
  background: linear-gradient(135deg, var(--cfaoi-cyan), var(--cfaoi-accent));
  border-radius: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 16px 40px -8px rgba(124, 58, 237, 0.4);
}
.cfaoi-welcome-title {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--cfaoi-text);
}
.cfaoi-welcome-subtitle {
  margin: 0 0 24px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--cfaoi-text-muted);
}
.cfaoi-welcome-btn-primary {
  display: block;
  width: 100%;
  padding: 14px 22px;
  background: linear-gradient(135deg, var(--cfaoi-primary), var(--cfaoi-primary-dark));
  color: #fff;
  border: none;
  border-radius: var(--cfaoi-radius-md);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 8px;
  box-shadow: 0 8px 24px -8px rgba(37, 99, 235, 0.5);
  font-family: inherit;
  /* 4.2.0 (revue) — transition dans la liste (0,2,0) en fin de fichier : ici,
     à (0,1,0), elle perdait contre le reset `.cfaoi-wrapper button` (0,1,1). */
}
/* 4.2.0 — le lever de survol vit dans le bloc @media (hover: hover) en fin de
   fichier ; l'appui, lui, vaut partout (retour haptique visuel). */
.cfaoi-welcome-btn-primary:active,
.cfaoi-welcome-btn-secondary:active { transform: translateY(0) scale(0.985); }
.cfaoi-welcome-btn-secondary {
  display: block;
  width: 100%;
  padding: 14px 22px;
  background: transparent;
  color: var(--cfaoi-text-muted);
  border: 1.5px solid var(--cfaoi-border);
  border-radius: var(--cfaoi-radius-md);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  /* 4.2.0 (revue) — transition dans la liste (0,2,0) en fin de fichier (même
     cause). Les couleurs de survol vivent dans le bouclier : la copie qui
     était ici (texte #2563eb) divergeait du bouclier (#1e40af) et perdait. */
}
.cfaoi-welcome-footer { margin-top: 22px; }
/* 4.2.0 — Couleurs, tailles et marges de ces deux lignes vivent dans le
   bouclier : #94a3b8 à 11,5 px valait 2,56:1 ; le thème remet de toute façon
   `color` et `margin` à zéro sur tout <p>. (Revue : la marge `0 0 6px` écrite
   ici divergeait des 8 px du bouclier — retirée.) */
.cfaoi-welcome-mention { font-size: 12.5px; }
.cfaoi-welcome-microtext { margin: 0; font-size: 12px; }

/* ─── Result card (résultat final) ────────────────────────────────────── */
/* 4.2.0 (revue) — Le wrapper de la modale ne monte PLUS : la modale fond déjà
   (240 ms), et sous lui montaient la carte puis chaque carte annexe — trois
   translations simultanées, 38 px cumulés au départ. Un seul niveau par
   écran : ce sont les escaliers (badge, cartes annexes) qui restent. */
.cfaoi-result-card {
  background: linear-gradient(135deg, #fff 0%, #f8fafc 100%);
  border: 1px solid var(--cfaoi-border);
  border-radius: var(--cfaoi-radius-lg);
  padding: 24px;
  text-align: center;
  margin: 8px 0;
  box-shadow: var(--cfaoi-shadow-soft);
}
.cfaoi-badge {
  display: inline-block;
  background: linear-gradient(135deg, var(--cfaoi-cyan), var(--cfaoi-accent));
  color: #fff;
  padding: 5px 14px;
  border-radius: 100px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.cfaoi-desc {
  margin: 6px 0 0;
  font-size: 13.5px;
  color: var(--cfaoi-text-muted);
}
.cfaoi-confidence-bar {
  width: 100%;
  height: 8px;
  background: var(--cfaoi-border-soft);
  border-radius: 100px;
  overflow: hidden;
  margin-top: 6px;
}
.cfaoi-confidence-fill {
  height: 100%;
  background: var(--cfaoi-primary);
  border-radius: 100px;
  transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}
/* 07/09/2026 — Les quatre règles `.cfaoi-alt-formations` ont été retirées :
   plus aucun émetteur dans le dépôt. Elles habillaient le bloc « Autres
   formations » que la tâche 5.3 a supprimé du résultat (CLAUDE.md §15 : le
   jeune voit 1 recommandation + 2 alternatives, et rien de plus). Les cartes
   d'alternatives, elles, sont plus bas et bien vivantes. */

/* ─── 2.4.8 — Related formations (cartes secondaires) ────────────────── */
.cfaoi-main-meta {
  margin: 0 0 4px;
  font-size: 12.5px;
  color: var(--cfaoi-text-muted);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.cfaoi-related-formations {
  margin-top: 28px;
  text-align: left;
  padding-top: 18px;
  border-top: 1px solid var(--cfaoi-border-soft);
}
.cfaoi-related-title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: var(--cfaoi-text);
  letter-spacing: -0.01em;
}
.cfaoi-related-intro {
  margin: 0 0 14px;
  font-size: 13.5px;
  color: var(--cfaoi-text-muted);
  line-height: 1.5;
}
.cfaoi-related-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 540px) {
  .cfaoi-related-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 880px) {
  .cfaoi-related-grid { grid-template-columns: 1fr 1fr 1fr; }
}
.cfaoi-related-card {
  background: var(--cfaoi-surface);
  border: 1px solid var(--cfaoi-border);
  border-radius: var(--cfaoi-radius-md);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.cfaoi-related-card:hover {
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.07);
  border-color: var(--cfaoi-primary);
}
.cfaoi-related-card--hidden { display: none; }
.cfaoi-related-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}
.cfaoi-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.4;
}
.cfaoi-pill--level {
  background: var(--cfaoi-bg);
  color: var(--cfaoi-text-soft);
  border: 1px solid var(--cfaoi-border);
}
.cfaoi-pill--pct {
  background: linear-gradient(135deg, var(--cfaoi-cyan), var(--cfaoi-accent));
  color: #fff;
}
.cfaoi-related-card__title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--cfaoi-text);
}
.cfaoi-related-card__family {
  margin: 0;
  font-size: 12.5px;
  color: var(--cfaoi-text-muted);
  font-style: italic;
}
.cfaoi-related-card__reason {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--cfaoi-text-soft);
  line-height: 1.45;
}
.cfaoi-related-card__actions {
  margin-top: auto;
  padding-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cfaoi-related-link {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 100px;
  background: var(--cfaoi-primary);
  color: #fff;
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background 0.18s ease, transform 0.18s ease;
}
/* 4.2.0 (revue) — le survol (dégradé) vit dans le bouclier ; l'aplat
   #1e40af écrit ici divergeait et perdait. */
.cfaoi-related-link--soft {
  background: transparent;
  color: var(--cfaoi-primary);
  border: 1px solid var(--cfaoi-border);
}
.cfaoi-related-link--soft:hover {
  background: var(--cfaoi-bg);
  color: var(--cfaoi-primary);
}
.cfaoi-related-more {
  margin-top: 16px;
  text-align: center;
}
.cfaoi-related-more-btn {
  background: var(--cfaoi-bg);
  color: var(--cfaoi-primary);
  border: 1px solid var(--cfaoi-border);
  border-radius: 100px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.cfaoi-related-more-btn:hover {
  background: var(--cfaoi-surface);
  border-color: var(--cfaoi-primary);
}
.cfaoi-related-total {
  margin: 14px 0 0;
  text-align: center;
  font-size: 12px;
  color: var(--cfaoi-text-muted);
  font-style: italic;
}
/* 2.5.8 — État vide quand aucune alternative n'atteint le seuil
   RELATED_MIN_PERCENT (55 %). Présenté comme une note discrète, pas
   comme un bandeau d'erreur, pour ne pas inquiéter le candidat. */
.cfaoi-related-formations--empty {
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--cfaoi-surface);
  border: 1px dashed var(--cfaoi-border);
  border-radius: var(--cfaoi-radius-md);
}
.cfaoi-related-empty {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--cfaoi-text-muted);
  text-align: center;
}

/* ─── Lead form ───────────────────────────────────────────────────────── */
.cfaoi-lead-form-card {
  background: var(--cfaoi-surface);
  border: 1px solid var(--cfaoi-border);
  border-radius: var(--cfaoi-radius-lg);
  padding: 22px 24px;
  margin-top: 12px;
  /* 4.2.0 (revue) — plus de montée ici : la porte de coordonnées vit dans la
     modale (showLeadGate), qui fond, et son badge monte 80 ms après — une
     seconde montée sur la carte faisait l'empilement wrapper > carte > badge. */
}
.cfaoi-lead-form-card h4 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 700;
  color: var(--cfaoi-text);
}
.cfaoi-lead-form-card p {
  margin: 0 0 18px;
  font-size: 13.5px;
  color: var(--cfaoi-text-muted);
  line-height: 1.5;
}
.cfaoi-form-group { margin-bottom: 12px; }
.cfaoi-form-control {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--cfaoi-border);
  border-radius: var(--cfaoi-radius-sm);
  font-size: 14px;
  font-family: inherit;
  background: var(--cfaoi-bg);
  color: var(--cfaoi-text);
  transition: all 0.2s ease;
  outline: none;
}
.cfaoi-form-control:focus {
  border-color: var(--cfaoi-primary);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
/* 4.2.0 — Les COULEURS du bouton principal ne vivent plus ici : le bouclier
   les réaffirme en !important (dégradé bleu, blanc, ombre bleue), et deux
   définitions divergent toujours (V8). Reste la mise en page et le mouvement.
   Le lever de survol est dans le bloc @media (hover: hover) en fin de fichier. */
.cfaoi-btn-submit {
  width: 100%;
  padding: 13px 22px;
  border: none;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  margin-top: 6px;
  /* 4.2.0 (revue) — transition (opacité comprise) dans la liste (0,2,0) en fin
     de fichier : ici, à (0,1,0), elle perdait contre le reset des <button>.
     L'état :disabled (0,55 d'opacité, transform nul) et l'état « en cours »
     ([aria-busy="true"]) vivent dans le bouclier : la copie qui était ici
     disait 0,6 et perdait. */
}
.cfaoi-btn-submit:active { transform: translateY(0) scale(0.985); }

/* ─── Page dédiée « Test d'orientation » ([cfa_test_orientation]) ──────
   3.3.1 (reprise) — Ces quatre propriétés partaient en style INLINE depuis
   render_test_shortcode(). Une déclaration inline bat toute règle de feuille
   de style sans !important : la règle mobile ci-dessous ne pouvait donc rien
   reprendre, et le module restait un bloc arrondi de 720 px flottant à 30 px
   du bord dans une page qui défile — soit exactement les « deux zones de
   défilement imbriquées » que la page de cadrage annonçait comme impossibles.
   Seule max-width reste inline (attribut du shortcode, valeur dynamique).   */
.cfaoi-test-page-wrapper {
  margin: 30px auto;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 60px -20px rgba(15, 23, 42, 0.18);
}

/* ─── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* 3.3.1 (reprise) — !important ET exclusion du mode pop-up.
     • !important : l'attribut height="720px" du shortcode part en style
       inline sur #cfaoi-app-root ; sans !important, le plein écran mobile
       était tout simplement inatteignable par [cfa_test_orientation], le
       shortcode pourtant recommandé au CFA pour la page dédiée.
     • :not([data-popup-mode="1"]) : le chat embarqué dans le pop-up doit
       continuer de remplir SA carte (.cfaoi-pop-chat .cfaoi-wrapper impose
       height:100% !important) et non la fenêtre — sans cette exclusion, on
       transformerait un correctif de page dédiée en régression du pop-up,
       qui est le canal d'entrée par défaut. */
  /* Deux passes, comme la règle historique juste en dessous : un navigateur
     sans unité dvh ignore la seconde déclaration et garde le 100vh. */
  .cfaoi-wrapper:not([data-popup-mode="1"]) {
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
  }
  .cfaoi-wrapper:not([data-popup-mode="1"]) {
    height: 100dvh !important;
    max-height: 100dvh !important;
  }
  .cfaoi-test-page-wrapper {
    margin: 0 !important;
    max-width: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .cfaoi-wrapper { height: 100vh; max-height: 100vh; border-radius: 0; }
  .cfaoi-wrapper { height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .cfaoi-message { max-width: 88%; font-size: 14px; }
  .cfaoi-chat-header { padding: 12px 16px; }
  .cfaoi-header-avatar { width: 38px; height: 38px; border-radius: 12px; }
  .cfaoi-chat-body { padding: 16px 14px 8px; }
  .cfaoi-chat-footer { padding: 10px 12px 12px; gap: 8px; }
  .cfaoi-input-text { padding: 10px 14px; font-size: 13.5px; min-width: 0; }
  .cfaoi-btn-mic, .cfaoi-btn-live { width: 44px; height: 44px; }
  .cfaoi-btn-mic svg, .cfaoi-btn-live svg { width: 22px !important; height: 22px !important; }
  /* 4.2.0 — 44 px (était 38) : la cible tactile, déclarée aussi au bouclier,
     qui est celui qui gagne sur ces trois boutons ronds. */
  .cfaoi-btn-send { height: 44px; padding: 0 14px; }
  .cfaoi-lead-form-card { padding: 18px 18px; }
  /* 4.2.0 — Le détail du consentement prend toute la largeur de la carte
     (319 px utiles au lieu de 287) ; le bouton « Voir le détail » garde son
     alignement sous la phrase. ⚠️ (0,2,0) exprès : la règle de base
     `.cfaoi-consent__detail { margin: 8px 0 2px 32px }` est déclarée ~1 000
     lignes PLUS BAS à (0,1,0) — à spécificité égale elle gagnait par l'ordre,
     et cette règle-ci était morte (revue 4.2.0). Même chose pour le grand
     nombre plus bas. */
  .cfaoi-wrapper .cfaoi-consent__detail { margin-left: 0; }
  /* 4.2.0 — Les duos prénom/nom des formulaires A et B posent leur grille en
     style INLINE (`1fr 1fr`) : seule une règle d'attribut en !important peut
     les replier. La règle de .cfaoi-lead-form-card (l. ~1432) ne visait qu'eux
     dans la modale ; les écrans guidés restaient à deux colonnes sur 343 px. */
  .cfaoi-wrapper .cfaoi-routing-form .cfaoi-form-group[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  .cfaoi-wrapper .cfaoi-routing-bignum { font-size: 26px; }
}

/* ─── Reduced motion ──────────────────────────────────────────────────── */
/* 4.2.0 — « IMMOBILISER SANS SUPPRIMER », sélecteur par sélecteur.
   • Les animations d'entrée sont coupées : une animation à `none` laisse
     l'élément dans son état NATUREL (opacité 1, position finale) — rien ne
     disparaît. ⚠️ La liste nomme aussi la coche `--active::before` : une
     règle sur l'élément n'atteint pas son pseudo-élément, et `animation` ne
     s'hérite pas (revue 4.2.0).
   • Les levers de survol sont neutralisés UN PAR UN, jamais par un
     `transform: none` en nappe : la page du CV (`.cfaoi-cv-page`) tient son
     zoom par `transform: scale()`, et la carte du pop-up son centrage par
     `translate(-50%, -50%)` — une nappe les casserait tous les deux.
   • Les transitions sont bornées à 1 ms (jamais 0 : certains navigateurs ne
     lèvent pas `transitionend` à 0) ; la barre de progression et la jauge
     SAUTENT à leur valeur.
   • 3.13.5 — Les trois pulsations du pied de chat : l'invitation tourne
     pendant TOUTE la durée d'une question, bien plus insistante qu'un halo
     d'enregistrement. On ne SUPPRIME pas le signal, on l'immobilise : un
     contour ambre permanent reste lisible, là où « rien » priverait le jeune
     de l'affordance. */
@media (prefers-reduced-motion: reduce) {
  .cfaoi-wrapper, .cfaoi-message, .cfaoi-choice-button, .cfaoi-choices-container,
  .cfaoi-welcome-card, .cfaoi-routing-card, .cfaoi-result-wrapper, .cfaoi-result-card,
  .cfaoi-lead-form-card, .cfaoi-formation-card, .cfaoi-routing-next, .cfaoi-open-profile-door,
  .cfaoi-consent__detail, .cfaoi-routing-intent, .cfaoi-company-state__opt,
  .cfaoi-company-state__opt--active::before,
  .cfaoi-result-overlay .cfaoi-badge, .cfaoi-result-overlay .cfaoi-related-card,
  .cfaoi-search-metier__results { animation: none !important; }
  .cfaoi-typing-dot, .cfaoi-header-avatar::after, .cfaoi-live-indicator, .cfaoi-live-indicator::before,
  .cfaoi-typing-label::after { animation: none !important; opacity: 1; }
  .cfaoi-wrapper .cfaoi-btn-mic.cfaoi-recording,
  .cfaoi-wrapper .cfaoi-btn-live.cfaoi-live-active { animation: none; }
  .cfaoi-wrapper .cfaoi-btn-mic.cfaoi-mic-invite {
    animation: none;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.45);
  }
  /* Les levers et glissements de survol, un par un. (0,2,0) + !important bat
     le bloc @media (hover: hover) du bouclier, écrit sans !important exprès. */
  .cfaoi-wrapper .cfaoi-btn-submit:hover, .cfaoi-wrapper .cfaoi-welcome-btn-primary:hover,
  .cfaoi-wrapper .cfaoi-welcome-btn-secondary:hover, .cfaoi-wrapper .cfaoi-choice-button:hover,
  .cfaoi-wrapper .cfaoi-company-state__opt:hover, .cfaoi-wrapper .cfaoi-search-metier__alt:hover,
  .cfaoi-wrapper .cfaoi-routing-alt-btn:hover, .cfaoi-wrapper .cfaoi-routing-back:hover,
  .cfaoi-wrapper .cfaoi-choice-btn:hover, .cfaoi-wrapper .cfaoi-btn-send:hover,
  .cfaoi-wrapper .cfaoi-play-btn:hover, .cfaoi-wrapper .cfaoi-consent__toggle:hover,
  .cfaoi-wrapper .cfaoi-btn-ghost:hover,
  .cfaoi-result-overlay .cfaoi-main-action:hover, .cfaoi-result-overlay .cfaoi-related-card:hover,
  .cfaoi-result-overlay .cfaoi-related-link:hover, .cfaoi-result-overlay .cfaoi-result-close:hover,
  .cfaoi-result-overlay .cfaoi-btn-submit:hover,
  .cfaoi-wrapper .cfaoi-btn-submit:active, .cfaoi-wrapper .cfaoi-welcome-btn-primary:active,
  .cfaoi-wrapper .cfaoi-welcome-btn-secondary:active, .cfaoi-wrapper .cfaoi-choice-button:active,
  .cfaoi-wrapper .cfaoi-company-state__opt:active, .cfaoi-wrapper .cfaoi-choice-btn:active,
  .cfaoi-result-overlay .cfaoi-main-action:active,
  /* (revue 4.2.0) les six appuis qui manquaient à la liste : */
  .cfaoi-wrapper .cfaoi-btn-send:active, .cfaoi-result-overlay .cfaoi-related-link:active,
  .cfaoi-wrapper .cfaoi-search-metier__alt:active, .cfaoi-wrapper .cfaoi-routing-alt-btn:active,
  .cfaoi-wrapper .cfaoi-btn-ghost:active, .cfaoi-wrapper .cfaoi-consent__toggle:active { transform: none !important; }
  .cfaoi-wrapper .cfaoi-consent__toggle::after { transition: none !important; }
  .cfaoi-wrapper *, .cfaoi-result-overlay * { transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .cfaoi-progress-fill, .cfaoi-result-overlay .cfaoi-confidence-fill { transition: none !important; }
}

/* ──────────────────────────────────────────────────────────────────────
   1.1.4 — Avatars Aria (image) dans l'app chat
   .cfaoi-aria-pic--sm  : petit format (header chat)
   .cfaoi-aria-pic--lg  : grand format (welcome card)
   ────────────────────────────────────────────────────────────────────── */
.cfaoi-aria-pic {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
    flex: none;
}
.cfaoi-aria-pic > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;          /* 1.1.6 — centrage strict */
    display: block;
    border-radius: 50%;
}
/* Header chat : annule le background gradient et le padding pour que la
   photo prenne toute la pastille. */
.cfaoi-header-avatar:has(.cfaoi-aria-pic),
.cfaoi-welcome-avatar:has(.cfaoi-aria-pic) {
    background: none !important;
    padding: 0 !important;
    overflow: hidden;
    box-shadow:
        0 0 0 2px var(--cfaoi-cyan, #06b6d4),
        0 8px 24px -6px rgba(6, 182, 212, 0.45);
}
.cfaoi-aria-pic--sm,
.cfaoi-aria-pic--sm > img { width: 100%; height: 100%; }
.cfaoi-aria-pic--lg,
.cfaoi-aria-pic--lg > img { width: 100%; height: 100%; }

/* Fallback pour les navigateurs sans :has() (Firefox <121) — moins joli
   mais fonctionnel. On force une class additionnelle si possible côté JS,
   mais ici on accepte le rendu dégradé. */


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║   2.4.10 — UX LISIBILITÉ — refonte de la refonte                     ║
   ║                                                                      ║
   ║   Réponse aux retours sur la 2.4.9 :                                 ║
   ║   • Trop de "blanc sur blanc" → on introduit un fond gris-bleu        ║
   ║     très doux pour le wrapper, les surfaces blanches se détachent.   ║
   ║   • Cadre cyan autour de l'avatar → SUPPRIMÉ partout (header,        ║
   ║     welcome). Soft shadow neutre uniquement.                         ║
   ║   • Pastille gradient ::before sur les bulles AI → SUPPRIMÉE         ║
   ║     (effet "chatbot kit" qui parasitait la lecture).                 ║
   ║   • Violet hérité → on réduit drastiquement son usage côté chat,     ║
   ║     marine + cyan deviennent la palette principale.                  ║
   ║   • Typing : "Aria analyse ta réponse" → "Je réfléchis" (humain).    ║
   ║                                                                      ║
   ║   Aucune classe / ID modifié, aucun JS impacté hors typing label.    ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* ─── Wrapper : fond gris-bleu doux pour faire ressortir les surfaces ─── */
.cfaoi-wrapper {
  background: #f3f4f6;           /* gris-bleu très doux (Tailwind slate-100) */
  border: 1px solid rgba(15, 23, 42, 0.06);
}

/* ─── Header chat : surface blanche, séparateur net, AVATAR SANS CADRE ─ */
.cfaoi-chat-header {
  padding: 16px 20px;
  background: #ffffff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

/* AVATAR HEADER : aucun cadre, aucune bordure colorée, juste une ombre
   discrète et neutre. C'est le retrait explicitement demandé. */
.cfaoi-header-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: none !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12) !important;
  /* :has() : si la photo est présente, on garde fond transparent */
}
.cfaoi-header-avatar:has(.cfaoi-aria-pic) {
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12) !important;
}
/* Le dot "online" reste mais plus petit et discret */
.cfaoi-header-avatar::after {
  width: 11px;
  height: 11px;
  bottom: -1px;
  right: -1px;
  background: #10b981;
  box-shadow: 0 0 0 2px #ffffff;
  animation: none;
}

.cfaoi-header-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--cfaoi-text);
  letter-spacing: -0.005em;
}
.cfaoi-header-subtitle {
  font-size: 12.5px;
  color: var(--cfaoi-text-muted);
}
.cfaoi-header-subtitle::before {
  width: 7px;
  height: 7px;
  background: #10b981;
}

/* ─── État speaking : effet subtil, SANS cadre coloré sur avatar ─────── */
/* 4.2.0 — Le point « Aria parle » suit le bleu de l'action (le cyan sort de la
   palette du chat). Toujours un POINT, jamais un cadre autour de l'avatar
   (décision 2.4.10). */
.cfaoi-wrapper.is-speaking {
  box-shadow:
    0 24px 60px -20px rgba(15, 23, 42, 0.18),
    inset 0 0 0 1px rgba(37, 99, 235, 0.28);
}
.cfaoi-wrapper.is-speaking .cfaoi-header-avatar::after {
  background: var(--cfaoi-primary);
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px rgba(37, 99, 235, 0.28);
  animation: cfaoiSpeakingDot 1.4s ease-in-out infinite;
}
@keyframes cfaoiSpeakingDot {
  0%, 100% { box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px rgba(37, 99, 235, 0.28); }
  50%      { box-shadow: 0 0 0 2px #ffffff, 0 0 0 6px rgba(37, 99, 235, 0); }
}

/* ─── Body : padding propre, fond hérité du wrapper ──────────────────── */
.cfaoi-chat-body {
  padding: 22px 22px 14px;
  gap: 12px;
  background: transparent;       /* hérite du #f3f4f6 du wrapper */
}

/* ─── Bulles message : PAS de pastille gradient (moins chatbot) ─────── */
.cfaoi-message {
  padding: 13px 16px;
  font-size: 14.5px;
  line-height: 1.55;
  max-width: 86%;
  border-radius: 16px;
}
.cfaoi-message-ai {
  background: #ffffff;
  color: var(--cfaoi-text);
  border: 1px solid rgba(15, 23, 42, 0.07);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  border-bottom-left-radius: 6px;
}
/* RETRAIT EXPLICITE : la pastille gradient cyan/violet ::before qui
   faisait "kit chatbot" sur chaque message AI. */
.cfaoi-message-ai::before {
  display: none !important;
  content: none !important;
}
.cfaoi-message-user {
  background: var(--cfaoi-primary);
  color: #ffffff;
  border-bottom-right-radius: 6px;
  box-shadow: 0 4px 14px -6px rgba(37, 99, 235, 0.5);
}

/* ─── Typing : "Je réfléchis…" en italique discret ───────────────────── */
.cfaoi-message-typing { padding: 11px 16px; }
.cfaoi-typing-label {
  font-size: 13.5px;
  color: var(--cfaoi-text-muted);
  font-style: italic;
  margin-right: 6px;
  letter-spacing: 0.01em;
}
.cfaoi-typing-label::after {
  content: '…';
  margin-left: 2px;
  display: inline-block;
  animation: cfaoiTypingEllipsis 1.4s infinite;
}
@keyframes cfaoiTypingEllipsis {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}
/* Points avec couleur tenue — 4.2.0 : le bleu de l'action, plus le cyan.
   Décor : le libellé « Je réfléchis… » porte l'information. */
.cfaoi-typing-dot {
  background: var(--cfaoi-primary);
  opacity: 0.75;
}

/* ─── Footer : surface blanche distincte, séparateur net ─────────────── */
.cfaoi-chat-footer {
  padding: 12px 16px 14px;
  gap: 10px;
  background: #ffffff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}
/* 4.2.0 — Le champ peut RÉTRÉCIR : trois boutons ronds de 46 px + `width:
   100% !important` du reset des champs, sans `min-width: 0`, c'est un
   défilement horizontal à 375 px. */
.cfaoi-wrapper .cfaoi-input-text { flex: 1 1 auto; min-width: 0; }
.cfaoi-input-text {
  padding: 13px 18px;
  font-size: 14.5px;
  border: 1.5px solid rgba(15, 23, 42, 0.1);
  background: #f9fafb;
  color: var(--cfaoi-text);
}
.cfaoi-input-text:focus {
  border-color: var(--cfaoi-primary);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}
.cfaoi-input-text::placeholder {
  color: #94a3b8;
}
.cfaoi-btn-mic, .cfaoi-btn-live {
  width: 46px;
  height: 46px;
  border: 1.5px solid rgba(15, 23, 42, 0.1);
  background: #f9fafb;
  color: var(--cfaoi-text-soft);
}
.cfaoi-btn-mic:hover, .cfaoi-btn-live:hover {
  background: #ffffff;
  color: var(--cfaoi-primary);
  border-color: var(--cfaoi-primary);
}
.cfaoi-btn-send {
  height: 46px;
  padding: 0 22px;
  font-size: 14px;
  border-radius: 100px;
  background: var(--cfaoi-primary);
  box-shadow: 0 4px 12px -3px rgba(37, 99, 235, 0.35);
}
.cfaoi-btn-send:hover {
  background: var(--cfaoi-primary-dark);
  box-shadow: 0 6px 16px -4px rgba(30, 64, 175, 0.45);
}

/* ─── Progress bar : tenue, marine plus que violet ───────────────────── */
/* 4.2.0 — aplat bleu (cf. la règle de base plus haut : le cyan tombait à
   1,97:1 sur la piste). */
.cfaoi-progress-fill {
  background: var(--cfaoi-primary);
}

/* ─── Welcome card : AVATAR SANS CADRE CYAN ──────────────────────────── */
.cfaoi-welcome-container {
  background: transparent;
}
.cfaoi-welcome-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: none !important;
  box-shadow: 0 6px 20px -6px rgba(15, 23, 42, 0.18) !important;
}
.cfaoi-welcome-avatar:has(.cfaoi-aria-pic) {
  background: none !important;
  box-shadow: 0 6px 20px -6px rgba(15, 23, 42, 0.18) !important;
}
.cfaoi-welcome-title {
  font-size: 23px;
  color: var(--cfaoi-text);
  letter-spacing: -0.022em;
}
.cfaoi-welcome-subtitle {
  font-size: 14.5px;
  color: var(--cfaoi-text-soft);
  line-height: 1.55;
}
/* 4.2.0 — Couleurs, fonds et ombres des deux portes d'entrée vivent dans le
   bouclier (dégradé bleu / blanc cassé) ; ici le rayon et la police. */
.cfaoi-welcome-btn-primary {
  padding: 14px 22px;
  font-size: 15px;
  border-radius: 14px;
}
.cfaoi-welcome-btn-secondary {
  padding: 13px 22px;
  font-size: 14px;
  border-radius: 14px;
}
.cfaoi-welcome-btn-secondary:hover {
  background: #ffffff;
  border-color: var(--cfaoi-primary);
  color: var(--cfaoi-primary);
}

/* ─── Result card principale : surface lisible, palette marine ───────── */
.cfaoi-result-card {
  background: #ffffff;
  padding: 26px 24px;
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 12px 32px -16px rgba(15, 23, 42, 0.18);
}
.cfaoi-result-card h3 {
  color: var(--cfaoi-text);
}
/* Le titre "Formation Recommandée" : marine, plus violet */
.cfaoi-result-card h3[style*="color"] {
  color: var(--cfaoi-primary-dark) !important;
}
.cfaoi-badge {
  background: var(--cfaoi-primary);
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
/* 4.2.0 — aplat bleu : un indicateur, pas un décor (cf. barre de progression). */
.cfaoi-confidence-fill {
  background: var(--cfaoi-primary);
}

/* ─── Main actions row : palette tenue ───────────────────────────────── */
.cfaoi-main-actions {
  margin-top: 22px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.cfaoi-main-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 22px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  min-height: 44px;
  white-space: nowrap;
}
.cfaoi-main-action--primary {
  background: var(--cfaoi-primary);
  color: #ffffff;
  box-shadow: 0 6px 18px -6px rgba(37, 99, 235, 0.5);
}
/* 4.2.0 (revue) — le survol de l'action principale (dégradé, ombre) vit dans
   le bouclier ; l'aplat #1e40af écrit ici divergeait et perdait. */
.cfaoi-main-action--secondary {
  background: #f1f5f9;
  color: var(--cfaoi-text);
  border-color: rgba(15, 23, 42, 0.08);
}
.cfaoi-main-action--secondary:hover {
  background: #ffffff;
  border-color: var(--cfaoi-primary);
  color: var(--cfaoi-primary);
}
.cfaoi-main-action--ghost {
  background: transparent;
  color: var(--cfaoi-text-muted);
  border-color: transparent;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 4px;
  padding: 10px 14px;
}
.cfaoi-main-action--ghost:hover { color: var(--cfaoi-primary); }

/* ─── Related formations : pills tenues (pas de violet) ──────────────── */
.cfaoi-related-formations {
  border-top-color: rgba(15, 23, 42, 0.08);
}
.cfaoi-related-card {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
}
.cfaoi-related-card:hover {
  border-color: var(--cfaoi-primary);
  box-shadow: 0 8px 20px -10px rgba(37, 99, 235, 0.25);
}
.cfaoi-pill--pct {
  background: var(--cfaoi-primary);
  color: #ffffff;
}

/* ─── Lead form card : surface blanche dans gris-bleu ────────────────── */
.cfaoi-lead-form-card {
  background: #ffffff;
  padding: 24px;
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 6px 18px -10px rgba(15, 23, 42, 0.15);
}
.cfaoi-lead-form-card h4 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 700;
  color: var(--cfaoi-text);
}
.cfaoi-form-control {
  font-size: 14.5px;
  padding: 12px 14px;
  border-radius: 10px;
  min-height: 44px;
  background: #f9fafb;
  border: 1.5px solid rgba(15, 23, 42, 0.1);
}
.cfaoi-form-control:focus {
  background: #ffffff;
  border-color: var(--cfaoi-primary);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}
.cfaoi-btn-submit {
  min-height: 48px;
  font-size: 15px;
  border-radius: 14px;
}

/* ─── Mobile (≤540px) ────────────────────────────────────────────────── */
@media (max-width: 540px) {
  .cfaoi-main-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .cfaoi-main-action {
    width: 100%;
    padding: 13px 18px;
  }
  .cfaoi-result-card { padding: 22px 18px; }
  .cfaoi-chat-header { padding: 12px 16px; }
  .cfaoi-header-avatar { width: 40px; height: 40px; }
  .cfaoi-chat-footer { gap: 8px; padding: 12px 14px; }
  .cfaoi-btn-mic, .cfaoi-btn-live { width: 44px; height: 44px; }
  .cfaoi-input-text { padding: 11px 14px; font-size: 14px; }
  .cfaoi-btn-send { height: 44px; padding: 0 16px; font-size: 13.5px; }
  .cfaoi-welcome-avatar { width: 88px; height: 88px; }
  .cfaoi-welcome-title { font-size: 21px; }
  .cfaoi-lead-form-card { padding: 18px 16px; border-radius: 14px; }
  .cfaoi-typing-label { font-size: 13px; }
  .cfaoi-lead-form-card .cfaoi-form-group[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ╔══════════════════════════════════════════════════════════════════════╗
   ║   2.4.12 — FIX CONTRASTE HOVER QCM                                   ║
   ║                                                                      ║
   ║   Retour utilisateur (capture) : « quand je passe la souris sur les  ║
   ║   options elles sont blanc sur blanc dans la conversation avec le    ║
   ║   conseiller. »                                                       ║
   ║                                                                      ║
   ║   Diagnostic : le hover `.cfaoi-choice-button:hover` posait          ║
   ║   `background: var(--cfaoi-primary-light)` (≈ #eff6ff, presque       ║
   ║   blanc) mais ne précisait pas de `color`. Si le thème WordPress    ║
   ║   (ou Gutenberg, ou un parent global) impose `button:hover {         ║
   ║   color: #fff }`, le texte devenait blanc sur fond presque blanc.    ║
   ║                                                                      ║
   ║   Fix : on verrouille `color` avec `!important` sur tous les états  ║
   ║   du bouton de choix (default/hover/focus/active), et on assombrit  ║
   ║   le fond du hover pour un contraste indéniable. Idem pour les      ║
   ║   contenus liés (badge match, related cards) au cas où.             ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* ─── Boutons QCM : texte forcé navy sur tous les états ───────────────── */
.cfaoi-choice-button,
.cfaoi-choice-button:link,
.cfaoi-choice-button:visited {
  color: var(--cfaoi-text) !important;          /* #0f172a navy profond */
  background: #ffffff !important;
  border: 1.5px solid rgba(15, 23, 42, 0.12) !important;
  font-weight: 500;
}

.cfaoi-choice-button:hover,
.cfaoi-choice-button:focus,
.cfaoi-choice-button:focus-visible {
  /* Fond hover plus marqué : bleu-marine clair, pas presque-blanc */
  background: #e0ecff !important;               /* cohérent avec primary */
  border-color: var(--cfaoi-primary) !important;
  color: var(--cfaoi-primary-dark) !important;  /* navy foncé #1e40af */
  outline: none;
}

.cfaoi-choice-button:active {
  background: #c7d9ff !important;
  border-color: var(--cfaoi-primary-dark) !important;
  color: var(--cfaoi-primary-dark) !important;
}

/* La barre verticale gradient à gauche du bouton est désormais
   supprimée (2.5.6) — elle produisait un artefact bleu visible à
   gauche de la liste des réponses. On neutralise toute valeur
   héritée par sécurité. */
.cfaoi-choice-button::before {
  content: none !important;
  background: none !important;
  width: 0 !important;
}

/* ─── Sécurité anti-thème : les boutons d'action principale aussi ─────── */
/* Même fix défensif pour les boutons `.cfaoi-main-action--secondary` qui
   ont un fond clair et peuvent souffrir du même problème de thème. */
.cfaoi-main-action--secondary,
.cfaoi-main-action--secondary:link,
.cfaoi-main-action--secondary:visited {
  color: var(--cfaoi-text) !important;
}
.cfaoi-main-action--secondary:hover,
.cfaoi-main-action--secondary:focus,
.cfaoi-main-action--secondary:focus-visible {
  color: var(--cfaoi-primary) !important;
  background: #ffffff !important;
  border-color: var(--cfaoi-primary) !important;
}

/* ─── Cartes related formations : lien hover lisible ──────────────────── */
.cfaoi-related-link,
.cfaoi-related-link:link,
.cfaoi-related-link:visited {
  color: #ffffff !important;       /* sur fond primary */
}
.cfaoi-related-link:hover,
.cfaoi-related-link:focus {
  color: #ffffff !important;
  background: var(--cfaoi-primary-dark) !important;
}
.cfaoi-related-link--soft,
.cfaoi-related-link--soft:link,
.cfaoi-related-link--soft:visited {
  color: var(--cfaoi-primary) !important;
  background: transparent !important;
}
.cfaoi-related-link--soft:hover,
.cfaoi-related-link--soft:focus {
  color: var(--cfaoi-primary-dark) !important;
  background: #f1f5f9 !important;
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  1.5.1 — Modale plein écran pour le résultat d'orientation        ║
   ║  --------------------------------------------------------------   ║
   ║  Le résultat (carte profil + formation principale + autres        ║
   ║  formations + formulaire de lead) ne s'affiche plus comme bulle   ║
   ║  de chat mais comme overlay plein écran appendée à <body>.        ║
   ║  Sur mobile, les cartes "autres formations" passent en scroll     ║
   ║  horizontal pour économiser l'espace vertical.                    ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ── Conteneur plein écran ── */
.cfaoi-result-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147483600;        /* au-dessus de la popup CFAOI et de tout */
    display: flex;
    flex-direction: column;
    background: rgba(15, 23, 42, 0.78);
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    opacity: 0;
    transition: opacity 240ms ease;
    /* iOS Safari : tap-highlight neutralisé */
    -webkit-tap-highlight-color: transparent;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    color: #0f172a;
}
.cfaoi-result-overlay--visible { opacity: 1; }

body.cfaoi-result-overlay-open {
    overflow: hidden;
}

/* ── Bouton X de fermeture ── */
.cfaoi-result-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(15, 23, 42, 0.08);
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 20px -6px rgba(15, 23, 42, 0.25);
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
    z-index: 10;
    font: inherit;
    padding: 0;
}
.cfaoi-result-close:hover {
    background: #ffffff;
    color: #0f172a;
}
/* 4.2.0 — l'anneau de focus est désormais celui du bouclier (3 px, !important). */

/* ── Zone scrollable de la modale ── */
.cfaoi-result-scroller {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 24px 20px 40px;
    display: flex;
    justify-content: center;
}

/* ── Wrapper (anim slide-up déjà définie plus haut) ── */
.cfaoi-result-overlay .cfaoi-result-wrapper {
    width: 100%;
    max-width: 880px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 0;
}

/* ── Carte principale du résultat dans la modale ── */
.cfaoi-result-overlay .cfaoi-result-card,
.cfaoi-result-overlay .cfaoi-lead-form-card {
    background: #ffffff;
    border-radius: 22px;
    padding: 32px 28px;
    box-shadow: 0 30px 80px -20px rgba(15, 23, 42, 0.35);
    border: 1px solid rgba(15, 23, 42, 0.06);
    color: #0f172a;
}

.cfaoi-result-overlay .cfaoi-result-card h3 {
    font-size: 28px;
    line-height: 1.15;
    margin: 6px 0 4px;
    font-weight: 700;
    color: #0f172a;
    text-align: center;
}
.cfaoi-result-overlay .cfaoi-result-card .cfaoi-desc {
    text-align: center;
    color: #64748b;
    font-size: 14.5px;
    margin: 6px 0 0;
}
.cfaoi-result-overlay .cfaoi-badge {
    display: inline-flex;
    align-self: center;
    margin: 0 auto 4px;
    padding: 7px 16px;
    border-radius: 999px;
    background: var(--cfaoi-grad-primary, #1e40af);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* La div parente du badge n'est pas flex — on force le centrage du badge */
.cfaoi-result-overlay .cfaoi-result-card > .cfaoi-badge {
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

/* ── Mobile : ultra-compact horizontal pour "Autres formations" ── */
@media (max-width: 768px) {
    .cfaoi-result-overlay .cfaoi-result-scroller {
        padding: 16px 0 32px;
    }
    .cfaoi-result-overlay .cfaoi-result-wrapper {
        padding: 0 12px;
    }
    .cfaoi-result-overlay .cfaoi-result-card,
    .cfaoi-result-overlay .cfaoi-lead-form-card {
        padding: 22px 18px;
        border-radius: 18px;
    }
    .cfaoi-result-overlay .cfaoi-result-card h3 {
        font-size: 22px;
    }

    /* Scroll horizontal sur les autres formations */
    .cfaoi-result-overlay .cfaoi-related-formations[data-mobile="hscroll"] .cfaoi-related-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 12px;
        padding: 4px 18px 14px;
        margin: 0 -18px;             /* déborde sur les paddings du card pour edge-to-edge */
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;       /* Firefox */
    }
    .cfaoi-result-overlay .cfaoi-related-formations[data-mobile="hscroll"] .cfaoi-related-grid::-webkit-scrollbar {
        display: none;
    }
    .cfaoi-result-overlay .cfaoi-related-formations[data-mobile="hscroll"] .cfaoi-related-card {
        flex: 0 0 78%;                  /* ~3 cartes visibles partielles */
        min-width: 78%;
        max-width: 78%;
        scroll-snap-align: start;
        padding: 14px 14px 16px;
        margin: 0;
        box-sizing: border-box;
    }
    .cfaoi-result-overlay .cfaoi-related-formations[data-mobile="hscroll"] .cfaoi-related-card__title {
        font-size: 14px;
        line-height: 1.25;
        margin: 8px 0 6px;
    }
    .cfaoi-result-overlay .cfaoi-related-formations[data-mobile="hscroll"] .cfaoi-related-card__family,
    .cfaoi-result-overlay .cfaoi-related-formations[data-mobile="hscroll"] .cfaoi-related-card__reason {
        font-size: 12px;
        margin: 4px 0;
    }
    .cfaoi-result-overlay .cfaoi-related-formations[data-mobile="hscroll"] .cfaoi-related-link {
        padding: 8px 14px;
        font-size: 12.5px;
    }

    /* En mode scroll horizontal, on affiche TOUTES les cartes
       (la limite "voir plus" n'a pas de sens en mode swipe). */
    .cfaoi-result-overlay .cfaoi-related-formations[data-mobile="hscroll"] .cfaoi-related-card--hidden {
        display: flex !important;
    }
    .cfaoi-result-overlay .cfaoi-related-formations[data-mobile="hscroll"] .cfaoi-related-more {
        display: none;
    }

    /* Hint visuel (ombre dégradée à droite pour suggérer le scroll) */
    .cfaoi-result-overlay .cfaoi-related-formations[data-mobile="hscroll"] {
        position: relative;
    }
    .cfaoi-result-overlay .cfaoi-related-formations[data-mobile="hscroll"]::after {
        content: "";
        position: absolute;
        right: 0;
        top: 60px;
        bottom: 18px;
        width: 28px;
        pointer-events: none;
        background: linear-gradient(to right, rgba(255, 255, 255, 0), #ffffff);
        border-bottom-right-radius: 18px;
        border-top-right-radius: 18px;
    }
}

/* ── Très petit mobile (≤ 380 px) — encore plus compact ── */
@media (max-width: 380px) {
    .cfaoi-result-overlay .cfaoi-related-formations[data-mobile="hscroll"] .cfaoi-related-card {
        flex: 0 0 85%;
        min-width: 85%;
        max-width: 85%;
    }
    .cfaoi-result-overlay .cfaoi-result-card h3 {
        font-size: 20px;
    }
}

/* ── Force la grille classique sur desktop (overrides any inline) ── */
@media (min-width: 769px) {
    .cfaoi-result-overlay .cfaoi-related-formations .cfaoi-related-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }
    .cfaoi-result-overlay .cfaoi-related-card {
        max-width: none;
    }
}

/* ══════════════════════════════════════════════════════════════════
   3.1.0 (Phase 1) — Écran d'aiguillage A/B/C + consentement RGPD
   Réutilise .cfaoi-welcome-card / .cfaoi-form-control / .cfaoi-btn-submit ;
   n'ajoute que les éléments propres à l'aiguillage.
   ══════════════════════════════════════════════════════════════════ */
.cfaoi-routing-card {
    text-align: left;
    max-width: 460px;
    margin: 0 auto;
    /* 4.2.0 (revue) — l'entrée est portée par la règle `.cfaoi-welcome-card:not(:has(…))`
       plus haut : cette carte porte toujours les deux classes, et une seconde
       déclaration ici réanimait les écrans que la première exclut. */
}
.cfaoi-routing-card .cfaoi-welcome-title,
.cfaoi-routing-card .cfaoi-welcome-subtitle {
    text-align: center;
}
.cfaoi-routing-card .cfaoi-welcome-subtitle {
    margin-bottom: 26px;
}
.cfaoi-routing-q {
    margin: 0 0 22px;
}
.cfaoi-routing-label {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 600;
    color: var(--cfaoi-text);
}
.cfaoi-routing-opts {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.cfaoi-routing-opt {
    flex: 1 1 0;
    min-width: 120px;
    padding: 12px 16px;
    border: 1.5px solid var(--cfaoi-border);
    border-radius: 12px;
    background: var(--cfaoi-surface);
    color: var(--cfaoi-text-soft);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease, transform .1s ease;
}
.cfaoi-routing-opt:hover {
    border-color: var(--cfaoi-primary);
    transform: translateY(-1px);
}
.cfaoi-routing-opt--active {
    border-color: var(--cfaoi-primary);
    background: var(--cfaoi-primary-light);
    color: var(--cfaoi-primary-dark);
}
.cfaoi-routing-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 4px 0 20px;
    padding-top: 18px;
    border-top: 1px solid var(--cfaoi-border-soft);
    cursor: pointer;
    font-size: 13px;
    line-height: 1.45;
    color: var(--cfaoi-text-muted);
}
.cfaoi-routing-consent input {
    margin-top: 2px;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    cursor: pointer;
}
.cfaoi-routing-form {
    text-align: left;
    margin-top: 6px;
}
/* 4.2.0 — L'écran d'identité : prénom et nom côte à côte, à PARTS ÉGALES.
   ⚠️ `.cfaoi-form-group--split` (2fr 1fr, le duo ville / code postal) est
   déclarée PLUS BAS dans ce fichier : à spécificité égale elle gagnait, et
   le prénom prenait deux tiers de la ligne. On monte d'un cran (0,2,0) au
   lieu de déplacer la règle — la version mobile ci-dessous fait de même. */
.cfaoi-routing-form .cfaoi-form-group--identite {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 480px) {
    .cfaoi-routing-form .cfaoi-form-group--identite {
        grid-template-columns: 1fr;
    }
}

/* ══ 4.2.0 — LE CONSENTEMENT, EN CARTE COMPACTE (point 3 de la demande) ══
   « Le consentement est trop long, il faut un plié/déplié … ok mais beau. »
   Le JS plie déjà (l. ~3691 : le détail naît `hidden`). Ce qui restait laid,
   MESURÉ dans la cascade : la phrase en #64748b sur le fond #f3f4f6 du
   wrapper (4,32:1, sous le seuil) ; le bouton « Voir le détail » MIS À NU
   par le reset des <button> du bouclier — gros texte noir, sans soulignement,
   sans padding — parce que `.cfaoi-consent__toggle` (0,1,0) perd contre
   `.cfaoi-wrapper button` (0,1,1) + !important ; le détail en couleur
   héritée (le thème impose #000).

   Ici : la GÉOMÉTRIE et le MOUVEMENT. Les COULEURS, la POLICE du bouton et
   du détail vivent dans le bouclier (sélecteur double + !important), parce
   que c'est le seul endroit où elles se rendent — y compris le chevron, qui
   est un ::after : le thème pose `color: #000 !important` sur tout ::after,
   un « ▾ » hérité sortirait noir à côté d'un libellé bleu (leçon 4.0.10). */
.cfaoi-consent {
    margin: 4px 0 12px;
    padding: 12px 14px 10px;
    border-radius: 14px;
    transition: border-color var(--cfaoi-dur-fast, 160ms) ease, box-shadow var(--cfaoi-dur-fast, 160ms) ease;
}
.cfaoi-consent .cfaoi-routing-consent {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-height: 44px;
    margin: 0;
    padding: 2px 0;
    border-top: 0;
    font-size: 14px;
    line-height: 1.45;
}
.cfaoi-consent .cfaoi-routing-consent input {
    width: 20px;
    height: 20px;
    margin-top: 1px;
    flex: 0 0 auto;
}
/* Le bouton : une pilule, 44 px, alignée sous la phrase (case 20 + gouttière
   12 = 32 px). Un jeune de 15 ans reconnaît un bouton mieux qu'un lien. */
.cfaoi-consent__toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 4px 0 0 32px;
    padding: 8px 14px;
    min-height: 44px;
    border-radius: 999px;
    cursor: pointer;
    /* 4.2.0 (revue) — transition dans la liste (0,2,0) en fin de fichier : à
       (0,1,0) elle perdait contre le reset `.cfaoi-wrapper button` (0,1,1). */
}
.cfaoi-consent__toggle:active { transform: translateY(0) scale(0.985); }
/* Le chevron est DESSINÉ (deux bordures tournées), jamais un caractère : sa
   couleur est posée au bouclier en !important, elle ne dépend d'aucun
   héritage. Fermé : pointe en bas ; déplié : pointe en haut. */
.cfaoi-consent__toggle::after {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-top: -3px;
    transform: rotate(45deg);
    transition: transform 200ms var(--cfaoi-ease-out, ease-out), margin-top 200ms var(--cfaoi-ease-out, ease-out);
}
.cfaoi-consent__toggle[aria-expanded="true"]::after {
    margin-top: 4px;
    transform: rotate(-135deg);
}
/* Le détail : une note bleu-50 (le registre « information », pas celui de
   l'avertissement), qui MONTE en 220 ms quand on la déplie. */
.cfaoi-consent__detail {
    margin: 8px 0 2px 32px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 13.5px;
    line-height: 1.55;
}
.cfaoi-consent__detail:not([hidden]) {
    animation: cfaoiRise var(--cfaoi-dur, 220ms) var(--cfaoi-ease-out, ease-out) backwards;
}
.cfaoi-consent__detail[hidden] {
    display: none;
}
.cfaoi-consent__detail p {
    margin: 0;
}
.cfaoi-consent__detail a {
    display: inline;
    padding: 2px 0;
}
.cfaoi-ident-continue {
    margin-top: 6px;
}
/* 4.2.0 — #dc2626 valait 4,39:1 sur le fond #f3f4f6 du wrapper, #16a34a
   3,30:1 : les deux passent au cran plus foncé (5,88 et 4,56). Réaffirmés
   au bouclier, qui est celui qui se rend. */
.cfaoi-routing-error {
    margin: 10px 0 0;
    min-height: 1em;
    font-size: 13px;
    font-weight: 600;
    color: #b91c1c;
    text-align: center;
}
.cfaoi-routing-success {
    margin: 14px 0 0;
    text-align: center;
    font-weight: 700;
    color: #15803d;
}
/* Bouton-lien de préinscription (fin du parcours A et, depuis la 4.0.18,
   encart du formulaire B et fin du parcours B) — rendu comme .cfaoi-btn-submit
   mais c'est un <a> : on neutralise le soulignement et on centre. */
.cfaoi-routing-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    margin-top: 8px;
}
.cfaoi-routing-note {
    margin: 16px 0 0;
    text-align: center;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--cfaoi-text-muted);
}
/* Parcours B — résultat entreprises */
.cfaoi-routing-loading {
    padding: 40px 10px;
    text-align: center;
    color: var(--cfaoi-text-muted);
    font-size: 14px;
}
.cfaoi-routing-headline {
    margin: 6px 0 16px;
    text-align: center;
    font-size: 16px;
    line-height: 1.5;
    color: var(--cfaoi-text);
}
.cfaoi-routing-bignum {
    display: inline-block;
    font-size: 30px;
    font-weight: 800;
    color: var(--cfaoi-primary);
    vertical-align: -2px;
    margin-right: 4px;
}
.cfaoi-routing-warn {
    margin: 0 0 18px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #9a3412;
    font-size: 12.5px;
    line-height: 1.45;
}

/* ══════════════════════════════════════════════════════════════════
   3.3.1 (reprise) — UX mobile-first des parcours guidés (tâche 0.6)
   ══════════════════════════════════════════════════════════════════ */

/* ── Étiquette liée à un champ, masquée visuellement ──────────────────
   Les formulaires A/B/C n'avaient que des `placeholder` : un placeholder
   disparaît à la première frappe et n'est pas restitué de façon fiable par
   les lecteurs d'écran. Le <label for> existe désormais vraiment ; il est
   masqué à l'œil (le placeholder reste l'indication visuelle) pour ne pas
   allonger un formulaire déjà limite sur 375 × 667.
   ⚠️ Ni `display:none` ni `visibility:hidden` : les deux retireraient le
   libellé de l'arbre d'accessibilité, c'est-à-dire exactement l'inverse du
   but. Technique de masquage « clip » standard. */
.cfaoi-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ── Cible tactile : 44 px déclarés, plus jamais « calculés » ──────────
   La hauteur de .cfaoi-routing-opt dépendait du seul line-height. Elle
   tombait juste par hasard ; une police plus étroite servie par le thème,
   ou un libellé traduit plus court, la faisaient passer sous le seuil sans
   que rien ne l'interdise. On la DÉCLARE. */
.cfaoi-routing-opt,
.cfaoi-routing-back,
.cfaoi-routing-alt-btn {
    min-height: 44px;
}
.cfaoi-btn-submit,
.cfaoi-routing-cta {
    min-height: 48px;
}

/* ── Marqueur NON CHROMATIQUE de la sélection ─────────────────────────
   L'état sélectionné n'était porté que par la couleur de fond : indistinct
   pour un daltonien, et invisible pour un lecteur d'écran (aria-pressed est
   posé côté JS pour ce second point). La coche est décorative — elle double
   une information déjà annoncée, elle ne la remplace pas. */
.cfaoi-routing-opt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.cfaoi-routing-opt--active::before {
    content: "\2713";
    font-weight: 800;
    line-height: 1;
}

/* ── Bouton RETOUR des écrans guidés ──────────────────────────────────
   Sans lui, une erreur de secteur n'avait d'autre issue que le rechargement
   complet de la page — qui repart de l'aiguillage et refait re-cocher le
   consentement RGPD. */
.cfaoi-routing-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--cfaoi-text-muted);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
}
.cfaoi-routing-back:hover {
    background: var(--cfaoi-bg-alt);
    color: var(--cfaoi-text);
}

/* ── Bandeau d'intention (les 4 intentions, tâche 0.8) ────────────────
   Les title / subtitle des 4 intentions ne sortaient jamais du back-office.
   Ce bandeau les montre au visiteur dès que son parcours est déterminé. */
/* 4.2.0 — Le bandeau titre / sous-titre n'est plus émis nulle part (aucune
   occurrence de `cfaoi-routing-intent-title` dans le JS) : cette div ne sert
   plus qu'aux STATUTS posés dedans (« Coche la case pour continuer. »,
   « Indique ton prénom… », l'échec réseau). Registre « note chaude », le même
   que `.cfaoi-routing-warn` : un rappel de saisie n'est pas une panne — le
   rouge reste à `.cfaoi-routing-error`. Couleurs au bouclier ; ici la
   géométrie et l'entrée. */
.cfaoi-routing-intent {
    margin: 2px 0 14px;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 13.5px;
    line-height: 1.45;
    font-weight: 600;
    animation: cfaoiRise var(--cfaoi-dur, 220ms) var(--cfaoi-ease-out, ease-out) backwards;
}
.cfaoi-routing-intent[hidden] {
    display: none;
}
.cfaoi-routing-intent-title {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 700;
    color: var(--cfaoi-primary-dark);
}
.cfaoi-routing-intent-sub {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--cfaoi-text-soft);
}

/* ── Porte d'entrée du parcours employeur (intention D) ───────────────
   Discrète : l'écran s'adresse d'abord au jeune. Mais présente, parce que
   le parcours employeur n'était joignable que par le pop-up de la page
   d'accueil. */
.cfaoi-routing-alt {
    margin: 22px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid var(--cfaoi-border-soft);
    text-align: center;
}
.cfaoi-routing-alt-title {
    margin: 0 0 3px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--cfaoi-text-soft);
}
.cfaoi-routing-alt-sub {
    margin: 0 0 10px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--cfaoi-text-muted);
}
.cfaoi-routing-alt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 18px;
    border: 1.5px solid var(--cfaoi-border);
    border-radius: 12px;
    background: var(--cfaoi-surface);
    color: var(--cfaoi-text-soft);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.cfaoi-routing-alt-btn:hover {
    border-color: var(--cfaoi-primary);
    color: var(--cfaoi-primary-dark);
}
/* 4.2.0 (revue) — la transition de ce bouton vit dans la liste (0,2,0) en fin
   de fichier : tantôt <button>, tantôt <a>, il tombait sous le reset des
   <button> du bouclier (0,1,1) qui déclare aussi `transition`. */

/* ── 4.0.18 — LA PRÉINSCRIPTION, ÉTAPE PRINCIPALE DE LA FIN DU PARCOURS B ──
   Demande du client (22/09/2026) : le bouton « n'est pas visible », et c'est
   celui que le jeune doit privilégier. Il vivait sous le formulaire, en bouton
   secondaire blanc de 13,5 px, atteint en faisant défiler. L'encart le pose
   AU-DESSUS du formulaire, sur un fond qui le détache du reste de l'écran, avec
   le bouton principal du dépôt (`.cfaoi-btn-submit`, comme la fin du parcours
   A — aucun troisième style de bouton).
   ⚠️ Les couleurs et les marges sont RÉAFFIRMÉES dans `cfaoi-theme-shield.css` :
   le thème du site impose `color` et `margin: 0` avec `!important` sur tout
   `<p>` du module, et ces règles-ci, sans `!important`, perdraient contre lui.
   Elles restent ici pour les pages où le bouclier ne serait pas chargé. */
.cfaoi-routing-next {
    margin: 4px 0 6px;
    padding: 16px 16px 14px;
    border: 1.5px solid #bfdbfe;
    border-radius: 14px;
    background: #eff6ff;
    text-align: center;
    animation: cfaoiRiseCard var(--cfaoi-dur-slow, 260ms) var(--cfaoi-ease-out, ease-out) 80ms backwards;
}
.cfaoi-routing-next-title {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.3;
    color: #1e3a8a;
}
.cfaoi-routing-next-sub {
    margin: 0 0 12px;
    font-size: 13.5px;
    line-height: 1.5;
    color: #334155;
}
.cfaoi-routing-next-note {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.45;
    color: #475569;
}
/* L'invitation au formulaire, quand la préinscription la précède : le
   séparateur de `.cfaoi-routing-alt` sépare désormais les DEUX chemins, et
   le formulaire suit juste dessous. */
.cfaoi-routing-alt--formulaire {
    margin: 18px 0 12px;
}
/* 4.0.18 — Le numéro du CFA, sous le bouton de préinscription. Le numéro est
   le lien : gras, souligné, jamais coupé en deux lignes (`nowrap`). */
.cfaoi-routing-tel {
    margin: 10px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: #334155;
    text-align: center;
}
.cfaoi-routing-tel-link {
    font-weight: 700;
    white-space: nowrap;
    color: #1e40af;
    text-decoration: underline;
}

/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  3.3.1 (intégration) — Duo « ville + code postal » du parcours B     ║
   ║                                                                      ║
   ║  Le champ dédié au code postal (renderRoutingLocationB) se place à   ║
   ║  côté de la ville. Les autres duos des écrans guidés (prénom/nom)    ║
   ║  posent leur grille en STYLE INLINE : aucune @media ne peut alors    ║
   ║  les replier sans !important — c'est exactement pourquoi la seule    ║
   ║  collapse mobile existante (l. ~1369) doit viser un sélecteur        ║
   ║  d'attribut et forcer la valeur. On ne reproduit pas ce défaut :     ║
   ║  la grille vit ici, son repli aussi, et rien ne se dispute.          ║
   ║                                                                      ║
   ║  Sous 480 px, une colonne : « Code postal » à côté de « Ta ville »   ║
   ║  sur 360 px de large donnerait deux champs illisibles.               ║
   ╚══════════════════════════════════════════════════════════════════════╝ */
.cfaoi-form-group--split {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 15px;
}
@media (max-width: 480px) {
    .cfaoi-form-group--split {
        grid-template-columns: 1fr;
    }
}

/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  3.3.1 (reprise 3) — « Navigation courte » : l'écran d'entrée avait  ║
   ║  GRANDI, et son haut était rogné (tâche 0.6)                         ║
   ╚══════════════════════════════════════════════════════════════════════╝

   DÉFAUT 1 — L'ÉCRAN S'EST ALLONGÉ AU LIEU DE RACCOURCIR.
   La 3.3.1 a ajouté deux blocs à l'écran d'aiguillage — le bandeau d'intention
   (.cfaoi-routing-intent) et la porte d'entrée employeur (.cfaoi-routing-alt) —
   pour servir la tâche 0.8. Les deux étaient justifiés, mais ils s'additionnent
   sur le même écran de 375 px, alors que la tâche 0.6 demande de le RACCOURCIR.

   DÉFAUT 2 — PLUS GRAVE, ET ANTÉRIEUR : LE HAUT ÉTAIT COUPÉ, SANS DÉFILEMENT.
   `.cfaoi-wrapper` est `overflow: hidden` (l. 44) et vaut `100dvh` sous 480 px
   (l. 890). `.cfaoi-welcome-container` est `flex: 1` avec `align-items: center`
   (l. 497-503). Quand la carte est plus haute que le conteneur, un enfant
   centré par `align-items` déborde des DEUX côtés — et le débordement du HAUT
   est perdu, `overflow:hidden` interdisant de remonter. Le visiteur perdait le
   titre de l'écran et le bouton de coupure de la voix, définitivement.
   Réparé par la technique canonique : `align-items: flex-start` + marges
   verticales `auto` sur la carte (qui centrent tant qu'il y a de la place et ne
   débordent jamais vers le haut), plus `overflow-y: auto` pour le bas.

   ⚠️ CE QUI SUIT EST UN CALCUL, PAS UNE MESURE.
   Aucun navigateur n'a été ouvert, aucune capture n'existe dans le dépôt. Le
   nombre de lignes des textes longs (sous-titre, libellés des questions,
   consentement, sous-titre du bandeau) est ESTIMÉ — il dépend de la police
   réellement servie. La page « 🧭 Cadrage & wireframes » le dit au CFA dans
   ces termes, et la règle « Bouton principal visible sans défilement » y reste
   marquée NON TENUE tant qu'une mesure réelle n'existe pas.

   ⚠️ ET LE CALCUL DOIT SE FAIRE APRÈS cfaoi-theme-shield.css, PAS SUR CE
   FICHIER SEUL. Un premier jet de ce bloc l'a oublié et s'est trompé de 20 px,
   en annonçant des gains sur deux règles qui ne s'appliquent jamais :
     • `.cfaoi-wrapper p { margin: 0 !important }` (theme-shield, § Paragraphes)
       met à ZÉRO la marge de .cfaoi-welcome-subtitle. Les 26 px déclarés
       l. 1722 ne sont donc jamais rendus — il n'y a rien à y gagner, et une
       règle qui les réduirait à 14 px ne serait pas appliquée non plus.
     • `.cfaoi-wrapper .cfaoi-routing-label { margin: 0 0 10px !important }`
       (theme-shield) l'emporte sur les 12 px de la l. 1728 ET sur toute règle
       d'ici sans `!important`. La marge réelle des libellés est 10 px, et elle
       n'est pas modifiable depuis ce fichier.
   C'est pourquoi ni le sous-titre ni les libellés n'apparaissent ci-dessous :
   une règle qui ne s'applique pas est un mensonge écrit en CSS.

   EMPILEMENT AVANT (haut de l'écran → haut du bouton principal), à 375 px :
      30  padding du conteneur (l. 502)
      22  barre d'outils : bouton de coupure de la voix (SVG 20 px, padding
          neutralisé par le reset des <button> de theme-shield) + 2 px de marge
      26  titre : 21 px (l. 1366) × line-height 1,25 (theme-shield), marge 0
      45  sous-titre : 14,5 px × 1,55 sur 2 lignes, marge 0 (cf. ci-dessus)
     122  question 1 : libellé 2 lignes (15 px × 1,55) + 10 px + options 44 px
          (l. 1880) + 22 px de marge de bloc (l. 1725)
     122  question 2 : idem
     130  bandeau d'intention : marges 2 + 18 (l. 1930), padding 12 + 12
          (l. 1931), bordure 2, titre + 4, sous-titre ~3 lignes
     118  consentement : marges 4 + 20 (l. 1764), padding 18, bordure 1,
          texte 13 px × 1,45 sur ~4 lignes
       6  marge haute du bouton (style inline de renderRoutingScreen)
     ────
     621  le bouton principal commence vers 621 px et finit vers 669 px : il
          affleure ou dépasse les 667 px de l'écran de référence.

   CE QUE CE BLOC RETIRE — uniquement des marges et des paddings dont la
   cascade a été vérifiée jusqu'à theme-shield :
      14  padding du conteneur       30 → 16
      16  marge des 2 questions      22 → 14  (× 2)
      12  bandeau d'intention        padding 12 → 9 (× 2), marge 18 → 12
      18  consentement               marges 4/20 → 0/12, padding 18 → 12
     ────
      60  px. Le bouton commencerait vers 561 px et finirait vers 609 px.

   Rien n'est supprimé, aucune police n'est réduite, aucune cible tactile n'est
   rognée : les 44 px (l. 1880) et les 48 px (l. 1884) sont des `min-height` que
   ce bloc ne touche pas.

   La porte d'entrée employeur (.cfaoi-routing-alt) reste SOUS le bouton
   principal : elle ne le repousse pas, et elle s'atteint par défilement — ce
   que le `overflow-y: auto` ci-dessous rend enfin possible. */
@media (max-width: 480px) {
    /* 3.6.4 — L'anti-rognage (flex-start + marges auto + overflow-y) est
       désormais dans la règle de base, à toutes les largeurs : il n'est plus
       répété ici. Ne reste que ce qui est PROPRE au mobile — un padding plus
       serré et l'espacement resserré des blocs de l'aiguillage. */
    .cfaoi-welcome-container {
        padding: 16px 14px;
    }
    .cfaoi-routing-q { margin-bottom: 14px; }
    .cfaoi-routing-intent {
        margin: 2px 0 12px;
        padding: 9px 12px;
    }
    .cfaoi-routing-consent {
        margin: 0 0 12px;
        padding-top: 12px;
    }
}

/* ══════════════════════════════════════════════════════════════════
   Tâches 3.4 / 3.5 / 3.6 / 4.5 / 4.6 / 4.7 / 4.8 — Nouveaux écrans du
   parcours candidat (recherche métier, carte formation, qualification,
   CV, consentement, confirmation). Réutilise les variables et les
   composants existants (.cfaoi-form-control, .cfaoi-btn-submit,
   .cfaoi-routing-opt) : aucune seconde charte, mêmes cibles tactiles.
   ══════════════════════════════════════════════════════════════════ */

/* ── 3.4 — Recherche métier / formation en texte libre ──────────────── */
.cfaoi-search-metier {
    margin: 0 0 18px;
}
.cfaoi-search-metier__input {
    /* Réutilise .cfaoi-form-control ; on retire seulement la croix native
       du type=search sur WebKit, qui déborde du champ arrondi. */
    -webkit-appearance: none;
    appearance: none;
}
.cfaoi-search-metier__input::-webkit-search-cancel-button {
    -webkit-appearance: none;
}
.cfaoi-search-metier__help {
    margin: 6px 2px 0;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--cfaoi-text-muted);
}
.cfaoi-search-metier__results {
    margin: 12px 0 0;
}
.cfaoi-search-metier__status {
    margin: 6px 2px;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--cfaoi-text-muted);
}
.cfaoi-search-metier__alt-title {
    margin: 14px 2px 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--cfaoi-text-soft);
}
.cfaoi-search-metier__alts {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cfaoi-search-metier__alt {
    display: block;
    width: 100%;
    text-align: left;
    min-height: 44px;
    padding: 11px 14px;
    border: 1.5px solid var(--cfaoi-border);
    border-radius: var(--cfaoi-radius-md);
    background: var(--cfaoi-surface);
    color: var(--cfaoi-text-soft);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, transform .1s ease;
}
.cfaoi-search-metier__alt:hover {
    border-color: var(--cfaoi-primary);
    color: var(--cfaoi-primary-dark);
}
.cfaoi-search-metier__results:not([hidden]) {
    animation: cfaoiRise var(--cfaoi-dur, 220ms) var(--cfaoi-ease-out, ease-out) backwards;
}
/* Séparateur « ou choisis par secteur » entre la recherche et le select */
.cfaoi-search-metier__sep {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0 4px;
    color: var(--cfaoi-text-muted);
    font-size: 12.5px;
    font-weight: 600;
}
.cfaoi-search-metier__sep::before,
.cfaoi-search-metier__sep::after {
    content: "";
    flex: 1 1 0;
    height: 1px;
    background: var(--cfaoi-border);
}

/* ── 3.5 — Carte « formation trouvée » (composant réutilisable) ──────── */
/* 4.2.0 — La formation TROUVÉE est un moment de récompense : filet chaud à
   gauche (une des trois places du chaud, décor — le titre porte le sens).
   Fond, bordures et filet au bouclier ; ici le rayon et l'entrée. */
.cfaoi-formation-card {
    margin: 12px 0 0;
    padding: 16px 16px 14px;
    border-radius: 18px;
    text-align: left;
    animation: cfaoiRiseCard var(--cfaoi-dur-slow, 260ms) var(--cfaoi-ease-out, ease-out) backwards;
}
.cfaoi-formation-card__title {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 700;
    color: var(--cfaoi-text);
    line-height: 1.35;
}
.cfaoi-formation-card__meta {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--cfaoi-primary-dark);
}
.cfaoi-formation-card__field {
    margin: 4px 0 0;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--cfaoi-text-soft);
}
.cfaoi-formation-card__label {
    font-weight: 700;
    color: var(--cfaoi-text);
}
.cfaoi-formation-card__links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin: 12px 0 0;
}
.cfaoi-formation-card__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--cfaoi-primary);
    text-decoration: underline;
}
.cfaoi-formation-card__link--soft {
    color: var(--cfaoi-text-soft);
}
.cfaoi-formation-card__link:hover {
    color: var(--cfaoi-primary-dark);
}
.cfaoi-formation-card__select {
    margin-top: 14px;
}

/* ── 3.6 / 4.5 / 4.6 — Groupes de choix « à un état » (boutons pleine
   largeur, empilés). Mêmes cibles 44 px et même marqueur non chromatique
   que .cfaoi-routing-opt, mais en colonne pour des libellés longs. ──── */
.cfaoi-company-state,
.cfaoi-cv-step {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 4px 0 6px;
}
.cfaoi-company-state--inline {
    flex-direction: row;
    flex-wrap: wrap;
}
.cfaoi-company-state--inline .cfaoi-company-state__opt {
    flex: 1 1 0;
    min-width: 90px;
    text-align: center;
    justify-content: center;
}
.cfaoi-company-state__opt {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    border: 1.5px solid var(--cfaoi-border);
    border-radius: var(--cfaoi-radius-md);
    background: var(--cfaoi-surface);
    color: var(--cfaoi-text-soft);
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease, transform .1s ease;
}
.cfaoi-company-state__opt:hover {
    border-color: var(--cfaoi-primary);
}
.cfaoi-company-state__opt:active {
    transform: translateY(0) scale(0.985);
}
/* 4.2.0 — Les trois parcours de l'aiguillage entrent en escalier (60 ms). */
.cfaoi-wrapper .cfaoi-routing-choices .cfaoi-company-state__opt {
    animation: cfaoiRise var(--cfaoi-dur, 220ms) var(--cfaoi-ease-out, ease-out) backwards;
}
.cfaoi-wrapper .cfaoi-routing-choices .cfaoi-company-state__opt:nth-child(2) { animation-delay: 60ms; }
.cfaoi-wrapper .cfaoi-routing-choices .cfaoi-company-state__opt:nth-child(3) { animation-delay: 120ms; }
.cfaoi-company-state__opt:disabled {
    opacity: 0.6;
    cursor: default;
    transform: none;
}
.cfaoi-company-state__opt--active {
    border-color: var(--cfaoi-primary);
    background: var(--cfaoi-primary-light);
    color: var(--cfaoi-primary-dark);
}
.cfaoi-company-state__opt--active::before {
    content: "\2713";
    font-weight: 800;
    line-height: 1;
    animation: cfaoiRise var(--cfaoi-dur-fast, 160ms) var(--cfaoi-ease-out, ease-out) backwards;
}

/* ── 4.5 — Étapes de qualification ──────────────────────────────────── */
.cfaoi-qualif-step {
    margin: 0 0 14px;
}
.cfaoi-qualif-step .cfaoi-routing-label {
    margin: 0 0 8px;
}

/* ── 4.7 — Case de consentement au point de transmission ────────────── */
.cfaoi-consent-box label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--cfaoi-text-muted);
    font-weight: normal;
}
.cfaoi-consent-box input[type="checkbox"] {
    flex: 0 0 auto;
    margin-top: 2px;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

/* ── 4.8 — Prochaines étapes de la confirmation ─────────────────────── */
.cfaoi-steps-next {
    margin: 14px 0 4px;
    padding: 0 0 0 22px;
    text-align: left;
    color: var(--cfaoi-text-soft);
    font-size: 14px;
    line-height: 1.55;
}
.cfaoi-steps-next li {
    margin: 0 0 8px;
}

/* ============================================================
   3.9.0+ (réunion 24/07) — Créateur de CV + visionneuse en direct.
   Aperçu calqué sur le template « Arcs premium » du CFA (arcs teal
   + rose, hiérarchie nom → contact → sections). Couleurs FIXES sur
   la page CV : c'est un aperçu de document, il doit être identique
   quel que soit le thème du site. Purement côté client (rien envoyé).
   ============================================================ */
.cfaoi-btn-ghost {
    background: transparent;
    border: 1px solid #d7dce2;
    color: #6b7280;
    padding: 9px 16px;
    border-radius: 10px;
    font: inherit;
    cursor: pointer;
}
.cfaoi-btn-ghost:hover { border-color: #3FB9C4; color: #1f7c85; }

/* 3.9.7 — Lien d'action en ligne (rattrapage de parcours). Un <button> et non
   un <a> : il n'y a pas d'URL, c'est une action JS — un lien vide serait un
   piège au clavier et pour les lecteurs d'écran. */
.cfaoi-btn-link {
    background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
    color: #1f7c85; text-decoration: underline;
}
.cfaoi-btn-link:hover { color: #EC4B87; }
.cfaoi-btn-link:focus-visible { outline: 2px solid #3FB9C4; outline-offset: 2px; border-radius: 3px; }
.cfaoi-routing-note--switch { margin-top: 10px; font-size: 13px; }

.cfaoi-cv-creator {
    display: flex;
    gap: 22px;
    align-items: flex-start;
    width: 100%;
}
.cfaoi-cv-left  { flex: 1 1 42%; min-width: 0; }
.cfaoi-cv-right { flex: 1 1 58%; min-width: 0; position: sticky; top: 12px; }
.cfaoi-cv-toolbar { margin-bottom: 8px; }
.cfaoi-cv-qbox { margin-top: 16px; }
.cfaoi-cv-progress {
    font-size: 12px; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: #3FB9C4; margin: 0 0 6px;
}
.cfaoi-cv-label {
    display: block; font-weight: 600; color: var(--cfaoi-text, #2b2f36);
    margin-bottom: 9px; font-size: 16px;
}
/* 4.2.0 (revue) — la couleur du « (facultatif) » vit dans le bouclier
   (#475569 : 6,89:1 sur le fond #f3f4f6 du wrapper) ; le #9aa2ac écrit ici
   (2,6:1) était mort depuis la ré-affirmation. */
.cfaoi-cv-opt { font-weight: 400; font-size: 13px; }
.cfaoi-cv-field {
    width: 100%; box-sizing: border-box; padding: 11px 13px;
    border: 1px solid #d7dce2; border-radius: 10px; font: inherit;
    color: #2b2f36; background: #fff;
}
.cfaoi-cv-field:focus { outline: 2px solid #3FB9C4; outline-offset: 1px; border-color: #3FB9C4; }
textarea.cfaoi-cv-field { resize: vertical; min-height: 92px; }
.cfaoi-cv-nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 16px; }
.cfaoi-cv-skip { margin-top: 16px; display: inline-block; font-size: 13px; }
/* 3.9.3 — écrans de fin du créateur (Valider/Modifier, Télécharger/Continuer). */
.cfaoi-cv-help { color: #6b7280; font-size: 13.5px; line-height: 1.5; margin: 4px 0 0; }
.cfaoi-cv-final-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.cfaoi-cv-final-actions .cfaoi-btn-submit,
.cfaoi-cv-final-actions .cfaoi-btn-ghost { width: 100%; text-align: center; }

/* ══════════════════════════════════════════════════════════════════════
   3.13.28 (réunion CFA du 25/08/2026) — RELECTURE ORTHOGRAPHIQUE DU CV.

   L'étape s'intercale entre « Valider » et « Télécharger ». Elle REPREND
   l'habillage existant (.cfaoi-cv-qbox, .cfaoi-cv-progress,
   .cfaoi-cv-label, .cfaoi-cv-help, .cfaoi-cv-final-actions,
   .cfaoi-btn-submit, .cfaoi-btn-ghost) : rien n'est redessiné, seul le
   bloc avant/après est neuf. Aucune couleur inventée — toutes celles
   employées ici sont déjà dans le bloc « Créateur de CV » ci-dessus.

   ⚠️ LA DISTINCTION AVANT / APRÈS NE REPOSE PAS SUR LA COULEUR. Chaque
   ligne porte son étiquette en toutes lettres (« Avant », « Après »),
   lue telle quelle par un lecteur d'écran et lisible pour un daltonien
   comme sur un écran en plein soleil. Les fonds pastel ne font que
   doubler cette information, ils ne la portent pas.
   ══════════════════════════════════════════════════════════════════════ */
.cfaoi-cv-fixes { margin-top: 12px; }
.cfaoi-cv-fix {
    background: #fff;
    border: 1px solid #e2e7ed;
    border-radius: 10px;
    padding: 12px 13px;
    margin: 0 0 10px;
}
.cfaoi-cv-fix:last-child { margin-bottom: 0; }
.cfaoi-cv-fix__champ {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #1f7c85;                 /* teal foncé : contraste AA sur blanc */
}
.cfaoi-cv-fix__avant,
.cfaoi-cv-fix__apres {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.5;
    /* Les champs libres du CV sont multi-lignes (une expérience par ligne) :
       sans pre-wrap, l'avant/après serait recollé en un seul paragraphe et le
       jeune ne reconnaîtrait plus son texte. */
    white-space: pre-wrap;
    overflow-wrap: break-word;
    word-break: break-word;
}
.cfaoi-cv-fix__avant { color: #6b7280; margin-bottom: 8px; }
.cfaoi-cv-fix__apres { color: #2b2f36; }
/* Les deux pastilles se distinguent par leur MOT d'abord, puis par leur forme
   (contour creux / pastille pleine), la couleur ne venant qu'en troisième.
   Les couples couleur employés sont ceux qui existent déjà dans ce fichier —
   #6b7280 sur #d7dce2 (le gris de bordure des champs) et le couple exact de
   `.cfaoi-cv-chips span`. C'est aussi ce qui les fait passer AA : un fond
   teinté sous #1f7c85 à 17 % tombait à 4,2:1, la valeur existante (13 %) rend
   4,5:1, et le contour creux laisse le gris sur BLANC, à 4,9:1. */
.cfaoi-cv-fix__tag {
    display: inline-block;
    margin-right: 2px;
    padding: 1px 8px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}
.cfaoi-cv-fix__avant .cfaoi-cv-fix__tag { border-color: #d7dce2; color: #6b7280; }
.cfaoi-cv-fix__apres .cfaoi-cv-fix__tag { background: rgba(63, 185, 196, .13); color: #1f7c85; }

/* Zone tactile et focus visible sur les seuls boutons de cette étape : les
   écrans existants gardent leur rendu au pixel près (§ garde front). */
.cfaoi-cv-fix-actions .cfaoi-btn-ghost { min-height: 44px; }
.cfaoi-cv-fix-actions .cfaoi-btn-submit:focus-visible,
.cfaoi-cv-fix-actions .cfaoi-btn-ghost:focus-visible {
    outline: 2px solid #3FB9C4;
    outline-offset: 2px;
}
.cfaoi-cv-fix-actions .cfaoi-btn-submit[aria-busy="true"] { cursor: progress; }

.cfaoi-cv-viewer-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.cfaoi-cv-viewer-title { font-size: 13px; font-weight: 600; color: #6b7280; }
.cfaoi-cv-zoom { display: inline-flex; align-items: center; gap: 6px; }
/* 4.2.0 (revue) — Taille (44 × 44, sans marge : une marge n'est PAS une zone
   de frappe), rayon, fond, bordure et couleurs vivent dans le bouclier (le
   reset des <button> les mettait à nu, et les copies écrites ici — #d7dce2,
   #2b2f36, survol teal — divergeaient et perdaient). Ici : la mise en page. */
.cfaoi-cv-zoom button {
    display: inline-flex; align-items: center; justify-content: center;
}
.cfaoi-cv-zoom span { font-size: 12px; color: #6b7280; min-width: 42px; text-align: center; font-variant-numeric: tabular-nums; }

.cfaoi-cv-viewer {
    background: #eef1f5; border: 1px solid #e2e7ed; border-radius: 12px;
    padding: 18px; max-height: 80vh; overflow: auto; display: flex; justify-content: center;
}
.cfaoi-cv-page {
    /* 3.9.2 — largeur FLUIDE : 460 px de référence, mais le page peut rétrécir
       pour tenir dans une visionneuse étroite (card pop-up, mobile). Le fond
       « arcs » est en background-size:100% 100%, il s'adapte à toute largeur. */
    width: 460px; max-width: 100%; min-height: 650px; flex: 0 1 auto;
    background: #ffffff url(../images/cfaoi-cv-arcs.png) no-repeat;
    background-size: 100% 100%;
    box-shadow: 0 6px 24px rgba(20, 30, 45, .16);
    transform-origin: top center;
    transition: transform .12s ease;
}
.cfaoi-cv-page-inner { padding: 54px 46px 60px; color: #2b2f36; font-size: 13px; line-height: 1.5; }
.cfaoi-cv-head { text-align: center; margin-bottom: 22px; }
.cfaoi-cv-name { font-size: 26px; font-weight: 700; letter-spacing: .01em; color: #23282f; margin: 0 0 4px; }
.cfaoi-cv-name .cfaoi-cv-ph { color: #c3cad2; font-weight: 600; }
.cfaoi-cv-role { color: #2fa4af; font-weight: 700; font-size: 13px; margin: 0 0 9px; text-transform: uppercase; letter-spacing: .07em; }
.cfaoi-cv-contact { color: #6b7280; font-size: 12px; margin: 0; }
.cfaoi-cv-contact .cfaoi-cv-dot { margin: 0 7px; color: #EC4B87; font-weight: 700; }
.cfaoi-cv-guardian-note { color: #9aa2ac; font-size: 10.5px; font-style: italic; margin: 3px 0 0; }
.cfaoi-cv-sec { margin: 0 0 16px; }
.cfaoi-cv-sec h2 {
    font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
    color: #23282f; margin: 0 0 8px; padding-bottom: 4px;
    border-bottom: 2px solid #EC4B87; display: inline-block;
}
.cfaoi-cv-sec p { margin: 0; }
.cfaoi-cv-sec ul { margin: 0; padding-left: 18px; }
.cfaoi-cv-sec li { margin: 0 0 4px; }
.cfaoi-cv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cfaoi-cv-chips span {
    background: rgba(63, 185, 196, .13); color: #1f7c85; font-size: 12px;
    padding: 3px 9px; border-radius: 999px;
}

@media (max-width: 820px) {
    .cfaoi-cv-creator { flex-direction: column-reverse; }
    .cfaoi-cv-right { position: static; width: 100%; flex-basis: auto; }
    .cfaoi-cv-left  { width: 100%; flex-basis: auto; }
    .cfaoi-cv-viewer { max-height: 58vh; }
    .cfaoi-cv-page { width: 100%; min-height: 460px; }
}

/* ══════════════════════════════════════════════════════════════════════
   3.9.2 — Créateur de CV DANS LA MODALE POP-UP.
   La card pop-up a une hauteur FIXE (760 px, cf. cfaoi-popup.css) et
   `overflow:hidden` : le créateur doit donc occuper 100 % de cette hauteur
   et gérer son propre défilement, sinon la fin du formulaire et le bas du CV
   sont coupés. Ces règles ne s'appliquent qu'à l'intérieur de `.cfaoi-pop-chat`
   — en mode shortcode (page normale), le créateur garde sa hauteur naturelle.
   ══════════════════════════════════════════════════════════════════════ */
.cfaoi-pop-chat .cfaoi-cv-creator {
    height: 100%;
    box-sizing: border-box;
    padding: 16px 18px;
    gap: 18px;
    overflow: hidden;            /* desktop : ce sont les colonnes qui défilent */
}
.cfaoi-pop-chat .cfaoi-cv-left,
.cfaoi-pop-chat .cfaoi-cv-right {
    height: 100%;
    min-height: 0;
    overflow-y: auto;
}
.cfaoi-pop-chat .cfaoi-cv-right { position: static; top: auto; }
.cfaoi-pop-chat .cfaoi-cv-viewer { max-height: none; }

/* Sous 820 px DANS la modale : une seule colonne, formulaire d'abord (la
   question doit être immédiatement visible), tout l'écran défile d'un bloc. */
@media (max-width: 820px) {
    .cfaoi-pop-chat .cfaoi-cv-creator {
        flex-direction: column;
        overflow-y: auto;
        gap: 14px;
        padding: 14px;
    }
    .cfaoi-pop-chat .cfaoi-cv-left,
    .cfaoi-pop-chat .cfaoi-cv-right { height: auto; overflow: visible; }
    .cfaoi-pop-chat .cfaoi-cv-viewer { max-height: 46vh; }
}


/* ═══════════════════════════════════════════════════════════════════════
   3.13.41 — « LE CFA NE PROPOSE PLUS CE MÉTIER »
   ═══════════════════════════════════════════════════════════════════════
   Le jeune a nommé un métier que le CFA a retiré de son catalogue. On lui
   propose quand même la piste la plus proche — arbitrage client du
   21/08/2026, « garder la chip et LE DIRE » — mais l'écran doit dire
   pourquoi ce n'est pas ce qu'il avait demandé.

   Le bloc est placé AVANT « Formation recommandée » par `cfaoi-app.js` :
   c'est une condition de lecture du résultat, pas une note de bas de page
   sous une affirmation contraire.

   Registre visuel : une NOTE, pas une erreur. Rien n'est cassé, personne
   n'a fait de faute — le CFA a simplement arrêté cette formation. D'où
   l'ambre du jeton `--cfaoi-secondary` (déjà au fichier) plutôt que le
   rouge de `--cfaoi-danger`, qui ferait lire une panne. Le filet vertical
   suffit à retenir l'œil sans crier.

   ⚠️ Aucune couleur écrite en dur : toutes viennent des jetons du §:root,
   pour que la personnalisation d'apparence du back-office continue de
   s'appliquer ici comme partout ailleurs.
   ─────────────────────────────────────────────────────────────────────── */
.cfaoi-subdomain-gone {
    margin: 0;
    padding: 14px 16px;
    border-left: 4px solid var(--cfaoi-secondary, #f59e0b);
    border-radius: 0 var(--cfaoi-radius-sm, 8px) var(--cfaoi-radius-sm, 8px) 0;
    background: var(--cfaoi-bg-alt, #f1f5f9);
    color: var(--cfaoi-text-soft, #334155);
    font-size: 0.94rem;
    line-height: 1.55;
}

@media (max-width: 640px) {
    .cfaoi-subdomain-gone {
        padding: 12px 14px;
        font-size: 0.9rem;
    }
}

/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  4.2.0 — « BRAISE SUR FOND CLAIR » : mise en page et MOUVEMENT        ║
   ║  des composants que le lot touche. Les couleurs, fonds, bordures et   ║
   ║  ombres colorées de ces mêmes composants vivent dans                  ║
   ║  cfaoi-theme-shield.css (section « 4.2.0 — Braise »), parce que le    ║
   ║  thème du site impose `*, ::before, ::after { color: #000 !important; ║
   ║  background: transparent !important }` et que seule une              ║
   ║  ré-affirmation à (0,2,0) + !important gagne. Rien ici n'écrit une    ║
   ║  couleur de texte ou de fond.                                         ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* ── Les portes d'après-résultat (« Laisser mes coordonnées au CFA »,
   « Continuer d'en parler ») — jusqu'ici NUES : aucune règle dans aucune
   feuille, le reset des <button> laissait un texte collé à gauche. C'est
   l'action de conversion du module (1 dossier pour 8 résultats, 4.1.0) :
   action principale pleine, centrée, 48 px. Couleurs au bouclier. ───── */
.cfaoi-wrapper .cfaoi-open-profile-door {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 2px 0 8px;
    animation: cfaoiRise var(--cfaoi-dur, 220ms) var(--cfaoi-ease-out, ease-out) backwards;
}
.cfaoi-wrapper .cfaoi-choice-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    max-width: 100%;
    white-space: normal;
    transition: transform var(--cfaoi-dur-fast, 160ms) var(--cfaoi-ease-out, ease-out), box-shadow var(--cfaoi-dur-fast, 160ms) ease, background-color var(--cfaoi-dur-fast, 160ms) ease;
}
.cfaoi-wrapper .cfaoi-choice-btn:active { transform: translateY(0) scale(0.985); }

/* ── LA transition des boutons du module — UNE liste, à (0,2,0). ⚠️ Le reset
   `.cfaoi-wrapper button` du bouclier (0,1,1) déclare lui aussi `transition`
   (200 ms, `ease`) : une transition écrite sur une classe seule (0,1,0) perd
   contre lui quel que soit l'ordre des feuilles. Six d'entre elles (pastille,
   deux portes d'accueil, bouton principal, « Voir le détail », porte
   employeur) étaient mortes — la courbe et les 160 ms du lot ne se rendaient
   sur aucune (revue 4.2.0). `opacity` est dans la liste pour le passage à
   :disabled du bouton principal. La modale est appendue au <body>, hors du
   wrapper : son bouton principal est nommé à part. */
.cfaoi-wrapper .cfaoi-btn-send,
.cfaoi-wrapper .cfaoi-btn-mic,
.cfaoi-wrapper .cfaoi-btn-live,
.cfaoi-wrapper .cfaoi-voice-toggle,
.cfaoi-wrapper .cfaoi-play-btn,
.cfaoi-wrapper .cfaoi-routing-back,
.cfaoi-wrapper .cfaoi-btn-ghost,
.cfaoi-wrapper .cfaoi-btn-link,
.cfaoi-wrapper .cfaoi-choice-button,
.cfaoi-wrapper .cfaoi-welcome-btn-primary,
.cfaoi-wrapper .cfaoi-welcome-btn-secondary,
.cfaoi-wrapper .cfaoi-btn-submit,
.cfaoi-result-overlay .cfaoi-btn-submit,
.cfaoi-wrapper .cfaoi-consent__toggle,
.cfaoi-wrapper .cfaoi-routing-alt-btn {
    transition: transform var(--cfaoi-dur-fast, 160ms) var(--cfaoi-ease-out, ease-out), box-shadow var(--cfaoi-dur-fast, 160ms) ease, background-color var(--cfaoi-dur-fast, 160ms) ease, border-color var(--cfaoi-dur-fast, 160ms) ease, color var(--cfaoi-dur-fast, 160ms) ease, opacity var(--cfaoi-dur-fast, 160ms) ease;
}
.cfaoi-wrapper .cfaoi-voice-toggle { border-radius: 12px; }
/* Le bouton « réécouter » : 28 px DESSINÉS (il vit en ligne après le texte de
   la bulle, un bloc de 44 px casserait l'interligne), 44 × 44 CLIQUABLES par
   un pseudo-élément invisible qui déborde de 8 px — exactement la gouttière
   `margin-left: 8px` qui le sépare du dernier mot, donc rien du texte n'est
   recouvert. Le `background: transparent !important` du thème sur ::before
   est ici un allié. (revue 4.2.0 : 28 px nus = cible tactile insuffisante) */
.cfaoi-wrapper .cfaoi-play-btn { width: 28px; height: 28px; position: relative; }
.cfaoi-wrapper .cfaoi-play-btn::before {
    content: "";
    position: absolute;
    top: -8px; right: -8px; bottom: -8px; left: -8px;
}
/* « Change de parcours » (écran de qualification B) est un <button> EN LIGNE
   dans une phrase : ~27 px de haut. Même recette — la zone de frappe s'étend
   de 9 px au-dessus et au-dessous (≈ 44 px), sans toucher à l'interligne ni
   déborder sur les mots voisins (largeur inchangée). */
.cfaoi-wrapper .cfaoi-btn-link { position: relative; }
.cfaoi-wrapper .cfaoi-btn-link::before {
    content: "";
    position: absolute;
    top: -9px; right: 0; bottom: -9px; left: 0;
}
.cfaoi-wrapper .cfaoi-btn-send:active { transform: translateY(0) scale(0.96); }

/* ── Résultat : la modale FOND (240 ms, règle plus haut) ; dedans, seuls les
   escaliers montent — le badge 80 ms après l'ouverture, les cartes annexes à
   0 / 60 / 120 ms. La carte elle-même ne monte plus (revue : trois niveaux
   de translation imbriqués, cf. `.cfaoi-result-wrapper`). */
.cfaoi-result-overlay .cfaoi-badge {
    animation: cfaoiRise var(--cfaoi-dur, 220ms) var(--cfaoi-ease-out, ease-out) 80ms backwards;
}
.cfaoi-result-overlay .cfaoi-related-card {
    animation: cfaoiRiseCard var(--cfaoi-dur-slow, 260ms) var(--cfaoi-ease-out, ease-out) backwards;
}
.cfaoi-result-overlay .cfaoi-related-card:nth-child(2) { animation-delay: 60ms; }
.cfaoi-result-overlay .cfaoi-related-card:nth-child(n+3) { animation-delay: 120ms; }
.cfaoi-result-overlay .cfaoi-main-action:active { transform: translateY(0) scale(0.985); }
.cfaoi-result-overlay .cfaoi-result-close { transition: transform 180ms var(--cfaoi-ease-out, ease-out), background-color 180ms ease, color 180ms ease; }
/* Sous 540 px les actions sont empilées pleine largeur (règle plus haut) :
   `nowrap` y couperait un libellé long. */
@media (max-width: 540px) {
    .cfaoi-result-overlay .cfaoi-main-action { white-space: normal; }
}

/* ── LES SURVOLS « DE QUALITÉ » — UNIQUEMENT sur un pointeur fin qui sait
   survoler. Au tactile, un :hover colle après le tap : le bouton resterait
   levé jusqu'au suivant, sur l'appareil principal du public. Les levers des
   composants dont le bouclier déclare DÉJÀ `transform` au survol
   (btn-submit, main-action, related-link, related-card, btn-send,
   company-state__opt, choice-card du pop-up) vivent dans SON bloc @media —
   un doublon ici perdrait à égalité de spécificité par l'ordre de
   chargement. Ici : ceux dont le bouclier ne déclare aucun transform. ───── */
@media (hover: hover) and (pointer: fine) {
    .cfaoi-wrapper .cfaoi-welcome-btn-primary:hover,
    .cfaoi-wrapper .cfaoi-welcome-btn-secondary:hover,
    .cfaoi-wrapper .cfaoi-routing-alt-btn:hover,
    .cfaoi-wrapper .cfaoi-choice-btn:hover,
    .cfaoi-wrapper .cfaoi-btn-ghost:hover,
    .cfaoi-wrapper .cfaoi-consent__toggle:hover { transform: translateY(-2px); }
    /* Les pastilles GLISSENT de 2 px vers la droite : elles sont empilées,
       un lever ferait vibrer la liste. */
    .cfaoi-wrapper .cfaoi-choice-button:hover { transform: translateX(2px); }
    .cfaoi-wrapper .cfaoi-routing-back:hover { transform: translateX(-2px); }
    .cfaoi-wrapper .cfaoi-play-btn:hover { transform: scale(1.06); }
    .cfaoi-result-overlay .cfaoi-result-close:hover { transform: rotate(90deg) scale(1.05); }
}
/* L'appui redescend TOUJOURS, survol ou pas : même spécificité (0,3,0) que
   les survols ci-dessus, déclaré APRÈS, donc il gagne pendant le clic. */
.cfaoi-wrapper .cfaoi-welcome-btn-primary:active,
.cfaoi-wrapper .cfaoi-welcome-btn-secondary:active,
.cfaoi-wrapper .cfaoi-routing-alt-btn:active,
.cfaoi-wrapper .cfaoi-choice-btn:active,
.cfaoi-wrapper .cfaoi-btn-ghost:active,
.cfaoi-wrapper .cfaoi-consent__toggle:active { transform: translateY(0) scale(0.985); }
.cfaoi-wrapper .cfaoi-choice-button:active { transform: translateX(2px) scale(0.99); }