/* =====================================================================
   free-linguaskill-pricing.css
   Vitrine des ÉCHANTILLONS GRATUITS du Linguaskill General.
   Chargée par free-linguaskill-pricing-{fr,en}.php
   (constante CSS_FREE_LINGUASKILL_PRICING).

   ─────────────────────────────────────────────────────────────────────
   BÂTIE SUR tokens.css

   tokens.css se déclare « source unique de vérité » et charge globalement
   avant cette feuille (fonts.css, tokens.css, polish.css, puis le CSS de
   page — cf. head-*.php). On consomme donc ses variables plutôt que de
   redéclarer des couleurs, des rayons et des ombres en dur.

   Chaque var() garde une valeur de repli identique au token : la page
   reste correcte si tokens.css venait à ne pas être chargé.

   NB : free-ielts-general-pricing.css, lui, redéclare ses propres
   --ielts-* en dur. C'est l'ancienne façon de faire ; tokens.css annonce
   « on migre progressivement ». Cette feuille est déjà migrée — et si le
   bleu de marque change, elle suivra sans qu'on y touche.

   PAS DE THÈME SOMBRE : tokens.css n'en définit aucun (aucun
   [data-theme=dark], aucun prefers-color-scheme). Le site est en clair.
   Ne pas en introduire ici seul — cette page virerait au sombre pendant
   que le reste du site resterait clair.
   ───────────────────────────────────────────────────────────────────── */

/* ── Canvas WebGL (vagues) en arrière-plan plein écran ───────────────
   Derrière le contenu, fixé au viewport, sans intercepter les clics. */
canvas.webgl {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  display: block;
  pointer-events: none;
}

/* ── Conteneur de contenu : au-dessus du canvas ─────────────────────── */
.contenu-principal {
  position: relative;
  z-index: 1;
  max-width: 860px;
  margin: 0 auto;
  padding: var(--space-6, 2rem) var(--space-4, 1rem) var(--space-7, 3rem);
}

