/* ===== Natural Therapeutics — Tela-inspired Green/Orange (light) + Icons + Pale Flower BG ===== */
:root{
  /* Surfaces & texte */
  --bg: #f6faf6;
  --surface: #ffffff;
  --card: #ffffff;
  --text: #263128;
  --muted: #5b6d61;
  --border: #d9e7de;

  /* Accents */
  --green-1:#357b49;
  --green-2:#00d084;
  --green-3:#7bdcb5;
  --orange-1:#ff6900;
  --orange-2:#ff8a33;
  --orange-3:#ffb56b;

  --ring: 0 0 0 3px rgba(255,105,0,.28);
  --radius: 14px;
  --shadow: 0 6px 22px rgba(17, 35, 26, .08);
}

/* ====== SVG DATA-URIs (icônes & motif fleur) — one-line safe ====== */
:root{
  /* Feuille (H1) */
  --ico-leaf: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path fill='%2300d084' d='M41 7c-10 1-18 5-24 11S5 33 7 41c8 2 23-5 29-10S44 17 41 7z'/><path fill='none' stroke='%23214233' stroke-opacity='.18' stroke-width='2' d='M10 38c10-10 18-18 30-30'/></svg>");

  /* Loupe (bouton Search) */
  --ico-mortar: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='11' cy='11' r='6' fill='none' stroke='%23ffffff' stroke-width='2.2'/><line x1='15' y1='15' x2='20' y2='20' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round'/></svg>");

  /* Étoile/feuille (badge) */
  --ico-badge: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path fill='%23ff8a33' d='M24 6l4.6 9.4 10.4 1.5-7.5 7.3 1.8 10.3L24 30l-9.3 4.9 1.8-10.3-7.5-7.3 10.4-1.5L24 6z'/></svg>");

  /* Page (liens PubMed) */
  --ico-paper: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><rect x='10' y='8' width='28' height='32' rx='4' fill='%23eaf5ef' stroke='%23cfe7da'/><rect x='14' y='14' width='20' height='2' fill='%23357b49'/><rect x='14' y='20' width='16' height='2' fill='%23357b49'/><rect x='14' y='26' width='18' height='2' fill='%23357b49'/></svg>");

  /* Chevron (select année) */
  --ico-chevron: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='%23357b49' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/></svg>");

  /* Motif “fleur pâle” (fond) */
  --bg-flower: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280' viewBox='0 0 280 280'><defs><radialGradient id='petal' cx='50%25' cy='50%25' r='50%25'><stop offset='0%25' stop-color='%23fff7e6' stop-opacity='.80'/><stop offset='100%25' stop-color='%23ffe9d6' stop-opacity='.15'/></radialGradient></defs><g opacity='.35' transform='translate(140 140)'><ellipse rx='60' ry='30' fill='url(%23petal)' transform='rotate(0)'/><ellipse rx='60' ry='30' fill='url(%23petal)' transform='rotate(45)'/><ellipse rx='60' ry='30' fill='url(%23petal)' transform='rotate(90)'/><ellipse rx='60' ry='30' fill='url(%23petal)' transform='rotate(135)'/><circle r='16' fill='%23ffedd8' stroke='%23ffd7a8' stroke-opacity='.4'/></g></svg>");
}

/* Page */
html,body{ height:auto; }
body{
  position: relative;
  min-height: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--text);
  background: var(--bg);
  max-width: 920px;
  margin: 28px auto;
  padding: 0 16px 48px;
}

/* BACKGROUND IMAGE pleine page, non répétée, 20% d'opacité */
body::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: url("/static/img/tea-tree.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  opacity: 0.20;
  pointer-events: none;
}

/* Headings */
h1{
  position: relative;
  line-height:1.15;
  font-size: clamp(26px, 3.6vw, 38px);
  margin: 0 0 10px;
  color: var(--green-1);
  font-weight:800;
  letter-spacing:.2px;
  padding-left: 44px; /* espace pour l’icône */
}
h1::before{
  content:"";
  position:absolute;
  left:0; top:2px;
  width:32px; height:32px;
  background-image: var(--ico-leaf);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.12));
}
h1::after{
  content:"";
  display:block;
  height: 3px;
  width: 120px;
  margin-top: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--green-2), var(--orange-1));
  opacity:.9;
}
h3{
  color:#1f2a22;
  font-size: 18px;
  margin-top:0;
}

