/*
 * Feuille de Vroumi, chargée JUSTE APRÈS main.css (jamais modifiée).
 * Bleu électrique de l'appli #2B5CFF (texte BLANC dessus : 5,2:1), encre bleu nuit #0E1B3D,
 * fond bleu pâle #EAF0FF, corail #FF6A3D (le point du i). Thème clair imposé.
 * Composants maison préfixés .vr- : une classe Tailwind absente de main.css ne fait RIEN.
 */
:root {
  /* python3 palette.py "#2B5CFF" */
  --color-primary-50: #f4f7ff;
  --color-primary-100: #e6ebff;
  --color-primary-200: #cad6ff;
  --color-primary-300: #a6bbff;
  --color-primary-400: #6f90ff;
  --color-primary-500: #2b5cff;
  --color-primary-600: #254fdb;
  --color-primary-700: #1f42b8;
  --color-primary-800: #193594;
  --color-primary-900: #132870;
  /* L'encre du modèle (#1a1a1c) devient le bleu nuit de l'appli : titres, textes, boutons foncés. */
  --color-secondary: #0e1b3d;
  /* Les barres des étapes (cyan du modèle). */
  --color-ns-cyan: #2b5cff;
}

@layer base {
  /* Le texte courant du pack est l'encre à 60 % (4,3:1 sur les fonds gris) : remonté à 70 %. */
  p { color: color-mix(in oklab, var(--color-secondary) 70%, transparent); }
}

@layer utilities {
  /* Le pack met les boutons et badges en minuscules : on garde la casse écrite. */
  .btn, .badge { text-transform: none; }
}

/* Le fond du héros : gris bleu du modèle, bleu pâle de l'appli ici. */
.vr-heros-fond { background-image: linear-gradient(180deg, #eef3ff 0%, #cddaff 100%); }
/* Texte courant du héros plus soutenu : l'encre à 60 % du modèle tombe sous 4,5:1 sur ce bleu. */
.vr-heros-fond p { color: color-mix(in oklab, var(--color-secondary) 82%, transparent); }

/* Le cadre de la formule : dégradé du modèle (ns-img-25) repeint en bleu. */
.vr-cadre-prix { background-image: url("../images/marque/decor-25.webp"); }

/* Logo (bleu sur fond clair) : jamais inversé. */
.vr-logo { display: block; width: 132px; height: auto; }
.vr-logo-pied { display: block; width: 150px; height: auto; }

/* Icônes concrètes (Lucide) à la place des formes abstraites du modèle. */
.vr-icone { display: block; width: 44px; height: 44px; color: var(--color-primary-500); }

/* Le prix de la formule : le chiffre, puis ce qu'il comprend. */
.vr-prix { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 12px; }

/* La galerie des écrans de l'appli : deux colonnes sur téléphone, quatre sur ordinateur. */
.vr-galerie { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 12px; }
@media (min-width: 1024px) { .vr-galerie { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } }
.vr-ecran img { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto; }
.vr-ecran figcaption { margin-top: 4px; padding: 0 8px; text-align: center; font-size: 15px; line-height: 1.45;
  color: color-mix(in oklab, var(--color-secondary) 70%, transparent); }
.vr-ecran-titre { display: block; margin-bottom: 4px; font-size: 18px; font-weight: 500; color: var(--color-secondary); }

/* Les offres sur téléphone : la hauteur fixe du modèle (576 px) cède aux proportions de l'image. */
@media (max-width: 767.98px) {
  .vr-offre { height: auto; aspect-ratio: 629 / 576; }
  .vr-offre-large { aspect-ratio: 4 / 3; }
}

/* Pages légales : listes à puces à la couleur du texte. */
.vr-legal li { color: color-mix(in oklab, var(--color-secondary) 70%, transparent); }

@media (prefers-reduced-motion: reduce) {
  .animate-pulse { animation: none; }
}