/* ── Titre de la page ───────────────────────────────────────────────── */
/* h2 hérite de Plus Jakarta Sans via fonts.css : ne pas fixer de font-family. */
.contenu-principal > h2 {
  margin: 0 auto var(--space-5, 1.5rem);
  text-align: center;
  font-size: var(--text-xl, clamp(1.5rem, 3vw, 2.1rem));
  font-weight: var(--weight-black, 800);
  letter-spacing: var(--tracking-tight, -.02em);
  color: var(--text-strong, #0a0025);
}

/* ── Conteneur d'informations ───────────────────────────────────────── */
.test-info-wrapper {
  max-width: 760px;
  margin: var(--space-6, 2rem) auto;
  padding: var(--space-5, 1.5rem);
  background: var(--surface, #fff);
  border: 1px solid var(--border-subtle, #e8edf5);
  border-radius: var(--radius-lg, 20px);
  box-shadow: var(--shadow-lg, 0 8px 20px rgba(31, 124, 255, .12));
}

/* ── Statistiques rapides (durée / compétences) ──────────────────────── */
.test-quick-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4, 1rem);
  justify-content: center;
  margin-bottom: var(--space-5, 1.5rem);
}

.stat-item {
  display: flex;
  align-items: center;
  gap: var(--space-3, .75rem);
  flex: 1 1 200px;
  min-width: 180px;
  padding: var(--space-4, 1rem) var(--space-5, 1.5rem);
  background: var(--surface-tint, #f0f8ff);
  border: 1px solid var(--border-subtle, #e8edf5);
  border-radius: var(--radius-md, 12px);
}

.stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  font-size: 1.4rem;
  color: var(--on-dark, #fff);
  background: var(--brand-500, #1f7cff);
  border-radius: 50%;
}

.stat-value-label {
  display: block;
  font-size: var(--text-lg, clamp(1rem, 1.75vw, 1.25rem));
  font-weight: var(--weight-bold, 700);
  line-height: var(--leading-tight, 1.2);
  color: var(--text-strong, #0a0025);
}

.stat-label {
  display: block;
  font-size: var(--text-sm, clamp(.82rem, 1.3vw, .95rem));
  color: var(--text-muted, #666);
}

/* ── Conditions de passation ─────────────────────────────────────────── */
.test-conditions {
  padding-top: var(--space-5, 1.5rem);
  border-top: 1px solid var(--border-subtle, #e8edf5);
}

.conditions-title {
  margin: 0 0 var(--space-3, .75rem);
  font-size: var(--text-lg, clamp(1rem, 1.75vw, 1.25rem));
  font-weight: var(--weight-bold, 700);
  color: var(--text-strong, #0a0025);
}

/* ── Liste des conditions ─────────────────────────────────────────────
   preparation-hub.css (chargé avant) impose à TOUT « ul li » de la page :
     - display:flex  → casse les lignes à plusieurs éléments inline (un <b>
       au milieu devient un item séparé, d'où l'affichage « en colonnes ») ;
     - une puce ::before ronde (➜ sur pastille #0b75c9).
   On rétablit donc un rendu de liste normal, localement, et on réaffirme
   notre coche. Les !important ne visent que ces deux règles globales du hub,
   pas une surenchère gratuite. */
.conditions-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.conditions-list li {
  display: block !important;         /* annule le display:flex du hub */
  position: relative;
  padding: var(--space-1, .25rem) 0 var(--space-1, .25rem) var(--space-6, 2rem);
  color: var(--text-body, #333);
  line-height: var(--leading-snug, 1.5);
}

.conditions-list li::before {
  content: "✓" !important;           /* remplace le ➜ du hub */
  display: block;
  position: absolute;
  left: 0;
  top: var(--space-1, .25rem);
  width: auto !important;            /* annule la pastille ronde 1.2rem du hub */
  height: auto !important;
  margin: 0 !important;
  background: none !important;       /* annule le fond #0b75c9 du hub */
  border-radius: 0 !important;
  font-weight: var(--weight-bold, 700);
  font-size: 1rem;
  color: var(--brand-500, #1f7cff);
}

/* ── Vignettes de compétence : réutilisent .nav-card du hub ─────────────
   Les cartes elles-mêmes sont stylées par preparation-hub.css (chargé avant).
   Ici on ne fait que : (1) donner à chacune sa couleur --card-accent, d'où
   dérivent badge, bordure au survol et voile ; (2) styler le sous-titre .lsfree-meta,
   qui n'existe pas dans le hub ; (3) l'état grisé « bientôt ».

   Accents alignés sur le code couleur des compétences (mêmes teintes que les
   liserés du hub des tests blancs). */
.nav-card.lsfree-reading   { --card-accent: var(--brand-500, #1f7cff); }
.nav-card.lsfree-listening { --card-accent: #7c3aed; }
.nav-card.lsfree-writing   { --card-accent: #059669; }
.nav-card.lsfree-speaking  { --card-accent: var(--accent-warm, #ff8c00); }

/* Sous-titre sous le nom de la compétence (« Texte à trous · 5 questions »).
   Le hub n'a pas d'équivalent : le badge y est un petit pill réservé à un mot
   court (« gratuit »). On garde donc ce badge pour « gratuit / free » et on
   place la description ici. */
.nav-card .lsfree-meta {
    position: relative;
    z-index: 1;
    margin-top: 4px;
    font-size: var(--text-xs, .72rem);
    font-weight: var(--weight-medium, 500);
    line-height: 1.35;
    text-align: center;
    color: var(--text-muted, #666);
}

/* Carte inactive : l'échantillon n'est pas déployé (is_file() faux côté PHP).
   Le .nav-card-link est un <span>, pas un <a> — déjà non cliquable ; on le
   signale visuellement. */
.nav-card.is-soon {
    opacity: .5;
    pointer-events: none;
}
.nav-card.is-soon .card-label::after {
    content: " · bientôt";
    font-weight: 500;
    opacity: .7;
}

/* ── Mention légale ──────────────────────────────────────────────────── */
.ls-free-note {
  max-width: 760px;
  margin: 0 auto;
  font-size: var(--text-xs, clamp(.72rem, 1.1vw, .8rem));
  line-height: var(--leading-snug, 1.5);
  color: var(--text-faint, #6f6f6f);
  text-align: center;
}

/* ── Adaptation mobile ───────────────────────────────────────────────── */
@media (max-width: 640px) {
  .test-info-wrapper {
    margin: var(--space-4, 1rem);
    padding: var(--space-4, 1rem);
  }
  .test-quick-stats { flex-direction: column; }
  .stat-item        { flex: 1 1 auto; }
  .nav-cards-grid   { grid-template-columns: repeat(2, 1fr); }
}

/* ── Impression ──────────────────────────────────────────────────────── */
/* Vitrine commerciale : rien à imprimer. On neutralise le canvas et les
   ombres, qui gaspillent de l'encre pour rien. */
@media print {
  canvas.webgl { display: none !important; }
  .test-info-wrapper,
  .stat-item,
  .nav-card { box-shadow: none; }
}