/* ==========================================================================
   LepTi's Games — feuille de style partagée
   Tailwind gère la mise en page ; ce fichier définit les composants répétés
   (navigation, cartes, typographie des pages de contenu) pour que les trois
   pages restent visuellement identiques.
   ========================================================================== */

:root {
  --bg:          #0f172a; /* slate-900 */
  --bg-soft:     #1e293b; /* slate-800 */
  --bg-deep:     #020617; /* slate-950 */
  --line:        #334155; /* slate-700 */
  --text:        #e2e8f0; /* slate-200 */
  --muted:       #94a3b8; /* slate-400 */
  --accent:      #818cf8; /* indigo-400 */
  --accent-soft: #a5b4fc; /* indigo-300 */
  --accent-deep: #4f46e5; /* indigo-600 */
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  position: relative;
}

/* Halo décoratif figé derrière le contenu. Un pseudo-élément en position:fixed
   plutôt que `background-attachment: fixed`, non fiable sur Safari iOS. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(60rem 32rem at 50% -10rem, rgba(99, 102, 241, .18), transparent 70%);
}

/* Accessibilité : un anneau de focus visible et homogène partout. */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 3px;
  border-radius: .375rem;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ---------------------------------------------------------------- Navigation */

.site-nav {
  background: rgba(15, 23, 42, .85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.nav-link {
  position: relative;
  color: var(--muted);
  transition: color .2s ease;
}

.nav-link:hover { color: #fff; }

.nav-link.is-active {
  color: #fff;
  font-weight: 700;
}

/* Soulignement animé, réservé aux écrans où la nav est horizontale. */
@media (min-width: 768px) {
  .nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -.5rem;
    height: 2px;
    border-radius: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transition: transform .2s ease;
  }
  .nav-link:hover::after,
  .nav-link.is-active::after { transform: scaleX(1); }
}

/* Sur mobile, l'élément actif est repéré par une pastille pleine. */
@media (max-width: 767px) {
  .nav-link.is-active {
    background: rgba(99, 102, 241, .15);
    color: var(--accent-soft);
  }
}

/* ------------------------------------------------------------------ En-tête */

.page-title {
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;
}

.page-title .accent { color: var(--accent); }

/* Petit trait décoratif sous les titres de page. */
.title-rule {
  width: 4rem;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent-soft));
}

/* ------------------------------------------------------------------- Cartes */

.card {
  background: linear-gradient(180deg, rgba(30, 41, 59, .9), rgba(30, 41, 59, .65));
  border: 1px solid var(--line);
  border-radius: 1rem;
  box-shadow: 0 12px 32px -18px rgba(0, 0, 0, .9);
}

.card-hover {
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.card-hover:hover {
  transform: translateY(-4px);
  border-color: rgba(129, 140, 248, .55);
  box-shadow: 0 22px 44px -22px rgba(79, 70, 229, .75);
}

/* Bouton principal (contact, liens d'action). */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  padding: .8rem 1.75rem;
  border-radius: 999px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--accent-deep), #7c3aed);
  box-shadow: 0 10px 26px -12px rgba(79, 70, 229, .9);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  word-break: break-word;
}

.btn-primary:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -12px rgba(79, 70, 229, 1);
}

/* Pastille d'information (date de mise à jour, étiquettes). */
.pill {
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
  text-align: left;
  padding: .35rem .85rem;
  border-radius: 999px;
  font-size: .8125rem;
  color: var(--accent-soft);
  background: rgba(99, 102, 241, .12);
  border: 1px solid rgba(129, 140, 248, .3);
}

/* ------------------------------------------------- Sélecteur de langue (FR/EN) */

.lang-tabs {
  display: inline-flex;
  gap: .25rem;
  padding: .25rem;
  border-radius: 999px;
  background: rgba(2, 6, 23, .6);
  border: 1px solid var(--line);
}

.lang-tab {
  padding: .45rem 1.1rem;
  border-radius: 999px;
  font-size: .875rem;
  font-weight: 600;
  color: var(--muted);
  transition: background .2s ease, color .2s ease;
}

.lang-tab:hover { color: #fff; }

.lang-tab[aria-selected="true"] {
  background: var(--accent-deep);
  color: #fff;
}

/* ------------------------------------------------ Typographie des pages texte */

.policy-block + .policy-block { margin-top: 1.5rem; }

.policy-block h3 {
  display: flex;
  align-items: center;
  gap: .625rem;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--accent-soft);
  margin-bottom: .5rem;
}

.policy-block h3 i {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  font-size: .8125rem;
  border-radius: .5rem;
  color: var(--accent-soft);
  background: rgba(99, 102, 241, .15);
}

.policy-block p,
.policy-block li { color: #cbd5e1; line-height: 1.7; }

.policy-block ul {
  list-style: disc;
  padding-left: 1.25rem;
  display: grid;
  gap: .625rem;
}

.policy-block strong { color: #fff; }

/* Séparateur discret entre les blocs d'une même carte. */
.policy-block {
  border-left: 2px solid rgba(51, 65, 85, .9);
  padding-left: 1rem;
  transition: border-color .25s ease;
}

.policy-block:hover { border-left-color: var(--accent); }

/* Liens dans le corps de texte. */
.link {
  color: var(--accent-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(165, 180, 252, .45);
  transition: color .2s ease, text-decoration-color .2s ease;
  word-break: break-word;
}

.link:hover {
  color: #fff;
  text-decoration-color: #fff;
}

/* Liste de liens externes présentée en tuiles. */
.link-tile {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1rem;
  border-radius: .75rem;
  background: rgba(2, 6, 23, .45);
  border: 1px solid var(--line);
  color: #cbd5e1;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.link-tile:hover {
  border-color: rgba(129, 140, 248, .6);
  background: rgba(30, 41, 59, .7);
  transform: translateY(-2px);
  color: #fff;
}

/* ------------------------------------------------------------------ Pied de page */

.site-footer {
  background: var(--bg-deep);
  border-top: 1px solid var(--line);
}