/*
 * Crousty by Tasty — couche « skin » (chargée avant premium.css).
 * Tout le système de design vit dans premium.css ; ce fichier ne porte que les
 * jetons de marque partagés et les utilitaires signature (pastille de prix
 * dorée, mot display Anton, anneau du badge, barres du logo) réutilisés partout.
 *
 * DA tirée du logo client (badge circulaire noir & blanc traversé de deux
 * barres, typo ultra-condensée) et de ses photos officielles (bois chaud,
 * lumière ambrée, panure dorée) : charbon #100e0b, os #f2ecdf, doré
 * croustillant #e9a83a, paprika #cf5c2e.
 */
:root {
  --ct-gold: #e9a83a;         /* doré croustillant signature (CTA, prix) */
  --ct-gold-2: #f4bd5c;       /* doré hover clair */
  --ct-gold-deep: #c9871f;    /* doré profond (dégradés, hover foncé) */
  --ct-paprika: #cf5c2e;      /* paprika (badges épicés, accents discrets) */
  --ct-coal: #100e0b;         /* charbon chaud (fond de page) */
  --ct-coal-2: #17140f;       /* charbon pressé */
  --ct-soot: #1b1712;         /* suie (cartes) */
  --ct-char: #262119;         /* braise éteinte (surfaces élevées, inputs) */
  --ct-black: #070605;        /* noir du logo (footer, ticker) */
  --ct-bone: #f2ecdf;         /* blanc os (texte principal) */
  --ct-smoke: #b3a48c;        /* fumée (texte secondaire) */
  --ct-line: rgba(242, 236, 223, 0.12);
  --ct-line-strong: rgba(242, 236, 223, 0.28);
  --ct-line-coal: rgba(20, 17, 13, 0.22);         /* lignes sur fond doré */
  --ct-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  --ct-shadow-soft: 0 12px 34px rgba(0, 0, 0, 0.4);
  --ct-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

/* Pastille de prix dorée : panure croustillante sur fond charbon */
.ct-price {
  display: inline-block;
  padding: 0.32em 0.85em;
  border-radius: var(--radius-full);
  background: var(--ct-gold);
  color: var(--ct-black);
  font-family: var(--font-family-heading);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  line-height: 1.2;
  white-space: nowrap;
}

/* Mot display façon logo (Anton, capitales condensées) */
.ct-script {
  font-family: var(--font-family-heading);
  font-weight: 400;
  color: var(--ct-gold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Prix nu doré (sans pastille), pour les listes serrées */
.ct-price-flat {
  font-family: var(--font-family-heading);
  font-weight: 400;
  color: var(--ct-gold);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

/* Anneau du badge : le double cercle du logo, posé derrière un visuel.
   S'utilise dans un conteneur position:relative via <span class="ct-ring"></span>. */
.ct-ring {
  position: absolute;
  left: 50%; top: 50%;
  width: 104%; aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border: clamp(7px, 1.3vw, 14px) solid currentColor;
  border-radius: 50%;
  color: var(--ct-bone);
  opacity: 0.9;
  pointer-events: none;
}
.ct-ring::after {
  content: "";
  position: absolute;
  inset: clamp(8px, 1.6vw, 18px);
  border: clamp(3px, 0.55vw, 6px) solid currentColor;
  border-radius: 50%;
  opacity: 0.75;
}

/* Barres du logo : les deux traits horizontaux qui traversent le badge.
   <span class="ct-bars">MOT</span> → barre au-dessus et en dessous. */
.ct-bars {
  display: inline-flex;
  flex-direction: column;
  gap: 0.28em;
  align-items: stretch;
  text-align: center;
}
.ct-bars::before, .ct-bars::after {
  content: "";
  display: block;
  height: 0.14em;
  min-height: 3px;
  background: currentColor;
}

/* Point « pop » (séparateur ticker, puces) — la bouchée de poulet */
.ct-spark {
  display: inline-block;
  width: 0.5em; height: 0.5em;
  background: currentColor;
  border-radius: 50%;
}