/* ============================================================
   Fara Mic Record — base visuelle
   Source de verite : la maquette validee (artifact Claude Design
   + design/Fara Mic Record.dc.html). Le PDF « design system v1 »
   du Drive etait une proposition non retenue : ne pas s'en servir.
   ============================================================ */

:root {
  /* --- Ambiance « Violet nuit » --- */
  --bg: #0B0912;
  --panel: #14111F;
  --panel2: #1D1830;
  --fg: #EDEAF5;

  /* --- Cyan : action d'achat --- */
  --accent: #12AAD9;
  --accent-soft: rgba(18, 170, 217, .13);
  --accent-line: rgba(18, 170, 217, .4);
  --on-accent: #0B0912;          /* jamais de blanc sur le cyan : 2,7:1 */

  /* --- Violet : marque et action principale --- */
  --violet: #9F4FFF;
  --violet-600: #4C04FF;
  --grad: linear-gradient(112deg, #4C04FF, #9F4FFF);
  --grad-cta: var(--grad);
  --on-violet: #FFFFFF;

  /* --- Bordures et separations --- */
  --border: rgba(159, 79, 255, .18);
  --border-strong: rgba(159, 79, 255, .3);
  --border-soft: rgba(159, 79, 255, .12);
  --row-active: rgba(159, 79, 255, .07);
  --wave: rgba(159, 79, 255, .42);
  --wave-dim: rgba(159, 79, 255, .3);

  --nav-bg: rgba(11, 9, 18, .86);
  --player-bg: rgba(20, 17, 31, .94);

  /* --- Typographie de la maquette --- */
  --display: Archivo, system-ui, sans-serif;
  --body: Archivo, system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --serif: 'Instrument Serif', Georgia, serif;
  --wd: 116;                     /* axe de largeur d'Archivo : 62 a 125 */

  --r-lg: 16px;
  --r-md: 12px;
  --r-sm: 9px;

  --wave-gap: 2px;
  --wave-radius: 2px;
  --halo: 1;

  --text-2: rgba(237, 234, 245, .72);
  --text-3: rgba(237, 234, 245, .5);
  --t85: rgba(237, 234, 245, .85);
  --t72: rgba(237, 234, 245, .72);
  --t62: rgba(237, 234, 245, .62);
  --t55: rgba(237, 234, 245, .55);
  --t45: rgba(237, 234, 245, .45);
  --t40: rgba(237, 234, 245, .4);
  --t35: rgba(237, 234, 245, .35);
  --t30: rgba(237, 234, 245, .3);
}

/* ---------- Fond et typographie generale ---------- */

html { scroll-behavior: smooth; }

body,
body.ast-separate-container,
body.ast-plain-container {
  background-color: var(--bg);
  color: var(--fg);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}

#page,
#content,
.site-content,
.ast-separate-container .ast-article-single,
.ast-separate-container .site-main > .ast-row {
  background-color: transparent;
}

.entry-content a,
.site-content a { color: var(--accent); }
.entry-content a:hover,
.site-content a:hover { color: #5FD2F0; }

::selection { background: var(--violet); color: var(--bg); }

/* ---------- Titres : la signature typographique ---------- */

h1, h2, h3, h4, h5, h6,
.entry-title,
.wp-block-heading {
  font-family: var(--display);
  font-variation-settings: 'wdth' var(--wd);
  color: var(--fg);
  letter-spacing: -.02em;
}

h1, .entry-title { font-weight: 900; letter-spacing: -.03em; }
h2 { font-weight: 900; }
h3 { font-weight: 800; }

/* ---------- Texte courant ---------- */

p, li { color: var(--text-2); line-height: 1.6; }
strong, b { color: var(--fg); font-weight: 700; }

/* ---------- Donnees comparables : mono ---------- */

.fmr-data, .fmr-bpm, .fmr-duration {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.fmr-label {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--text-3);
}

/* ---------- Hierarchie des actions ----------
   Degrade violet : action principale. Cyan : acheter,
   texte sombre obligatoire. Contour : action secondaire. */

.wp-block-button__link,
.wp-block-button .wp-block-button__link {
  background: var(--grad);
  color: var(--on-violet);
  border: none;
  border-radius: 999px;
  padding: 16px 30px;
  font-family: var(--body);
  font-size: 14.5px;
  font-weight: 700;
}
.wp-block-button__link:hover { filter: brightness(1.12); color: var(--on-violet); }

.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--fg);
  font-weight: 600;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  border-color: var(--accent-line);
  filter: none;
}

.fmr-btn-buy,
.wp-block-button.is-style-buy .wp-block-button__link {
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: 999px;
  padding: 13px 22px;
  font-size: 14px;
  font-weight: 700;
}

/* ---------- Champs de formulaire ---------- */

input[type="text"], input[type="email"], input[type="url"],
input[type="tel"], input[type="number"], input[type="search"],
textarea, select {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--fg);
  padding: 13px 15px;
  font-family: var(--body);
  font-size: 14px;
}
input:focus, textarea:focus, select:focus { border-color: var(--accent-line); outline: none; }
input::placeholder, textarea::placeholder { color: var(--t35); }

/* ---------- Animations de la maquette ---------- */

@keyframes fmr-sheen {
  0% { transform: translateX(-30%) rotate(8deg); }
  100% { transform: translateX(130%) rotate(8deg); }
}
@keyframes fmr-pulse {
  0%, 100% { opacity: .35; }
  50% { opacity: 1; }
}
@keyframes fmr-fade-up {
  0% { transform: translate3d(0, 22px, 0); opacity: 0; filter: blur(6px); }
  60% { filter: blur(0); }
  100% { transform: translate3d(0, 0, 0); opacity: 1; filter: blur(0); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- Accessibilite ---------- */

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Astra colore les titres avec --ast-global-color-2 (#1E293B) via
   des regles a deux classes : un titre sans classe, comme ceux que
   posent FluentCart ou un plugin, se retrouvait presque noir sur
   fond violet nuit. On reprend la main a specificite egale. */

.entry-content h1, .entry-content h2, .entry-content h3,
.entry-content h4, .entry-content h5, .entry-content h6,
.site-content h1, .site-content h2, .site-content h3,
.site-content h4, .site-content h5, .site-content h6 {
  color: var(--fg);
}