/* ============================================================
   PureSpec - polish.css
   ------------------------------------------------------------
   Trois corrections de fond, chargées APRÈS home.css pour primer :

   1. Interlettrage. L'échelle n'était appliquée qu'aux grands
      titres. Le petit texte (mentions, étiquettes, légendes) était
      tassé faute de desserrage.
   2. Rythme vertical. Les sections alternaient 56, 76, 80, 88, 96,
      104 et 120 px. Une seule variable, trois valeurs.
   3. Prix lisible dès le configurateur.

   Les apparitions au défilement ont été retirées : difficiles à
   rendre fluides sur mobile, elles coûtaient plus qu'elles
   n'apportaient.
   ============================================================ */

:root {
  /* --- Rythme vertical : une échelle, trois valeurs, multiples de 8 --- */
  --section-y:    96px;   /* respiration standard entre sections */
  --section-y-lg: 120px;  /* section d'ouverture, après le hero */
  --section-y-sm: 56px;   /* bandeaux compacts */

  /* --- Interlettrage : l'échelle Apple, dans les deux sens --- */
  --track-display: -0.042em;  /* > 44px */
  --track-title:   -0.032em;  /* 28-44px */
  --track-body:    -0.011em;  /* 15-20px */
  --track-small:    0.006em;  /* 12-14px : on DESSERRE */
  --track-micro:    0.014em;  /* < 12px, majuscules, étiquettes */
}

@media (max-width: 768px) {
  :root {
    --section-y:    72px;
    --section-y-lg: 88px;
    --section-y-sm: 44px;
  }
}

/* ============================================================
   1. INTERLETTRAGE
   ============================================================ */

/* Le petit texte : c'était le manque. Sous 14 px, Inter a besoin
   d'air, sinon les mentions légales et les étiquettes de formulaire
   se lisent comme un bloc compact. */
.text-xs,
small,
figcaption,
label,
.apple-label,
.fnl-label small,
.community-badge,
.ps-cc-link,
.legal-text,
.form-hint {
  letter-spacing: var(--track-small);
}

.text-\[10px\],
.text-\[11px\],
.eyebrow,
.badge,
.tag,
.pill,
[class*="uppercase"] {
  letter-spacing: var(--track-micro);
}

/* Le corps de texte : léger resserrage, cohérent d'une page à l'autre. */
p,
li,
.text-base,
.text-sm {
  letter-spacing: var(--track-body);
}

/* Les titres : on garde le resserrage existant mais on l'unifie. */
h1, .page-hero-title, .community-title {
  letter-spacing: var(--track-display);
}
h2, h3, .feat-card-title, .story-title {
  letter-spacing: var(--track-title);
}

/* Les chiffres alignés partout où ils comptent : prix, compteurs,
   références. Sans ça, « 24,90 € » et « 3,49 € » ne s'alignent pas. */
.price,
.stat-value,
.fnl-num,
[id*="Total"],
[id*="Price"],
.font-mono {
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   2. RYTHME VERTICAL
   ============================================================ */

.features-cards { padding:var(--section-y) 0; }
.story-section  { padding:var(--section-y) 24px; }
.community-section { padding:var(--section-y) 0; }
#atelier        { padding-top:var(--section-y); padding-bottom:var(--section-y); }
#faq            { padding:var(--section-y) 24px; }

@media (max-width: 768px) {
  .features-cards { padding:var(--section-y) 0; }
  .story-section  { padding:var(--section-y) 20px; }
  .community-section { padding:var(--section-y) 0; }
}

/* ============================================================
   3. PRIX
   ------------------------------------------------------------
   Le prix vit là où la décision se prend : juste au-dessus du
   bouton de finalisation, dans la même grammaire que les lignes
   du récapitulatif. Posé sous le titre de section, il paraissait
   toujours rapporté, quelle que soit sa mise en forme.
   ============================================================ */
.cfg-price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap:16px;
  padding:12px 0 2px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.cfg-price-label {
  font-size: 14px;
  color: #6e6e73;
  letter-spacing: var(--track-body);
}
.cfg-price-value {
  font-size: 22px;
  font-weight: 600;
  color: #1d1d1f;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.cfg-price-recap .font-medium { font-variant-numeric: tabular-nums; }