/* ============================================================
   Fara Mic Record — boutique FluentCart
   FluentCart est entierement construit sur des jetons CSS :
   chaque composant retombe sur une poignee de variables de
   base, jamais declarees par defaut. On les definit ici une
   fois, et tout le tunnel d'achat passe en violet nuit :
   panier, tiroir, commande, recu, compte client.
   ============================================================ */

:root {
  /* --- Surfaces --- */
  --fct-card-bg-color: var(--panel);
  --fct-secondary-bg-color: var(--panel2);
  --fct-primary-bg-color: var(--panel2);

  /* --- Traits --- */
  --fct-border-color: var(--border);
  --fct-divider-color: var(--border-soft);
  --fct-active-border-color: var(--accent-line);

  /* --- Textes --- */
  --fct-primary-text-color: var(--fg);
  --fct-secondary-text-color: var(--t62);

  /* --- Champs --- */
  --fct-input-bg-color: var(--bg);
  --fct-input-text-color: var(--fg);
  --fct-input-placeholder-text-color: var(--t30);
  --fct-input-disabled-bg-color: var(--panel2);

  /* --- Action d'achat : cyan, texte sombre obligatoire --- */
  --fct-btn-bg-color: var(--accent);
  --fct-btn-text-color: var(--on-accent);
  --fct-btn-border-color: var(--accent);
  --fct-btn-hover-bg-color: #5FD2F0;
  --fct-btn-hover-text-color: var(--on-accent);

  /* --- Action secondaire --- */
  --fct-secondary-btn-bg-color: var(--panel2);
  --fct-secondary-btn-text-color: var(--t72);
  --fct-secondary-btn-border-color: var(--border);
  --fct-secondary-btn-hover-bg-color: #272046;

  /* --- Formes, calees sur la maquette --- */
  --fct-container-radius: var(--r-lg);
  --fct-popup-radius: var(--r-lg);
  --fct-input-radius: var(--r-sm);
  --fct-btn-radius: 999px;
  --fct-badge-radius: 6px;
}

/* Ces deux-la sont ecrits en dur par le plugin : il faut les
   reprendre a la meme specificite, pas seulement sur :root. */
body:not(.fluent-cart-no-colors) {
  --fct-cart-drawer-badge-bg-color: var(--accent);
  --fct-cart-drawer-badge-text-color: var(--on-accent);
}

/* ---------- Typographie ---------- */

.fct_checkout, .fct-cart-drawer, .fct_cart, .fct-customer-portal,
.fluent-cart-products, .fct_product_details {
  font-family: var(--body);
}

.fct_checkout h1, .fct_checkout h2, .fct_checkout h3,
.fct-cart-drawer h1, .fct-cart-drawer h2, .fct-cart-drawer h3,
.fct-customer-portal h1, .fct-customer-portal h2, .fct-customer-portal h3 {
  font-family: var(--display);
  font-variation-settings: 'wdth' var(--wd);
  color: var(--fg);
}

