/* ╔══════════════════════════════════════════════════════════════════════╗
   ║   CFA Orientation IA — Bouclier d'isolation contre le thème WP        ║
   ║   1.5.3 — Tous les boutons, inputs, liens, p, h* du module sont       ║
   ║   neutralisés avec !important pour battre les surcharges du thème     ║
   ║   parent, puis le design propre à chaque composant est ré-affirmé    ║
   ║   avec la même priorité.                                              ║
   ║                                                                       ║
   ║   Ce fichier doit être enqueued APRÈS cfaoi-public.css et              ║
   ║   cfaoi-popup.css pour gagner sur l'ordre source, en complément du    ║
   ║   !important pour les propriétés critiques.                           ║
   ║                                                                       ║
   ║   Scope ciblé :                                                       ║
   ║     • .cfaoi-wrapper        → chat apprenti (shortcode + popup)       ║
   ║     • .cfaoi-pop-root       → popup (greeting/choix/pro)              ║
   ║     • .cfaoi-result-overlay → modale plein écran du résultat          ║
   ║                                                                       ║
   ║   #cfaoi-popup-root est un alias du root WP : l'id est posé sur LA    ║
   ║   MÊME div que .cfaoi-pop-root. Il n'apporte donc aucune couverture   ║
   ║   supplémentaire — seulement de la spécificité.                       ║
   ║   ⚠ 3.6.1 — NE PAS le remettre dans les sélecteurs de la PHASE 1.    ║
   ║   Il y portait le reset à (1,0,1), au-dessus des ré-affirmations      ║
   ║   `.racine .classe` (0,2,0) des PHASES 2 et 3 : le reset gagnait      ║
   ║   contre le design du module, et tout le pop-up s'affichait à nu.     ║
   ║   Dans une ré-affirmation de composant, en revanche, il est inutile   ║
   ║   mais inoffensif.                                                    ║
   ║                                                                       ║
   ║   Crédits : exosteeve.fr × scroler.fr                                ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* ═══════════════════════════════════════════════════════════════════════
   PHASE 1 — RESET dur (neutralise l'héritage du thème WordPress)
   ─────────────────────────────────────────────────────────────────────── */

/* Box-sizing partout */
.cfaoi-wrapper,
.cfaoi-wrapper *,
.cfaoi-wrapper *::before,
.cfaoi-wrapper *::after,
.cfaoi-pop-root,
.cfaoi-pop-root *,
.cfaoi-pop-root *::before,
.cfaoi-pop-root *::after,
#cfaoi-popup-root,
#cfaoi-popup-root *,
.cfaoi-result-overlay,
.cfaoi-result-overlay *,
.cfaoi-result-overlay *::before,
.cfaoi-result-overlay *::after {
    box-sizing: border-box !important;
}

/* Anti-overflow : on garde max-width: 100% pour éviter les débordements
   mais on NE FORCE PAS min-width: 0 partout (1.5.4) — ça cassait certains
   layouts qui dépendent de la taille intrinsèque de leurs éléments.
   Les composants spécifiques qui en ont besoin remettent min-width: 0
   dans leurs propres règles. */
.cfaoi-wrapper,
.cfaoi-wrapper *,
.cfaoi-pop-root *,
#cfaoi-popup-root *,
.cfaoi-result-overlay,
.cfaoi-result-overlay * {
    max-width: 100%;
}
.cfaoi-wrapper,
.cfaoi-result-overlay {
    overflow-wrap: anywhere;
    word-break: normal;
}

/* ─── Boutons natifs : reset complet ─────────────────────────────────── */
/* 1.5.4 — On NE FORCE PLUS display/align/justify-content/text-align ici :
   ces propriétés sont propres à chaque composant. On neutralise UNIQUEMENT
   ce que le thème WordPress vole habituellement : background, border,
   color, font, appearance natif. Chaque composant garde son layout. */
/* 3.6.1 — `#cfaoi-popup-root button` RETIRÉ de cette liste.
   Symptôme mesuré : dans le pop-up, le CTA n'avait plus son dégradé, les
   cartes de choix plus leur fond « glass », les boutons ✕ / — plus leur
   disque, les chips du chat plus leur cadre — alors que la PHASE 3 ci-dessous
   ré-affirme précisément tout cela.
   Cause racine : l'id et la classe sont posés sur LA MÊME div
   (`class-cfaoi-popup.php` : `<div id="cfaoi-popup-root" class="cfaoi-pop-root">`).
   Le sélecteur d'id n'ajoutait donc AUCUNE couverture, mais il portait la
   spécificité du reset à (1,0,1) — au-dessus des ré-affirmations
   `.cfaoi-pop-root .classe` (0,2,0) de la PHASE 3. À !important égal, c'est la
   spécificité qui tranche : le reset gagnait contre le design du module.
   La preuve tient dans le fichier lui-même — les deux SEULS composants qui
   s'affichaient correctement (`.cfaoi-pop-launcher`, `.cfaoi-pop-pro-chat-choice`)
   sont les deux SEULS dont la ré-affirmation répétait l'id.
   `.cfaoi-pop-root button` matche exactement le même ensemble d'éléments avec
   les mêmes déclarations : la protection contre le thème est intacte, au même
   niveau que `.cfaoi-wrapper button` et `.cfaoi-result-overlay button` qui
   gardent le chat et la modale en production. */
.cfaoi-wrapper button,
.cfaoi-wrapper input[type="button"],
.cfaoi-wrapper input[type="submit"],
.cfaoi-wrapper input[type="reset"],
.cfaoi-pop-root button,
.cfaoi-pop-root input[type="button"],
.cfaoi-pop-root input[type="submit"],
.cfaoi-result-overlay button,
.cfaoi-result-overlay input[type="button"],
.cfaoi-result-overlay input[type="submit"] {
    background: transparent !important;
    background-image: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: inherit !important;
    cursor: pointer !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    font-style: normal !important;
    letter-spacing: normal !important;
    line-height: 1.4 !important;
    margin: 0;
    padding: 0;
    text-decoration: none !important;
    text-transform: none !important;
    text-shadow: none !important;
    -webkit-appearance: none !important;
       -moz-appearance: none !important;
            appearance: none !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
/* Outline focus uniquement quand visible (a11y) */
.cfaoi-wrapper button:focus-visible,
.cfaoi-pop-root button:focus-visible,
.cfaoi-result-overlay button:focus-visible {
    outline: 2px solid var(--cfaoi-primary, #2563eb);
    outline-offset: 2px;
}

/* ─── Champs de formulaire : reset puis style de base propre ─────────── */
.cfaoi-wrapper input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="range"]):not([type="color"]):not([type="file"]),
.cfaoi-wrapper textarea,
.cfaoi-wrapper select,
.cfaoi-pop-root input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="range"]):not([type="color"]):not([type="file"]),
.cfaoi-pop-root textarea,
.cfaoi-pop-root select,
#cfaoi-popup-root input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="range"]):not([type="color"]):not([type="file"]),
#cfaoi-popup-root textarea,
.cfaoi-result-overlay input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="range"]):not([type="color"]):not([type="file"]),
.cfaoi-result-overlay textarea,
.cfaoi-result-overlay select {
    background: #ffffff !important;
    background-image: none !important;
    background-color: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    padding: 12px 14px !important;
    margin: 0 !important;
    font-family: inherit !important;
    font-size: 14.5px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    text-shadow: none !important;
    width: 100% !important;
    min-height: 0;
    height: auto;
    display: block;
    -webkit-appearance: none !important;
       -moz-appearance: none !important;
            appearance: none !important;
    outline: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Focus visible (a11y) */
.cfaoi-wrapper input:focus,
.cfaoi-wrapper textarea:focus,
.cfaoi-wrapper select:focus,
.cfaoi-pop-root input:focus,
.cfaoi-pop-root textarea:focus,
.cfaoi-pop-root select:focus,
.cfaoi-result-overlay input:focus,
.cfaoi-result-overlay textarea:focus,
.cfaoi-result-overlay select:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}

/* Placeholder uniforme */
.cfaoi-wrapper input::placeholder,
.cfaoi-wrapper textarea::placeholder,
.cfaoi-pop-root input::placeholder,
.cfaoi-pop-root textarea::placeholder,
.cfaoi-result-overlay input::placeholder,
.cfaoi-result-overlay textarea::placeholder {
    color: #94a3b8 !important;
    opacity: 1 !important;
    font-style: normal !important;
}

/* Select : flèche custom (sinon les thèmes affichent la flèche native qui dépasse) */
.cfaoi-wrapper select,
.cfaoi-pop-root select,
.cfaoi-result-overlay select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 14px !important;
    padding-right: 38px !important;
}

/* Checkbox / radio : taille raisonnable, accent couleur */
.cfaoi-wrapper input[type="checkbox"],
.cfaoi-wrapper input[type="radio"],
.cfaoi-pop-root input[type="checkbox"],
.cfaoi-pop-root input[type="radio"],
.cfaoi-result-overlay input[type="checkbox"],
.cfaoi-result-overlay input[type="radio"] {
    width: 16px !important;
    height: 16px !important;
    margin: 0 8px 0 0 !important;
    accent-color: #2563eb !important;
    cursor: pointer !important;
    vertical-align: middle !important;
}

/* ─── Liens : transparent, sans soulignement, couleur héritée ────────── */
/* 3.6.1 — `#cfaoi-popup-root a` retiré, même cause que pour les boutons
   ci-dessus : dans le pop-up, `.cfaoi-formation-card__link` perdait sa couleur
   bleue et son soulignement (mesuré : #0f172a, text-decoration: none) parce que
   le reset d'id (1,0,1) battait la ré-affirmation (0,2,0). `.cfaoi-pop-root a`
   couvre les mêmes liens. */
