/* ============================================================================
   Charte graphique Conserto — démo IA responsable
   Noir profond #01031B | Rose accent #D8346E | Blanc #FFFFFF
   Titres : Plus Jakarta Sans (gras) — Accents : Fraunces (italique)
   Objectif : LISIBLE EN PROJECTION (grandes polices, fort contraste).
   ============================================================================ */

:root {
  --noir: #01031b;
  --noir-2: #0a0e2e;       /* surface légèrement plus claire pour les cartes */
  --noir-3: #141a40;       /* bordures / surfaces hover */
  --rose: #d8346e;
  --rose-clair: #ff5a92;
  --blanc: #ffffff;
  --gris: #aab0d4;         /* texte secondaire */
  --vert: #34d8a4;         /* "meilleur" / succès */
  --jaune: #f5c451;        /* avertissement / estimation */
  --radius: 16px;
  --ombre: 0 10px 40px rgba(0, 0, 0, 0.45);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  background: radial-gradient(1200px 600px at 80% -10%, #161a44 0%, var(--noir) 55%);
  color: var(--blanc);
  min-height: 100vh;
  line-height: 1.5;
  padding: 2rem clamp(1rem, 4vw, 4rem) 4rem;
}

.accent { font-family: "Fraunces", Georgia, serif; font-style: italic; color: var(--rose-clair); }

/* ---- En-tête -------------------------------------------------------------- */
header { max-width: 1400px; margin: 0 auto 2rem; }
header h1 { font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 800; letter-spacing: -0.02em; }
header p.tagline { font-size: clamp(1.1rem, 1.8vw, 1.5rem); color: var(--gris); margin-top: .5rem; }
header p.tagline .accent { font-size: 1.1em; }

/* ---- Barre de configuration ---------------------------------------------- */
.config {
  max-width: 1400px; margin: 0 auto 2rem;
  background: var(--noir-2); border: 1px solid var(--noir-3);
  border-radius: var(--radius); padding: 1.25rem 1.5rem;
  display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: flex-end;
  box-shadow: var(--ombre);
}
.field { display: flex; flex-direction: column; gap: .4rem; }
.field label { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gris); font-weight: 700; }
.field input, .field select, textarea {
  background: var(--noir); color: var(--blanc);
  border: 1px solid var(--noir-3); border-radius: 10px;
  padding: .7rem .9rem; font-size: 1rem; font-family: inherit;
}
.field input:focus, .field select:focus, textarea:focus { outline: 2px solid var(--rose); border-color: var(--rose); }
#apiKey { width: 320px; }
#modelSelect { min-width: 230px; }
.config .grow { flex: 1; }
#keyStatus { font-size: .85rem; color: var(--gris); }
#keyStatus.ok { color: var(--vert); }
#keyStatus.warn { color: var(--jaune); }

/* ---- Boutons -------------------------------------------------------------- */
button {
  font-family: inherit; font-weight: 700; cursor: pointer;
  border: none; border-radius: 10px; padding: .7rem 1.2rem; font-size: 1rem;
  background: var(--rose); color: var(--blanc); transition: transform .08s, background .2s;
}
button:hover { background: var(--rose-clair); }
button:active { transform: translateY(1px); }
button.ghost { background: transparent; border: 1px solid var(--noir-3); color: var(--blanc); }
button.ghost:hover { border-color: var(--rose); background: var(--noir-3); }
button:disabled { opacity: .45; cursor: not-allowed; }

/* ---- Sections ------------------------------------------------------------- */
main { max-width: 1400px; margin: 0 auto; display: flex; flex-direction: column; gap: 2.5rem; }
section > h2 { font-size: 1.5rem; font-weight: 800; margin-bottom: 1rem; display: flex; align-items: center; gap: .6rem; }
section > h2 .accent { font-size: 1.1em; }

/* ---- Cartes des 3 prompts ------------------------------------------------- */
.prompts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.prompt-card {
  background: var(--noir-2); border: 1px solid var(--noir-3); border-radius: var(--radius);
  padding: 1.25rem; display: flex; flex-direction: column; gap: .8rem; box-shadow: var(--ombre);
}
.prompt-card .badge { align-self: flex-start; background: var(--noir-3); color: var(--rose-clair);
  padding: .25rem .7rem; border-radius: 999px; font-size: .8rem; font-weight: 700; letter-spacing: .04em; }
.prompt-card h3 { font-size: 1.2rem; }
.prompt-card .desc { color: var(--gris); font-size: .9rem; min-height: 2.4em; }
.prompt-card pre {
  background: var(--noir); border: 1px solid var(--noir-3); border-radius: 10px;
  padding: .7rem; font-size: .78rem; color: var(--gris); max-height: 110px; overflow: auto;
  white-space: pre-wrap; font-family: ui-monospace, monospace;
}
.toolbar { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }

