/* ==========================================================================
   Covin SA — composants .cv-*
   N'utilise que les variables générées dans tokens-{id_shop}.css.
   Sans effet sur le thème existant tant que les classes .cv-* ne sont pas posées.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Mise en page
   La seule règle qui définit le padding vertical d'une section.
   Aucune variante ni composant ne doit la redéfinir.
   -------------------------------------------------------------------------- */
.cv-section {
  padding-block: var(--section-py);
}

.cv-section--surface { background-color: var(--cv-surface); }

.cv-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.cv-grid {
  display: grid;
  gap: var(--grid-gap);
}

/* --------------------------------------------------------------------------
   Typographie
   -------------------------------------------------------------------------- */
.cv-display,
.cv-h1,
.cv-h2,
.cv-h3 {
  font-family: var(--font-heading);
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 30, "WONK" 1;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.cv-display { font-size: var(--fs-display); line-height: var(--lh-display); }
.cv-h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
.cv-h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
.cv-h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }

.cv-text {
  max-width: var(--measure);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.cv-small { font-size: var(--fs-small); line-height: var(--lh-small); }

.cv-price,
.cv-qty { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Boutons
   -------------------------------------------------------------------------- */
.cv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 48px;
  min-width: 48px;
  padding-inline: var(--sp-5);
  border: 1px solid transparent;
  border-radius: var(--radius-ui);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    transform 100ms var(--ease-out);
}

.cv-btn:active { transform: scale(0.98); }

.cv-btn--primary {
  background-color: var(--cv-accent);
  color: var(--cv-on-accent);
}

.cv-btn--secondary {
  background-color: transparent;
  border-color: var(--cv-border-strong);
  color: var(--cv-text);
}

.cv-btn[disabled],
.cv-btn[aria-disabled="true"] {
  background-color: var(--cv-surface-high);
  border-color: var(--cv-border);
  color: var(--cv-text-disabled);
  cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   Liens dans le texte
   -------------------------------------------------------------------------- */
.cv-link {
  color: var(--cv-accent);
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition:
    background-size var(--dur-base) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

/* --------------------------------------------------------------------------
   Champs de formulaire
   -------------------------------------------------------------------------- */
.cv-field {
  width: 100%;
  min-height: 48px;
  padding: var(--sp-3) var(--sp-4);
  background-color: var(--cv-surface);
  color: var(--cv-text);
  border: 1px solid var(--cv-border-strong);
  border-radius: var(--radius-ui);
  font-family: var(--font-body);
  font-size: max(16px, var(--fs-body));
  transition: border-color var(--dur-base) var(--ease-out);
}

.cv-field:focus { border-color: var(--cv-accent); }

.cv-field[aria-invalid="true"] { border-color: var(--cv-error); }

.cv-field-error {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  color: var(--cv-error);
  font-size: var(--fs-small);
}

/* --------------------------------------------------------------------------
   Badges
   -------------------------------------------------------------------------- */
.cv-badge {
  display: inline-block;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.4;
}

.cv-badge--promo {
  background-color: var(--cv-tinto);
  color: var(--cv-text);
}

/* --------------------------------------------------------------------------
   Carte produit : seul composant avec survol riche
   -------------------------------------------------------------------------- */
.cv-product {
  background-color: var(--cv-surface);
  border-radius: var(--radius-ui);
}

.cv-product__media {
  overflow: hidden;
  border-radius: 0;
}

.cv-product__img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform var(--dur-slow) var(--ease-out);
}

/* Ajout rapide : visible en permanence sur mobile */
.cv-product__quick-add {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   Calques flottants
   -------------------------------------------------------------------------- */
.cv-float {
  background-color: var(--cv-surface-high);
  box-shadow: var(--shadow-float);
}

/* --------------------------------------------------------------------------
   Micro-animations
   -------------------------------------------------------------------------- */
@keyframes cv-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

@keyframes cv-bump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

@keyframes cv-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* Compteur panier : la classe .cv-bumped est posée par covin-design.js */
.cv-bumped { animation: cv-bump 300ms var(--ease-out); }

/* Séquence d'entrée du hero : une seule fois par session.
   La classe .cv-first-visit est posée sur <html> par le module.
   Utilisation : data-reveal="0", data-reveal="1", data-reveal="2"… (80 ms entre chaque élément). */
.cv-first-visit .cv-hero [data-reveal] {
  animation: cv-rise var(--dur-slow) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 80ms);
}
.cv-hero [data-reveal="0"] { --i: 0; }
.cv-hero [data-reveal="1"] { --i: 1; }
.cv-hero [data-reveal="2"] { --i: 2; }
.cv-hero [data-reveal="3"] { --i: 3; }
.cv-hero [data-reveal="4"] { --i: 4; }
.cv-hero [data-reveal="5"] { --i: 5; }

/* Squelette de chargement */
.cv-skeleton {
  background: linear-gradient(
    90deg,
    var(--cv-surface) 25%,
    var(--cv-surface-high) 50%,
    var(--cv-surface) 75%
  );
  background-size: 200% 100%;
  animation: cv-shimmer 1.4s linear infinite;
}

/* --------------------------------------------------------------------------
   Survol : uniquement sur pointeur précis
   -------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .cv-btn--primary:hover { background-color: var(--cv-accent-hover); }

  .cv-btn--secondary:hover {
    border-color: var(--cv-accent);
    background-color: rgb(var(--cv-accent-rgb) / 0.08);
  }

  .cv-link:hover {
    background-size: 100% 1px;
    color: var(--cv-accent-hover);
  }

  .cv-product:hover .cv-product__img { transform: scale(1.04); }

  /* Ajout rapide : masqué au repos, révélé au survol et au focus clavier */
  .cv-product__quick-add {
    opacity: 0;
    transform: translateY(8px);
    transition:
      opacity var(--dur-base) var(--ease-out),
      transform var(--dur-base) var(--ease-out);
  }
  .cv-product:hover .cv-product__quick-add,
  .cv-product:focus-within .cv-product__quick-add {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Mouvement réduit
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [class*="cv-"],
  [class*="cv-"] *,
  .cv-hero [data-reveal],
  .cv-bumped {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}