/* Les montants : en mono, comme partout ailleurs sur le site. */
.fct_checkout .fct_item_price, .fct_checkout .fct_total_amount,
.fct-cart-drawer .fct-cart-item-price, .fct_cart_total,
.fct-product-price, .fct_price {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* ---------- Restes codes en dur dans le plugin ---------- */

/* Voile de chargement : blanc a 50 % par defaut. */
.fct-loader-wrap { background: rgba(11, 9, 18, .6); }

/* Petits boutons d'aide sur la TVA. */
.fct_line_item .fct_item_tax_hint_button,
.fct_tax_summary_box .fct_item_tax_hint_button {
  background-color: var(--panel2);
  color: var(--t62);
}

/* Le plugin pose un voile blanc en degrade sur ses boutons :
   sur du cyan ca delave. On garde la couleur pleine. */
.fct_checkout button,
body:not(.fluent-cart-no-colors) .fct-cart-drawer-footer a:not(.view-cart-button) {
  background: var(--fct-btn-bg-color);
  box-shadow: none;
  font-weight: 700;
}
.fct_checkout button:hover,
body:not(.fluent-cart-no-colors) .fct-cart-drawer-footer a:not(.view-cart-button):hover {
  background: var(--fct-btn-hover-bg-color);
}

/* ---------- Pages de boutique : meme respiration que le site ---------- */

.fct_checkout, .fct_cart, .fct-customer-portal, .fluent-cart-products {
  padding-bottom: 72px;
}

/* ---------- Boutons-liens ----------
   Nos styles de base colorent tous les liens du contenu en
   cyan : un bouton cyan se retrouvait avec un libelle cyan,
   donc invisible. On rend la couleur du jeton au bouton. */

.entry-content a.fct-primary-btn,
.site-content a.fct-primary-btn,
.entry-content a.checkout-button,
.site-content a.checkout-button {
  color: var(--fct-btn-text-color);
  font-weight: 700;
}

.entry-content a.fct-secondary-btn,
.site-content a.fct-secondary-btn,
.entry-content a.view-cart-button,
.site-content a.view-cart-button {
  color: var(--fct-secondary-btn-text-color);
}

/* Les liens internes de la boutique ne sont pas des liens
   d'article : on les laisse dans la couleur du texte. */
.entry-content .fct_checkout a:not([class*="btn"]):not(.checkout-button),
.site-content .fct_cart a:not([class*="btn"]):not(.checkout-button),
.entry-content .fct-customer-portal a:not([class*="btn"]) {
  color: var(--accent);
}

/* ---------- Panier vide ----------
   L'illustration du plugin est claire et pleine : elle fait
   tache sur le fond. On la ramene au rang de decor. */

.fluent-cart-cart-empty-content svg {
  opacity: .22;
  filter: grayscale(1);
}
.fluent-cart-cart-empty-content { color: var(--t55); }

/* ---------- Capitalisation ----------
   Le plugin met une majuscule a chaque mot, convention anglaise :
   « Voir Les Options ». En francais, seule la premiere compte. */

.fct-primary-btn, .fct-secondary-btn, .checkout-button, .view-cart-button,
.fct_checkout button, .fluent-cart-product-buttons button,
[class*="fct-"] button, [class*="fct_"] button {
  text-transform: none;
}


/* ---------- Le bouton panier et le lecteur ----------
   .fct-cart-drawer-open-btn est fixe a 20px du bas avec un z-index de 999.
   Le lecteur occupe les 86 derniers pixels (132 sous 860px) : sans ce
   decalage le bouton se pose sur la barre et recouvre son bouton d'achat,
   qui devient inclicable. Mesure du 19 octobre 2026 : 56px de recouvrement,
   soit toute la hauteur du bouton. */

.fct-cart-drawer-open-btn {
  transition: bottom .25s ease;
}

body.fmr-player-on .fct-cart-drawer-open-btn {
  bottom: calc(var(--fmr-player-h, 86px) + 20px);
}

@media (prefers-reduced-motion: reduce) {
  .fct-cart-drawer-open-btn { transition: none; }
}


/* ==============================================================
   Page « Mon compte »
   La page vient de FluentCart ; on ne touche pas a son contenu, on
   lui donne seulement la respiration et le titre des autres pages.
   La classe est posee par includes/fara-mic-compte.php.
   ============================================================== */

body.fmr-compte-page .site-main { padding: 54px 0 92px; }

body.fmr-compte-page .entry-title {
  font-family: var(--display);
  font-variation-settings: 'wdth' var(--wd);
  font-size: clamp(34px, 4.6vw, 58px);
  line-height: 1;
  letter-spacing: -.03em;
  font-weight: 900;
  margin-bottom: 26px;
}

@media (max-width: 860px) {
  body.fmr-compte-page .site-main { padding: 34px 0 64px; }
}