/*
 * Habillage commun des simulateurs EDOS.
 *
 * Les huit fichiers du client partagent le même vocabulaire de classes et les mêmes variables
 * CSS. Cette feuille est chargée APRÈS leur <style> : elle redéfinit les variables et les
 * quelques couleurs écrites en dur, sans toucher à leur balisage ni à leurs calculs.
 *
 * Elle répond à la demande du 10/08/2026 : « Ne peut-on pas mettre un fond de couleur sur les
 * simulateurs ? » Le site est sombre (nuit + or), les simulateurs étaient sur fond blanc.
 *
 * Contrastes mesurés sur fond carte #132437 : crème 14,56:1, gris 7,18:1, or 7,01:1,
 * alerte 7,98:1, succès 9,24:1. Tous au-dessus du plancher de 4,5:1.
 */

@import url('../../themes/astra-child/polices/polices.css');

:root {
  --navy:  #C8A96E;   /* les titres passent à l'or : ils sont sur fond sombre */
  --navy2: #E8D5A3;
  --gold:  #C8A96E;
  --bg:    #0D1B2A;
  --card:  #132437;
  --text:  #F8F6F1;
  --muted: #A3B0C6;
  --line:  rgba(200, 169, 110, 0.22);
  --err:   #F5A3A3;
  --ok:    #7BD9A8;

  --edos-champ:  #0A1622;
  --edos-focus:  #C8A96E;
}

body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
}

.wrap { max-width: 1100px; }

h1 { font-size: clamp(1.35rem, 3.2vw, 1.9rem); line-height: 1.2; }
h2 { letter-spacing: .01em; }

.sub  { color: var(--muted); }
.hint,
.l    { color: var(--muted); }

.badge {
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--line);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.card,
.opt {
  background: var(--card);
  border-color: var(--line);
}

/* --- Les champs de saisie --------------------------------------------------------------- */

label { color: var(--muted); }

input[type=number],
input[type=text],
select {
  background: var(--edos-champ);
  color: var(--text);
  border-color: var(--line);
}

input[type=number]:focus,
input[type=text]:focus,
select:focus {
  outline: 2px solid var(--edos-focus);
  outline-offset: 1px;
  border-color: var(--edos-focus);
}

/* Sur fond sombre, le chevron natif des listes déroulantes disparaît sous Windows. */
select option { background: var(--edos-champ); color: var(--text); }

input[type=checkbox] { accent-color: var(--gold); width: 17px; height: 17px; }

/* --- Le bloc de résultat ----------------------------------------------------------------- */

.result-hero {
  background: linear-gradient(135deg, #1F0F71, #2A1FC7) !important;
  border: 1px solid var(--line);
}
.result-hero .num { color: var(--gold); }
.result-hero .lbl { color: #DCD7F5; }

.hero-ok { background: linear-gradient(135deg, #10402C, #1E7D4F) !important; }
.hero-ko { background: linear-gradient(135deg, #4A1414, #8C2B2B) !important; }

.net,
.val { color: var(--gold); }

/* --- Tableaux ---------------------------------------------------------------------------- */

table { color: var(--text); }
th, td { border-bottom-color: var(--line); }
th { color: var(--muted); font-weight: 600; }

/* Les colonnes de droite portent les montants : « 63 250 € » se coupait en deux, laissant le
   symbole seul sur la ligne suivante. Le libellé, lui, doit continuer à passer à la ligne. */
td:not(:first-child),
th:not(:first-child) { white-space: nowrap; }

/* Le tableau d'amortissement défile sur lui-même : on garde sa barre visible sur fond sombre. */
.amort::-webkit-scrollbar { width: 8px; height: 8px; }
.amort::-webkit-scrollbar-track { background: var(--edos-champ); }
.amort::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }

/* --- Encadrés ---------------------------------------------------------------------------- */

.note {
  background: rgba(200, 169, 110, 0.09);
  border-color: var(--line);
  color: #F0CE8E;
}

.vigil {
  background: rgba(245, 163, 163, 0.10);
  border-color: rgba(245, 163, 163, 0.35);
  color: var(--err);
}

.ok { color: var(--ok); }
.ko { color: var(--err); }

.disclaimer { color: var(--muted); border-top-color: var(--line); }
.src        { color: var(--muted); }

/* --- Boutons ----------------------------------------------------------------------------- */

.btn {
  background: var(--gold);
  color: #0D1B2A;
}
.btn:hover  { background: var(--edos-or-clair, #E8D5A3); }
.btn:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

.btn-del {
  background: rgba(245, 163, 163, 0.15);
  color: var(--err);
  border: 1px solid rgba(245, 163, 163, 0.35);
}

/* --- Mobile ------------------------------------------------------------------------------ */

/* Les fichiers d'origine ne dégroupent qu'à 820-900 px et laissent .row2/.row3/.mini/.cards2
   en plusieurs colonnes sur téléphone : à 375 px, un champ tombait à 70 px de large. */
@media (max-width: 640px) {
  body { padding: 16px 12px; }
  .row2, .row3, .mini, .cards2, .cards3, .grid { grid-template-columns: 1fr !important; }
  .result-hero .num { font-size: 1.6rem; }
  table { font-size: .78rem; }
  th, td { padding: 6px 4px; }
}

/* --- Retour client du 17/08/2026 : « des boutons bleu sur bleu » ------------------------- */

/* Deux fonds clairs restaient ecrits en dur dans les fichiers d origine et echappaient a cette
   feuille. Sur le fond sombre du site, ils rendaient leur texte illisible. Mesure avant :
   « Heritier 1 » a 1,05:1, le bouton « Retirer » a 1,75:1 — le plancher est a 4,5:1. */
.heir {
  background: var(--card);
  border-color: var(--line);
}

/* Le nom de chaque heritier reprenait la couleur du texte courant sur un fond presque blanc :
   creme sur creme, invisible. Il passe a l or, comme les autres intertitres. */
.heir-head b { color: var(--gold); }