/**
 * UNIVGA PWA — Styles des outils d'étude (tiroirs Dicolink, Wikipedia, etc.)
 */

.uvg-tool-body {
  padding: 12px 10px calc(28px + env(safe-area-inset-bottom, 0px)) !important;
}

/* Tiroir outils : plus large que Programme (360px) pour lire Wikipedia confortablement */
html.univga-pwa-lesson .uvg-prog-drawer.uvg-tool-drawer,
html.univga-pwa-standalone .uvg-prog-drawer.uvg-tool-drawer {
  width: 94% !important;
  max-width: min(94vw, 500px) !important;
}

.uvg-tool-search {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.uvg-tool-input,
.uvg-tool-select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(11, 79, 140, .14);
  border-radius: 12px;
  font-size: .95rem;
  background: #fff;
  color: #16263a;
  box-sizing: border-box;
}
.uvg-tool-input:focus,
.uvg-tool-select:focus {
  outline: none;
  border-color: #d4a853;
  box-shadow: 0 0 0 3px rgba(212, 168, 83, .18);
}
.uvg-tool-btn {
  flex: none;
  width: 46px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #16234d, #243a78);
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
}
.uvg-tool-label {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  color: #6b7a90;
  margin: 10px 0 6px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.uvg-tool-hint {
  font-size: .88rem;
  color: #6b7a90;
  line-height: 1.45;
  margin: 0;
}
.uvg-tool-hint--sm { font-size: .75rem; margin-top: 10px; }
.uvg-tool-loading,
.uvg-tool-error { font-size: .9rem; color: #6b7a90; }
.uvg-tool-error { color: #dc2626; }

.uvg-tool-word {
  font-size: 1.25rem;
  font-weight: 800;
  color: #16234d;
  margin: 0 0 12px;
}
.uvg-tool-block { margin-bottom: 16px; }
.uvg-tool-block h5 {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #6b7a90;
  margin: 0 0 8px;
}
.uvg-tool-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.uvg-tool-list li {
  padding: 10px 0;
  border-bottom: 1px solid rgba(11, 79, 140, .08);
}
.uvg-tool-list li:last-child { border-bottom: 0; }
.uvg-tool-def { display: block; font-size: .92rem; line-height: 1.45; color: #16263a; }
.uvg-tool-meta { display: block; font-size: .72rem; color: #6b7a90; margin-top: 4px; }

.uvg-tool-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.uvg-tool-chip {
  border: 1px solid rgba(11, 79, 140, .14);
  background: #eef2fb;
  color: #16234d;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
}

/* Wikipedia — article enrichi in-app */
.uvg-wiki-card { margin: 0; }
.uvg-wiki-head { margin-bottom: 12px; }
.uvg-wiki-card h4 { margin: 0 0 6px; font-size: 1.15rem; color: #16234d; line-height: 1.25; }
.uvg-wiki-thumb {
  width: 100%;
  max-height: 200px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 12px;
}
.uvg-wiki-desc { font-size: .82rem; color: #6b7a90; margin: 0; font-style: italic; line-height: 1.4; }
.uvg-wiki-body { margin-top: 4px; }
.uvg-wiki-sec { margin-bottom: 18px; }
.uvg-wiki-sec-title {
  font-size: .95rem;
  font-weight: 800;
  color: #243a78;
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(11, 79, 140, .1);
}
.uvg-wiki-sec-html {
  font-size: .88rem;
  line-height: 1.6;
  color: #16263a;
  word-break: break-word;
}
.uvg-wiki-sec-html p { margin: 0 0 10px; }
.uvg-wiki-sec-html h2,
.uvg-wiki-sec-html h3,
.uvg-wiki-sec-html h4 {
  font-size: .92rem;
  color: #243a78;
  margin: 14px 0 8px;
}
.uvg-wiki-sec-html ul,
.uvg-wiki-sec-html ol { margin: 0 0 10px 18px; padding: 0; }
.uvg-wiki-sec-html li { margin-bottom: 4px; }
.uvg-wiki-sec-html img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 8px 0;
}
.uvg-wiki-sec-html table {
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
  margin: 10px 0;
}
/* Infobox Wikipedia : pleine largeur du tiroir, pas de compression */
.uvg-wiki-sec-html .infobox,
.uvg-wiki-sec-html .infobox_v3,
.uvg-wiki-sec-html div[class*="infobox"] {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  clear: both !important;
  margin: 0 0 14px !important;
  box-sizing: border-box !important;
  font-size: .84rem !important;
  line-height: 1.48 !important;
  border: 1px solid rgba(11, 79, 140, .18) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}
.uvg-wiki-sec-html .infobox .entete,
.uvg-wiki-sec-html div[class*="infobox"] .entete {
  padding: 10px 12px !important;
  font-weight: 700 !important;
}
.uvg-wiki-sec-html .infobox table,
.uvg-wiki-sec-html div[class*="infobox"] table {
  display: table !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  font-size: inherit !important;
  table-layout: auto !important;
}
.uvg-wiki-sec-html .infobox th,
.uvg-wiki-sec-html .infobox td,
.uvg-wiki-sec-html div[class*="infobox"] th,
.uvg-wiki-sec-html div[class*="infobox"] td {
  padding: 8px 10px !important;
  white-space: normal !important;
  word-break: normal !important;
  hyphens: auto;
  vertical-align: middle !important;
}
.uvg-wiki-sec-html th,
.uvg-wiki-sec-html td {
  border: 1px solid rgba(11, 79, 140, .12);
  padding: 6px 8px;
  vertical-align: top;
}
/* Tables hors infobox : scroll horizontal si très larges */
.uvg-wiki-sec-html > table,
.uvg-wiki-sec-html p + table,
.uvg-wiki-sec-html .wikitable {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.uvg-wiki-sec-html a { color: #243a78; word-break: break-word; }
.uvg-wiki-trunc {
  font-size: .78rem !important;
  color: #6b7a90 !important;
  margin-top: 8px !important;
}
.uvg-wiki-more {
  font-size: .78rem;
  color: #6b7a90;
  margin: 8px 0 12px;
  padding: 10px 12px;
  background: #f6f8fc;
  border-radius: 10px;
}
.uvg-wiki-link--foot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .75rem;
  font-weight: 600;
  color: #6b7a90;
  text-decoration: none;
  margin-top: 4px;
}

/* Tiroir outils : résultat Wikipedia */
.uvg-tool-body .uvg-tool-result { margin-top: 0; }

.uvg-wiki-extract { font-size: .9rem; line-height: 1.55; color: #16263a; margin: 0 0 12px; }
.uvg-wiki-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .85rem;
  font-weight: 700;
  color: #243a78;
  text-decoration: none;
}

/* Convertisseur */
.uvg-conv-tabs,
.uvg-calc-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}
.uvg-conv-tab,
.uvg-calc-tab {
  flex: 1;
  border: 1px solid rgba(11, 79, 140, .12);
  background: #f6f8fc;
  color: #6b7a90;
  border-radius: 10px;
  padding: 9px 8px;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
}
.uvg-conv-tab.active,
.uvg-calc-tab.active {
  background: linear-gradient(135deg, #16234d, #243a78);
  border-color: #16234d;
  color: #fff;
}
.uvg-conv-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}
.uvg-conv-arrow { color: #6b7a90; font-size: .85rem; text-align: center; }
.uvg-conv-result {
  margin-top: 14px;
  padding: 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, #eef2fb, #f6f8fc);
  border: 1px solid rgba(11, 79, 140, .1);
  font-size: 1.05rem;
  font-weight: 800;
  color: #16234d;
  text-align: center;
  word-break: break-word;
}

/* Calculatrice */
.uvg-calc-display {
  background: #16234d;
  color: #fff;
  border-radius: 14px;
  padding: 16px 14px;
  font-size: 1.5rem;
  font-weight: 700;
  text-align: right;
  overflow-x: auto;
  margin-bottom: 12px;
  min-height: 52px;
  word-break: break-all;
}
.uvg-calc-keys { display: flex; flex-direction: column; gap: 6px; }
.uvg-calc-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.uvg-calc-key {
  border: 0;
  border-radius: 10px;
  padding: 12px 4px;
  font-size: .95rem;
  font-weight: 700;
  background: #f6f8fc;
  color: #16234d;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.uvg-calc-key:active { transform: scale(0.96); }
.uvg-calc-key--eq {
  background: linear-gradient(135deg, #16234d, #243a78);
  color: #fff;
}
.uvg-calc-key--wide { grid-column: span 2; }

@media (max-width: 380px) {
  .uvg-calc-key { padding: 10px 2px; font-size: .85rem; }
}