.cfaoi-wrapper a,
.cfaoi-pop-root a,
.cfaoi-result-overlay a {
    color: inherit !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
    text-shadow: none !important;
    border: none;
    transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

/* ─── Titres : marges/font-weights/letter-spacing reset ──────────────── */
/* 3.6.1 — variantes `#cfaoi-popup-root h*` retirées, même cause que pour les
   boutons : redondantes en couverture (même div), mais elles hissaient le reset
   au-dessus des ré-affirmations de composant. */
.cfaoi-wrapper h1, .cfaoi-wrapper h2, .cfaoi-wrapper h3,
.cfaoi-wrapper h4, .cfaoi-wrapper h5, .cfaoi-wrapper h6,
.cfaoi-pop-root h1, .cfaoi-pop-root h2, .cfaoi-pop-root h3,
.cfaoi-pop-root h4, .cfaoi-pop-root h5, .cfaoi-pop-root h6,
.cfaoi-result-overlay h1, .cfaoi-result-overlay h2, .cfaoi-result-overlay h3,
.cfaoi-result-overlay h4, .cfaoi-result-overlay h5, .cfaoi-result-overlay h6 {
    font-family: inherit !important;
    color: inherit !important;
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.25 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    text-shadow: none !important;
    text-align: inherit;
    font-style: normal !important;
}

/* ─── Paragraphes / blockquote / pre ────────────────────────────────── */
/* 3.6.1 — `#cfaoi-popup-root p` retiré, même cause que pour les boutons.
   Mesuré dans le pop-up : `.cfaoi-search-metier__help` et
   `.cfaoi-formation-card__title` retombaient à `margin: 0` et à la couleur
   héritée, leurs deux lignes se collant l'une à l'autre — exactement le défaut
   que le commentaire des marges de la PHASE 2 dit avoir corrigé. */
.cfaoi-wrapper p,
.cfaoi-pop-root p,
.cfaoi-result-overlay p {
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    background: transparent !important;
    line-height: 1.55 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    text-shadow: none !important;
    font-style: normal !important;
}

/* ─── Listes : pas de bullet par défaut ─────────────────────────────── */
.cfaoi-wrapper ul, .cfaoi-wrapper ol, .cfaoi-wrapper li,
.cfaoi-pop-root ul, .cfaoi-pop-root ol, .cfaoi-pop-root li,
.cfaoi-result-overlay ul, .cfaoi-result-overlay ol, .cfaoi-result-overlay li {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

/* ─── Images / SVG : block + max-width ──────────────────────────────── */
.cfaoi-wrapper img, .cfaoi-wrapper svg,
.cfaoi-pop-root img, .cfaoi-pop-root svg,
.cfaoi-result-overlay img, .cfaoi-result-overlay svg {
    max-width: 100%;
    height: auto;
    border: none;
    background: transparent;
}

/* ─── Labels ─────────────────────────────────────────────────────────── */
.cfaoi-wrapper label,
.cfaoi-pop-root label,
.cfaoi-result-overlay label {
    font-family: inherit !important;
    color: inherit !important;
    font-weight: 500;
    background: transparent !important;
    border: none !important;
    padding: 0;
    margin: 0;
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* ─── Tables (si jamais) ────────────────────────────────────────────── */
.cfaoi-wrapper table,
.cfaoi-pop-root table,
.cfaoi-result-overlay table {
    border-collapse: collapse;
    width: 100%;
    background: transparent;
}

/* Bloc neutre des `hr` */
.cfaoi-wrapper hr,
.cfaoi-pop-root hr,
.cfaoi-result-overlay hr {
    border: 0;
    border-top: 1px solid #e2e8f0;
    margin: 16px 0;
    background: transparent;
    height: auto;
}

/* ═══════════════════════════════════════════════════════════════════════
   PHASE 2 — RÉ-APPLICATION du design propre (composants spécifiques)
   ─────────────────────────────────────────────────────────────────────── */

/* ─── Chat apprenti : bouton submit (formulaire de lead) ─────────────── */
.cfaoi-wrapper .cfaoi-btn-submit,
#cfaoi-popup-root .cfaoi-btn-submit,
.cfaoi-result-overlay .cfaoi-btn-submit {
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%) !important;
    color: #ffffff !important;
    padding: 14px 24px !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    width: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px;
    box-shadow: 0 8px 20px -8px rgba(37, 99, 235, 0.5) !important;
    cursor: pointer !important;
    margin-top: 6px !important;
}
.cfaoi-wrapper .cfaoi-btn-submit:hover,
#cfaoi-popup-root .cfaoi-btn-submit:hover,
.cfaoi-result-overlay .cfaoi-btn-submit:hover {
    background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 12px 28px -10px rgba(37, 99, 235, 0.6) !important;
}
.cfaoi-wrapper .cfaoi-btn-submit:disabled,
#cfaoi-popup-root .cfaoi-btn-submit:disabled,
.cfaoi-result-overlay .cfaoi-btn-submit:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* ─── Chat apprenti : écran d'aiguillage A/B/C (3.1.2) ───────────────────
   Les boutons Oui/Non (.cfaoi-routing-opt) sont des <button> génériques :
   le reset ci-dessus les met à nu. On leur redonne leur look ICI, avec la
   même spécificité (.cfaoi-wrapper .classe) + !important que .cfaoi-btn-submit,
   sinon le reset gagne et ils s'affichent en texte brut. */
.cfaoi-wrapper .cfaoi-routing-opt,
#cfaoi-popup-root .cfaoi-routing-opt {
    flex: 1 1 0 !important;
    min-width: 130px;
    /* 3.3.1 (reprise) — Hauteur DÉCLARÉE, plus « calculée ».
       La règle UX du projet exige une cible tactile ≥ 44 px ; ici elle
       n'était atteinte que par l'addition padding + line-height, c'est-à-dire
       par hasard : une police plus étroite servie par le thème, un libellé
       traduit plus court ou un simple ajustement de padding la faisaient
       passer sous le seuil sans que rien ne l'interdise. Déclarée dans le
       bouclier parce que c'est LUI qui gagne sur .cfaoi-routing-opt de
       cfaoi-public.css (sélecteur plus spécifique + !important) : la poser
       uniquement dans public.css n'aurait servi à rien. */
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px;
    padding: 14px 18px !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    color: #334155 !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    box-shadow: 0 1px 2px rgba(15,23,42,.04) !important;
    transition: border-color .15s ease, background .15s ease, color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.cfaoi-wrapper .cfaoi-routing-opt:hover,
#cfaoi-popup-root .cfaoi-routing-opt:hover {
    border-color: #93c5fd !important;
    background: #f8fbff !important;
    transform: translateY(-1px);
}
/* État sélectionné : bouton bleu PLEIN, texte blanc — impossible à rater. */
.cfaoi-wrapper .cfaoi-routing-opt--active,
#cfaoi-popup-root .cfaoi-routing-opt--active {
    border-color: #1e40af !important;
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 22px -10px rgba(37,99,235,.6) !important;
    transform: translateY(-1px);
}
.cfaoi-wrapper .cfaoi-routing-opt--active:hover,
#cfaoi-popup-root .cfaoi-routing-opt--active:hover {
    background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%) !important;
    color: #ffffff !important;
}
.cfaoi-wrapper .cfaoi-routing-label,
#cfaoi-popup-root .cfaoi-routing-label {
    margin: 0 0 10px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
}
.cfaoi-wrapper .cfaoi-routing-consent,
#cfaoi-popup-root .cfaoi-routing-consent {
    color: #64748b !important;
    font-weight: 400 !important;
}

/* ─── 3.3.1 (reprise) : retour, bandeau d'intention, entrée employeur ────
   Ces trois éléments sont apparus avec la reprise de la phase 0. Les deux
   contrôles sont des <button> (ou un <a>) DANS .cfaoi-wrapper : la PHASE 1
   ci-dessus les met à nu — fond transparent, bordure supprimée, padding 0,
   couleur héritée. Sans ré-application ici, le bouton « ← Retour » s'affiche
   en texte brut collé au bord et la porte d'entrée employeur ressemble à une
   ligne de texte : c'est exactement le symptôme qui avait obligé à écrire ce
   bloc pour .cfaoi-routing-opt en 3.1.2. */
.cfaoi-wrapper .cfaoi-routing-back,
#cfaoi-popup-root .cfaoi-routing-back {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px;
    min-height: 44px !important;
    padding: 8px 12px !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: #64748b !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}
.cfaoi-wrapper .cfaoi-routing-back:hover,
#cfaoi-popup-root .cfaoi-routing-back:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}
.cfaoi-wrapper .cfaoi-routing-alt-btn,
#cfaoi-popup-root .cfaoi-routing-alt-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    padding: 11px 18px !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    color: #334155 !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    cursor: pointer !important;
}
.cfaoi-wrapper .cfaoi-routing-alt-btn:hover,
#cfaoi-popup-root .cfaoi-routing-alt-btn:hover {
    border-color: #2563eb !important;
    color: #1e40af !important;
}
/* Les marges viennent avec !important parce que la PHASE 1 remet
   `margin: 0 !important` sur TOUT <p> du module : sans cela, les deux lignes
   du bandeau et celles de la porte employeur se collent l'une à l'autre. */
.cfaoi-wrapper .cfaoi-routing-intent-title,
#cfaoi-popup-root .cfaoi-routing-intent-title {
    margin: 0 0 4px !important;
    color: #1e40af !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}
.cfaoi-wrapper .cfaoi-routing-intent-sub,
#cfaoi-popup-root .cfaoi-routing-intent-sub {
    margin: 0 !important;
    color: #334155 !important;
    font-size: 12.5px !important;
    font-weight: 400 !important;
}
.cfaoi-wrapper .cfaoi-routing-alt-title,
#cfaoi-popup-root .cfaoi-routing-alt-title {
    margin: 0 0 3px !important;
    color: #334155 !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
}
/* ⚠️ 3.13.90 — #64748b ÉCHOUAIT AU CONTRASTE, ET CETTE PHRASE-LÀ PORTE
   MAINTENANT UNE DÉCISION.

   Mesuré au CSSOM sur la page réelle : #64748b sur le fond effectif #f3f4f6
   donne **4,32:1** à 12,5 px, sous le seuil AA de 4,5:1 (le texte est bien
   en deçà des 18,66 px qui autoriseraient 3:1). #475569 donne **6,79:1**.

   Pourquoi c'est ce lot qui le corrige : jusqu'ici `.cfaoi-routing-alt-sub`
   ne portait qu'un sous-titre décoratif sur la porte employeur. Depuis le
   déplacement du bouton de préinscription, elle porte la phrase qui dit au
   jeune CE QU'IL PERD s'il part sans laisser sa demande — c'est-à-dire la
   moitié honnête de l'arbitrage. Une phrase qu'on ne lit pas ne l'est pas.
   La porte employeur y gagne au passage, dans le même sens.

   ⚠️ La taille N'EST PAS touchée : elle est partagée avec des écrans que ce
   lot n'a pas mesurés, et le contraste suffit à rendre la phrase lisible.
   On corrige ce qu'on a mesuré, pas ce qu'on suppose. */