/* ---- Bloc résultat (4 blocs) --------------------------------------------- */
.result-blocks { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr 1fr; gap: 1rem; }
.block {
  background: var(--noir-2); border: 1px solid var(--noir-3); border-radius: var(--radius);
  padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .5rem;
}
.block .block-title { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gris); font-weight: 700; }
.block .answer { white-space: pre-wrap; font-size: .92rem; max-height: 320px; overflow: auto; }
.metric-big { font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 800; line-height: 1.1; }
.metric-sub { font-size: .85rem; color: var(--gris); }
.metric-row { display: flex; flex-direction: column; gap: .15rem; }
.metric-row + .metric-row { margin-top: .6rem; }

/* badge "estimation" */
.estimate-tag {
  display: inline-flex; align-items: center; gap: .4rem; align-self: flex-start;
  background: rgba(245, 196, 81, .14); color: var(--jaune);
  border: 1px solid rgba(245, 196, 81, .4); border-radius: 999px;
  padding: .2rem .6rem; font-size: .72rem; font-weight: 700;
}

/* ---- Tableau comparaison -------------------------------------------------- */
.compare-wrap { overflow-x: auto; }
table.compare { width: 100%; border-collapse: collapse; background: var(--noir-2);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--ombre); }
table.compare th, table.compare td { padding: 1rem 1.1rem; text-align: left; border-bottom: 1px solid var(--noir-3); vertical-align: top; }
table.compare th { background: var(--noir-3); font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; color: var(--gris); }
table.compare td .big { font-size: 1.6rem; font-weight: 800; }
table.compare td.best { position: relative; }
table.compare td.best::after {
  content: "✓ meilleur"; position: absolute; top: .4rem; right: .6rem;
  background: rgba(52, 216, 164, .15); color: var(--vert);
  border: 1px solid rgba(52, 216, 164, .45); border-radius: 999px;
  padding: .1rem .5rem; font-size: .68rem; font-weight: 700;
}
table.compare td .answer-mini { white-space: pre-wrap; font-size: .82rem; color: var(--gris); max-height: 180px; overflow: auto; }
.compare-note { color: var(--gris); font-size: .88rem; margin-top: .8rem; }

/* ---- Projection ----------------------------------------------------------- */
.projection {
  background: linear-gradient(135deg, #1a1140 0%, var(--noir-2) 100%);
  border: 1px solid var(--noir-3); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--ombre);
}
.projection .inputs { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: flex-end; margin-bottom: 1.5rem; }
.projection .field input { width: 130px; }
.proj-results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.proj-card { background: var(--noir); border: 1px solid var(--noir-3); border-radius: var(--radius); padding: 1.4rem; text-align: center; }
.proj-card .proj-num { font-size: clamp(2.2rem, 4vw, 3.4rem); font-weight: 800; color: var(--rose-clair); line-height: 1.05; }
.proj-card .proj-label { color: var(--gris); margin-top: .4rem; font-size: 1rem; }
.proj-scenario { color: var(--gris); margin-bottom: 1rem; }
.proj-scenario b { color: var(--blanc); }

/* ---- États / erreurs ------------------------------------------------------ */
.error-box {
  background: rgba(216, 52, 110, .12); border: 1px solid var(--rose);
  color: var(--rose-clair); border-radius: 12px; padding: 1rem 1.2rem; font-weight: 600;
}
.spinner {
  width: 18px; height: 18px; border: 3px solid rgba(255,255,255,.25);
  border-top-color: var(--blanc); border-radius: 50%; display: inline-block;
  animation: spin .8s linear infinite; vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }
.muted { color: var(--gris); }
.hidden { display: none !important; }

/* ---- Bandeau "données responsables" --------------------------------------- */
.rse-note {
  max-width: 1400px; margin: 0 auto 2rem;
  background: rgba(52, 216, 164, .10); border: 1px solid var(--vert);
  color: var(--blanc); border-radius: var(--radius); padding: .9rem 1.2rem;
  font-size: .95rem; line-height: 1.45;
}
.rse-note strong { color: var(--vert); }

/* ---- Parcours itératif ---------------------------------------------------- */
.intro { color: var(--gris); font-size: 1.05rem; margin-bottom: 1.25rem; max-width: 70ch; }
.intro strong { color: var(--blanc); }
.turn-list { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1rem; }
.turn { display: flex; gap: .9rem; align-items: flex-start; }
.turn .badge { flex: 0 0 auto; margin-top: .55rem; background: var(--noir-3); color: var(--rose-clair);
  padding: .3rem .7rem; border-radius: 999px; font-size: .8rem; font-weight: 700; }
.turn textarea { flex: 1; resize: vertical; }

