/* ╔══════════════════════════════════════════════════════════════════════╗
   ║   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);
}

/* ─── 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); }
}

@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); }
}

@keyframes cfaoiLiveGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.5); }
  50%      { box-shadow: 0 0 0 16px rgba(6, 182, 212, 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) ───────────────────────────────────── */
.cfaoi-progress {
  height: 3px;
  background: var(--cfaoi-border-soft);
  position: relative;
  overflow: hidden;
}
.cfaoi-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cfaoi-cyan), var(--cfaoi-accent));
  width: 0%;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  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: cfaoiSlideUp 0.35s ease-out;
  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;
}
.cfaoi-play-btn:hover {
  background: var(--cfaoi-primary);
  color: #fff;
  transform: scale(1.05);
}

/* ─── 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%;
  animation: cfaoiSlideUp 0.4s ease-out 0.15s backwards;
}
.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;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  overflow: hidden;
}
/* 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;
}
.cfaoi-choice-button:hover {
  border-color: var(--cfaoi-primary);
  background: var(--cfaoi-primary-light);
}
.cfaoi-choice-button:focus-visible {
  outline: 2px solid var(--cfaoi-primary);
  outline-offset: 2px;
}
.cfaoi-choice-button:active {
  background: var(--cfaoi-primary-light);
  transform: scale(0.99);
}

/* ─── 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);
}
.cfaoi-btn-mic.cfaoi-recording {
  background: #fee2e2;
  color: var(--cfaoi-danger);
  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: linear-gradient(135deg, var(--cfaoi-cyan), var(--cfaoi-accent));
  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 {
  transform: translateY(-1px);
  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(6, 182, 212, 0.08), rgba(124, 58, 237, 0.08));
}
.cfaoi-live-banner {
  display: none;
  padding: 14px 18px;
  background: linear-gradient(135deg, var(--cfaoi-cyan), var(--cfaoi-accent));
  color: #fff;
  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;
}
/* 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;
  transition: all 0.2s ease;
  box-shadow: 0 8px 24px -8px rgba(37, 99, 235, 0.5);
  font-family: inherit;
}
.cfaoi-welcome-btn-primary:hover { transform: translateY(-1px); }
.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;
  transition: all 0.2s ease;
}
.cfaoi-welcome-btn-secondary:hover {
  border-color: var(--cfaoi-primary);
  color: var(--cfaoi-primary);
}
.cfaoi-welcome-footer { margin-top: 24px; }
.cfaoi-welcome-mention { margin: 0 0 4px; font-size: 12px; color: var(--cfaoi-text-muted); }
.cfaoi-welcome-microtext { margin: 0; font-size: 11.5px; color: #94a3b8; }

/* ─── Result card (résultat final) ────────────────────────────────────── */
.cfaoi-result-wrapper { animation: cfaoiSlideUp 0.5s ease-out; }
.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: linear-gradient(90deg, var(--cfaoi-cyan), var(--cfaoi-accent));
  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);
  transform: translateY(-1px);
}
.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;
}
.cfaoi-related-link:hover { background: var(--cfaoi-accent); transform: translateY(-1px); }
.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;
  animation: cfaoiSlideUp 0.5s ease-out 0.2s backwards;
}
.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);
}
.cfaoi-btn-submit {
  width: 100%;
  padding: 13px 22px;
  background: linear-gradient(135deg, var(--cfaoi-cyan), var(--cfaoi-accent));
  color: #fff;
  border: none;
  border-radius: var(--cfaoi-radius-md);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s ease;
  margin-top: 6px;
  box-shadow: 0 8px 22px -8px rgba(124, 58, 237, 0.5);
}
.cfaoi-btn-submit:hover { transform: translateY(-1px); }
.cfaoi-btn-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* ─── 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: 12px 14px; }
  .cfaoi-input-text { padding: 10px 14px; font-size: 13.5px; }
  .cfaoi-btn-mic, .cfaoi-btn-live { width: 46px; height: 46px; }
  .cfaoi-btn-mic svg, .cfaoi-btn-live svg { width: 22px !important; height: 22px !important; }
  .cfaoi-btn-send { height: 38px; padding: 0 14px; }
  .cfaoi-lead-form-card { padding: 18px 18px; }
}

