/* ============================================================
   #abō — vague1-overrides.css (v2.24.0)
   À charger en DERNIER dans index.html (après screens-desktop.css)
   ============================================================ */

/* === A. DETAIL : check-in remonté juste sous le hero =========
   Avant : check-in tombait en bas du detail-body, après les prix
   et les détails pédagogiques. Le user devait scroller pour évaluer
   son abō (action principale promise par le produit).
   Après : flex column avec order, check-in en première position
   visuelle juste sous .detail-hero. Aucune modification JS.
   ============================================================ */
.screen-detail .detail-body,
.screen[data-screen="detail"] .detail-body {
  display: flex;
  flex-direction: column;
}

.screen-detail .detail-body > .checkin-block,
.screen[data-screen="detail"] .detail-body > .checkin-block {
  order: -100;
  margin-top: 0;
  margin-bottom: 24px;
}

.screen-detail .detail-body > .followed-card,
.screen-detail .detail-body > .equivalence-block,
.screen[data-screen="detail"] .detail-body > .followed-card,
.screen[data-screen="detail"] .detail-body > .equivalence-block {
  order: -50;
}

.screen-detail .detail-body > .detail-row,
.screen[data-screen="detail"] .detail-body > .detail-row {
  order: 0;
}

.screen-detail .detail-body > .detail-pedagogy,
.screen[data-screen="detail"] .detail-body > .detail-pedagogy {
  order: 50;
}

.screen-detail .detail-body > .detail-projection,
.screen[data-screen="detail"] .detail-body > .detail-projection {
  order: 60;
}

.screen-detail .detail-body > .detail-notif-toggle,
.screen[data-screen="detail"] .detail-body > .detail-notif-toggle {
  order: 70;
}


/* === B. DARK MODE résiduel — neutralisation =================
   Le toggle UI n'existe plus mais des classes .is-dark et
   [data-theme="dark"] traînent dans le JS. On les neutralise
   le temps d'un nettoyage profond en vague 2.
   ============================================================ */
[data-theme="dark"],
.is-dark,
body.is-dark,
html[data-theme="dark"] {
  background: var(--cream, #FAFAF7) !important;
  color: var(--nuit) !important;
}

[data-theme="dark"] *,
.is-dark * {
  /* Empêche tout enfant d'appliquer un dark-style hérité */
  background-image: none;
}


/* === C. CONTRASTE WCAG AA — micro-corrections ===============
   --nuit-fade est passé de 0.6 à 0.7 dans tokens.css, mais
   certains styles inline ou cascade utilisent encore 0.6.
   ============================================================ */
.meta-text,
.txt-secondary,
.txt-muted,
.detail-meta,
.list-meta {
  color: var(--nuit-fade);
}


/* === D. SÉMANTIQUE COULEUR — éviter le rouge sur succès =====
   Avant : --success = var(--boow) = #F85558 (rouge)
   Donc tout élément styled .is-success (économies récupérées,
   résiliations confirmées, badges trophées) sortait en rouge.
   Maintenant --success = var(--mousse) = #7B9F35.
   Ces overrides forcent l'usage sémantique sur les classes
   qui auraient été codées en dur sur boow.
   ============================================================ */
.is-success,
.badge-success,
.toast-success {
  background: var(--success-faint);
  color: var(--success);
  border-color: var(--success);
}

.is-success .icon,
.badge-success .icon {
  color: var(--success);
}

.eco-amount,
.savings-num,
.recap-eco {
  color: var(--success);
}


/* === E. TAP TARGETS — accessibilité mobile ==================
   Hauteurs minimales 44px sur les liens du footer landing
   (la landing est gérée séparément mais les pages légales
   héritent de ce stylesheet).
   ============================================================ */
.footer-links a,
.legal-toc a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 8px 4px;
}


/* === F. PRINT — masque les éléments inutiles ================
   Au cas où l'utilisateur imprime sa page Récap (export PDF
   navigateur), on enlève la tabbar, les FAB et le menu.
   ============================================================ */
@media print {
  .tabbar,
  .fab-home,
  .fab-budget,
  .menu,
  .menu-overlay,
  .app-bar { display: none !important; }

  .screen { padding: 0 !important; }
  body { background: white !important; color: black !important; }
}