/* Helper text */
.muted{ color: var(--muted); font-size: 13px; }

.row{
  display:flex;
  flex-direction: column;  /* éléments empilés : input, select, bouton */
  gap: 8px;
  margin:16px 0 10px;
}

/* La zone de saisie prend toute la largeur */
.row input#cond{
  width: 100%;
}

/* Ligne sous l'input : label + select + bouton alignés à droite */
.row-actions{
  display: flex;
  align-items: center;
  justify-content: flex-end; /* tout collé à droite */
  gap: 8px;
}

/* Petit label "Start from" */
.start-label{
  font-size: 16px;
  color: var(--muted);
  white-space: nowrap;
}

/* On retrouve la largeur "compacte" pour la boîte d'année */
.row-actions select#fromYear{
  width: 130px;   /* comme avant (≈ flex: 0 0 130px) */
}

/* Le bouton Search garde sa taille auto (pas plein écran) */
.row-actions button#btn{
  width: auto;
}


/* Responsive */
@media (max-width: 560px){
  body{ padding: 0 12px 36px; }
  /* plus besoin de changer la direction ici,
     elle est déjà en colonne par défaut */
}

/* Inputs */
input{
  flex:1;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: #fbfdfb;
  color: #1f2a22;
  transition: border-color .2s ease, box-shadow .2s ease, transform .08s ease;
}
input::placeholder{ color:#7f9488; }
input:focus{
  outline: none;
  border-color: var(--green-3);
  box-shadow: var(--ring);
  transform: translateY(-1px);
}

/* Select (année de départ) */
select,
select#fromYear{
  padding: 12px 36px 12px 14px; /* place pour la flèche à droite */
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background-color: #fbfdfb;
  color: #1f2a22;
  font-size: 14px;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease, transform .08s ease, background-color .15s ease;

  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;

  background-image: var(--ico-chevron);
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
}

select#fromYear:focus{
  outline: none;
  border-color: var(--green-3);
  box-shadow: var(--ring);
  transform: translateY(-1px);
}

select#fromYear:hover{
  background-color: #f3faf6;
}

/* Button (style de base pour tous les boutons) */
button{
  position: relative;
  padding: 12px 18px;
  border: 0;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--green-1), var(--green-2));
  color:#ffffff;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform .08s ease, filter .15s ease, box-shadow .15s ease, background .2s ease;
  white-space: nowrap;
}

button:hover{
  filter: brightness(1.04);
  background: linear-gradient(135deg, var(--green-1), var(--orange-1));
}
button:active{ transform: translateY(1px) scale(.99); }
button:focus-visible{ outline:none; box-shadow: 0 0 0 3px rgba(0,208,132,.28); }

/* Bouton principal "Search" – icône loupe + padding gauche plus large */
button#btn{
  padding: 12px 18px 12px 56px; /* texte décalé à droite pour laisser la loupe */
}

button#btn::before{
  content:"";
  position:absolute;
  left:16px;
  top:50%;
  width:20px;
  height:20px;
  transform: translateY(-50%);
  background-image: var(--ico-mortar); /* la loupe */
  background-size: 100% 100%;
  background-repeat: no-repeat;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.12));
}

/* Boutons secondaires "Use AI to explore" */
/* Boutons secondaires "Use AI to explore" */
button.ai-btn{
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,105,0,.35); /* léger contour orange */
  background: #fff5ec;                   /* orange très léger */
  color: #8a4a20;                        /* texte orange/brun lisible */
  font-size: 13px;
  font-weight: 500;
  box-shadow: none;
  white-space: nowrap;
  background-image: none;                /* aucune icône */
}

button.ai-btn:hover{
  background: #fffaf5;                   /* encore plus pâle au survol */
  border-color: rgba(255,105,0,.22);
  filter: none;
}


button.ai-btn:disabled{
  opacity: .6;
  cursor: not-allowed;
}

