/* Simulex IA — styles d'origine, inchangés (extraits de lecabinet119.com/simulex-ia/) */
#sxRoot, #sxRoot * { box-sizing: border-box; }

  #sxRoot {
    --sx-orange: #f77f00;
    --sx-orange-dark: #d96500;
    --sx-green: #009e60;
    --sx-green-dark: #00794a;
    --sx-ink: #12261e;
    --sx-muted: #6b7a75;
    --sx-bg: #f6f9f7;
    --sx-line: #e3ece7;
    --sx-danger: #d1483f;
    --sx-radius: 18px;
    font-family: 'Libre Bodoni', Georgia, 'Times New Roman', serif;
    color: var(--sx-ink);
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 24px 12px;
  }

  .sx-card {
    width: 100%;
    max-width: 860px;
    background: #ffffff;
    border-radius: var(--sx-radius);
    box-shadow: 0 20px 60px rgba(0, 60, 30, 0.10), 0 2px 8px rgba(0,0,0,0.04);
    overflow: hidden;
    border: 1px solid var(--sx-line);
    position: relative;
  }

  .sx-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--sx-orange) 0%, #ffffff 50%, var(--sx-green) 100%);
  }

  .sx-header {
    padding: 34px 32px 20px;
    text-align: center;
    background:
      radial-gradient(circle at 15% 20%, rgba(247,127,0,0.08), transparent 40%),
      radial-gradient(circle at 85% 10%, rgba(0,158,96,0.10), transparent 45%);
  }

  .sx-header-badge {
    display: inline-block;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .3px;
    color: var(--sx-green-dark);
    background: rgba(0,158,96,0.10);
    border: 1px solid rgba(0,158,96,0.25);
    padding: 5px 14px;
    border-radius: 999px;
    margin-bottom: 14px;
  }

  .sx-title {
    margin: 0 0 8px;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.3px;
    color: var(--sx-ink);
  }

  .sx-subtitle {
    margin: 0;
    font-size: 14.5px;
    color: var(--sx-muted);
    max-width: 520px;
    margin: 0 auto;
    line-height: 1.5;
  }

  /* ---------- Onglets principaux ---------- */
  .sx-tabs {
    display: flex;
    gap: 8px;
    padding: 0 24px;
    margin-top: 18px;
    border-bottom: 1px solid var(--sx-line);
  }

  .sx-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: transparent;
    border: none;
    padding: 14px 10px;
    font-size: 15px;
    font-weight: 700;
    color: var(--sx-muted);
    cursor: pointer;
    position: relative;
    transition: color .25s ease;
  }

  .sx-tab-icon { font-size: 16px; }

  .sx-tab::after {
    content: "";
    position: absolute;
    bottom: -1px; left: 10%;
    width: 80%;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(90deg, var(--sx-orange), var(--sx-green));
    transform: scaleX(0);
    transition: transform .3s ease;
  }

  .sx-tab.active { color: var(--sx-ink); }
  .sx-tab.active::after { transform: scaleX(1); }
  .sx-tab:hover { color: var(--sx-ink); }

  /* ---------- Sous-onglets ---------- */
  .sx-subtabs {
    display: inline-flex;
    background: var(--sx-bg);
    padding: 4px;
    border-radius: 12px;
    margin-bottom: 22px;
    border: 1px solid var(--sx-line);
  }

  .sx-subtab {
    border: none;
    background: transparent;
    padding: 9px 22px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--sx-muted);
    border-radius: 9px;
    cursor: pointer;
    transition: all .25s ease;
  }

  .sx-subtab.active {
    background: #ffffff;
    color: var(--sx-green-dark);
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
  }

  /* ---------- Panels ---------- */
  .sx-panel { display: none; padding: 26px 32px 4px; animation: sxFade .35s ease; }
  .sx-panel.active { display: block; }

  .sx-subpanel { display: none; animation: sxFade .3s ease; }
  .sx-subpanel.active { display: block; }

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

  .sx-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 20px;
  }

  .sx-field { display: flex; flex-direction: column; gap: 7px; }

  .sx-field label {
    font-size: 13px;
    font-weight: 700;
    color: var(--sx-ink);
  }

  .sx-hint { font-weight: 400; color: var(--sx-muted); font-size: 12px; }

  .sx-field input {
    border: 1.5px solid var(--sx-line);
    border-radius: 11px;
    padding: 12px 14px;
    font-size: 14.5px;
    background: #fbfdfc;
    color: var(--sx-ink);
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
    outline: none;
    width: 100%;
  }

  .sx-field input:focus {
    border-color: var(--sx-green);
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(0,158,96,0.12);
  }

  .sx-field input.sx-invalid {
    border-color: var(--sx-danger);
    box-shadow: 0 0 0 4px rgba(209,72,63,0.12);
  }

  /* ---------- Bloc préavis (barème / manuel) ---------- */
  .sx-preavis-block {
    margin-top: 22px;
    padding: 18px 18px 20px;
    border: 1.5px dashed var(--sx-line);
    border-radius: 14px;
    background: #fbfdfc;
  }

  .sx-preavis-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
  }

  .sx-preavis-title {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--sx-ink);
  }

  .sx-segmented {
    display: inline-flex;
    background: var(--sx-bg);
    border: 1px solid var(--sx-line);
    border-radius: 10px;
    padding: 3px;
  }

  .sx-seg {
    border: none;
    background: transparent;
    padding: 7px 14px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--sx-muted);
    border-radius: 7px;
    cursor: pointer;
    transition: all .2s ease;
  }

  .sx-seg.active {
    background: #ffffff;
    color: var(--sx-green-dark);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  }

  .sx-field select {
    border: 1.5px solid var(--sx-line);
    border-radius: 11px;
    padding: 12px 14px;
    font-size: 14px;
    background: #fbfdfc url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9'><path d='M1 1l6 6 6-6' stroke='%236b7a75' stroke-width='1.6' fill='none' fill-rule='evenodd'/></svg>") no-repeat right 14px center;
    color: var(--sx-ink);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
  }

  .sx-field select:focus {
    border-color: var(--sx-green);
    box-shadow: 0 0 0 4px rgba(0,158,96,0.12);
  }

  .sx-field-checkbox { justify-content: center; }

  /* Bloc "Catégorie professionnelle" + "Travailleur en situation d'incapacité" :
     s'adapte en continu à la largeur disponible plutôt que de dépendre d'un
     seul point de rupture fixe. Chaque champ occupe au minimum 230px puis
     passe automatiquement sur sa propre ligne dès que la place manque
     (tablette, écran partagé, mobile, etc.). */
  .sx-grid-cat {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    align-items: stretch;
  }

  .sx-grid-cat .sx-field-checkbox { justify-content: stretch; }

  .sx-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--sx-ink);
    cursor: pointer;
    padding: 12px 14px;
    border: 1.5px solid var(--sx-line);
    border-radius: 11px;
    background: #fff;
    line-height: 1.4;
    height: 100%;
  }

  .sx-checkbox input {
    width: 17px;
    height: 17px;
    accent-color: var(--sx-green);
    flex-shrink: 0;
    cursor: pointer;
  }

  .sx-preavis-preview {
    margin-top: 6px;
    font-size: 13px;
    color: var(--sx-muted);
    background: rgba(0,158,96,0.07);
    border: 1px solid rgba(0,158,96,0.2);
    padding: 10px 14px;
    border-radius: 10px;
  }

  .sx-preavis-preview strong { color: var(--sx-green-dark); }

  /* ---------- Actions ---------- */
  .sx-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px 32px 6px;
  }

  .sx-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    border-radius: 12px;
    padding: 13px 22px;
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .2s ease, opacity .2s ease;
  }

  .sx-btn:active { transform: translateY(1px) scale(0.98); }

  .sx-btn-icon { font-size: 15px; }

  .sx-btn-primary {
    background: linear-gradient(135deg, var(--sx-green), var(--sx-green-dark));
    color: #fff;
    box-shadow: 0 8px 20px rgba(0,158,96,0.30);
  }
  .sx-btn-primary:hover { box-shadow: 0 10px 26px rgba(0,158,96,0.40); }

  .sx-btn-ghost {
    background: var(--sx-bg);
    color: var(--sx-ink);
    border: 1.5px solid var(--sx-line);
  }
  .sx-btn-ghost:hover { background: #eef4f1; }

  .sx-btn-outline {
    background: #fff;
    color: var(--sx-orange-dark);
    border: 1.5px solid rgba(247,127,0,0.4);
  }
  .sx-btn-outline:hover:not(:disabled) { background: rgba(247,127,0,0.08); }
  .sx-btn-outline:disabled { opacity: .45; cursor: not-allowed; }

  .sx-error {
    display: none;
    margin: 4px 32px 0;
    padding: 12px 16px;
    background: rgba(209,72,63,0.08);
    border: 1px solid rgba(209,72,63,0.25);
    color: var(--sx-danger);
    border-radius: 11px;
    font-size: 13.5px;
    font-weight: 600;
  }

  /* ---------- Résultats ---------- */
  .sx-results {
    display: none;
    margin: 22px 32px 30px;
    padding: 22px 24px;
    border-radius: 16px;
    background: linear-gradient(180deg, #f4faf7 0%, #ffffff 100%);
    border: 1.5px solid var(--sx-line);
    animation: sxFade .4s ease;
  }

  .sx-results.show { display: block; }

  .sx-results-header { margin-bottom: 14px; }

  .sx-results-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--sx-green-dark);
  }

  .sx-breakdown { display: flex; flex-direction: column; gap: 10px; }

  .sx-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid var(--sx-line);
    border-radius: 10px;
    font-size: 13.8px;
  }

  .sx-line-label { color: var(--sx-muted); font-weight: 600; }
  .sx-line-sub { display: block; font-size: 11.5px; color: #9aa8a2; font-weight: 400; margin-top: 2px; }
  .sx-line-value { font-weight: 700; color: var(--sx-ink); white-space: nowrap; }

  .sx-total {
    margin-top: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px;
    border-radius: 13px;
    background: linear-gradient(135deg, var(--sx-orange), var(--sx-green));
    color: #fff;
    font-size: 14.5px;
    font-weight: 700;
  }

  .sx-total strong { font-size: 21px; letter-spacing: -0.3px; }

  .sx-legal-note {
    margin: 16px 2px 0;
    font-size: 11.5px;
    color: var(--sx-muted);
    line-height: 1.5;
  }

  /* ---------- Responsive ---------- */
  @media (max-width: 620px) {
    .sx-grid { grid-template-columns: 1fr; }
    .sx-grid-cat { grid-template-columns: 1fr; }
    .sx-header { padding: 26px 20px 16px; }
    .sx-panel { padding: 22px 18px 4px; }
    .sx-actions { padding: 10px 18px 6px; }
    .sx-results { margin: 20px 18px 26px; }
    .sx-title { font-size: 22px; }
    .sx-btn { flex: 1; justify-content: center; }
  }

  @media (max-width: 380px) {
    .sx-checkbox { font-size: 12px; padding: 10px 12px; gap: 8px; }
    .sx-checkbox input { width: 15px; height: 15px; }
    .sx-field select { font-size: 13px; padding: 10px 12px; }
  }
  /* ================================================================
     CORRECTIFS DE COMPATIBILITÉ AVEC LES STYLES GLOBAUX DU THÈME
     Certains thèmes / kits Elementor imposent un arrière-plan sombre
     (souvent noir) et une police différente sur les champs, listes
     déroulantes et boutons. On force ici, avec !important, les valeurs
     exactes du design pour garantir un rendu identique quel que soit
     le thème dans lequel ce widget est intégré.
  ================================================================= */
  #sxRoot, #sxRoot * {
    font-family: 'Libre Bodoni', Georgia, 'Times New Roman', serif !important;
  }

  #sxRoot { background: transparent !important; }
  #sxRoot .sx-card { background-color: #ffffff !important; }
  #sxRoot .sx-header,
  #sxRoot .sx-tabs,
  #sxRoot .sx-panel,
  #sxRoot .sx-subpanel,
  #sxRoot .sx-preavis-manuel,
  #sxRoot .sx-preavis-auto {
    background-color: transparent !important;
  }

  #sxRoot .sx-header-badge {
    background-color: rgba(0,158,96,0.10) !important;
    color: var(--sx-green-dark) !important;
  }

  #sxRoot .sx-title { color: var(--sx-ink) !important; }
  #sxRoot .sx-subtitle { color: var(--sx-muted) !important; }

  #sxRoot .sx-tab {
    background-color: transparent !important;
    color: var(--sx-muted) !important;
  }
  #sxRoot .sx-tab.active,
  #sxRoot .sx-tab:hover {
    background-color: transparent !important;
    color: var(--sx-ink) !important;
  }

  #sxRoot .sx-subtabs { background-color: var(--sx-bg) !important; }
  #sxRoot .sx-subtab {
    background-color: transparent !important;
    color: var(--sx-muted) !important;
  }
  #sxRoot .sx-subtab.active {
    background-color: #ffffff !important;
    color: var(--sx-green-dark) !important;
  }

  #sxRoot .sx-field label { color: var(--sx-ink) !important; }
  #sxRoot .sx-hint { color: var(--sx-muted) !important; }

  #sxRoot .sx-field input,
  #sxRoot .sx-field select {
    background-color: #fbfdfc !important;
    color: var(--sx-ink) !important;
    -webkit-text-fill-color: var(--sx-ink) !important;
    border-color: var(--sx-line) !important;
  }
  #sxRoot .sx-field input::placeholder { color: #9aa8a2 !important; opacity: 1 !important; }
  #sxRoot .sx-field input:focus,
  #sxRoot .sx-field select:focus {
    background-color: #ffffff !important;
    border-color: var(--sx-green) !important;
  }
  #sxRoot .sx-field input.sx-invalid {
    background-color: #fff6f5 !important;
    border-color: var(--sx-danger) !important;
  }

  #sxRoot .sx-preavis-block { background-color: #fbfdfc !important; }
  #sxRoot .sx-preavis-title { color: var(--sx-ink) !important; }
  #sxRoot .sx-segmented { background-color: var(--sx-bg) !important; }
  #sxRoot .sx-seg {
    background-color: transparent !important;
    color: var(--sx-muted) !important;
  }
  #sxRoot .sx-seg.active {
    background-color: #ffffff !important;
    color: var(--sx-green-dark) !important;
  }

  #sxRoot .sx-checkbox {
    background-color: #ffffff !important;
    color: var(--sx-ink) !important;
    border-color: var(--sx-line) !important;
  }

  #sxRoot .sx-preavis-preview {
    background-color: rgba(0,158,96,0.07) !important;
    color: var(--sx-muted) !important;
  }
  #sxRoot .sx-preavis-preview strong { color: var(--sx-green-dark) !important; }

  #sxRoot .sx-btn-primary {
    background: linear-gradient(135deg, var(--sx-green), var(--sx-green-dark)) !important;
    color: #ffffff !important;
  }
  #sxRoot .sx-btn-ghost {
    background-color: var(--sx-bg) !important;
    color: var(--sx-ink) !important;
    border-color: var(--sx-line) !important;
  }
  #sxRoot .sx-btn-ghost:hover { background-color: #eef4f1 !important; }
  #sxRoot .sx-btn-outline {
    background-color: #ffffff !important;
    color: var(--sx-orange-dark) !important;
    border-color: rgba(247,127,0,0.4) !important;
  }
  #sxRoot .sx-btn-outline:hover:not(:disabled) { background-color: rgba(247,127,0,0.08) !important; }

  #sxRoot .sx-error {
    background-color: rgba(209,72,63,0.08) !important;
    color: var(--sx-danger) !important;
  }

  #sxRoot .sx-results {
    background: linear-gradient(180deg, #f4faf7 0%, #ffffff 100%) !important;
  }
  #sxRoot .sx-results-title { color: var(--sx-green-dark) !important; }
  #sxRoot .sx-line {
    background-color: #ffffff !important;
    color: var(--sx-ink) !important;
    border-color: var(--sx-line) !important;
  }
  #sxRoot .sx-line-label { color: var(--sx-muted) !important; }
  #sxRoot .sx-line-sub { color: #9aa8a2 !important; }
  #sxRoot .sx-line-value { color: var(--sx-ink) !important; }
  #sxRoot .sx-total {
    background: linear-gradient(135deg, var(--sx-orange), var(--sx-green)) !important;
    color: #ffffff !important;
  }
  #sxRoot .sx-legal-note { color: var(--sx-muted) !important; }

  /* ================================================================
     CORRECTIF MOBILE (Le Cabinet 119, octobre 2026)
     Sur téléphone, la liste « Catégorie professionnelle » et la case
     « incapacité > 40 % » débordaient de la carte et étaient rognées :
     une colonne de grille « 1fr » ne descend jamais sous la largeur de
     son contenu, et l'intitulé le plus long de la liste l'élargissait
     (408 px pour 276 px disponibles). On autorise les champs à rétrécir ;
     le rendu sur ordinateur est inchangé.
     ================================================================ */
  #sxRoot .sx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #sxRoot .sx-grid-cat { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
  #sxRoot .sx-field { min-width: 0; }
  #sxRoot .sx-field select { width: 100%; max-width: 100%; min-width: 0; text-overflow: ellipsis; padding-right: 40px; }   /* place pour la flèche */
  @media (max-width: 620px) {
    #sxRoot .sx-grid,
    #sxRoot .sx-grid-cat { grid-template-columns: minmax(0, 1fr); }
  }
  /* très petits écrans (320 px) : l'onglet « Licenciement » dépassait aussi */
  @media (max-width: 380px) {
    #sxRoot .sx-tabs { padding: 0 10px; gap: 4px; }
    #sxRoot .sx-tab { min-width: 0; flex-wrap: wrap; padding: 12px 4px; gap: 4px 6px; font-size: 14px; }
  }