.cfaoi-wrapper .cfaoi-routing-alt-sub,
#cfaoi-popup-root .cfaoi-routing-alt-sub {
    margin: 0 0 10px !important;
    color: #475569 !important;
    font-size: 12.5px !important;
    font-weight: 400 !important;
}
/* Étiquette masquée : le bouclier ne doit surtout pas la « réafficher »
   (il force max-width: 100% partout) — on réaffirme le masquage par clip,
   qui laisse le libellé dans l'arbre d'accessibilité. */
.cfaoi-wrapper .cfaoi-sr-only,
#cfaoi-popup-root .cfaoi-sr-only,
.cfaoi-result-overlay .cfaoi-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ─── Modale résultat : actions principales ──────────────────────────── */
.cfaoi-result-overlay .cfaoi-main-action {
    padding: 12px 22px !important;
    border-radius: 12px !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    border: 1.5px solid transparent !important;
    line-height: 1.3 !important;
    min-height: 44px;
}
.cfaoi-result-overlay .cfaoi-main-action--primary,
.cfaoi-result-overlay .cfaoi-main-action--primary:link,
.cfaoi-result-overlay .cfaoi-main-action--primary:visited {
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 20px -8px rgba(37, 99, 235, 0.5) !important;
}
.cfaoi-result-overlay .cfaoi-main-action--primary:hover {
    background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}
.cfaoi-result-overlay .cfaoi-main-action--secondary,
.cfaoi-result-overlay .cfaoi-main-action--secondary:link,
.cfaoi-result-overlay .cfaoi-main-action--secondary:visited {
    background: #ffffff !important;
    color: #2563eb !important;
    border-color: #2563eb !important;
}
.cfaoi-result-overlay .cfaoi-main-action--secondary:hover {
    background: #eff6ff !important;
    color: #1e40af !important;
}
.cfaoi-result-overlay .cfaoi-main-action--ghost,
.cfaoi-result-overlay .cfaoi-main-action--ghost:link,
.cfaoi-result-overlay .cfaoi-main-action--ghost:visited {
    background: transparent !important;
    color: #64748b !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
    padding: 8px 12px !important;
    min-height: 0;
    border: none !important;
}
.cfaoi-result-overlay .cfaoi-main-action--ghost:hover {
    color: #0f172a !important;
}

/* ─── Modale résultat : liens "Voir la formation" / "Programme" ──────── */
.cfaoi-result-overlay .cfaoi-related-link,
.cfaoi-result-overlay .cfaoi-related-link:link,
.cfaoi-result-overlay .cfaoi-related-link:visited {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #2563eb !important;
    color: #ffffff !important;
    padding: 10px 16px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    border: none !important;
}
.cfaoi-result-overlay .cfaoi-related-link:hover {
    background: #1e40af !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}
.cfaoi-result-overlay .cfaoi-related-link--soft,
.cfaoi-result-overlay .cfaoi-related-link--soft:link,
.cfaoi-result-overlay .cfaoi-related-link--soft:visited {
    background: transparent !important;
    color: #2563eb !important;
    padding: 10px 12px !important;
}
.cfaoi-result-overlay .cfaoi-related-link--soft:hover {
    background: #eff6ff !important;
    color: #1e40af !important;
}

/* ─── Modale résultat : cartes de formations annexes ─────────────────── */
.cfaoi-result-overlay .cfaoi-related-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    padding: 18px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    box-shadow: 0 2px 6px -2px rgba(15, 23, 42, 0.06);
}
.cfaoi-result-overlay .cfaoi-related-card:hover {
    transform: translateY(-2px);
    border-color: #cbd5e1 !important;
    box-shadow: 0 12px 24px -10px rgba(15, 23, 42, 0.15);
}
.cfaoi-result-overlay .cfaoi-related-card__title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    line-height: 1.3 !important;
    margin: 8px 0 4px !important;
}
.cfaoi-result-overlay .cfaoi-related-card__family {
    font-size: 12.5px !important;
    color: #64748b !important;
    font-style: italic;
    margin: 0 !important;
}
.cfaoi-result-overlay .cfaoi-related-card__reason {
    font-size: 13px !important;
    color: #334155 !important;
    margin: 4px 0 0 !important;
    line-height: 1.45 !important;
}

/* Pills (CAP/Bac Pro + pourcentage de match) */
.cfaoi-result-overlay .cfaoi-pill {
    display: inline-flex !important;
    align-items: center !important;
    padding: 4px 12px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    line-height: 1.2 !important;
}
.cfaoi-result-overlay .cfaoi-pill--level {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
}
.cfaoi-result-overlay .cfaoi-pill--pct {
    background: #2563eb !important;
    color: #ffffff !important;
}
.cfaoi-result-overlay .cfaoi-related-card__head {
    display: flex !important;
    align-items: center !important;
    gap: 8px;
    flex-wrap: wrap;
}

/* ─── Modale résultat : barre de confiance ───────────────────────────── */
.cfaoi-result-overlay .cfaoi-confidence-bar {
    width: 100%;
    height: 10px;
    background: #f1f5f9 !important;
    border-radius: 999px !important;
    overflow: hidden;
    margin-top: 6px;
}
.cfaoi-result-overlay .cfaoi-confidence-fill {
    height: 100% !important;
    background: linear-gradient(90deg, #2563eb 0%, #06b6d4 100%) !important;
    border-radius: 999px !important;
    transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ─── Modale résultat : meta de la formation principale ──────────────── */
.cfaoi-result-overlay .cfaoi-main-meta {
    font-size: 12.5px !important;
    color: #64748b !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 12px !important;
    font-weight: 600;
}

/* ─── Modale résultat : bloc "autres formations" header ──────────────── */
.cfaoi-result-overlay .cfaoi-related-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 22px 0 4px !important;
}
.cfaoi-result-overlay .cfaoi-related-intro {
    font-size: 13.5px !important;
    color: #64748b !important;
    margin: 0 0 14px !important;
}
.cfaoi-result-overlay .cfaoi-related-total {
    font-size: 12.5px !important;
    color: #94a3b8 !important;
    text-align: center !important;
    margin: 14px 0 0 !important;
    font-style: italic;
}

/* "Voir plus" button du bloc related */
.cfaoi-result-overlay .cfaoi-related-more {
    display: flex !important;
    justify-content: center !important;
    margin: 16px 0 4px !important;
}
.cfaoi-result-overlay .cfaoi-related-more-btn {
    background: #ffffff !important;
    color: #2563eb !important;
    border: 1.5px solid #2563eb !important;
    padding: 10px 22px !important;
    border-radius: 999px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}
.cfaoi-result-overlay .cfaoi-related-more-btn:hover {
    background: #eff6ff !important;
}

/* ─── Modale résultat : "On en discute ?" form header ────────────────── */
.cfaoi-result-overlay .cfaoi-lead-form-card h4 {
    font-size: 20px !important;
    font-weight: 700 !important;
    margin: 0 0 6px !important;
    color: #0f172a !important;
}
.cfaoi-result-overlay .cfaoi-lead-form-card p {
    color: #64748b !important;
    font-size: 13.5px !important;
    margin: 0 0 18px !important;
}
.cfaoi-result-overlay .cfaoi-form-group {
    margin-bottom: 12px !important;
}

/* ─── Bulles de chat du wrapper apprenti ─────────────────────────────── */
.cfaoi-wrapper .cfaoi-message {
    padding: 12px 16px !important;
    border-radius: 14px !important;
    line-height: 1.5 !important;
    max-width: 85% !important;
    word-wrap: break-word !important;
    background: #ffffff !important;
    color: #0f172a !important;
    font-size: 14.5px !important;
    box-shadow: 0 2px 6px -2px rgba(15, 23, 42, 0.06);
}
.cfaoi-wrapper .cfaoi-message-ai .cfaoi-message,
.cfaoi-wrapper .cfaoi-message-ai {
    background: #f8fafc !important;
    color: #0f172a !important;
}
.cfaoi-wrapper .cfaoi-message-user .cfaoi-message,
.cfaoi-wrapper .cfaoi-message-user {
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%) !important;
    color: #ffffff !important;
    margin-left: auto;
}

/* ─── Boutons de choix dans le chat (cfaoi-choice-button) ────────────── */
/* 2.5.6 — Les choix doivent ressembler à de vraies cartes/boutons,
   pas à des pills étirées en pleine largeur (rendu "texte centré
   sans bouton" rapporté en 2.5.5). On force :
   • width: 100% pour que le bouton remplisse la colonne ;
   • display: block pour neutraliser tout inline hérité du thème ;
   • border-radius: 14px (carte, pas pill) ;
   • padding confortable ;
   • texte aligné à gauche, retour à la ligne propre ;
   • plus de margin individuel (le gap du conteneur suffit). */
.cfaoi-wrapper .cfaoi-choice-button {
    display: block !important;
    width: 100% !important;
    background: #ffffff !important;
    color: #1e293b !important;
    border: 1px solid #dbe3ef !important;
    padding: 13px 16px !important;
    border-radius: 14px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
    text-align: left !important;
    white-space: normal !important;
    word-break: break-word !important;
    cursor: pointer !important;
    margin: 0 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}
