/* EDN CPI — dark-friendly, 100% theme text colors, no panel bg/border */

/* Conteneur principal : pas de fond, pas de bordure */
.edn-cpi .edn-cpi__grid {
  display: grid;
  gap: .75rem;            /* compact */
  padding: .5rem 0;       /* très peu d’espace autour */
  border: none;           /* pas de bordure globale */
  border-radius: 0;       /* aucun radius global */
}

/* Switch d’onglets intégré */
.edn-cpi__mode-switch {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  align-items: center;
  padding-bottom: 2rem;
  margin-bottom: .25rem;
  border-bottom: 1px dashed currentColor; /* séparateur discret */
  opacity: .85;                            /* rend le séparateur moins agressif en sombre */
}

/* Boutons : on s’appuie sur .button du thème, juste un état actif lisible */
.edn-cpi .edn-tab.button {
  border-radius: 2px;      /* radius doux */
  padding: .4rem .7rem;    /* compact */
}

/* Actif: souligné + trait bas pour le contraste en thème sombre, sans changer la couleur */
.edn-cpi .edn-tab.button.active {
    background-color: inherit;
    border: solid var(--eksell-accent-color) 0.1rem;
    color: white;
}

/* Description de panneau : aucune couleur, hérite du thème */
.edn-cpi-pane-desc {
  margin: .2rem 0 .6rem;
  color: #ffe156;
}

/* Grille des champs */
.edn-cpi__row {
  display: grid;
  gap: 1rem;                         /* un peu d’air à l’intérieur */
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 720px) {
  .edn-cpi__row { grid-template-columns: 1fr; }
}

/* Labels & champs — héritage total des couleurs/tailles */
.edn-cpi .form-field .label {
  display: inline-block;
  margin-bottom: .3rem;
}

.edn-cpi input[type="number"],
.edn-cpi select {
  width: 100%;
  border-radius: 6px;                 /* radius doux */
  background: transparent;            /* garde le bg du thème */
  padding: .55rem .65rem;             /* compact à l’intérieur */
}

/* Focus discret mais net, sans couleur imposée */
.edn-cpi input[type="number"]:focus,
.edn-cpi select:focus {
  outline: 2px solid currentColor;
  outline-offset: 1px;
}

/* Switch salaire / prix — pas de fond, pas de bordure, juste l’alignement */
.edn-cpi__type-switch {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: .2rem 0 .4rem;
}
.edn-cpi-type-label {
	margin-right: .25rem;
	font-weight: bold;
}

.edn-cpi__type-switch {
	margin: 0 0 2.3rem 0;
}

.edn-cpi-pane-desc.convert {
	margin: 0 0 2.3rem 0;
}

.edn-cpi-type-buttons {
	display: flex; gap: .35rem;
}

.edn-cpi .edn-cpi-type.button.is-small {
  line-height: 1;
  padding: .3rem .55rem;
  border-radius: 2px; /* pilule légère pour différencier du switch d’onglets */
}

/* Actif : même logique que les onglets (lisible en dark) */
.edn-cpi .edn-cpi-type.button.active {
    background-color: inherit;
    border: solid var(--eksell-accent-color) 0.1rem;
    color: white;
}

/* Actions (boutons) */
.edn-cpi__actions {
  display: flex;
  gap: .45rem;
  flex-wrap: wrap;
  margin-top: .2rem;
}
.edn-cpi__actions .button {
  border-radius: 2px;
  padding: .55rem .85rem;
}

/* Résultats : pas de fond; juste une mise en page propre */
.edn-cpi-mainline {
  display: flex;
  gap: .45rem;
  align-items: baseline;
  margin: .7rem 0 .1rem;
  padding: .4rem 0;               /* espace interne, pas de cadre */
}
.edn-cpi-mainline .edn-cpi-main-label { font-weight: 600; }
.edn-cpi-mainline .edn-cpi-main-value,
.edn-cpi-mainline .edn-cpi-main-value-real {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* Phrase explicative + source, sans couleurs forcées */
.edn-cpi-explainer,
.edn-cpi-explainer-real {
	margin: .15rem 0 1rem 0;
}
.edn-cpi-footnote.small {
  margin: 1rem 0 0;
  padding-top: .35rem;
  border-top: 1px dashed currentColor; /* fin séparateur */
  opacity: .8;
	font-size: 1.2rem;
}

/* Erreurs : aucune couleur imposée, juste un léger style */
.edn-cpi .notice.error {
  margin: 1rem 0 0 0;
  background: transparent;
}

/* Transitions douces seulement si autorisées par l’utilisateur */
@media (prefers-reduced-motion: no-preference) {
  .edn-cpi .button,
  .edn-cpi input,
  .edn-cpi select {
    transition: outline-color .15s ease, box-shadow .15s ease;
  }
}

.edn-pane {
	padding: 1rem 0 !important;
}

.edn-cpi a,
.edn-cpi a:hover,
.edn-cpi button:hover,
.edn-cpi button,
.edn-cpi .active {
	text-decoration: none;
}

.edn-cpi button:hover {
	transform: scale(0.98);
}

.edn-cpi input::placeholder {
	color: #555555;
}

.edn-cpi select {
  color: #fff; /* texte blanc quand une option est sélectionnée */
}

.edn-cpi select option {
  color: #000; /* texte noir quand le menu est ouvert */
}

.edn-cpi label {
	margin: 0 0 1.3rem 0;
	font-style: italic;
}