/* ---- Typo & variables ---- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap');

:root{
  --phi: 1.618;
  --bg: #0a1628;                 /* tu conserves ta gamme bleu/cyan */
  --panel: rgba(10,22,40,0.85);
  --panel-2: rgba(13,27,42,0.92);
  --text: #ffffff;
  --muted: #cfe9ff;
  --detail: #e2e8f0;             /* contraste détails */
  --link: #00d4ff;
  --link-hover: #67e8f9;
  --border: rgba(255,255,255,0.12);
  --glow: 0 8px 24px rgba(0,212,255,0.25);
  --card-shadow: 0 10px 30px rgba(0,0,0,0.45);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height:1.65;
}

/* ---- Liens très lisibles ---- */
a{
  color: var(--link);
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  font-weight:600;
}
a:hover{
  color: var(--link-hover);
  text-decoration: underline;
  text-shadow: 0 0 10px rgba(0,212,255,0.5);
}

/* ---- Titres plus visibles ---- */
h1,h2,h3{
  letter-spacing:-0.01em;
  line-height:1.15;
}
h1{
  font-weight:800;
  font-size: clamp(2rem, 2.2rem + 1.2vw, 3.4rem);
  margin-bottom: calc(10px * var(--phi));
}
h2{
  font-weight:800;
  font-size: clamp(1.4rem, 1.2rem + 0.8vw, 2.1rem);
  margin: calc(10px * var(--phi)) 0 calc(8px * var(--phi));
  color: var(--muted);
}
h3{
  font-weight:700;
  font-size: clamp(1.1rem, 1rem + 0.4vw, 1.4rem);
  margin: calc(6px * var(--phi)) 0;
  color: var(--detail);
}

/* ---- Layout ϕ : Résultats à gauche (colonne A), Input à droite (colonne B) ---- */
.layout{
  display:grid;
  grid-template-columns: calc(1fr * var(--phi)) 1fr; /* A > B */
  gap: calc(14px * var(--phi));
  max-width: min(96vw, 1280px * var(--phi));
  margin: calc(20px * var(--phi)) auto;
  padding: calc(10px * var(--phi));
}

/* Colonne A : résultats – doit partir du haut et pouvoir scroll/sticky */
.col-results{
  min-height: 100vh;                 /* monte jusqu’en haut visuellement */
  display: flex;
  flex-direction: column;
  gap: calc(10px * var(--phi));
}
.results-header{
  position: sticky;
  top: 0;
  backdrop-filter: blur(8px);
  background: linear-gradient(180deg, rgba(10,22,40,0.95), rgba(10,22,40,0.6));
  border-bottom: 1px solid var(--border);
  padding: calc(10px * var(--phi)) calc(8px * var(--phi));
  z-index: 2;
}

/* Colonne B : input agrandi + outils RSS */
.col-input{
  display:flex;
  flex-direction:column;
  gap: calc(12px * var(--phi));
}

/* ---- Panneaux / cartes ---- */
.card{
  background: linear-gradient(145deg, var(--panel), var(--panel-2));
  border: 1px solid var(--border);
  border-radius: calc(8px * var(--phi));
  box-shadow: var(--card-shadow);
  padding: calc(12px * var(--phi));
}

/* Cartes de résultats avec hiérarchie claire */
.result-card{
  display:flex;
  flex-direction:column;
  gap: calc(6px * var(--phi));
}
.result-title{
  font-weight:700;
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.3rem);
}
.result-detail{
  color: var(--detail);
  font-size: 0.95rem;
}

/* ---- Formulaire de recherche (input agrandi) ---- */
.search-form{
  display:flex;
  flex-direction:column;
  gap: calc(8px * var(--phi));
}
.search-input{
  width:100%;
  font-size: clamp(1rem, 0.95rem + 0.4vw, 1.25rem);
  padding: calc(10px * var(--phi)) calc(12px * var(--phi));
  color:#001018;
  background:#eaf6ff;
  border: 2px solid #9edcff;
  border-radius: calc(8px * var(--phi));
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.search-input:focus{
  border-color:#6ed3ff;
  box-shadow: 0 0 0 4px rgba(0,212,255,0.25);
}

/* ---- Zone “Résultats (même colonne) allant au haut” : déjà géré via col-results + sticky ---- */
.results-list{
  display:flex;
  flex-direction:column;
  gap: calc(10px * var(--phi));
  padding: calc(10px * var(--phi));
}

/* ---- Boutons (dont Save .rss / Reload .rss) – SVG only ---- */
.btn-row{
  display:flex;
  flex-wrap:wrap;
  gap: calc(8px * var(--phi));
}
.btn{
  --btn-bg: linear-gradient(135deg, #00d4ff, #4ccfff);
  --btn-bg-hover: linear-gradient(135deg, #35e0ff, #8ae3ff);
  appearance:none;
  border:none;
  border-radius: calc(8px * var(--phi));
  padding: calc(8px * var(--phi)) calc(12px * var(--phi));
  font-weight:700;
  color:#03212b;
  background: var(--btn-bg);
  box-shadow: var(--glow);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap: 10px;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover{ background: var(--btn-bg-hover); transform: translateY(-1px); }
.btn:active{ transform: translateY(0); box-shadow: 0 4px 14px rgba(0,212,255,0.2); }
.btn.secondary{
  --btn-bg: linear-gradient(135deg, #93c5fd, #60a5fa);
  --btn-bg-hover: linear-gradient(135deg, #b3d5ff, #7fb6ff);
}
.btn svg{ width:18px; height:18px; display:block }

/* ---- Tables ou listes “cartes” denses ---- */
.cards{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(220px*var(--phi)), 1fr));
  gap: calc(10px * var(--phi));
}

/* ---- Responsive ---- */
@media (max-width: 980px){
  .layout{
    grid-template-columns: 1fr;     /* pile */
  }
  .col-results{ order: 1; }
  .col-input{ order: 2; }
}