.cfaoi-wrapper .cfaoi-choice-button:hover {
    background: #f1f6ff !important;
    border-color: #2563eb !important;
    color: #1e293b !important;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.12) !important;
}
.cfaoi-wrapper .cfaoi-choice-button:focus-visible {
    outline: 2px solid #2563eb !important;
    outline-offset: 2px !important;
}
.cfaoi-wrapper .cfaoi-choice-button:active {
    background: #e8f0ff !important;
    border-color: #2563eb !important;
}
/* Garantir que le conteneur des choix est bien en colonne pleine
   largeur et sans padding-left parasite (l'artefact bleu venait
   parfois du ::before du bouton sur :focus / :active — on l'a
   neutralisé dans cfaoi-public.css 2.5.6 et on le re-neutralise
   ici par sécurité au cas où un thème ajouterait une décoration). */
.cfaoi-wrapper .cfaoi-choices-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding-left: 0 !important;
    width: 100% !important;
    align-self: stretch !important;
}
.cfaoi-wrapper .cfaoi-choice-button::before {
    content: none !important;
    background: none !important;
    width: 0 !important;
    display: none !important;
}

/* ─── Footer chat : send / mic / live ────────────────────────────────── */
.cfaoi-wrapper .cfaoi-btn-send,
.cfaoi-wrapper .cfaoi-btn-mic,
.cfaoi-wrapper .cfaoi-btn-live {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    flex-shrink: 0;
    /* 3.6.1 — padding/margin DÉCLARÉS, alors qu'ils valaient déjà 0 de fait.
       `margin` et `padding` sont les deux seules propriétés que la PHASE 1
       neutralise SANS !important : elles ne tenaient donc que par la
       spécificité du reset. Une règle de thème `.contenu button { padding }`
       (0,1,1), chargée après le bouclier, l'égale et gagne à l'ordre source.
       Ces trois boutons ronds sont les seuls du module dont la ré-affirmation
       ne posait ni l'un ni l'autre : on ferme le trou ici plutôt que de
       compter sur un sélecteur d'id (cf. l'avertissement de l'en-tête). */
    padding: 0 !important;
    margin: 0 !important;
}
.cfaoi-wrapper .cfaoi-btn-send {
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 14px -4px rgba(37, 99, 235, 0.45) !important;
}
.cfaoi-wrapper .cfaoi-btn-send:hover {
    transform: translateY(-1px) scale(1.04);
}
.cfaoi-wrapper .cfaoi-btn-mic,
.cfaoi-wrapper .cfaoi-btn-live {
    background: #ffffff !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
}
.cfaoi-wrapper .cfaoi-btn-mic:hover,
.cfaoi-wrapper .cfaoi-btn-live:hover {
    background: #f8fafc !important;
    color: #2563eb !important;
    border-color: #cbd5e1 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   PHASE 3 — Popup : ré-affirmer le design (le pop-up a son propre style
   coloré sombre, on doit lui réimposer ses couleurs spécifiques).
   ─────────────────────────────────────────────────────────────────────── */

/* Le pop-up utilise un thème sombre cyan. Tous les boutons doivent garder
   leur look "holographique" malgré le reset agressif phase 1. */