/* ─── Reduced motion ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .cfaoi-wrapper, .cfaoi-message, .cfaoi-result-wrapper, .cfaoi-lead-form-card {
    animation: none;
  }
  .cfaoi-typing-dot, .cfaoi-header-avatar::after { animation: none; }
  /* 3.13.5 — Les trois pulsations du pied de chat étaient absentes de ce bloc.
     Celle de l'invitation tourne pendant TOUTE la durée d'une question, ce qui
     est bien plus insistant qu'un halo d'enregistrement de quelques secondes :
     l'ajouter sans la couvrir ici aurait cassé une convention que le plugin
     tient déjà en cinq endroits.

     Sous `reduced-motion` on ne SUPPRIME pas le signal, on l'immobilise : un
     contour ambre permanent reste lisible, là où « rien » priverait le jeune de
     l'affordance. */
  .cfaoi-btn-mic.cfaoi-recording,
  .cfaoi-btn-live.cfaoi-live-active { animation: none; }
  .cfaoi-btn-mic.cfaoi-mic-invite {
    animation: none;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.45);
  }
}

/* ──────────────────────────────────────────────────────────────────────
   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 ─────── */
.cfaoi-wrapper.is-speaking {
  box-shadow:
    0 24px 60px -20px rgba(15, 23, 42, 0.18),
    inset 0 0 0 1px rgba(8, 145, 178, 0.22);
}
.cfaoi-wrapper.is-speaking .cfaoi-header-avatar::after {
  background: var(--cfaoi-cyan);
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px rgba(6, 182, 212, 0.25);
  animation: cfaoiSpeakingDot 1.4s ease-in-out infinite;
}
@keyframes cfaoiSpeakingDot {
  0%, 100% { box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px rgba(6, 182, 212, 0.25); }
  50%      { box-shadow: 0 0 0 2px #ffffff, 0 0 0 6px rgba(6, 182, 212, 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 (cyan léger plutôt que dégradé violet) */
.cfaoi-typing-dot {
  background: var(--cfaoi-cyan);
  opacity: 0.7;
}

/* ─── Footer : surface blanche distincte, séparateur net ─────────────── */
.cfaoi-chat-footer {
  padding: 14px 18px 18px;
  gap: 10px;
  background: #ffffff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}
.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 ───────────────────── */
.cfaoi-progress-fill {
  background: linear-gradient(90deg, var(--cfaoi-primary), var(--cfaoi-cyan));
}

/* ─── 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;
}
.cfaoi-welcome-btn-primary {
  padding: 14px 22px;
  font-size: 15px;
  border-radius: 12px;
  background: var(--cfaoi-primary);
  box-shadow: 0 6px 18px -6px rgba(37, 99, 235, 0.45);
}
.cfaoi-welcome-btn-primary:hover {
  background: var(--cfaoi-primary-dark);
}
.cfaoi-welcome-btn-secondary {
  padding: 13px 22px;
  font-size: 14px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  color: var(--cfaoi-text-soft);
  background: transparent;
}
.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;
}
.cfaoi-confidence-fill {
  background: linear-gradient(90deg, var(--cfaoi-primary), var(--cfaoi-cyan));
}

/* ─── 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);
}
.cfaoi-main-action--primary:hover {
  background: var(--cfaoi-primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -6px rgba(30, 64, 175, 0.55);
}
.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: 12px;
  background: var(--cfaoi-primary);
  box-shadow: 0 6px 18px -6px rgba(37, 99, 235, 0.45);
}
.cfaoi-btn-submit:hover { background: var(--cfaoi-primary-dark); }

/* ─── 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 0.28s 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;
    transform: scale(1.05);
}
.cfaoi-result-close:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* ── 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-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;
}
.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;
}
.cfaoi-routing-error {
    margin: 10px 0 0;
    min-height: 1em;
    font-size: 13px;
    font-weight: 600;
    color: #dc2626;
    text-align: center;
}
.cfaoi-routing-success {
    margin: 14px 0 0;
    text-align: center;
    font-weight: 700;
    color: #16a34a;
}
/* Bouton-lien de préinscription (parcours A) — 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é. */
.cfaoi-routing-intent {
    margin: 2px 0 18px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--cfaoi-primary-light);
    border: 1px solid rgba(37, 99, 235, 0.18);
}
.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);
}

/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  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);
    transform: translateY(-1px);
}
/* 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) ──────── */
.cfaoi-formation-card {
    margin: 12px 0 0;
    padding: 16px 16px 14px;
    border: 1.5px solid var(--cfaoi-border);
    border-radius: var(--cfaoi-radius-lg);
    background: var(--cfaoi-surface);
    text-align: left;
}
.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);
    transform: translateY(-1px);
}
.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;
}

/* ── 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: 18px;
    height: 18px;
    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;
}
.cfaoi-cv-opt { color: #9aa2ac; 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; }
.cfaoi-cv-zoom button {
    width: 28px; height: 28px; border-radius: 7px; border: 1px solid #d7dce2;
    background: #fff; color: #2b2f36; font-size: 17px; line-height: 1; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.cfaoi-cv-zoom button:hover { border-color: #3FB9C4; color: #3FB9C4; }
.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;
    }
}