/* =======================================================================
   SI-SHELL.CSS — Template maître (hero + footer) unifié sur TOUTES les pages
   Une seule source de vérité. Modif ici = propagée partout.
   ======================================================================= */

/* Palette tokens — validée 26/04/2026 (project_brand_FINAL_bleu_nuit_chic) */
:root {
  --si-red: #0F172A;        /* bleu nuit corporate (anciennement red) */
  --si-orange: #06B6D4;     /* cyan saturé (anciennement orange) */
  --si-ink: #0F172A;
  --si-ink-soft: #1e293b;
  --si-muted: #64748b;
  --si-bg: #f8fafc;
  --si-border: #e5e7eb;
  --si-green: #059669;      /* reste vert pour les gains €/cashback */
  --si-brand-cyan: #06B6D4;
  --si-brand-dark: #0F172A;
}

/* -----------------------------------------------------------------------
   HERO UNIFIÉ
   Usage :
     <div data-si-hero data-label="Cashback" data-sub="…"></div>
   ou override gradient :
     <div data-si-hero data-label="…" data-gradient="carburant"></div>
   ----------------------------------------------------------------------- */
.si-hero {
  background: linear-gradient(135deg,#0F172A,#06B6D4);
  color: #fff;
  padding: 48px 28px 42px;
  min-height: 280px;
  max-width: 1280px;
  margin: 20px auto;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  box-shadow: 0 16px 44px rgba(226,27,35,.18);
}
@media (max-width: 640px) {
  .si-hero { min-height: 240px; padding: 34px 18px 28px; margin: 12px; border-radius: 18px; }
}
.si-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 30%, rgba(255,255,255,.08), transparent 50%);
  pointer-events: none;
}
.si-hero-inner {
  max-width: 1420px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.si-hero-breadcrumb {
  font-size: 12px;
  opacity: .7;
  margin-bottom: 8px;
}
.si-hero-breadcrumb a {
  color: inherit;
  text-decoration: none;
}
.si-hero-breadcrumb a:hover { text-decoration: underline; }
.si-hero h1 {
  font-size: clamp(28px, 4.5vw, 44px);
  font-weight: 900;
  margin: 0 0 10px;
  line-height: 1.05;
  letter-spacing: -.6px;
}
.si-hero-sub {
  font-size: 16px;
  margin: 0 auto;
  opacity: .92;
  max-width: 720px;
  line-height: 1.5;
}

/* Badges + stats optionnels (pages catégorie) */
.si-hero-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
}
@media (max-width: 860px) { .si-hero-grid { grid-template-columns: 1fr; } }
.si-hero-badges {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.si-hero-badge {
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  padding: 6px 12px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 700;
  backdrop-filter: blur(8px);
}
.si-hero-stats {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.si-hero-stat {
  text-align: center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 16px;
  padding: 14px 20px;
  min-width: 110px;
  backdrop-filter: blur(12px);
}
.si-hero-stat strong {
  display: block;
  font-size: 26px;
  font-weight: 900;
  color: #22D3EE;
}
.si-hero-stat span {
  font-size: 11px;
  opacity: .85;
  text-transform: uppercase;
  letter-spacing: .5px;
}
@media (max-width: 860px) {
  .si-hero-stat { padding: 10px 14px; min-width: 90px; }
  .si-hero-stat strong { font-size: 20px; }
}

/* Variantes gradient par thématique */
.si-hero[data-gradient="carburant"] {
  background: linear-gradient(135deg, #078ADB 0%, #0066CC 100%);
}
.si-hero[data-gradient="cashback"] {
  background: linear-gradient(135deg, var(--si-green) 0%, #047857 50%, var(--si-red) 100%);
}
.si-hero[data-gradient="sombre"] {
  background: linear-gradient(135deg, var(--si-ink) 0%, var(--si-ink-soft) 100%);
}

/* -----------------------------------------------------------------------
   FOOTER UNIFIÉ
   Usage : <div data-si-footer></div>
   ----------------------------------------------------------------------- */
.si-footer {
  background: #fff;
  border-top: 1px solid var(--si-border);
  padding: 40px 20px;
  margin-top: 60px;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}
.si-footer-inner {
  max-width: 1420px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 28px;
  font-size: 13px;
  color: var(--si-muted);
}
.si-footer h5 {
  color: var(--si-ink);
  font-weight: 800;
  font-size: 13px;
  margin: 0 0 10px;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.si-footer p {
  margin: 0;
  line-height: 1.5;
  font-size: 13px;
  color: var(--si-muted);
}
.si-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.si-footer a {
  color: var(--si-muted);
  text-decoration: none;
}
.si-footer a:hover { color: var(--si-ink); }
.si-footer-bottom {
  max-width: 1420px;
  margin: 24px auto 0;
  padding-top: 20px;
  border-top: 1px solid #f1f5f9;
  font-size: 12px;
  color: #94a3b8;
  text-align: center;
}