/**
 * Page « Offres et tarifs » — nuances des trois offres.
 *
 * CUSTOM : la maquette demande quatre nuances par offre (la couleur pleine, un
 * fond très pâle, un ton moyen pour les coches, un ton foncé pour le texte sur
 * fond pâle). Écrire ces douze valeurs en utilitaires Tailwind reviendrait à
 * poser douze couleurs en dur dans les gabarits. Elles sont donc dérivées ici,
 * en `color-mix()`, des variables de charte du thème : changer le vert ou
 * l'orange du site suffit à faire suivre toute la page.
 *
 * Le violet fait exception, il n'a pas de variable de charte. C'est la couleur
 * de la maquette pour l'offre cuvées, et elle ne vit que sur cette page. Le jour
 * où elle entrerait dans la charte, ces quatre lignes iraient dans le thème.
 *
 * Chaque offre porte `vb-offre--<accent>` ; tout le reste s'accroche aux
 * variables, sans jamais nommer une couleur.
 */

.vb-offre--primary {
  --vb-accent: var(--color-primary);
  --vb-accent-sur-sombre: var(--color-primary);
}

.vb-offre--secondary {
  --vb-accent: var(--color-secondary);
  --vb-accent-sur-sombre: var(--color-secondary);
}

.vb-offre--violet {
  --vb-accent: #a67cb4;
  --vb-accent-sur-sombre: #c39ecf;
  --vb-accent-pale: #f6effa;
  --vb-accent-moyen: #8c5f9a;
  --vb-accent-fonce: #7d5589;
}

/* Nuances dérivées, pour les accents qui viennent de la charte. Le violet les a
   déjà posées au-dessus, ces déclarations ne le concernent donc pas. */
.vb-offre--primary,
.vb-offre--secondary {
  --vb-accent-pale: color-mix(in srgb, var(--vb-accent) 14%, #ffffff);
  --vb-accent-moyen: color-mix(in srgb, var(--vb-accent) 80%, #000000);
  --vb-accent-fonce: color-mix(in srgb, var(--vb-accent) 70%, #000000);
}

/* =====================================================
   Cards d'offre
   ===================================================== */

.vb-offre__barre {
  background: var(--vb-accent);
}

.vb-offre__prix {
  color: var(--vb-accent);
}

.vb-offre__lien {
  color: var(--vb-accent-fonce);
}

/* Phrase d'introduction de liste (« Tout le référencement gratuit, plus : ») */
.vb-offre__intro-liste {
  background: var(--vb-accent-pale);
  color: var(--vb-accent-fonce);
}

/* Coche d'un avantage, nue : plus de pastille ronde teintée autour d'une
   icône dans une carte (règle des cartes du 4 novembre 2026). */
.vb-offre__pastille {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.0625rem;
  color: var(--vb-accent-moyen);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
}

.vb-offre__bouton--plein {
  background: var(--vb-accent);
  border-color: var(--vb-accent);
  color: #ffffff;
}
.vb-offre__bouton--plein:hover,
.vb-offre__bouton--plein:focus-visible {
  background: var(--vb-accent-moyen);
  border-color: var(--vb-accent-moyen);
  color: #ffffff;
}

.vb-offre__bouton--outline {
  background: #ffffff;
  border-color: var(--vb-accent);
  color: var(--vb-accent-fonce);
}
.vb-offre__bouton--outline:hover,
.vb-offre__bouton--outline:focus-visible {
  background: var(--vb-accent);
  border-color: var(--vb-accent);
  color: #ffffff;
}

/* =====================================================
   Comparatif
   ===================================================== */

/* Pastille d'offre sous un aperçu de la galerie, sur son fond noir */
.vb-offres__apercu-offre {
  color: var(--vb-accent-sur-sombre);
}

/* Filet supérieur d'une colonne, sur l'entête sombre */
.vb-comparatif__filet {
  border-top-color: var(--vb-accent-sur-sombre);
}

.vb-comparatif__tarif {
  color: var(--vb-accent-sur-sombre);
}

/* Titre de famille : il reprend la couleur de l'offre qui la débloque */
.vb-comparatif__famille {
  color: var(--vb-accent-fonce);
}

/* Coche d'une ligne. Comme dans la maquette, la couleur suit la FAMILLE et non
   la colonne : une bande de lignes se lit alors d'un bloc, alors que trois
   coches de trois couleurs sur une même ligne ne veulent rien dire. */
.vb-comparatif__coche {
  color: var(--vb-accent-moyen);
  font-weight: 700;
}

/* Point de couleur devant le nom de la formule, sous chaque aperçu, sur leur
   fond noir (offres-apercus.php). */
.vb-offres__apercu-point {
  background-color: var(--vb-accent-sur-sombre);
}

/* =====================================================
   Espace perso : les couleurs des formules (5 novembre 2026)
   ===================================================== */

/* Trait de la couleur de la formule en haut d'un bloc (récapitulatif, carte). */
.vb-offre__filet {
  border-top: 3px solid var(--vb-accent);
}

/* Texte à la couleur de la formule : numéro de section, coche, rubrique. */
.vb-offre__accent {
  color: var(--vb-accent-moyen);
}