/* Surcharges PicoCSS pour une haute densité d'information */
:root {
  --pico-font-size: 14px; /* Plus petit */
  --pico-line-height: 1.2;
  --pico-spacing: 0.5rem; /* Espaces réduits */
  --pico-border-radius: 4px;
  --color-brand: #01438a;
  --color-pos: #2d8a01;
}

body { padding: 0.5rem; }

/* Header & Nav */
.main-header { display: flex; flex-direction: column; align-items: center; margin-bottom: 1rem; }
.brand a { color: var(--color-brand); font-weight: bold; font-size: 1.2rem; text-decoration: none; }
.tabs { display: flex; width: 100%; overflow-x: auto; border-bottom: 2px solid #eee; margin-top: 0.5rem; }
.tabs a { flex: 1; text-align: center; padding: 0.5rem; color: #555; text-decoration: none; white-space: nowrap; font-size: 0.9rem; font-weight: 500; }
.tabs a.active { color: var(--color-brand); border-bottom: 3px solid var(--color-brand); margin-bottom: -2px; font-weight: bold; }

/* Forms: Densité maximale */
.calculator-panel { margin-bottom: 1rem; }
.form-group label { font-size: 0.85rem; font-weight: 600; margin-bottom: 0.2rem; display: block;}
input[type="number"], input[type="date"], select, button { padding: 0.4rem; height: auto; font-size: 14px; margin-bottom: 0.5rem; }

.movements-section { background: #f9f9f9; padding: 0.5rem; border: 1px solid #eee; border-radius: var(--pico-border-radius); margin-bottom: 0.5rem; }
.movements-section label { font-size: 0.85rem; font-weight: 600; color: #444; }
.movement-row { display: flex; gap: 0.5rem; margin-bottom: 0.2rem; }
.movement-row input { flex: 1; margin: 0; min-width: 0; }

.btn-add { background: none; border: 1px dashed #ccc; color: #666; width: 100%; padding: 0.3rem; margin-top: 0.5rem; font-size: 0.8rem; }
.btn-primary { background: var(--color-brand); border: none; width: 100%; font-weight: bold; padding: 0.6rem; margin-top: 0.5rem; }

/* Ads */
.ad-wrapper { width: 100%; text-align: center; margin: 1rem 0; overflow: hidden; }
.ad-placeholder { background: #e0e0e0; border: 1px dashed #999; color: #666; font-size: 0.75rem; display: flex; align-items: center; justify-content: center; min-height: 90px; }

/* Results */
.summary-cards { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.card { flex: 1; background: #f3f7fb; border: 1px solid #d0e1f3; padding: 0.5rem; text-align: center; border-radius: var(--pico-border-radius); }
.card.highlight { background: #e8f5e9; border-color: #c8e6c9; }
.card span { display: block; font-size: 0.75rem; color: #555; text-transform: uppercase; }
.card strong { display: block; font-size: 1.2rem; color: #111; margin-top: 0.2rem; }
.card.highlight strong { color: var(--color-pos); }

/* Compact Table */
.details-table summary { font-size: 0.9rem; font-weight: bold; background: #eee; padding: 0.5rem; border-radius: var(--pico-border-radius); cursor: pointer; }
.table-responsive { overflow-x: auto; font-size: 0.8rem; }
table { width: 100%; border-collapse: collapse; margin-top: 0.5rem; }
table th, table td { padding: 0.3rem; border-bottom: 1px solid #eee; text-align: right; }
table th:first-child, table td:first-child { text-align: left; }
td.pos { color: var(--color-pos); font-weight: bold; }

/* Footer & SEO */
.main-footer { font-size: 0.75rem; color: #777; text-align: center; padding-bottom: 2rem; }
.main-footer a { color: #555; text-decoration: underline; }
.seo-page { font-size: 0.9rem; line-height: 1.5; }
.seo-page h1 { font-size: 1.3rem; color: var(--color-brand); }
.seo-page h2 { font-size: 1.1rem; margin-top: 1.5rem; margin-bottom: 0.5rem; border-bottom: 1px solid #eee; padding-bottom: 0.2rem; }

/* Desktop Tweaks */
@media (min-width: 768px) {
  .calculator-panel { max-width: 600px; margin: 0 auto; }
  .results-panel { max-width: 600px; margin: 0 auto; }
  .tabs { justify-content: center; }
  .tabs a { flex: none; padding: 0.5rem 2rem; }
}