/* Cards */
.card{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  margin: 14px 0;
  background:
    linear-gradient(180deg, rgba(255,181,107,.08), rgba(123,220,181,.06)),
    var(--card);
  box-shadow: var(--shadow);
  transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
}
.card:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(17, 35, 26, .12);
  border-color: #cfe7da;
}

/* Badge (score) */
/* Badge (score) */

.badge{
  position: relative;
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid rgba(53,123,73,.2);
  border-radius: 999px;
  padding: 2px 12px 2px 44px; /* plus d'espace à gauche pour l'icône */
  font-size:12px;
  margin-left:10px;
  color:#214233;
  background:
    linear-gradient(90deg, rgba(255,105,0,.10), rgba(0,208,132,.10)),
    #f3faf6;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}

.badge::before{
  content:"";
  position:absolute;
  left:14px;            /* un peu plus à droite */
  top:50%;
  width:16px;
  height:16px;
  transform: translateY(-50%);
  background-image: var(--ico-badge);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.chip{
  display:inline-block;
  margin:6px 6px 0 0;
  padding:2px 8px;
  font-size:12px;
  border-radius:999px;
  text-decoration:none;
  color:#214233;
  background:#f3faf6;
  border:1px solid rgba(53,123,73,.2);
}
.chip:hover{ filter:brightness(1.05); }

.pmids .links{ margin-top:4px; }

/* Liens vers PubMed */
.pmids a{
  position: relative;
  display:block;
  margin:6px 0 0;
  padding-left: 28px; /* place pour icône */
  color:#1d5336;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease, transform .08s ease, padding-left .15s ease;
}
.pmids a::before{
  content:"";
  position:absolute;
  left:6px;
  top:50%;
  width:16px;
  height:16px;
  transform: translateY(-50%);
  background-image: var(--ico-paper);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  opacity:.9;
}
.pmids a:hover{
  color:#143a27;
  border-color: var(--green-2);
  background: rgba(0,208,132,.08);
  padding-left: 32px;
}

/* Ligne de journal */
.pmids .muted{
  margin-top: -2px;
  color:#6b8577;
}

/* Footer */
footer{
  margin-top: 22px;
  font-size: 12px;
  color: var(--muted);
  border-top: 1px solid var(--border);
  padding-top: 14px;
  opacity: .95;
}

/* Responsive
@media (max-width: 560px){
  body{ padding: 0 12px 36px; }
  .row{ flex-direction: column; }
  button{ width: 100%; }
  .row select#fromYear{
    width: 100%;
  }
} */

/* Accessibilité */
:focus-visible{
  outline: 2px dashed var(--orange-1);
  outline-offset: 2px;
}


/* === Fix badge de score : icône + texte bien séparés, override total === */
.card .badge{
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;

  /* beaucoup d'espace avant le texte pour l'icône */
  padding: 2px 12px 2px 46px !important;

  margin-left: 10px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(53,123,73,.2) !important;

  background:
    linear-gradient(90deg, rgba(255,105,0,.10), rgba(0,208,132,.10)),
    #f3faf6 !important;

  font-size: 12px !important;
  color: #214233 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6) !important;
}

.card .badge::before{
  content: "" !important;
  position: absolute !important;
  left: 16px !important;        /* position de l'icône */
  top: 50% !important;
  width: 16px !important;
  height: 16px !important;
  transform: translateY(-50%) !important;

  background-image: var(--ico-badge) !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
}

.search-banner {
    background: #ffffff;
    border: 1px solid #dddddd;
    border-radius: .5rem;
    padding: .6rem .9rem;
    margin: .75rem 0 .5rem;
    font-size: 1.05rem;          /* typo un peu plus grande */
    color: #333;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
  }

  .search-banner-label {
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .8rem;
    color: #888;
    margin-right: .35rem;
  }

  .search-banner strong {
    font-weight: 600;            /* maladie corrigée bien en gras */
  }

  #diseaseSummaryText {
  position: relative;
}

/* Ligne ajoutée progressivement */
.tw-line {
  opacity: 0;
  transform: translateY(0.25em);
}

/* Quand la ligne est rendue visible */
.tw-line-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}