/* site-premium.css — accueil du site, accordé à l'app (12/11/2026) :
   icône de Flam en haut avec un liseré doré, cartes des jeux dans la matière des dés (dégradé « Nuit », lumière douce,
   liseré métallique), titres dorés, pictogrammes au trait dorés à la place
   des emoji. Chargé par les sept pages d'accueil, après leur <style>. */
:root {
  --sp-or-hi: #fff4dc; --sp-or: #f3d08c; --sp-or-lo: #c99a4e;
  --sp-metal-hi: #f8e4b4; --sp-metal-lo: #8e5e2a;
}
/* Titres de section et titre principal : la partie en italique en or. */
h1 em, h2 em {
  background: linear-gradient(100deg, var(--sp-or-lo), var(--sp-or-hi) 40%, var(--sp-or) 60%, var(--sp-or-lo));
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 10px rgba(243, 208, 140, .3));
}
.section-label { color: color-mix(in srgb, var(--sp-or) 80%, transparent); }

/* Icône de Flam en haut : fin liseré doré, halo assorti. */
.hero-dice { box-shadow: 0 0 0 1.5px rgba(248, 228, 180, .55), 0 20px 60px rgba(255, 48, 140, .35); }

/* Cartes des jeux : matière des dés. */
.mode {
  border: 1.6px solid transparent;
  background:
    radial-gradient(120% 50% at 50% 0%, rgba(255, 244, 220, .07), transparent 70%) padding-box,
    linear-gradient(160deg, #3d1236, #220920 55%, #14040f) padding-box,
    linear-gradient(135deg, var(--sp-metal-hi), var(--sp-metal-lo) 45%, var(--sp-metal-hi) 70%, var(--sp-metal-lo)) border-box;
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .12), 0 18px 44px rgba(0, 0, 0, .45);
}
.mode-name {
  background: linear-gradient(100deg, var(--sp-or), var(--sp-or-hi) 50%, var(--sp-or));
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}

/* Avantages : pictogrammes au trait dorés, dans un médaillon. */
.feature-icon {
  width: 52px; height: 52px; margin: 0 auto 10px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: var(--sp-or);
  background: radial-gradient(circle at 35% 30%, rgba(255, 244, 220, .1), rgba(255, 255, 255, .02));
  box-shadow: inset 0 0 0 1px rgba(243, 208, 140, .4), 0 0 18px rgba(243, 208, 140, .12);
}
.feature-icon svg { width: 26px; height: 26px; filter: drop-shadow(0 0 6px rgba(243, 208, 140, .35)); }
.feature-title { color: var(--sp-or); }

/* ══ Animations premium (12/11/2026) ══
   Apparition au défilement (classe .sp-in posée par site-premium.js), reflet
   doré sur les mots en or, cartes qui se soulèvent avec une lumière qui suit
   le doigt, médaillons qui s'allument, icône qui flotte. Tout est coupé si
   l'appareil demande moins d'animations. */
@media (prefers-reduced-motion: no-preference) {
  /* 1. Apparition au défilement : fondu montant, en cascade (--sp-i). */
  .sp-anim { opacity: 0; transform: translateY(22px); filter: blur(4px);
    transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1), filter .8s ease;
    transition-delay: calc(var(--sp-i, 0) * 90ms); }
  .sp-anim.sp-in { opacity: 1; transform: none; filter: none; }

  /* 2. Reflet doré qui balaie les mots en or, de temps en temps. */
  h1 em, h2 em, .mode-name {
    background-size: 220% 100% !important;
    animation: spReflet 7s ease-in-out infinite;
  }
  h2 em { animation-delay: 1.2s; }
  .mode-name { animation-duration: 9s; }
  @keyframes spReflet { 0%, 55% { background-position: 100% 0; } 85%, 100% { background-position: 0 0; } }

  /* 3. Cartes : se soulèvent, liseré plus vif, lumière qui suit le doigt. */
  .mode { position: relative; overflow: hidden; transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease, filter .45s ease; }
  .mode::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
    background: radial-gradient(220px circle at var(--sp-x, 50%) var(--sp-y, 0%), rgba(255, 228, 180, .16), transparent 65%);
    transition: opacity .4s ease; }
  .mode:hover, .mode.sp-touch { transform: translateY(-4px); filter: brightness(1.06);
    box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .18), 0 26px 54px rgba(0, 0, 0, .55), 0 0 26px rgba(243, 208, 140, .14); }
  .mode:hover::after, .mode.sp-touch::after { opacity: 1; }
  .mode.sp-in.sp-anim:hover { transition-delay: 0s; }

  /* 4. Médaillons des avantages : s'allument à l'apparition, puis respirent. */
  .feature.sp-in .feature-icon { animation: spAllume 1.1s ease-out both, spRespire 4.5s ease-in-out 1.1s infinite; }
  @keyframes spAllume { 0% { box-shadow: inset 0 0 0 1px rgba(243,208,140,.1), 0 0 0 rgba(243,208,140,0); transform: scale(.85); }
    60% { box-shadow: inset 0 0 0 1px rgba(243,208,140,.7), 0 0 30px rgba(243,208,140,.45); transform: scale(1.06); }
    100% { box-shadow: inset 0 0 0 1px rgba(243,208,140,.4), 0 0 18px rgba(243,208,140,.12); transform: none; } }
  @keyframes spRespire { 50% { box-shadow: inset 0 0 0 1px rgba(243,208,140,.55), 0 0 24px rgba(243,208,140,.22); } }

  /* 5. Icône de Flam : flotte doucement. */
  .hero-dice { animation: spFlotte 5s ease-in-out infinite; }
  @keyframes spFlotte { 50% { transform: translateY(-7px) rotate(-1.5deg); } }
}