/* Compteur cumulé : grandes valeurs, lisibles de loin */
.cumul { display: grid; grid-template-columns: .7fr 1.2fr 1.2fr 1.5fr; gap: 1rem; margin: 1.25rem 0; }
.cumul .card { background: linear-gradient(135deg, #2a1030 0%, var(--noir-2) 100%);
  border: 1px solid var(--rose); border-radius: var(--radius); padding: 1.1rem 1.2rem; }
.cumul .metric-big { font-size: clamp(1.8rem, 3.2vw, 2.8rem); font-weight: 800; }

/* Réponses des tours */
.turn-response { background: var(--noir-2); border: 1px solid var(--noir-3);
  border-radius: var(--radius); padding: 1rem 1.2rem; margin-top: .9rem; }
.turn-response .answer { white-space: pre-wrap; font-size: .9rem; max-height: 240px; overflow: auto; margin-top: .5rem; }

/* ---- Clés des autres fournisseurs (repliable) ----------------------------- */
.config-extra { max-width: 1400px; margin: -1rem auto 2rem; background: var(--noir-2);
  border: 1px solid var(--noir-3); border-radius: var(--radius); padding: 1rem 1.5rem; }
.config-extra summary { cursor: pointer; font-weight: 700; color: var(--gris); }
.config-extra[open] summary { color: var(--blanc); margin-bottom: .8rem; }
.config-keys { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.config-keys input { width: 280px; }

/* ---- Sélecteur de modèles (cloud vs local) -------------------------------- */
.model-picker { display: flex; flex-wrap: wrap; gap: .6rem; }
.model-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--noir); border: 1px solid var(--noir-3); border-radius: 999px;
  padding: .45rem .9rem; font-size: .95rem; cursor: pointer; user-select: none;
}
.model-chip:hover { border-color: var(--rose); }
.model-chip input { accent-color: var(--rose); width: 16px; height: 16px; }

/* Grille de colonnes cloud/local : autant que de modèles cochés */
.cl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; }
.cl-grid .answer { white-space: pre-wrap; font-size: .85rem; max-height: 220px; overflow: auto; margin-top: .4rem; }

/* ---- Optimisation RO ------------------------------------------------------ */
.ro-controls { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-end;
  background: var(--noir-2); border: 1px solid var(--noir-3); border-radius: var(--radius);
  padding: 1.2rem 1.4rem; margin-bottom: 1rem; }
.ro-controls .field { min-width: 200px; }
.ro-controls input[type="range"] { accent-color: var(--rose); width: 100%; }
.ro-controls input[type="number"] { width: 100px; }
table.compare tr.ro-reco td { background: rgba(52, 216, 164, .14); font-weight: 700; }
table.compare tr.ro-infeasible td { opacity: .45; }

/* ---- Badge de score (LLM-as-judge) ---------------------------------------- */
.score-badge { border-radius: 12px; padding: .6rem .8rem; margin: .2rem 0 .6rem; border: 1px solid var(--noir-3); }
.score-badge .score-num { font-size: 1.6rem; font-weight: 800; }
.score-badge .halluc { color: var(--jaune); font-weight: 700; font-size: .85rem; }
.score-badge .score-just { font-size: .85rem; color: var(--gris); margin-top: .3rem; }
.score-hi  { background: rgba(52, 216, 164, .14); border-color: var(--vert); }
.score-hi .score-num { color: var(--vert); }
.score-mid { background: rgba(245, 196, 81, .12); border-color: var(--jaune); }
.score-mid .score-num { color: var(--jaune); }
.score-lo  { background: rgba(216, 52, 110, .14); border-color: var(--rose); }
.score-lo .score-num { color: var(--rose-clair); }
.score-err { background: rgba(216, 52, 110, .1); border-color: var(--rose); color: var(--rose-clair); font-size: .85rem; }

/* ---- Verdict -------------------------------------------------------------- */
.verdict-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.verdict-col { gap: .2rem; }
.verdict-col.bad { border-color: var(--rose); }
.verdict-col.good { border-color: var(--vert); }
.verdict-col.neutral { border-color: var(--gris); }
.verdict-col .metric-row { padding: .5rem 0; border-bottom: 1px solid var(--noir-3); }
.verdict-col .metric-big { font-size: clamp(1.5rem, 2.6vw, 2.2rem); }
.savings { margin-top: 1.25rem; padding: 1.2rem 1.4rem; border-radius: var(--radius);
  background: rgba(52, 216, 164, .12); border: 1px solid var(--vert); color: var(--blanc);
  font-size: clamp(1.1rem, 2vw, 1.5rem); text-align: center; }
.savings b { color: var(--vert); }

/* ---- Prompt libre (repliable) -------------------------------------------- */
details summary { cursor: pointer; font-size: 1.5rem; font-weight: 800; list-style: none; }
details summary::-webkit-details-marker { display: none; }
details[open] summary { margin-bottom: .5rem; }

/* ---- Responsive projection / petits écrans -------------------------------- */
@media (max-width: 1000px) {
  .proj-results, .cumul, .verdict-grid { grid-template-columns: 1fr; }
  .result-blocks { grid-template-columns: 1fr 1fr; }
}