.cfaoi-pop-root .cfaoi-pop-cta {
    background: linear-gradient(135deg, var(--pop-primary, #00d4ff) 0%, var(--pop-accent, #2563eb) 100%) !important;
    color: #0f172a !important;
    padding: 14px 22px !important;
    border-radius: 100px !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    box-shadow: 0 10px 30px -10px var(--pop-glow, rgba(0, 212, 255, 0.5)) !important;
    border: none !important;
}
.cfaoi-pop-root .cfaoi-pop-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 36px -10px var(--pop-glow, rgba(0, 212, 255, 0.6)) !important;
}

.cfaoi-pop-root .cfaoi-pop-skip,
.cfaoi-pop-root .cfaoi-pop-choice-skip {
    background: transparent !important;
    color: var(--pop-text-dim, #5a6f8e) !important;
    padding: 10px 8px !important;
    border: none !important;
    cursor: pointer !important;
    font-size: 12.5px !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
    border-radius: 0;
}
.cfaoi-pop-root .cfaoi-pop-skip:hover,
.cfaoi-pop-root .cfaoi-pop-choice-skip:hover {
    color: var(--pop-text-muted, #8aa2c4) !important;
}

/* Boutons close (✕) et minimize (—) du header popup */
.cfaoi-pop-root .cfaoi-pop-close,
.cfaoi-pop-root .cfaoi-pop-minimize {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--pop-text-muted, #8aa2c4) !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}
.cfaoi-pop-root .cfaoi-pop-close:hover,
.cfaoi-pop-root .cfaoi-pop-minimize:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--pop-text, #ecf3ff) !important;
}

/* Cartes de choix : on RE-IMPOSE le design pour que le reset n'ait pas
   tout effacé. La carte garde son fond glass + bordure subtile. */
.cfaoi-pop-root .cfaoi-pop-choice-card {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 14px !important;
    padding: 16px 18px !important;
    color: var(--pop-text, #ecf3ff) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    text-align: left !important;
    width: 100% !important;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
}
.cfaoi-pop-root .cfaoi-pop-choice-card:hover {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    transform: translateY(-1px);
}
.cfaoi-pop-root .cfaoi-pop-choice-card-primary {
    background: rgba(0, 212, 255, 0.08) !important;
    border-color: rgba(0, 212, 255, 0.35) !important;
    box-shadow: 0 6px 22px -10px rgba(0, 212, 255, 0.4) !important;
}
.cfaoi-pop-root .cfaoi-pop-choice-card-primary:hover {
    background: rgba(0, 212, 255, 0.12) !important;
    border-color: rgba(0, 212, 255, 0.55) !important;
    box-shadow: 0 10px 28px -10px rgba(0, 212, 255, 0.55) !important;
}

/* Boutons du parcours pro */
.cfaoi-pop-root .cfaoi-pop-pro-chat-send,
.cfaoi-pop-root .cfaoi-pop-pro-recap-send {
    background: linear-gradient(135deg, var(--pop-primary, #00d4ff), var(--pop-accent, #2563eb)) !important;
    /* 3.13.34 — le texte POSÉ SUR le dégradé suit son propre jeton. Sur le
       cyan du thème sombre il doit être quasi noir ; sur le bleu du calque
       clair employeur, blanc. Le repli reproduit à l'octet la valeur d'avant :
       partout où le jeton n'est pas défini, rien ne bouge. */
    color: var(--pop-on-primary, #0f172a) !important;
    padding: 12px 22px !important;
    border-radius: 999px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    border: none !important;
}
.cfaoi-pop-root .cfaoi-pop-pro-chat-send:hover,
.cfaoi-pop-root .cfaoi-pop-pro-recap-send:hover {
    transform: translateY(-1px);
}
.cfaoi-pop-root .cfaoi-pop-pro-chat-skip {
    background: transparent !important;
    color: var(--pop-text-muted, #8aa2c4) !important;
    padding: 10px 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    cursor: pointer !important;
}
.cfaoi-pop-root .cfaoi-pop-pro-chat-skip:hover {
    background: var(--pop-surface-hover, rgba(255, 255, 255, 0.05)) !important;
    color: var(--pop-text, #ecf3ff) !important;
}
.cfaoi-pop-root .cfaoi-pop-pro-back {
    background: transparent !important;
    color: var(--pop-text-muted, #8aa2c4) !important;
    padding: 4px 10px !important;
    border: none !important;
    cursor: pointer !important;
    font-size: 12.5px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px;
    border-radius: 8px;
}
.cfaoi-pop-root .cfaoi-pop-pro-back:hover {
    background: var(--pop-surface-hover, rgba(255, 255, 255, 0.05)) !important;
    color: var(--pop-text, #ecf3ff) !important;
}

/* Voice toggle du pro */
.cfaoi-pop-root .cfaoi-pop-pro-voice-toggle {
    background: var(--pop-surface, rgba(255, 255, 255, 0.05)) !important;
    color: var(--pop-text-muted, #8aa2c4) !important;
    border: 1px solid var(--pop-field-border, rgba(255, 255, 255, 0.1)) !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}
.cfaoi-pop-root .cfaoi-pop-pro-voice-toggle:hover {
    background: var(--pop-surface-hover, rgba(255, 255, 255, 0.1)) !important;
    color: var(--pop-text, #ecf3ff) !important;
}
.cfaoi-pop-root .cfaoi-pop-pro-voice-toggle[data-voice="on"] {
    color: var(--pop-primary, #00d4ff) !important;
    border-color: rgba(0, 212, 255, 0.4) !important;
}

/* Inputs du parcours pro. ⚠️ Le commentaire d'origine disait « fond sombre,
   pas blanc (le pop-up est sombre) » : ce n'est vrai que du thème par défaut.
   Depuis la 3.13.28 l'écran employeur est CLAIR, et c'est le jeton qui tranche. */
.cfaoi-pop-root .cfaoi-pop-pro input:not([type="checkbox"]):not([type="radio"]),
.cfaoi-pop-root .cfaoi-pop-pro textarea,
.cfaoi-pop-root .cfaoi-pop-pro select {
    background: var(--pop-surface, rgba(255, 255, 255, 0.05)) !important;
    color: var(--pop-text, #ecf3ff) !important;
    border: 1px solid var(--pop-field-border, rgba(255, 255, 255, 0.12)) !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
}
.cfaoi-pop-root .cfaoi-pop-pro input:focus,
.cfaoi-pop-root .cfaoi-pop-pro textarea:focus,
.cfaoi-pop-root .cfaoi-pop-pro select:focus {
    border-color: var(--pop-primary, #00d4ff) !important;
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.15) !important;
}
.cfaoi-pop-root .cfaoi-pop-pro input::placeholder,
.cfaoi-pop-root .cfaoi-pop-pro textarea::placeholder {
    color: var(--pop-text-dim, #5a6f8e) !important;
}

/* Bulles de chat du parcours pro */
.cfaoi-pop-root .cfaoi-pop-pro-bubble-msg {
    padding: 12px 16px !important;
    border-radius: 14px !important;
    line-height: 1.5 !important;
    font-size: 14px !important;
    max-width: 85%;
    word-wrap: break-word;
}
/* ⚠️ LA BULLE LA PLUS LUE DE L'ÉCRAN EMPLOYEUR, et celle qui a été illisible
   deux versions de suite. Le fond était écrit en dur : sur la carte claire de
   la 3.13.28, un blanc translucide à 5 % ne dessinait plus rien, et le texte
   suivait `--pop-text` — le blanc bleuté du thème sombre. Mesuré sur le site de
   développement le 19/08/2026 : `color: #ecf3ff` sur `#f0f4f8`. Du blanc sur du
   blanc. Les deux passent désormais par un jeton. */
.cfaoi-pop-root .cfaoi-pop-pro-bubble-row--ai .cfaoi-pop-pro-bubble-msg {
    background: var(--pop-surface, rgba(255, 255, 255, 0.05)) !important;
    color: var(--pop-text, #ecf3ff) !important;
}
.cfaoi-pop-root .cfaoi-pop-pro-bubble-row--user .cfaoi-pop-pro-bubble-msg {
    background: linear-gradient(135deg, var(--pop-primary, #00d4ff), var(--pop-accent, #2563eb)) !important;
    color: var(--pop-on-primary, #0f172a) !important;
    margin-left: auto;
}

/* ═══════════════════════════════════════════════════════════════════════
   PHASE 4 — Garde-fous anti-débordement responsive
   ─────────────────────────────────────────────────────────────────────── */

/* min-width: 0 SEULEMENT sur les conteneurs flex/grid spécifiques connus
   pour pouvoir déborder (zone de chat, bulles longues). Pas sur tout
   `[class*="cfaoi-"]` qui cassait des layouts. */
.cfaoi-wrapper .cfaoi-message,
.cfaoi-wrapper .cfaoi-chat-body,
.cfaoi-pop-root .cfaoi-pop-pro-bubble-msg,
.cfaoi-pop-root .cfaoi-pop-pro-chat-log,
.cfaoi-result-overlay .cfaoi-related-card,
.cfaoi-result-overlay .cfaoi-result-card,
.cfaoi-result-overlay .cfaoi-lead-form-card {
    min-width: 0;
}

/* Sur mobile, garantir que rien ne dépasse */
@media (max-width: 480px) {
    .cfaoi-wrapper,
    .cfaoi-pop-root,
    .cfaoi-result-overlay {
        font-size: 14px;
    }
    .cfaoi-wrapper .cfaoi-message,
    .cfaoi-pop-root .cfaoi-pop-pro-bubble-msg {
        max-width: 90% !important;
        font-size: 13.5px !important;
    }
    .cfaoi-wrapper .cfaoi-btn-submit,
    .cfaoi-result-overlay .cfaoi-btn-submit {
        font-size: 14.5px !important;
        padding: 13px 18px !important;
    }
    .cfaoi-result-overlay .cfaoi-main-action {
        font-size: 14px !important;
        padding: 11px 18px !important;
    }
}

/* Très petit mobile (≤ 380 px) */
@media (max-width: 380px) {
    .cfaoi-result-overlay .cfaoi-result-card,
    .cfaoi-result-overlay .cfaoi-lead-form-card {
        padding: 18px 14px !important;
    }
}

/* ╔══════════════════════════════════════════════════════════════════════╗
   ║   2.5.6 — FIX VISUEL : Launcher "Parler à Aria"                      ║
   ║                                                                      ║
   ║   Symptôme rapporté (capture utilisateur 2.5.5) : le launcher        ║
   ║   apparaissait en bas à gauche comme un gros bloc sombre/bandeau    ║
   ║   parasite, mal intégré dans la page.                                ║
   ║                                                                      ║
   ║   Diagnostic :                                                       ║
   ║   1) La PHASE 1 du shield neutralise tous les <button> de            ║
   ║      .cfaoi-pop-root (background transparent, padding 0, border     ║
   ║      none, box-shadow none) avec !important. C'est volontaire        ║
   ║      pour battre le thème WordPress sur les inputs/CTA.              ║
   ║   2) Mais pour le launcher, aucune ré-affirmation n'existait dans   ║
   ║      le shield (cf. PHASE 3). Donc :                                 ║
   ║      • soit la cascade laissait le launcher quasi invisible          ║
   ║        (padding 0, no bg) — texte clair sur fond clair,             ║
   ║      • soit, selon l'ordre, le fond gradient sombre original         ║
   ║        de popup.css restait et apparaissait comme un bandeau         ║
   ║        sombre disproportionné.                                       ║
   ║                                                                      ║
   ║   Fix : on ré-affirme ici, en !important, un design propre et       ║
   ║   compact :                                                          ║
   ║   • bouton clair (fond blanc semi-transparent + flou),               ║
   ║   • compact (hauteur ≈ 52px), largeur auto (hug content),           ║
   ║   • pill arrondi, ombre douce,                                       ║
   ║   • avatar rond 34px aligné verticalement,                           ║
   ║   • texte sombre lisible, aligné verticalement,                      ║
   ║   • marges sûres aux bords (24px desktop / 16px mobile).             ║
   ║                                                                      ║
   ║   ⚠ On ne touche pas à .cfaoi-pop-bubble (bulle minimisée du chat) ║
   ║      qui reste un cercle d'avatar — c'est un composant distinct.    ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

.cfaoi-pop-root .cfaoi-pop-launcher,
#cfaoi-popup-root .cfaoi-pop-launcher {
    /* Layout : pill compact aligné en bas à gauche */
    position: fixed !important;
    bottom: 24px !important;
    left: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    padding: 8px 18px 8px 8px !important;
    width: auto !important;
    max-width: calc(100vw - 48px) !important;
    height: auto !important;
    min-height: 52px !important;

    /* Apparence : claire et discrète (plus de bloc sombre) */
    background: rgba(255, 255, 255, 0.96) !important;
    background-image: none !important;
    background-color: rgba(255, 255, 255, 0.96) !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    border-radius: 999px !important;
    color: #1e293b !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-align: left !important;
    text-decoration: none !important;
    cursor: pointer !important;
    box-shadow:
        0 8px 24px -10px rgba(15, 23, 42, 0.22),
        0 2px 6px -2px rgba(15, 23, 42, 0.08) !important;

    /* On ne casse pas les transitions d'entrée/sortie animées du
       launcher (translateY 80px → 0, opacity 0 → 1) : ces propriétés
       sont gérées par popup.css selon data-state. On laisse donc
       transition/transform/opacity hériter du fichier popup.css. */
}

.cfaoi-pop-root .cfaoi-pop-launcher:hover,
#cfaoi-popup-root .cfaoi-pop-launcher:hover {
    background: #ffffff !important;
    border-color: rgba(37, 99, 235, 0.35) !important;
    box-shadow:
        0 12px 32px -10px rgba(15, 23, 42, 0.28),
        0 3px 8px -2px rgba(37, 99, 235, 0.18) !important;
}

.cfaoi-pop-root .cfaoi-pop-launcher:focus-visible,
#cfaoi-popup-root .cfaoi-pop-launcher:focus-visible {
    outline: 2px solid #2563eb !important;
    outline-offset: 3px !important;
}

/* Avatar rond du launcher : 36px, aligné, débordement caché */
.cfaoi-pop-root .cfaoi-pop-launcher-icon,
#cfaoi-popup-root .cfaoi-pop-launcher-icon {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    background: linear-gradient(135deg, var(--pop-primary, #00d4ff), var(--pop-accent, #7c3aed)) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9) !important;
}
.cfaoi-pop-root .cfaoi-pop-launcher--photo .cfaoi-pop-launcher-icon,
#cfaoi-popup-root .cfaoi-pop-launcher--photo .cfaoi-pop-launcher-icon {
    background: #f1f5f9 !important; /* fallback derrière la photo si elle ne charge pas */
}
.cfaoi-pop-root .cfaoi-pop-launcher-icon > picture,
#cfaoi-popup-root .cfaoi-pop-launcher-icon > picture {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}
.cfaoi-pop-root .cfaoi-pop-launcher-icon img,
.cfaoi-pop-root .cfaoi-pop-launcher-icon svg,
#cfaoi-popup-root .cfaoi-pop-launcher-icon img,
#cfaoi-popup-root .cfaoi-pop-launcher-icon svg {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 50% !important;
    display: block !important;
}

/* Pulse animé autour de l'avatar : on le re-centre par-dessus
   l'icône (auparavant calé à left: 21px / 27px en pixels durs,
   désormais aligné via top/left 50% + translate). */
.cfaoi-pop-root .cfaoi-pop-launcher-pulse,
#cfaoi-popup-root .cfaoi-pop-launcher-pulse {
    position: absolute !important;
    top: 50% !important;
    left: calc(8px + 18px) !important; /* padding-left du launcher + moitié de l'icône 36/2 */
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    border: 2px solid var(--pop-primary, #00d4ff) !important;
    background: transparent !important;
    opacity: 0 !important;
    transform: translate(-50%, -50%) !important;
    pointer-events: none !important;
}

/* Label "Parler à Aria" : aligné verticalement, lisible */
.cfaoi-pop-root .cfaoi-pop-launcher-label,
#cfaoi-popup-root .cfaoi-pop-launcher-label {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #1e293b !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.01em !important;
    white-space: nowrap !important;
    text-align: left !important;
}

/* Mobile : le launcher reste compact et ne déborde pas */
@media (max-width: 540px) {
    .cfaoi-pop-root .cfaoi-pop-launcher,
    #cfaoi-popup-root .cfaoi-pop-launcher {
        bottom: 16px !important;
        left: 16px !important;
        right: auto !important;
        padding: 7px 16px 7px 7px !important;
        min-height: 48px !important;
        max-width: calc(100vw - 32px) !important;
        font-size: 13.5px !important;
    }
    .cfaoi-pop-root .cfaoi-pop-launcher-icon,
    #cfaoi-popup-root .cfaoi-pop-launcher-icon {
        width: 34px !important;
        height: 34px !important;
        flex-basis: 34px !important;
    }
    .cfaoi-pop-root .cfaoi-pop-launcher-pulse,
    #cfaoi-popup-root .cfaoi-pop-launcher-pulse {
        left: calc(7px + 17px) !important;
        width: 34px !important;
        height: 34px !important;
    }
    .cfaoi-pop-root .cfaoi-pop-launcher-label,
    #cfaoi-popup-root .cfaoi-pop-launcher-label {
        font-size: 13.5px !important;
    }
}

/* ╔══════════════════════════════════════════════════════════════════════╗
   ║   2.5.9 — REVERT (correctif régression 2.5.6) :                       ║
   ║   Choix QCM du parcours pro (cfaoi-pop-pro-chat-choice).             ║
   ║                                                                      ║
   ║   En 2.5.6 j'avais empilé verticalement TOUS les choix de la branche ║
   ║   pro en pleine largeur ("vraies cartes"). C'était une erreur :      ║
   ║   les listes longues du parcours entreprise (« Dans quel domaine ?  ║
   ║   » → 15 métiers, « Contraintes du poste ? » → 8 items) deviennent   ║
   ║   des colonnes de 700+ px de haut, et le bouton « Valider » qui se   ║
   ║   trouve sous la liste passe SOUS le fold du popup. Rapport          ║
   ║   utilisateur 2.5.8 : « impossible de valider un choix et de         ║
   ║   continuer ». On revient au comportement d'origine — flex-wrap      ║
   ║   inline (« pills ») — qui convient parfaitement aux libellés        ║
   ║   courts du parcours pro (CAP, BP, Boucherie, Débutant motivé…).    ║
   ║                                                                      ║
   ║   NB : la correction 2.5.6 est conservée côté chat principal        ║
   ║   (.cfaoi-choice-button — chat apprenti), qui lui a des libellés    ║
   ║   plus longs et bénéficie réellement du format carte verticale.     ║
   ╚══════════════════════════════════════════════════════════════════════╝ */
/* On ne ré-impose plus de flex-direction column sur le grid : le CSS
   de base de cfaoi-popup.css (display: flex; flex-wrap: wrap; gap: 8px)
   reprend la main. Les choix s'affichent à nouveau en pills inline. */
.cfaoi-pop-root .cfaoi-pop-pro-chat-choices,
#cfaoi-popup-root .cfaoi-pop-pro-chat-choices {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
}
/* Les boutons restent stylés (couleurs, focus) mais redeviennent
   inline-flex (pills) au lieu de block 100 % — c'est ce qui permet au
   bouton Valider de rester visible juste en dessous de la liste. */
.cfaoi-pop-root .cfaoi-pop-pro-chat-choice,
#cfaoi-popup-root .cfaoi-pop-pro-chat-choice {
    display: inline-flex !important;
    width: auto !important;
    text-align: left !important;
    white-space: normal !important;
    word-break: normal !important;
    line-height: 1.3 !important;
    padding: 8px 14px !important;
    border-radius: 10px !important;
    background: var(--pop-chip, rgba(0, 212, 255, 0.06)) !important;
    border: 1px solid var(--pop-border, rgba(0, 212, 255, 0.22)) !important;
    color: var(--pop-text, #ecf3ff) !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
}
.cfaoi-pop-root .cfaoi-pop-pro-chat-choice:hover,
#cfaoi-popup-root .cfaoi-pop-pro-chat-choice:hover {
    background: var(--pop-chip-hover, rgba(0, 212, 255, 0.14)) !important;
    border-color: var(--pop-primary, #00d4ff) !important;
}
.cfaoi-pop-root .cfaoi-pop-pro-chat-choice.is-selected,
#cfaoi-popup-root .cfaoi-pop-pro-chat-choice.is-selected {
    background: linear-gradient(135deg, var(--pop-primary, #00d4ff), var(--pop-accent, #7c3aed)) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 4px 12px -4px rgba(0, 212, 255, 0.55) !important;
}
.cfaoi-pop-root .cfaoi-pop-pro-chat-choice:focus-visible,
#cfaoi-popup-root .cfaoi-pop-pro-chat-choice:focus-visible {
    outline: 2px solid var(--pop-primary, #00d4ff) !important;
    outline-offset: 2px !important;
}

/* 2.5.9 — Le conteneur d'actions (Valider / Passer) doit toujours
   apparaître clairement SOUS la liste de choix. On lui donne une
   marge haute et on s'assure qu'il n'est jamais aplati par un parent
   en flex column. Sticky en bas du host serait fragile selon les
   overflow ancestraux : on reste sur flex normal + scroll naturel. */
.cfaoi-pop-root .cfaoi-pop-pro-chat-actions,
#cfaoi-popup-root .cfaoi-pop-pro-chat-actions {
    display: flex !important;
    gap: 8px !important;
    justify-content: flex-end !important;
    margin-top: 10px !important;
    flex-shrink: 0 !important;
}

/* ╔══════════════════════════════════════════════════════════════════════╗
   ║   2.5.7 — FIX VISUEL : texte coupé dans le popup d'accueil           ║
   ║                                                                      ║
   ║   Symptôme rapporté : le sous-titre "Professionnel ou entreprise —   ║
   ║   déposez votre besoin, on vous met en relation." apparaissait       ║
   ║   tronqué horizontalement dans la carte "Je recherche un apprenti"  ║
   ║   au lieu de passer à la ligne.                                      ║
   ║                                                                      ║
   ║   Diagnostic : les titres/sous-titres sont des <span> à l'intérieur ║
   ║   d'un <button>. Selon les thèmes WordPress, `button { white-space:  ║
   ║   nowrap }` peut être hérité par tous les <span> enfants, ce qui     ║
   ║   force la ligne unique. Combiné avec `overflow: hidden` sur la     ║
   ║   carte (utilisé pour le ::before gradient), le texte se faisait     ║
   ║   clipper.                                                           ║
   ║                                                                      ║
   ║   Fix défensif : on impose `white-space: normal` + `display: block` ║
   ║   + `overflow-wrap: anywhere` sur les sous-éléments texte de toutes ║
   ║   les cartes de choix du popup, en !important pour battre toute     ║
   ║   surcharge du thème parent.                                         ║
   ║                                                                      ║
   ║   On élargit aussi la règle aux titres/sous-titres de l'écran de    ║
   ║   choix global (.cfaoi-pop-choice-title / -subtitle) et aux         ║
   ║   labels génériques du popup, par sécurité.                          ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* Conteneur texte des cartes de choix : flex column qui peut shrink */
.cfaoi-pop-root .cfaoi-pop-choice-card-content,
#cfaoi-popup-root .cfaoi-pop-choice-card-content {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    overflow: visible !important;
}

/* Titre + sous-titre des cartes de choix : forcer le wrap */
.cfaoi-pop-root .cfaoi-pop-choice-card-title,
.cfaoi-pop-root .cfaoi-pop-choice-card-desc,
#cfaoi-popup-root .cfaoi-pop-choice-card-title,
#cfaoi-popup-root .cfaoi-pop-choice-card-desc {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    text-overflow: clip !important;
    overflow: visible !important;
}

/* Titre/sous-titre de l'écran de choix (en-tête, au-dessus des cartes) */
.cfaoi-pop-root .cfaoi-pop-choice-title,
.cfaoi-pop-root .cfaoi-pop-choice-subtitle,
#cfaoi-popup-root .cfaoi-pop-choice-title,
#cfaoi-popup-root .cfaoi-pop-choice-subtitle {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    max-width: 100% !important;
}

/* Aligner l'icône avec le HAUT du contenu plutôt que centrée
   verticalement : si le sous-titre fait 2 lignes, le centre vertical
   se décale visuellement et la carte semble bancale. flex-start
   donne un rendu plus propre quand le texte wrap. */
.cfaoi-pop-root .cfaoi-pop-choice-card,
#cfaoi-popup-root .cfaoi-pop-choice-card {
    align-items: flex-start !important;
}
/* L'icône reste centrée verticalement par rapport au titre */
.cfaoi-pop-root .cfaoi-pop-choice-card-icon,
#cfaoi-popup-root .cfaoi-pop-choice-card-icon {
    align-self: center !important;
}
.cfaoi-pop-root .cfaoi-pop-choice-card-arrow,
#cfaoi-popup-root .cfaoi-pop-choice-card-arrow {
    align-self: center !important;
}

/* Bouton "Fermer et visiter le site par moi-même" : même protection */
.cfaoi-pop-root .cfaoi-pop-choice-skip,
#cfaoi-popup-root .cfaoi-pop-choice-skip {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    max-width: 100% !important;
    line-height: 1.4 !important;
}

/* Bulles de chat (pro + apprenti) : le wrap doit toujours fonctionner */
.cfaoi-pop-root .cfaoi-pop-pro-bubble-msg,
#cfaoi-popup-root .cfaoi-pop-pro-bubble-msg,
.cfaoi-wrapper .cfaoi-message {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   PHASE 2 — Nouveaux écrans du parcours candidat (tâches 3.4 à 4.8)
   ─────────────────────────────────────────────────────────────────────
   Même logique que .cfaoi-routing-opt : la PHASE 1 met à nu tous les
   <button>, <a>, <p>, <h*>, <ol>/<li> et <label> du module avec
   !important. Sans ré-application ici, la carte formation s'afficherait
   en texte brut et les boutons de choix perdraient leur cadre. On rend
   donc chaque composant avec une spécificité (.cfaoi-wrapper .classe)
   supérieure au reset, comme le reste de ce fichier.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 3.6 / 4.5 / 4.6 — Boutons de choix « à un état » ─────────────────── */
.cfaoi-wrapper .cfaoi-company-state__opt,
.cfaoi-wrapper .cfaoi-search-metier__alt {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px;
    width: 100% !important;
    min-height: 48px !important;
    padding: 12px 16px !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    color: #334155 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-align: left !important;
    cursor: pointer !important;
    box-shadow: 0 1px 2px rgba(15,23,42,.04) !important;
    transition: border-color .15s ease, background .15s ease, color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.cfaoi-wrapper .cfaoi-company-state--inline .cfaoi-company-state__opt {
    width: auto !important;
    flex: 1 1 0 !important;
    min-width: 90px;
    justify-content: center !important;
    text-align: center !important;
}
.cfaoi-wrapper .cfaoi-company-state__opt:hover,
.cfaoi-wrapper .cfaoi-search-metier__alt:hover {
    border-color: #93c5fd !important;
    background: #f8fbff !important;
    color: #1e40af !important;
    transform: translateY(-1px);
}
.cfaoi-wrapper .cfaoi-company-state__opt:disabled {
    opacity: 0.6 !important;
    cursor: default !important;
    transform: none !important;
}
.cfaoi-wrapper .cfaoi-company-state__opt--active {
    border-color: #1e40af !important;
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 22px -10px rgba(37,99,235,.6) !important;
    transform: translateY(-1px);
}
.cfaoi-wrapper .cfaoi-company-state__opt--active:hover {
    background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%) !important;
    color: #ffffff !important;
}
/* La coche « ✓ » de l'état actif — ::before non touché par la PHASE 1 mais
   on le confirme pour la robustesse. */
.cfaoi-wrapper .cfaoi-company-state__opt--active::before {
    content: "\2713" !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}

/* ── 3.4 — Textes et séparateur de la recherche métier ───────────────── */
.cfaoi-wrapper .cfaoi-search-metier__help,
.cfaoi-wrapper .cfaoi-search-metier__status {
    margin: 6px 2px 0 !important;
    color: #475569 !important;
    font-size: 12.5px !important;
    line-height: 1.45 !important;
}
.cfaoi-wrapper .cfaoi-search-metier__status {
    margin: 6px 2px !important;
    font-size: 13.5px !important;
}
.cfaoi-wrapper .cfaoi-search-metier__alt-title {
    margin: 14px 2px 8px !important;
    color: #334155 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

/* ── 3.5 — Carte « formation trouvée » ───────────────────────────────── */
.cfaoi-wrapper .cfaoi-formation-card__title {
    margin: 0 0 4px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    line-height: 1.35 !important;
}
.cfaoi-wrapper .cfaoi-formation-card__meta {
    margin: 0 0 8px !important;
    color: #1e40af !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}
.cfaoi-wrapper .cfaoi-formation-card__field {
    margin: 4px 0 0 !important;
    color: #334155 !important;
    font-size: 13.5px !important;
    line-height: 1.45 !important;
}
.cfaoi-wrapper .cfaoi-formation-card__link {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 44px !important;
    color: #2563eb !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
}
.cfaoi-wrapper .cfaoi-formation-card__link--soft {
    color: #334155 !important;
}
.cfaoi-wrapper .cfaoi-formation-card__link:hover {
    color: #1e40af !important;
}

/* ── 4.7 — Case de consentement du point de transmission ─────────────── */
.cfaoi-wrapper .cfaoi-consent-box label {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px;
    color: #475569 !important;
    font-size: 12.5px !important;
    line-height: 1.45 !important;
    font-weight: 400 !important;
    cursor: pointer !important;
}

/* ── 4.8 — Prochaines étapes de la confirmation (liste numérotée) ─────── */
.cfaoi-wrapper .cfaoi-steps-next {
    list-style: decimal !important;
    padding-left: 22px !important;
    margin: 14px 0 4px !important;
    text-align: left !important;
    color: #334155 !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
}
.cfaoi-wrapper .cfaoi-steps-next li {
    list-style: decimal !important;
    margin: 0 0 8px !important;
    padding-left: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   3.6.1 — CONTRÔLES OUBLIÉS PAR LA RÉ-AFFIRMATION
   ─────────────────────────────────────────────────────────────────────
   Les sept boutons ci-dessous n'avaient AUCUNE règle dans ce fichier. Ils
   subissaient donc la PHASE 1 sans contrepartie : fond transparent, bordure
   supprimée, ombre supprimée, couleur héritée, et surtout `padding: 0` —
   qui gagne sans !important parce que `.cfaoi-wrapper button` (0,1,1) est
   plus spécifique que la classe seule du composant (0,1,0). Un !important
   n'y changeait rien : sur `border` et `background` le reset en porte un.

   Symptôme de tête (PASSATION §7.1) : le bouton de coupure de la voix perdait
   padding et bordure et se réduisait à son SVG de 20 px. Mesuré avant
   correctif : padding 0, border 0 none, background rgba(0,0,0,0),
   boîte 20 × 20 px. Les six autres tombaient de la même façon — le bouton
   « Démarrer l'orientation », porte d'entrée du module, s'affichait en texte
   brut de 22 px de haut.

   On ne touche pas au reset : on redonne à chaque composant, avec la
   spécificité `.racine .classe` + !important, EXACTEMENT les valeurs que sa
   propre feuille lui donne déjà (cfaoi-public.css / cfaoi-popup.css). Rien
   n'est redessiné ici ; on rétablit ce que la PHASE 1 avait emporté, et
   seulement cela — border-radius, display et dimensions n'étant pas touchés
   par le reset, ils ne sont pas répétés.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Chat : bouton de coupure de la voix (cfaoi-public.css § .cfaoi-voice-toggle) */
.cfaoi-wrapper .cfaoi-voice-toggle {
    background: rgba(15, 23, 42, 0.04) !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    padding: 8px !important;
    color: var(--cfaoi-text-muted, #475569) !important;
}
.cfaoi-wrapper .cfaoi-voice-toggle:hover {
    background: var(--cfaoi-primary-light, #eff6ff) !important;
    border-color: var(--cfaoi-primary, #2563eb) !important;
    color: var(--cfaoi-primary, #2563eb) !important;
}

/* ── Chat : bouton « écouter » d'un message d'Aria ───────────────────── */
/* `margin-left` est rétabli parce que le reset pose `margin: 0` : sans lui le
   bouton se colle au dernier mot de la bulle. */
.cfaoi-wrapper .cfaoi-play-btn {
    background: var(--cfaoi-primary-light, #eff6ff) !important;
    color: var(--cfaoi-primary, #2563eb) !important;
    padding: 0 !important;
    margin-left: 8px !important;
}
.cfaoi-wrapper .cfaoi-play-btn:hover {
    background: var(--cfaoi-primary, #2563eb) !important;
    color: #ffffff !important;
}

/* ── Écran d'accueil : les deux portes d'entrée du module ────────────── */
/* Valeurs effectives de cfaoi-public.css : le bloc « palette marine » plus bas
   dans ce fichier écrase le dégradé initial par un aplat `--cfaoi-primary`. */
.cfaoi-wrapper .cfaoi-welcome-btn-primary {
    padding: 14px 22px !important;
    background: var(--cfaoi-primary, #2563eb) !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    box-shadow: 0 6px 18px -6px rgba(37, 99, 235, 0.45) !important;
    margin-bottom: 8px !important;
}
.cfaoi-wrapper .cfaoi-welcome-btn-primary:hover {
    background: var(--cfaoi-primary-dark, #1e40af) !important;
}
.cfaoi-wrapper .cfaoi-welcome-btn-secondary {
    padding: 13px 22px !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    color: var(--cfaoi-text-soft, #334155) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}
.cfaoi-wrapper .cfaoi-welcome-btn-secondary:hover {
    background: #ffffff !important;
    border-color: var(--cfaoi-primary, #2563eb) !important;
    color: var(--cfaoi-primary, #2563eb) !important;
}

/* ── Modale résultat : le ✕ de fermeture ─────────────────────────────── */
/* Couleurs en dur, comme dans cfaoi-public.css : la modale est appendue au
   <body>, hors de `.cfaoi-wrapper`. Sans cette règle le disque blanc et son
   ombre disparaissaient et le ✕ flottait, en couleur héritée, au-dessus de la
   carte de résultat. */
.cfaoi-result-overlay .cfaoi-result-close {
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    color: #475569 !important;
    box-shadow: 0 6px 20px -6px rgba(15, 23, 42, 0.25) !important;
    padding: 0 !important;
}
.cfaoi-result-overlay .cfaoi-result-close:hover {
    background: #ffffff !important;
    color: #0f172a !important;
}

/* ── Pop-up : bulle minimisée (bas-droite) ───────────────────────────── */
/* La photo d'Aria couvre le fond, mais l'anneau blanc et l'ombre portée —
   seuls éléments qui détachent la bulle de la page — étaient supprimés.
   L'ombre reprend la valeur du bloc « shadows sobres » de cfaoi-popup.css,
   qui écrase la première déclaration. */
.cfaoi-pop-root .cfaoi-pop-bubble {
    background: linear-gradient(135deg, var(--pop-primary, #00d4ff), var(--pop-accent, #7c3aed)) !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    box-shadow:
        0 10px 28px -8px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.1) !important;
    padding: 0 !important;
}
.cfaoi-pop-root .cfaoi-pop-bubble:hover {
    box-shadow:
        0 14px 36px -8px rgba(0, 0, 0, 0.6),
        0 0 0 2px rgba(0, 212, 255, 0.35) !important;
}

/* ── Pop-up : « Fermer » de l'écran de remerciement du parcours pro ──── */
.cfaoi-pop-root .cfaoi-pop-pro-thanks-close {
    color: var(--pop-text-dim, #5a6f8e) !important;
    padding: 8px !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
}
.cfaoi-pop-root .cfaoi-pop-pro-thanks-close:hover {
    color: var(--pop-text-muted, #8aa2c4) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   ║  3.13.34 — LE CALQUE CLAIR DE L'ÉCRAN EMPLOYEUR.                     ║
   ═══════════════════════════════════════════════════════════════════════

   SIGNALÉ EN RECETTE DEUX FOIS : « ici c'est illisible ». La 3.13.31
   prétendait corriger le défaut ; elle ne l'a pas corrigé, et la MESURE sur le
   site de développement l'a établi sans discussion — la bulle d'Aria calculait
   `color: #ecf3ff` sur une carte `#f0f4f8`. Du blanc sur du blanc, exactement
   comme avant.

   ─── POURQUOI LE CORRECTIF PRÉCÉDENT N'A JAMAIS EXISTÉ ──────────────────

   Il vivait dans `CFAOI_Popup::print_appearance_css()`. Or cette méthode SORT
   SANS RIEN ÉMETTRE quand aucune option `cfaoi_appearance_*` n'a jamais été
   posée en back-office — « aucune surcharge → on laisse le CSS d'origine faire
   son boulot ». C'est le cas PAR DÉFAUT, et c'est le cas du site de
   développement : la balise `<style id="cfaoi-appearance-overrides">` était
   tout simplement ABSENTE de la page. Le correctif était mort-né, et rien ne
   pouvait le dire en lisant le code — il fallait interroger le navigateur.

   Aggravant : le bloc y était en outre écrit À L'INTÉRIEUR d'une déclaration
   encore ouverte, donc rejeté même le jour où la méthode émet.

   ─── POURQUOI ICI, ET PAS AILLEURS ──────────────────────────────────────

   Trois conditions, et ce fichier est le seul à les remplir toutes :

     1. IL EST TOUJOURS SERVI. Le pop-up et le shortcode l'enregistrent tous
        les deux sans condition. Aucun réglage à poser pour qu'il existe.
     2. IL PORTE LE `!important` QUI GAGNE. Le thème du site impose
        `*, ::before, ::after { background: transparent !important;
        color: #000 !important }` — c'est la raison d'être de ce bouclier. Un
        calque écrit sans `!important` perdrait contre le bouclier lui-même,
        ce qui est arrivé à la version précédente : elle posait bien la
        BORDURE des bulles, jamais leur fond ni leur texte.
     3. IL LIT DÉJÀ DES JETONS. Presque toutes ses couleurs passent par
        `var(--pop-…, <repli sombre>)`. Redéfinir les jetons retourne donc tout
        le pan d'un seul geste — UNE définition, pas un second bloc de règles
        qui divergerait du premier (§10, la cause structurelle de V8).

   ⚠️ L'ANCRAGE SUR L'IDENTIFIANT N'EST PAS COSMÉTIQUE. `print_appearance_css()`
   pose ses jetons sur `#cfaoi-popup-root` — spécificité d'identifiant (1,0,0).
   Un sélecteur de classe, même avec l'attribut, PERD contre lui le jour où le
   CFA touche un réglage d'apparence. `#cfaoi-popup-root[data-state="pro"]` vaut
   (1,1,0) : il gagne dans les deux situations, sans `!important`. L'identifiant
   et la classe sont posés sur la MÊME div (`class-cfaoi-popup.php` :
   `<div id="cfaoi-popup-root" class="cfaoi-pop-root">`), donc écrire l'un ou
   l'autre ne change RIEN à l'ensemble ciblé — seulement au poids.

   ⚠️ LES REPLIS REPRODUISENT À L'OCTET LE COMPORTEMENT D'AVANT. Partout où ces
   jetons ne sont pas définis — le parcours candidat, le pop-up fermé, l'écran
   d'accueil — chaque `var(--pop-…, X)` rend X, c'est-à-dire exactement la
   valeur qui y était écrite en dur. Ce lot ne peut donc pas déteindre sur le
   thème sombre. C'est aussi pourquoi deux replis DIFFÉRENTS coexistent pour
   `--pop-surface-hover` (0,05 sur les boutons plats, 0,1 sur le haut-parleur) :
   le repli est propre à chaque usage et ne sert que dans le thème sombre.

   D'OÙ VIENNENT LES VALEURS : de `cfaoi-public.css`, la feuille du parcours
   candidat. Le client demande « les mêmes couleurs » — on les COPIE de la
   référence au lieu d'en inventer une troisième. */

/* 4.0.10 — L'ÉCRAN D'ACCUEIL DE LA PAGE DÉDIÉE REJOINT CETTE LISTE. Il est la
   MÊME surface claire que le parcours qu'il ouvre, et il vit À CÔTÉ de
   `#cfaoi-popup-root`, jamais dedans : aucun des sélecteurs ci-dessous ne
   l'atteignait. Un sélecteur de plus, donc — surtout pas une seconde copie de
   ces treize valeurs, qui divergerait au premier réglage (§10, V8). Sa
   spécificité (0,2,0) est sans conflit ici : `print_appearance_css()` ancre ses
   jetons sur l'identifiant, qui ne couvre pas cet élément. */
#cfaoi-popup-root[data-state="pro"],
#cfaoi-popup-root[data-state="pro-thanks"],
.cfaoi-pop-standalone .cfaoi-pop-entree {
    --pop-text:           #0f172a;
    --pop-text-muted:     #475569;
    --pop-text-dim:       #94a3b8;
    --pop-border:         #e2e8f0;
    --pop-field-border:   #e2e8f0;
    --pop-primary:        #2563eb;
    --pop-glow:           rgba(37, 99, 235, 0.35);
    --pop-surface:        #ffffff;
    --pop-surface-hover:  #f1f5f9;
    --pop-chip:           #ffffff;
    --pop-chip-hover:     #e0edff;
    /* 3.13.37 — LE FOND DU PANNEAU. La barre de validation devient collante au
       bas de la zone de reponse (elle etait coupee : « on ne doit pas avoir a
       scroller pour valider une reponse ») ; il lui faut donc un fond OPAQUE,
       et le meme que celui de la carte, sinon les choix defileraient DERRIERE
       en restant visibles. Une seule definition, deux consommateurs — la carte
       et la barre. Valeur reprise de la carte employeur (3.13.28). */
    --pop-pane-bg:        #f0f4f8;
    /* Le texte POSÉ SUR le dégradé primaire. En sombre il est quasi noir parce
       que le dégradé part d'un cyan vif ; en clair il part d'un bleu franc, où
       seul le blanc tient. Sans ce jeton, relever `--pop-primary` aurait rendu
       ILLISIBLES les deux boutons d'envoi et la bulle de l'employeur — un
       défaut NEUF introduit par le correctif d'un autre. */
    --pop-on-primary:     #ffffff;
}

/* ══════════════════════════════════════════════════════════════════════════
   ⭐⭐ 3.13.92 — LE MODE SALON : LE VOILE ET LA BARRE DU CONSEILLER
   ══════════════════════════════════════════════════════════════════════════

   POURQUOI ICI, ET PAS DANS cfaoi-public.css. Ce bloc n'est pas décoratif :
   le voile est ce qui EMPÊCHE le visiteur suivant de lire l'écran du
   précédent. Une garde dont le style ne se charge pas est une garde qui
   échoue OUVERTE — un `<div>` sans style ne masque rien, et personne ne verrait
   la différence entre « le voile protège » et « le voile est là mais
   transparent ». Cette feuille est la seule servie sur LES DEUX surfaces
   (page à code court et pop-up), elle est imprimée en DERNIER, et le thème du
   site impose `*, ::before, ::after { color: #000 !important }` : toute
   couleur écrite ailleurs sans `!important` perd contre lui (§10, 3.13.34).

   ⚠️ `position: fixed` sur `document.body`, jamais dans `#cfaoi-app-root` :
   chaque écran réécrit `root.innerHTML`, un voile posé dedans disparaîtrait au
   premier changement d'écran — c'est-à-dire au moment précis où il sert.

   Le z-index reprend celui du pop-up (2147483600) plus un : le voile doit
   passer AU-DESSUS de la modale de résultat, qui est justement l'écran le plus
   nominatif du parcours.
   ══════════════════════════════════════════════════════════════════════════ */

#cfaoi-salon-voile {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483601 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* Opaque, jamais translucide : un voile à 90 % laisse lire un prénom. */
    background: #0f172a !important;
    padding: 24px !important;
}

#cfaoi-salon-voile .cfaoi-salon-voile-carte {
    max-width: 420px !important;
    width: 100% !important;
    text-align: center !important;
    background: #ffffff !important;
    border-radius: 16px !important;
    padding: 28px 24px !important;
    box-shadow: 0 18px 50px rgba(15, 23, 42, .45) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

#cfaoi-salon-voile .cfaoi-salon-voile-titre {
    margin: 0 0 8px !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    /* #0f172a sur #ffffff = 17,85:1 — la mesure du §10 (3.13.34). */
    color: #0f172a !important;
}

#cfaoi-salon-voile .cfaoi-salon-voile-sous {
    margin: 0 0 20px !important;
    font-size: 14.5px !important;
    line-height: 1.5 !important;
    /* #475569 sur #ffffff = 6,89:1 — le ton retenu en 3.13.90 après mesure. */
    color: #475569 !important;
}

#cfaoi-salon-voile .cfaoi-salon-voile-btn {
    display: block !important;
    width: 100% !important;
    /* 48 px : la cible tactile, sur une tablette de stand qu'on touche du
       pouce. On l'écrit en min-height ET en padding — le premier peut être
       neutralisé par un thème qui impose une hauteur de bouton. */
    min-height: 48px !important;
    padding: 13px 20px !important;
    border: none !important;
    border-radius: 10px !important;
    /* #1f7c85 sur blanc = 4,91:1 ; #3FB9C4 échouerait à 2,35:1 (§10). */
    background: #1f7c85 !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}

#cfaoi-salon-voile .cfaoi-salon-voile-lien {
    display: block !important;
    width: 100% !important;
    min-height: 44px !important;
    margin: 10px 0 0 !important;
    padding: 10px !important;
    border: none !important;
    background: transparent !important;
    color: #475569 !important;
    font-size: 14px !important;
    text-decoration: underline !important;
    cursor: pointer !important;
}

#cfaoi-salon-voile button:focus-visible {
    outline: 3px solid #0f172a !important;
    outline-offset: 2px !important;
}

/* La barre du conseiller — discrète, toujours atteignable, jamais au-dessus
   du voile (z-index inférieur) : quand le voile est là, c'est LUI qui décide. */
#cfaoi-salon-barre {
    position: fixed !important;
    right: 14px !important;
    bottom: 14px !important;
    z-index: 2147483599 !important;
}

#cfaoi-salon-barre .cfaoi-salon-barre-btn {
    min-height: 44px !important;
    padding: 10px 16px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #334155 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .18) !important;
    cursor: pointer !important;
}

#cfaoi-salon-barre .cfaoi-salon-barre-btn:focus-visible {
    outline: 3px solid #1f7c85 !important;
    outline-offset: 2px !important;
}