/* =============================================================================
 * Alternance Reborn — Simulateur de salaire (/simulateur)
 * Direction ÉDITORIALE plate ("de-sloppée") — extension du thème editorial.css.
 *   AUCUN dégradé · AUCUNE box-shadow · hairlines 1px · arrondis ≤ 6px · Inter.
 * Palette `--ed-*` recopiée d'editorial.css, scopée sous .ar-sim (page auto-contenue).
 * Comportement JS du calcul INCHANGÉ.
 * ============================================================================= */

.ar-sim, .ar-sim *, .ar-sim *::before, .ar-sim *::after { box-sizing: border-box; }
.ar-sim {
  --ed-brand:   #1FB25A;
  --ed-brand-d: #0C5C2E;
  --ed-gold:    #C9A227;
  --ed-gold-d:  #9A6E12;
  --ed-ink:     #14181C;
  --ed-muted:   #6E7278;
  --ed-faint:   #9AA1A9;
  --ed-line:    #E4E1D8;
  --ed-bg:      #FCFBF7;
  --ed-paper:   #F3EFE4;
  --ed-body:    #2C3238;
  --ed-body-2:  #3A3B33;
  --ed-hi:      #EAF6EF;   /* surlignage vert pâle — ligne de grille sélectionnée */
  --ed-rad:     4px;
  --ed-rad-cta: 6px;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: 'Inter', var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--ed-ink);
  background: var(--ed-bg);
}

/* ────────────────────────────── Layout ──────────────────────────────────── */
.ar-sim-wrap {
  max-width: 960px; margin: 0 auto;
  padding: var(--space-8) var(--space-6) var(--space-12);
  display: flex; flex-direction: column; gap: var(--space-12);
}

/* En-tête : bloc titre à gauche, illustration à droite (desktop). */
.ar-sim-head {
  display: grid; grid-template-columns: 1fr auto; gap: var(--space-8); align-items: center;
}
.ar-sim-head__copy { max-width: 560px; }
.ar-sim-head .ar-eyebrow { color: var(--ed-gold-d); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.ar-sim-head .ar-h1 { font-size: 43px; font-weight: 800; letter-spacing: -1.4px; line-height: 1.06; color: var(--ed-ink); margin: var(--space-2) 0 var(--space-3); }
.ar-sim-head .ar-body { font-size: var(--text-md); line-height: 1.6; color: var(--ed-body); margin: 0; }
.ar-sim-head__art {
  display: block; width: 300px; max-width: 38vw; height: auto; aspect-ratio: 4 / 3;
  object-fit: cover; border-radius: var(--ed-rad); background: var(--ed-paper);
}
@media (max-width: 720px) {
  .ar-sim-head { grid-template-columns: 1fr; gap: var(--space-4); }
  .ar-sim-head__art { display: none; }   /* masquée en mobile : le widget reste au-dessus de la ligne de flottaison */
  .ar-sim-head .ar-h1 { font-size: 32px; letter-spacing: -1px; }
}

/* Sections éditoriales : titre + corps avec rythme constant. */
.ar-sim-section > * + * { margin-top: var(--space-4); }
.ar-sim-section .ar-h2 { font-size: 29px; font-weight: 800; letter-spacing: -0.8px; color: var(--ed-ink); margin-bottom: 0; }
.ar-sim-section .ar-h3 { font-size: 18px; font-weight: 700; color: var(--ed-ink); letter-spacing: -0.2px; }
.ar-sim-section .ar-body { color: var(--ed-body); }

/* ────────────────────────────── Console (cœur de l'outil) ──────────────────
 * Cadre 1.5px noir, radius 6px. Contrôles à gauche, résultat crème à droite. */
.ar-sim-console {
  display: grid; grid-template-columns: 1fr 1fr;
  background: #fff;
  border: 1.5px solid var(--ed-ink);
  border-radius: var(--ed-rad-cta);
  overflow: hidden;
}
.ar-sim-console__controls { padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-6); }
.ar-sim-console__readout {
  padding: var(--space-8);
  background: var(--ed-paper);
  border-left: 1.5px solid var(--ed-ink);
  display: flex; flex-direction: column; justify-content: center;
}

/* ── Labels de champs ── */
.ar-sim .ar-label { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ed-muted); }

