/* ═══════════════════════════════════════════════════════════
   ADDONCORP — app.css
   Styles partagés entre toutes les pages du site.
   Chargé après le CDN Tailwind sur chaque page.
   ══════════════════════════════════════════════════════════ */

/* ── Material Symbols ─────────────────────────────────────── */
.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
}

/* ── Typographie ──────────────────────────────────────────── */
.noto-serif { font-family: "Noto Serif", serif; }
.manrope    { font-family: "Manrope", sans-serif; }

/* ── Utilitaires UI ───────────────────────────────────────── */
.glass-card    { background: rgba(46, 53, 68, 0.6); backdrop-filter: blur(20px); }
.gold-gradient { background: linear-gradient(135deg, #ffde73 0%, #e6c13d 100%); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;
}

/* ── Animations ───────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up   { animation: fadeUp 0.65s ease both; }
.fade-up-1 { animation-delay: 0.1s; }
.fade-up-2 { animation-delay: 0.2s; }
.fade-up-3 { animation-delay: 0.3s; }

/* ── Section block (mentions légales, CGU) ────────────────── */
.section-block {
  border-left: 2px solid rgba(255, 222, 115, 0.15);
  transition: border-color 0.3s ease;
}
.section-block:hover { border-left-color: #ffde73; }

/* ── TOC link (CGU) ───────────────────────────────────────── */
.toc-link { transition: all 0.2s ease; }
.toc-link.active {
  color: #ffde73;
  padding-left: 0.75rem;
  border-left: 2px solid #ffde73;
}

/* ── Video card (track-record) ────────────────────────────── */
.video-card { position: relative; overflow: hidden; background: #19202d; }
.video-thumb { position: relative; padding-bottom: 56.25%; background: #0c1321; cursor: pointer; }
.video-thumb iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
.video-placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: linear-gradient(135deg, #151c29 0%, #0c1321 100%);
  cursor: pointer; transition: background 0.3s;
}
.video-placeholder:hover { background: linear-gradient(135deg, #19202d 0%, #151c29 100%); }

/* ── Category pills (track-record) ───────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; border-radius: 2px;
}
.pill-analyse  { background: rgba(255,222,115,0.12); color: #ffde73;  border: 1px solid rgba(255,222,115,0.25); }
.pill-execution { background: rgba(171,199,255,0.10); color: #abc7ff; border: 1px solid rgba(171,199,255,0.2); }
.pill-profit   { background: rgba(52,211,153,0.10);  color: #34d399; border: 1px solid rgba(52,211,153,0.2); }

/* ── Filter buttons (track-record) ───────────────────────── */
.filter-btn {
  padding: 6px 16px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  border: 1px solid rgba(255,222,115,0.2); color: rgba(220,226,246,0.5);
  transition: all 0.2s; cursor: pointer; background: transparent;
}
.filter-btn:hover { border-color: rgba(255,222,115,0.5); color: #dce2f6; }
.filter-btn.active {
  background: linear-gradient(135deg, #ffde73, #e6c13d);
  color: #3c2f00; border-color: transparent;
}

/* ── Formulaire de contact ────────────────────────────────── */
#contact-form input,
#contact-form select,
#contact-form textarea,
#contact-form button { outline: none !important; box-shadow: none !important; }

#contact-form input:focus,
#contact-form textarea:focus {
  border-color: #3c2f00 !important;
  background: #fff !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(60,47,0,0.2) !important;
}
#contact-form select:focus {
  border-color: #3c2f00 !important;
  background: #fff !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(60,47,0,0.2) !important;
}
#contact-form select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: none !important;
}
#contact-form select::-ms-expand { display: none !important; }
#contact-form select option:hover,
#contact-form select option:focus,
#contact-form select option:checked {
  background-color: #e6c13d !important;
  color: #3c2f00 !important;
}
#contact-form input.field-error,
#contact-form select.field-error,
#contact-form textarea.field-error {
  border-color: #b91c1c !important;
  background: #fff0f0 !important;
}