/* chatfaq/styles.css */
:root {
--bg: #0b1020; --panel:#0f1522; --gold:#d4af37; --ink:#e9f1ff; --muted:#9fb3d1; --wire:#1b2436; --accent:#00bfff;
}
*{box-sizing:border-box} html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif}


.cfq-header{position:sticky;top:0;background:linear-gradient(180deg,#0b1020,#0b1020cc,#0b102000);padding:16px 20px;border-bottom:1px solid #0d1730}
.cfq-header h1{margin:0;font-weight:800;letter-spacing:.2px}
.cfq-tabs {
  display: flex;
  gap: 12px;
  margin-top: 8px;
  justify-content: center; /* centre horizontalement */
  align-items: center;     /* centre verticalement (utile si les boutons n’ont pas la même hauteur) */
}
.cfq-tabs a{padding:8px 12px;border-radius:10px;background:#0e1730;color:var(--ink);text-decoration:none;border:1px solid #12214a}
.cfq-tabs a.active{border-color:var(--gold);box-shadow:0 0 0 2px #000 inset}
.cfq-tabs .admin-link{margin-left:auto;background:#2a1b36}


.cfq-container{max-width:980px;margin:24px auto;padding:0 16px}
.cfq-hero{background:linear-gradient(180deg,#131b2e,#0f1522);border:1px solid #1a2746;border-radius:16px;padding:24px}
.cfq-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:16px}
.card{display:block;padding:16px;border-radius:14px;background:#0e1526;border:1px solid #182a4b;text-decoration:none;color:var(--ink);transition:transform .15s ease, box-shadow .15s}
.card:hover{transform:translateY(-2px);box-shadow:0 10px 24px #0008}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;border:1px solid #2a3c62;background:#0b162e;color:var(--muted);font-size:12px}


/* Chat */
.chat-box{height:360px;overflow:auto;padding:12px;border:1px solid #1a2746;border-radius:12px;background:#0c1324}
.msg{padding:8px 10px;margin:6px 0;border-radius:10px;background:#0e1730;border:1px solid #152752}
.msg .meta{font-size:12px;color:var(--muted);margin-bottom:4px}


.chat-form{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:10px}
.chat-form textarea{min-height:64px;resize:vertical;border-radius:10px;border:1px solid #1a2746;background:#0c1324;color:var(--ink);padding:10px}
.chat-form button,
.feedback-form button,
.faq-search button,
.faq-ask button {
  border:none;
  background:linear-gradient(180deg, #00cfff, var(--accent)); /* turquoise lumineux */
  color:#fff;
  border-radius:10px;
  padding:10px 14px;
  font-weight:700;
  transition:all .2s ease;
}
/* FAQ ask form */
.faq-ask input[type="text"] {
  width: 100%;                /* prend toute la largeur du conteneur */
  border-radius: 10px;
  border: 1px solid #1a2746;
  background: #0c1324;
  color: var(--ink);
  padding: 12px 14px;
  font-size: 15px;
  margin-bottom: 10px;        /* espace avec le bouton */
  box-sizing: border-box;     /* évite le débordement */
}
/* Feedback textarea */
.feedback-form textarea,
.faq-ask textarea {
  width: 100%;               /* pleine largeur */
  min-height: 5em;           /* au moins 4 lignes (~ 4 × line-height) */
  border-radius: 10px;
  border: 1px solid #1a2746;
  background: #0c1324;
  color: var(--ink);
  padding: 12px 14px;
  font-size: 15px;
  resize: vertical;          /* autorise l’agrandissement si besoin */
  box-sizing: border-box;    /* évite les débordements */
}
.chat-form button:hover,
.feedback-form button:hover,
.faq-search button:hover,
.faq-ask button:hover {
  background:linear-gradient(180deg, #00e0ff, #0090cc);
  transform:translateY(-2px);
  box-shadow:0 4px 10px rgba(0,191,255,0.4);
}
.login-hint{margin-left:8px;color:var(--accent)}


/* Feedback */
.feedback-form{display:grid;gap:8px;margin-bottom:16px}
.feedback-form select, .feedback-form textarea{border-radius:10px;border:1px solid #1a2746;background:#0c1324;color:var(--ink);padding:10px}
.feedback-item{border:1px solid #1a2746;background:#0c1324;border-radius:12px;padding:12px;margin:10px 0}
.stars{color:var(--gold);font-size:14px}


/* FAQ */
.faq-search{display:flex;gap:8px;margin-bottom:10px}
.faq-search input{flex:1;border-radius:10px;border:1px solid #1a2746;background:#0c1324;color:var(--ink);padding:10px}
.faq-item{border:1px solid #1a2746;background:#0c1324;border-radius:12px;padding:12px;margin:10px 0}
.faq-q{font-weight:700;margin-bottom:6px}


/* Admin */
.admin-table{width:100%;border-collapse:collapse}
.admin-table th, .admin-table td{border:1px solid #1a2746;padding:8px;vertical-align:top}
.admin-table textarea{width:100%;min-height:80px}
.inline{display:inline-flex;gap:6px;align-items:center}

.faq-question {
  color: #00d9ff;       /* turquoise comme ton bouton */
  font-size: 1.1rem;    /* un peu plus grand */
  font-weight: 700;
  margin-bottom: 4px;
}

.faq-answer {
  color: #e7f0ff;       /* clair mais secondaire */
  font-size: 0.95rem;
  line-height: 1.55;
}
.feed-answer{
  color: #e7f0ff;       /* clair mais secondaire */
  font-size: 0.95rem;
  line-height: 1.55;
  margin:5px;
  padding:5px;
}