/* ── Segmented control (type de contrat) : plat, onglet actif vert plein ── */
.ar-sim-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: var(--space-2); }
.ar-sim-seg {
  display: flex; gap: 0; padding: 0;
  background: #fff; border: 1px solid var(--ed-line); border-radius: var(--ed-rad-cta); overflow: hidden;
}
.ar-sim-seg input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ar-sim-seg label {
  flex: 1; text-align: center; padding: var(--space-3) var(--space-3);
  font-size: var(--text-sm); font-weight: 600; color: var(--ed-muted);
  cursor: pointer; transition: background var(--duration-base) var(--ease-out); white-space: nowrap;
}
.ar-sim-seg label + input + label { border-left: 1px solid var(--ed-line); }
.ar-sim-seg label:hover { color: var(--ed-ink); }
.ar-sim-seg input:checked + label { background: var(--ed-brand-d); color: #fff; }
.ar-sim-seg input:focus-visible + label { outline: 2px solid var(--ed-brand); outline-offset: -2px; }

/* ── Selects ── */
.ar-sim-console__controls .ar-field { margin-bottom: 0; display: grid; gap: var(--space-2); }
.ar-sim .ar-select {
  width: 100%; height: 48px; padding: 0 var(--space-4);
  font-family: 'Inter', var(--font-sans); font-size: var(--text-base); color: var(--ed-ink);
  background: #fff; border: 1px solid var(--ed-line); border-radius: var(--ed-rad);
}
.ar-sim .ar-select:focus { outline: none; border-color: var(--ed-brand-d); }

/* Bouton « Calculer » : fallback no-JS, masqué quand le JS prend le relais. */
.ar-sim .ar-sim-submit { background: var(--ed-brand-d); border-color: var(--ed-brand-d); color: #fff; font-weight: 600; }
.ar-sim .ar-sim-submit:hover { background: var(--ed-ink); border-color: var(--ed-ink); }
.ar-sim-js .ar-sim-submit { display: none; }

/* ────────────────────────────── Lecture du résultat ─────────────────────── */
.ar-sim-readout > * + * { margin-top: var(--space-2); }
.ar-sim-readout__label { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ed-gold-d); margin: 0; }
.ar-sim-amount {
  font-size: 44px; font-weight: 800; line-height: 1.05; letter-spacing: -1.6px; color: var(--ed-ink); margin: 0;
}
.ar-sim-amount .ar-sim-unit { font-size: var(--text-md); font-weight: 500; color: var(--ed-muted); letter-spacing: 0; }
.ar-sim-net { font-size: var(--text-lg); font-weight: 700; color: var(--ed-brand-d); display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.ar-sim-readout .ar-caption { font-size: 13px; color: var(--ed-muted); margin: 0; }
.ar-sim-compare { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--ed-line); color: var(--ed-body); }
.ar-sim-compare strong { color: var(--ed-ink); }
/* Badge « Net = Brut » : plat, encre sur crème. */
.ar-sim .ar-badge-success { background: var(--ed-hi); color: var(--ed-brand-d); border: 0; }

/* ────────────────────────────── Note dorée (ex-encadré bleu) ──────────────
 * Filet doré gauche 3px, label uppercase or, texte encre. Plus aucun bleu. */
.ar-sim-note { border-left: 3px solid var(--ed-gold); padding: 4px 0 4px var(--space-6); margin: 0; }
.ar-sim-note__label { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ed-gold-d); margin-bottom: var(--space-2); }
.ar-sim-note p { font-size: var(--text-md); line-height: 1.6; color: var(--ed-body-2); margin: 0; }

/* ────────────────────────────── Grille de référence (tables) ──────────────
 * En-tête VERT PLEIN texte blanc, lignes à hairlines, PAS de gris. Ligne
 * correspondant à la sélection surlignée (fond vert pâle, texte vert gras). */
.ar-sim .ar-table { width: 100%; border-collapse: collapse; font-size: 15px; border: 1px solid var(--ed-line); border-radius: var(--ed-rad); overflow: hidden; }
.ar-sim .ar-table thead th {
  background: var(--ed-brand-d); color: #fff; font-weight: 600; text-align: left;
  padding: 13px var(--space-4); font-size: 14px; text-transform: none; letter-spacing: 0; border: 0;
}
.ar-sim .ar-table tbody th,
.ar-sim .ar-table tbody td { padding: 13px var(--space-4); border-bottom: 1px solid var(--ed-line); background: #fff; color: var(--ed-body); text-align: left; font-weight: 400; }
.ar-sim .ar-table tbody th { font-weight: 600; color: var(--ed-ink); }
.ar-sim .ar-table tbody tr:last-child th,
.ar-sim .ar-table tbody tr:last-child td { border-bottom: 0; }
.ar-sim .ar-table tbody tr:hover th,
.ar-sim .ar-table tbody tr:hover td { background: var(--ed-bg); }
/* Ligne sélectionnée. */
.ar-sim .ar-table tr.is-active th,
.ar-sim .ar-table tr.is-active td { background: var(--ed-hi); color: var(--ed-brand-d); font-weight: 700; }
.ar-sim .ar-table tr.is-active:hover th,
.ar-sim .ar-table tr.is-active:hover td { background: var(--ed-hi); }

/* ────────────────────────────── Pont marketplace (offres) ─────────────────
 * Cartes flat à hairlines, sans ombre (même traitement que la home). */
.ar-sim-offers { display: grid; gap: 0; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); border-top: 1px solid var(--ed-line); border-left: 1px solid var(--ed-line); }
.ar-sim .ar-sim-offers .ar-card {
  background: #fff; border: 0; border-right: 1px solid var(--ed-line); border-bottom: 1px solid var(--ed-line);
  border-radius: 0; padding: var(--space-4); display: block;
}
.ar-sim .ar-sim-offers .ar-card:hover { background: var(--ed-paper); }
.ar-sim .ar-sim-offers .ar-caption { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ed-muted); }
.ar-sim .ar-sim-offers .ar-h4 { font-size: var(--text-md); font-weight: 700; color: var(--ed-ink); line-height: 1.3; letter-spacing: -0.2px; }
.ar-sim .ar-sim-offers .ar-body-sm { color: var(--ed-muted); }

/* Bouton « Voir toutes les offres » : vert plein. */
.ar-sim-section > .ar-btn-primary { background: var(--ed-brand-d); border-color: var(--ed-brand-d); color: #fff; font-weight: 600; }
.ar-sim-section > .ar-btn-primary:hover { background: var(--ed-ink); border-color: var(--ed-ink); }

/* ────────────────────────────── FAQ + sources ─────────────────────────── */
.ar-sim .ar-faq__item { background: transparent; border: 0; }

/* Liens éditoriaux verts. */
.ar-sim-section a,
.ar-sim-wrap > .ar-body-sm a { color: var(--ed-brand-d); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }

@media (max-width: 720px) {
  .ar-sim-console { grid-template-columns: 1fr; }
  .ar-sim-console__readout { border-left: 0; border-top: 1.5px solid var(--ed-ink); }
  .ar-sim-wrap { gap: var(--space-8); padding: var(--space-8) var(--space-4); }
}