/* Bloc "Résultats" — 5 secteurs, contenu piloté par labels/{fr,en}.json.
   --r-sand / --r-border / --r-text-sec restent des tokens locaux à ce bloc — décision
   explicite : /design-token volontairement pas exécuté pour ces valeurs pour l'instant,
   à reprendre plus tard si besoin. Voir IHM_PAGE_ACCUEIL_RESULTATS_algo.md pour le détail
   de tous les choix (structure, animation, contenu). */
#results {
  --r-sand: #F2EFE8;
  --r-border: rgba(26,26,46,0.11);
  --r-text-sec: rgba(26,26,46,0.74);
  background: var(--background-clair);
  padding: 90px 24px 90px;
  position: relative;
}
#results .r-inner { max-width: 1120px; margin: 0 auto; }
#results .r-header { max-width: 600px; margin-bottom: 56px; }
#results .r-eyebrow { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--gold-dark); font-weight: 700; }
#results .r-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 3.4vw, 40px); color: var(--marine); margin-top: 14px; line-height: 1.18; }
#results .r-intro { font-size: 15px; color: var(--r-text-sec); line-height: 1.7; margin-top: 16px; }

/* .r-tabs/.r-tab* — extraits dans assets/css/tabs.css (.tabs-sliding*) le 2026-08-31,
   composant partagé avec #prestige. Seul ajustement propre à ce bloc : la marge externe. */
#results .tabs-sliding { margin-bottom: 48px; }

#results .r-grid { display: grid; grid-template-columns: 1.6fr 1fr; grid-template-rows: 1fr 1fr; gap: 16px; }
#results .r-card {
  position: relative;
  background: var(--r-sand); border: 1px solid var(--r-border); border-radius: 14px;
  padding: 30px 32px; display: flex; flex-direction: column; justify-content: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
#results .r-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 28px -18px rgba(26,26,46,0.28);
  border-color: rgba(202,138,4,0.35);
}
#results .r-card--hero { grid-column: 1; grid-row: 1 / 3; padding: 44px; background: var(--marine); }
#results .r-card--hero:hover {
  box-shadow: 0 20px 36px -16px rgba(0,0,0,0.4);
  border-color: rgba(226,168,50,0.4);
}
#results .r-card:nth-child(2) { grid-column: 2; grid-row: 1; }
#results .r-card:nth-child(3) { grid-column: 2; grid-row: 2; }
#results .r-card-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--gold-dark); margin-bottom: 14px; }
#results .r-card--hero .r-card-label { color: var(--gold-light); }
#results .r-value { font-family: var(--font-display); font-size: 44px; color: var(--marine); line-height: 1; font-variant-numeric: tabular-nums; }
#results .r-card--hero .r-value { font-size: 68px; color: var(--gold-light); }
#results .r-before { font-size: 12.5px; font-style: italic; color: var(--r-text-sec); margin-top: 10px; line-height: 1.5; }
#results .r-card--hero .r-before { color: var(--text-sec-dark); }
#results .r-note { font-size: 13px; color: var(--r-text-sec); line-height: 1.6; margin-top: 16px; }
#results .r-card--hero .r-note { font-size: 14px; max-width: 340px; color: var(--text-sec-dark); }
#results .r-disclaimer { font-size: 11px; color: var(--r-text-sec); margin-top: 24px; }

@media (max-width: 760px) {
  #results { padding: 100px 24px; }
  #results .r-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
  #results .r-card, #results .r-card--hero, #results .r-card:nth-child(2), #results .r-card:nth-child(3) {
    grid-column: 1; grid-row: auto;
  }
}
@media (max-width: 460px) {
  #results { padding-left: 16px; padding-right: 16px; }
}