@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --accent: 250 204 21;
}
/* ========== BASE ========== */
@layer base {
  html,
  body {
    @apply text-ink;

    background-color: #0a0c12;
    background-image:
      radial-gradient(
        circle at 50% 140px,
        rgba(148, 163, 184, 0.16),
        transparent 60%
      ),
      linear-gradient(
        to bottom,
        #0a0c12 0%,
        #0c0f14 40%,
        #111418 100%
      );
    background-repeat: no-repeat;
    /* background-attachment: fixed; */
    overscroll-behavior-y: contain;
  }
  .admin-body {
    @apply bg-white text-slate-900;
    background-color: #f9fafb !important
  }

  html {
    @apply font-sans;
  }

  /* Le scale d'entrée de .title-slam (1.9x) dépasse la largeur de la page sur
     mobile. Le scroll latéral qui en résultait faisait sauter la dock fixe et
     réapparaître la barre d'URL. clip, contrairement à hidden, ne crée pas de
     conteneur de défilement : position: sticky et les modales fixed internes
     ne sont pas affectées. Chrome ignore ce clip s'il est posé sur html ou
     body, il doit l'être sur le conteneur de page. */
  body:not(.admin-body) main {
    overflow-x: clip;
  }

  fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
  }

  legend {
    display: block;
    width: 100%;
    padding: 0;
  }

  h1,
  h2,
  h3,
  .brand {
    @apply font-brand uppercase tracking-wide2;
  }

  h1,
  h2,
  h3 {
    @apply font-semibold;
  }

  .tracking-wide2 {
    letter-spacing: 0.08em;
  }
}
/* ========== COMPONENTS ========== */
 @layer components {
  .admin_form input:not([type="checkbox"]):not([type="radio"]){
    @apply block w-full rounded-lg border border-slate-300 bg-white
           px-3 py-2 text-sm text-slate-900 shadow-sm
           focus:outline-none focus:ring-2 focus:ring-slate-900 focus:border-slate-900;
  }
  .admin_form textarea{
    @apply block w-full rounded-lg border border-slate-300 bg-white
           px-3 py-2 text-sm text-slate-900 shadow-sm
           focus:outline-none focus:ring-2 focus:ring-slate-900 focus:border-slate-900;
  }
  .admin_form select{
    @apply block w-full rounded-lg border border-slate-300 bg-white
           px-3 py-2 text-sm text-slate-900 shadow-sm
           focus:outline-none focus:ring-2 focus:ring-slate-900 focus:border-slate-900;
  }
  .admin_form label{
       @apply block text-sm font-medium text-slate-700;
  }
  .trick-card-add {
    @apply rounded-2xl flex items-center justify-center text-center
           transition-all duration-200 select-none;

    /* Même base que trick-card */
    background:
      radial-gradient(circle at 0% 0%, rgba(255,255,255,0.06), transparent 55%),
      radial-gradient(circle at 100% 0%, rgba(255,255,255,0.04), transparent 55%),
      linear-gradient(135deg, #18181b 0%, #09090b 45%, #020617 100%);

    border: 1px solid rgba(148,163,184,0.35);

    box-shadow:
      0 4px 0 rgba(0,0,0,0.7),
      0 18px 32px rgba(0,0,0,0.85);
  }

  .trick-card-add__inner {
    @apply py-10 px-4 flex flex-col items-center justify-center;
  }

  .trick-card-add__icon {
    @apply text-4xl font-black mb-3 leading-none;
    color: rgb(var(--accent));
    text-shadow:
      0 0 6px rgb(var(--accent) / 0.4),
      0 2px 0 rgba(0,0,0,1);
  }

  .trick-card-add__label {
    @apply uppercase tracking-wide2 text-white font-semibold text-sm;
  }

  /* Hover gold subtile */
  .trick-card-add:hover {
    border-color: rgb(var(--accent) / 0.55);
    box-shadow:
      0 0 12px rgb(var(--accent) / 0.22),
      0 6px 0 rgba(0,0,0,0.75),
      0 22px 32px rgba(0,0,0,0.9);
    transform: translateY(-2px);
  }
  .stars {
    @apply inline-flex items-center gap-1;
    color: rgb(var(--accent)); /* gold */
  }

  .star {
    @apply w-4 h-4;
  }
  /* ========== END tricks_tabs.css ========== */
  /* tricks_pages.css */
    .trick-filter-card {
    @apply rounded-2xl p-4 md:p-6 space-y-3 w-full;

    background:
      radial-gradient(circle at 0% 0%, rgba(255,255,255,0.06), transparent 55%),
      radial-gradient(circle at 100% 0%, rgba(255,255,255,0.04), transparent 55%),
      linear-gradient(135deg, #18181b 0%, #09090b 45%, #020617 100%);

    border: 1px solid rgba(148,163,184,0.3);
    box-shadow:
    0 4px 0 rgba(0,0,0,0.7),
    0 18px 32px rgba(0,0,0,0.9);
  }

  .trick-filter-label {
    @apply block text-xs uppercase tracking-wide2 text-white/60 mb-1;
  }

  .trick-filter-input {
    @apply w-full bg-black/40 border border-white/10 rounded-xl px-3 py-2.5 text-sm
          text-white placeholder-white/40 outline-none transition;
    @apply focus:ring-2 focus:ring-gold/40 focus:border-gold/60;
  }

  .trick-filter-input:hover {
    @apply border-white/20;
  }

  .trick-filter-icon {
    @apply absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-white/40;
    pointer-events: none;
  }
  /* ========== END tricks_pages.css ========== */

  /* trick_show.css */
    .trick-show {
    @apply px-0;
  }

  .trick-show__card {
    @apply relative rounded-2xl md:rounded-3xl overflow-hidden;
    @apply px-5 py-5 md:px-7 md:py-6;

    background:
      radial-gradient(circle at 0% 0%, rgba(255,255,255,0.06), transparent 55%),
      radial-gradient(circle at 100% 0%, rgba(255,255,255,0.04), transparent 55%),
      linear-gradient(135deg, #18181b 0%, #09090b 45%, #020617 100%);
    border: 1px solid rgba(148,163,184,0.35);
    box-shadow:
      0 5px 0 rgba(0,0,0,0.75),
      0 20px 40px rgba(0,0,0,0.95);

    color: #f9fafb;
  }

  .trick-show__top {
    @apply flex items-center justify-between gap-3 mb-5;
  }

  /* ========== BOUTON RETOUR / CTA TOP ========== */

  .back-button {
    @apply inline-flex items-center gap-2 rounded-full px-3 py-1.5 text-sm font-medium;
    @apply text-slate-100;

    background: rgba(15,23,42,0.95);
    border: 1px solid rgba(148,163,184,0.7);
    box-shadow:
      0 2px 0 rgba(0,0,0,0.8),
      0 8px 16px rgba(0,0,0,0.85);
    transition:
      transform .12s ease,
      box-shadow .12s ease,
      background .12s ease,
      border-color .12s ease;
  }

  .back-button svg {
    @apply w-4 h-4;
  }

  .back-button:hover {
    background: rgba(15,23,42,1);
    border-color: rgb(var(--accent) / 0.8);
    transform: translateY(-1px);
    box-shadow:
      0 3px 0 rgba(0,0,0,0.9),
      0 12px 20px rgba(0,0,0,0.95);
  }

  .back-button:active {
    transform: translateY(0);
    box-shadow:
      0 1px 0 rgba(0,0,0,0.9),
      0 6px 14px rgba(0,0,0,0.9) inset;
  }

  /* CTA top */

  .trick-show__cta {
    @apply inline-flex items-center justify-center font-semibold rounded-full;
    @apply px-5 py-2.5 text-sm md:text-base;

    color: rgb(var(--accent));
    background:
      radial-gradient(circle at 0% 0%, rgb(var(--accent) / 0.18), transparent 55%),
      linear-gradient(135deg, #020617 0%, #020617 40%, #111827 100%);
    border: 1px solid rgb(var(--accent) / 0.85);
    box-shadow:
      0 2px 0 rgba(0,0,0,0.85),
      0 10px 20px rgba(0,0,0,0.85);

    transition:
      transform .12s ease,
      box-shadow .12s ease,
      filter .12s ease,
      background .12s ease;
  }

  .trick-show__cta:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow:
      0 3px 0 rgba(0,0,0,0.9),
      0 14px 26px rgba(0,0,0,0.9);
  }

  .trick-show__cta:active {
    filter: brightness(0.97);
    transform: translateY(0);
    box-shadow:
      0 1px 0 rgba(0,0,0,0.9),
      0 6px 14px rgba(0,0,0,0.9) inset;
  }


  /* ========== HEADER (TITRE / FAMILLE / DIFFICULTÉ) ========== */

  .trick-show__header {
    @apply flex items-start justify-between gap-4 flex-wrap mb-4;
  }

  .trick-show__title-block {
    @apply flex flex-col gap-1 min-w-0;
  }

  .trick-show__title {
    @apply text-2xl sm:text-3xl font-extrabold uppercase tracking-wide2 leading-tight;
    color: rgb(var(--accent));
    text-shadow:
      0 0 6px rgb(var(--accent) / 0.4),
      0 2px 0 rgba(0,0,0,0.9);
  }

  .trick-show__meta-line {
    @apply mt-1 flex flex-wrap items-center gap-2 text-xs sm:text-sm;
    color: rgba(226,232,240,0.85);
  }

  .trick-show__meta-label {
    @apply uppercase tracking-wide2 text-[11px] text-white/70;
  }

  .trick-show__family-badge {
    @apply inline-flex items-center px-3 py-1 rounded-full text-[11px] uppercase tracking-wide2 font-semibold;
    background: rgba(15,23,42,0.95);
    border: 1px solid rgba(148,163,184,0.7);
    color: rgba(248,250,251,0.95);
    box-shadow:
      0 1px 0 rgba(0,0,0,0.7),
      0 5px 10px rgba(0,0,0,0.7);
  }

  .trick-show__difficulty {
    @apply flex flex-col items-end gap-1 shrink-0;
  }

  .trick-show__difficulty-label {
    @apply text-[11px] uppercase tracking-wide2 text-white/70;
  }

  .trick-show__difficulty .stars {
    color: rgb(var(--accent));
  }
  /* ========== SECTIONS (PRÉREQUIS / DESCRIPTION / VIDÉO) ========== */

  .trick-show__section {
    @apply mt-6 space-y-3;
  }

  .trick-show__divider {
    @apply border-t border-slate-700/70 mt-6 mb-4;
  }

  .trick-show__section-head {
    @apply flex items-center justify-between gap-2 mb-1;
  }

  .trick-show__section-title {
    @apply text-lg font-semibold uppercase tracking-wide2 text-slate-50;
  }

  .trick-show__video {
    @apply rounded-xl overflow-hidden border border-slate-700/70 shadow-[0_8px_20px_rgba(0,0,0,0.8)];
  }

  .trick-show__description {
    @apply text-sm sm:text-base leading-relaxed text-slate-100;
  }

  .trick-show__description p + p {
    @apply mt-2;
  }

  .trick-show__description--empty {
    @apply text-sm text-slate-400;
  }

  /* ========== END trick_show.css ========== */
  /* social.css */
    .list-rows {
    @apply space-y-2;
  }

  .row-item {
    @apply relative grid grid-cols-[auto,1fr,auto] items-center gap-3;
    @apply px-3 py-3 ps-4 min-h-16 rounded-2xl;
    @apply border border-slateglass bg-night-800/80;
    @apply shadow-doack transition-all duration-150;
  }

  /* Tranche d'accent inclinée sur le flanc gauche, rappel du langage slam */
  .row-item::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 12px;
    bottom: 12px;
    width: 3px;
    border-radius: 9999px;
    background: rgb(var(--accent) / 0.3);
    transform: skewX(-6deg);
    transition: background-color .15s ease, box-shadow .15s ease;
    pointer-events: none;
  }

  .row-item:not(.row-item--static):hover::before {
    background: rgb(var(--accent));
    box-shadow: 0 0 10px rgb(var(--accent) / 0.6);
  }

  .row-item:not(.row-item--static):hover {
    transform: translateY(-2px);
    border-color: rgb(var(--accent) / 0.85);
    box-shadow:
      0 0 12px rgb(var(--accent) / 0.22),
      0 6px 0 rgba(0,0,0,0.75),
      0 22px 32px rgba(0,0,0,0.9);
  }

  .row-item--static {
    cursor: default;
  }

  .row-item__body {
    @apply min-w-0 text-inkwhite;
  }

  .row-item__actions {
    @apply flex items-center gap-2 ms-2 shrink-0;
    justify-self: end;
  }

  .row-item__actions form {
    display: contents;
  }
  /* panel_card.css */
  .shell-card {
    @apply rounded-2xl md:rounded-3xl border border-slateglass p-4 md:p-6 shadow-doack;
    background: #0d1017;
  }
  /* ========== END panel_card.css ========== */

  /* navbar.css */
  .site-header {
    @apply w-full;
    position: relative;
    z-index: 50;

    background:
      radial-gradient(70% 160% at 12% -10%, rgb(var(--accent) / 0.07), transparent 62%),
      linear-gradient(
        to bottom,
        rgba(3, 4, 9, 0.98) 0%,
        rgba(4, 6, 12, 0.96) 55%,
        rgba(4, 6, 12, 0.6) 100%
      );
    border-bottom: 1px solid rgba(15, 23, 42, 0.9);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
  }

  .site-header__inner {
    @apply flex items-center justify-between gap-4;
    min-height: 3.5rem;
    position: relative;
  }

  /* Filet accent incliné sous la marque, écho de .title-underline */
  .site-header__inner::after {
    content: "";
    position: absolute;
    left: 1rem;
    bottom: -1px;
    width: 5.5rem;
    height: 3px;
    border-radius: 9999px;
    background: linear-gradient(90deg,
      rgb(var(--accent)),
      rgb(var(--accent) / 0.4),
      transparent);
    transform: skewX(-4deg);
    pointer-events: none;
  }

  /* Marque / logo */

  .site-header__brand {
    @apply flex items-center gap-3 min-w-0;
  }

  /* Logo posé comme un sticker : léger dévers et ombre dure */
  .site-header__brand img {
    transform: rotate(-1.5deg);
    filter:
      drop-shadow(0 2px 0 rgba(0,0,0,0.85))
      drop-shadow(0 6px 10px rgba(0,0,0,0.6));
    transition: transform .16s ease;
  }

  .site-header__brand:hover img {
    transform: rotate(-1.5deg) scale(1.04);
  }

  /* Bouton icône (cloche) : pavé sombre incliné, accent au survol */
  .site-header__icon-btn {
    @apply relative isolate inline-flex items-center justify-center;
    width: 2.25rem;
    height: 2.25rem;
    color: rgba(226,232,240,0.75);
    transition: color .15s ease, transform .12s ease;
  }

  .site-header__icon-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 0.4rem;
    background: #09090b;
    border: 1px solid rgba(148,163,184,0.35);
    box-shadow: 0 2px 0 rgba(0,0,0,0.7);
    transform: skewX(-6deg);
    transition: border-color .15s ease, box-shadow .15s ease;
  }

  .site-header__icon-btn:hover {
    color: rgb(var(--accent));
  }

  .site-header__icon-btn:hover::before {
    border-color: rgb(var(--accent) / 0.8);
    box-shadow:
      0 2px 0 rgba(0,0,0,0.7),
      0 0 12px rgb(var(--accent) / 0.25);
  }

  .site-header__icon-btn:active {
    transform: scale(0.95);
  }

  /* Utilisateur connecté */

  .site-header__user {
    @apply flex items-center gap-2 sm:gap-3 min-w-0;
  }

  .site-header__user-name {
    @apply font-brand text-[12px] font-semibold uppercase tracking-wide2 text-slate-100;
  }

  .site-header__user:hover .site-header__user-name {
    color: rgb(var(--accent));
  }

  details.site-header__menu {
    @apply relative;
  }

  details.site-header__menu > summary {
    list-style: none;
  }

  details.site-header__menu[open] > summary {
    @apply outline-none;
  }

  details.site-header__menu > summary::-webkit-details-marker {
    display: none;
  }

  /* Avatar “polaroid” simple */

  .site-header__avatar {
    position: relative;
    display: inline-block;
  }

  .site-header__avatar-frame {
    position: absolute;
    inset: -4px;
    z-index: 0;
    border-radius: 12px;
    border: 1px solid rgba(148,163,184,0.8);
    background: #0b0b0f;
    clip-path: polygon(6% 0, 94% 0, 100% 100%, 0 100%);
    box-shadow:
      0 2px 0 rgba(0,0,0,0.6),
      0 6px 12px rgba(0,0,0,0.7);
    transition: border-color .15s ease, box-shadow .15s ease;
  }

  .site-header__user:hover .site-header__avatar-frame {
    border-color: rgb(var(--accent) / 0.85);
    box-shadow:
      0 2px 0 rgba(0,0,0,0.6),
      0 0 14px rgb(var(--accent) / 0.28);
  }

  .site-header__avatar-img {
    position: relative;
    z-index: 1;
    width: 2rem;
    height: 2rem;
    border-radius: 12px;
    object-fit: cover;
    clip-path: polygon(6% 0, 94% 0, 100% 100%, 0 100%);
  }

  /* Badge chevron */

  .site-header__avatar-chevron {
    position: absolute;
    right: -6px;
    bottom: -6px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 9999px;
    background: #020617;
    border: 1px solid rgba(148,163,184,0.7);
    box-shadow:
      0 1px 0 rgba(0,0,0,0.7),
      0 5px 10px rgba(0,0,0,0.8);
  }

  .site-header__avatar-chevron-icon {
    @apply w-3.5 h-3.5;
    color: rgba(249,250,251,0.85);
    transition: transform 0.16s ease, color 0.16s ease;
  }

  details.site-header__menu[open] .site-header__avatar-chevron-icon {
    transform: rotate(180deg);
    color: rgb(var(--accent));
  }

  /* Dropdown menu utilisateur */

  .nav-dropdown {
    @apply absolute right-0 mt-2 w-52 rounded-xl border border-slate-700/70 shadow-lg p-2;
    z-index: 60;               /* 👈 au-dessus de l’avatar / carte */

    background:
      radial-gradient(circle at 0% 0%, rgba(255,255,255,0.08), transparent 55%),
      linear-gradient(145deg,#020617 0%,#020617 40%,#050816 100%);
  }

  .nav-dropdown a {
    @apply block w-full text-left px-3 py-2 rounded-md text-sm text-slate-100;
  }

  .nav-dropdown a:hover {
    @apply bg-slate-100 text-black;
  }

  .nav-dropdown .brand {
    @apply tracking-wide2 uppercase;
  }

  /* Version invité : boutons connexions dans le header */

  .site-header__guest-actions {
    @apply hidden sm:flex items-center gap-2;
  }

  .site-header__guest-actions--mobile {
    @apply sm:hidden;
  }
  /* ========== END navbar.css ========== */

  /* dock.css */
  /* ========= BOTTOM NAV - DOCK SLASHED (version dark + gold) ========= */

  :root {
    --dock-h: 4rem;
  }

  .pb-dock {
    padding-bottom: calc(var(--dock-h) + env(safe-area-inset-bottom));
  }

  /* Pas de motif répété : la profondeur vient d'une nappe d'accent qui monte du
     bas et d'un liseré clair sur l'arête haute. */
  .dock {
    @apply fixed bottom-0 inset-x-0 z-50;
    background:
      radial-gradient(85% 130% at 50% 120%, rgb(var(--accent) / 0.1), transparent 70%),
      linear-gradient(to top, #010206 0%, #03050d 60%, #060912 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.07),
      0 -12px 30px rgba(0,0,0,0.95);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .dock--divider::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    height: 1px;
    background: linear-gradient(
      to right,
      transparent 0%,
      rgba(148,163,184,0.3) 20%,
      rgba(148,163,184,0.45) 50%,
      rgba(148,163,184,0.3) 80%,
      transparent 100%
    );
    pointer-events: none;
  }

  /* 10px sur mobile : six onglets doivent tenir sans tronquer "MESSAGES". */
  .dock__list {
    @apply grid grid-cols-[repeat(auto-fit,minmax(0,1fr))] text-[10px] relative;
    height: var(--dock-h);
  }

  @screen sm {
    .dock__list {
      @apply text-[11px];
    }
  }

  @screen md {
    .dock__list {
      @apply text-[12px];
    }
  }

  .dock__item {
    @apply relative;
  }

  .dock__link {
    @apply relative h-full w-full flex flex-col items-center justify-center gap-1
           select-none font-brand uppercase;
    letter-spacing: 0.04em;
    text-rendering: optimizeLegibility;
    color: rgba(203,213,225,0.7);
    transition: color .16s ease, opacity .16s ease, transform .12s ease;
  }

  @screen sm {
    .dock__link {
      @apply tracking-wide2;
    }
  }

  .dock__link--inactive:hover {
    color: #f8fafc;
    transform: translateY(-1px);
  }

  /* Onglet actif : même langage que .btn-slam, pavé d'accent et texte sombre. */
  .dock__link--active {
    color: #050608;
    font-weight: 700;
  }

  .dock__icon {
    @apply h-6 w-6;
    color: rgba(249,250,251,0.85);
    transition: color .16s ease, opacity .14s ease, transform .12s ease;
  }

  @screen md {
    .dock__icon {
      @apply h-7 w-7;
    }
  }

  .dock__link--active .dock__icon {
    color: #050608;
    filter: drop-shadow(0 1px 0 rgb(var(--accent) / 0.6));
    opacity: 1;
  }

  .dock__label {
    @apply leading-none;
    transition: opacity .14s ease, transform .12s ease;
  }

  .dock__badge {
    position: absolute;
    top: -4px;
    right: -6px;
    min-width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border-radius: 9999px;
    background: #dc2626;
    color: #fff;
    font-size: 10px;
    line-height: 1;
    font-weight: 600;
    border: 1px solid rgba(0,0,0,0.5);
    box-shadow:
      0 2px 0 rgba(0,0,0,0.65),
      0 0 10px rgba(220,38,38,0.5);
  }

  /* Pavé d'accent incliné derrière l'onglet actif */
 .dock__bg {
    content: "";
    position: absolute;
    z-index: -1;              /* <== IMPORTANT : passe derrière le contenu */
    top: 6px;
    bottom: 7px;
    left: 6px;
    right: 6px;
    border-radius: 0.45rem;
    background: linear-gradient(135deg, rgb(var(--accent)), rgb(var(--accent) / 0.82));
    box-shadow:
      0 3px 0 rgba(0,0,0,0.8),
      0 8px 16px rgba(0,0,0,0.6);
    transform: skewX(-6deg);
    animation: dock-fadeonly .14s ease-out both;
  }

  /* Repère qui raccroche l'onglet actif au filet du haut */
  .dock__bg::after {
    content: "";
    position: absolute;
    left: 30%;
    right: 30%;
    top: -6px;
    height: 3px;
    border-radius: 9999px;
    background: rgb(var(--accent));
    box-shadow: 0 0 12px rgb(var(--accent) / 0.75);
  }

  /* ghost en hover doit aussi rester derrière */
  .dock__ghost {
    position: absolute;
    z-index: -1;              /* <== pour qu’il reste sous l’icône / label */
  }

  .dock__item:hover .dock__ghost {
    content:"";
    top: 6px;
    bottom: 7px;
    left: 6px;
    right: 6px;
    border-radius: 0.45rem;
    border: 1px solid rgb(var(--accent) / 0.35);
    background: rgba(148,163,184,0.07);
    transform: skewX(-6deg);
  }


  @keyframes dock-fadeonly {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  @media (prefers-reduced-motion: reduce) {
    .dock__link,
    .dock__icon,
    .dock__label,
    .dock__bg {
      animation: none !important;
      transition: none !important;
    }
  }
  /* ========== END dock.css ========== */

  /* course.css */
  .home-section {
    @apply rounded-[1.75rem] relative overflow-hidden;
  }

  .home-section--courses,
  .home-section--blog {
    padding: 1.6rem 1.4rem 1.8rem;

    background:
      radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.06), transparent 55%),
      radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.04), transparent 55%),
      linear-gradient(135deg, #18181b 0%, #09090b 45%, #020617 100%);
      border: 1px solid rgba(148, 163, 184, 0.35);

    box-shadow:
      0 5px 0 rgba(0, 0, 0, 0.75),
      0 20px 40px rgba(0, 0, 0, 0.95);
  }

  .home-section__inner {
    @apply relative;
  }

  .home-section__head {
    @apply flex items-end justify-between gap-3 mb-4;
  }

  .home-section__eyebrow {
      @apply mt-2 inline-block relative font-semibold uppercase tracking-wide2 text-[11px] sm:text-xs;
      color: rgb(var(--accent)); /* jaune skate */
      padding: 0.35rem 0.75rem;

      background: #000;
      border-radius: 4px;

      box-shadow:
        0 2px 0 rgba(0,0,0,0.3),
        0 4px 10px rgba(0,0,0,0.35);

      transform: rotate(-2deg) skewX(-4deg);
  }

  .home-section__eyebrow::after {
    content:"";
    position:absolute;
    inset:0;
    background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px);
    background-size: 3px 3px;
    opacity:.3;
    mix-blend-mode: screen;
    border-radius: inherit;
    pointer-events:none;
  }


  .home-section__title {
    @apply text-2xl sm:text-3xl font-black uppercase tracking-wide2 text-white;
    line-height: 1.15;
  }

 .home-section__title-main {
    @apply text-2xl sm:text-3xl font-extrabold uppercase tracking-wide2;

    color: rgb(var(--accent)); /* gold */
    text-shadow:
      0 0 10px rgb(var(--accent) / 0.25),
      0 2px 0 rgba(0,0,0,0.9);
    margin-bottom: 0.25rem;

    transform: skewX(-2deg);
  }

  /* Sous-titre */
  .home-section__subtitle {
    @apply text-base sm:text-lg font-semibold;

    color: rgba(255,255,255,0.92);
    margin-top: -0.1rem;
    margin-bottom: 0.35rem;
  }

  /* Texte d’aide (hint) */
  .home-section__hint {
    @apply text-xs sm:text-sm leading-snug;

    color: rgba(255,255,255,0.78);
  }

  .home-section__carousel {
    @apply relative flex items-center mt-3;
  }

  .home-section__track-wrap {
    @apply flex-1 overflow-hidden;
  }

  .carousel-track {
    @apply flex gap-4 w-full overflow-x-auto scroll-smooth snap-x snap-mandatory py-2;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .carousel-track::-webkit-scrollbar { display: none; }

  .carousel-card {
    @apply snap-start shrink-0 w-72 max-w-full;
  }

  /* ===== Arrows (on garde ton style actuel) ===== */

  .carousel-arrow {
    @apply inline-flex items-center justify-center
           rounded-full
           h-10 w-10
           text-white
           transition-all duration-200;

    background: #020617;
    border: 1px solid rgba(148,163,184,0.6);
    box-shadow:
      0 2px 0 rgba(0,0,0,0.55),
      0 10px 20px rgba(0,0,0,0.7);
  }

  .carousel-arrow--left  { @apply mr-2; }
  .carousel-arrow--right { @apply ml-2; }

  .carousel-arrow__icon {
    @apply h-5 w-5;
  }

  .carousel-arrow:hover {
    border-color: rgb(var(--accent) / 0.7);
    box-shadow:
      0 0 10px rgb(var(--accent) / 0.25),
      0 3px 0 rgba(0,0,0,0.7),
      0 14px 22px rgba(0,0,0,0.85);
    transform: translateY(-1px);
  }

  .carousel-arrow:disabled {
    @apply opacity-40 cursor-default;
    box-shadow: none;
    border-color: rgba(148,163,184,0.3);
  }

  /* ===== Course card : même “noir + or” que la skater card ===== */

.course-card {
    @apply block relative rounded-2xl p-4 sm:p-5 transition-all duration-300;

    text-decoration: none;
    color: inherit;

    background: linear-gradient(
      155deg,
      #101010 0%,
      #0a0a0a 45%,
      #000 100%
    );

    border: 1px solid rgb(var(--accent) / 0.18);
    box-shadow:
      0 4px 0 rgba(0,0,0,0.45),
      0 18px 32px rgba(0,0,0,0.75);
  }

  .course-card:hover {
    border-color: rgb(var(--accent) / 0.55);
    box-shadow:
      0 0 14px rgb(var(--accent) / 0.25),
      0 6px 0 rgba(0,0,0,0.75),
      0 22px 32px rgba(0,0,0,0.9);
    transform: translateY(-2px);
  }

  .course-card:visited {
    color: inherit;
  }

  .course-card__header {
    @apply flex items-start justify-between gap-3 mb-2;
  }

  .course-card__title {
    @apply text-sm sm:text-base font-extrabold uppercase tracking-wide2 text-white;
  }

  .course-card__meta {
    @apply text-xs text-white/60 mt-0.5;
  }

  .course-card__badge {
    @apply text-[10px] font-black uppercase tracking-wide2 px-2 py-0.5 rounded-md;
    background: rgb(var(--accent) / 0.12);
    color: rgb(var(--accent));
    border: 1px solid rgb(var(--accent) / 0.6);
  }

  .course-card__description {
    @apply mt-2 text-xs sm:text-sm text-white/70 leading-snug;
  }

  .home-section__empty {
    @apply mt-4 text-center text-sm text-white/70;
  }
  /* ========== END course.css ========== */
  /* ===== skater_card.css ===== */
     .guest-skater-card {
    @apply flex justify-center;
  }

  .guest-skater-card__shell {
  @apply relative w-full max-w-xl mx-auto;
  border-radius: 1.5rem;
  padding: 1.2rem 1.4rem 1.3rem;

  background:
    radial-gradient(circle at 0% 0%, rgb(var(--accent) / 0.1), transparent 55%),
    radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.04), transparent 55%),
    radial-gradient(circle at 85% 100%, rgb(var(--accent) / 0.06), transparent 60%),
    linear-gradient(135deg, #18181b 0%, #09090b 45%, #020617 100%);

  /* Légère bordure froide pour bien détacher sur le fond */
  border: 1px solid rgba(148, 163, 184, 0.35);

  /* Ombre plus large + un peu plus soft */
  box-shadow:
    0 5px 0 rgba(0, 0, 0, 0.75),
    0 20px 40px rgba(0, 0, 0, 0.95);

  transform: rotate(-1deg) skewX(-2deg);
  color: #f9fafb;
  overflow: hidden;
}

  /* Filet lumineux le long du bord supérieur */
  .guest-skater-card__shell::before {
    content: "";
    position: absolute;
    left: 10%;
    right: 10%;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgb(var(--accent) / 0.55), transparent);
    pointer-events: none;
  }

  /* Reflet balayant une fois à l'apparition */
  .guest-skater-card__shell::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 38%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: skewX(-20deg) translateX(-150%);
    animation: gos-shine 1.4s ease-out 0.5s 1 both;
    pointer-events: none;
  }

  /* HEADER */
  .guest-skater-card__header {
    @apply relative z-10 flex items-start justify-between gap-3 mb-3;
  }

  .guest-skater-card__score {
    @apply flex-1 flex flex-col items-center justify-center;
  }

  .guest-skater-card__ring {
    position: relative;
    width: 6.5rem;
    height: 6.5rem;
    filter: drop-shadow(0 0 10px rgb(var(--accent) / 0.25));
  }

  .guest-skater-card__ring-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
  }

  .guest-skater-card__overall-unit {
    font-size: 0.5em;
    opacity: 0.75;
    margin-left: 0.08em;
  }

  .guest-skater-card__overall-label {
    @apply text-[9px] sm:text-[10px] uppercase tracking-wide2 text-white/50 mt-1.5;
  }

  /* Score GOLD au centre de l'anneau */
  .guest-skater-card__overall {
    @apply absolute inset-0 flex items-center justify-center
           font-brand text-2xl font-black leading-none;
    color: rgb(var(--accent));
    text-shadow:
      0 0 14px rgb(var(--accent) / 0.45),
      0 2px 0 rgba(0,0,0,1);
  }

  /* Bloc nom + stance, collé au score */
  .guest-skater-card__meta {
    @apply flex flex-col justify-center leading-tight text-right;
  }

  .guest-skater-card__name-header {
    @apply text-lg sm:text-xl font-extrabold uppercase tracking-wide2;
  }

  .guest-skater-card__stance {
    @apply inline-flex items-center rounded-full px-2.5 py-0.5 mt-1
           text-[10px] sm:text-[11px] font-semibold uppercase tracking-wide2 text-white/75;
    border: 1px solid rgba(148, 163, 184, 0.4);
    background: rgba(0, 0, 0, 0.5);
    transform: skewX(-4deg);
  }

  .guest-skater-card__badge {
    @apply shrink-0;
  }

  /* BODY */
  .guest-skater-card__body {
    @apply relative z-10 mt-1 flex items-center gap-4 sm:gap-6 mb-3;
  }

  .guest-skater-card__media {
    @apply flex justify-center sm:justify-start;
  }

  /* Cadre photo bien gold */
 .guest-skater-card__photo-wrap {
  position: relative;
  display: inline-block;
  border-radius: 1rem;
  overflow: hidden;
  background: #000;
    padding: 6px;
}

.guest-skater-card__photo-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;

  background:
    radial-gradient(circle at 50% 30%, rgb(var(--accent) / 0.35), transparent 70%),
    #000;

  border: 2px solid rgb(var(--accent) / 0.9);
  box-shadow:
    0 0 14px rgb(var(--accent) / 0.3),
    0 6px 0 rgba(0,0,0,0.9),
    0 20px 30px rgba(0,0,0,0.95);

  transform: rotate(-4deg) skewX(-4deg);
  transform-origin: center;
  z-index: 0;
}

/* la photo reste droite */
.guest-skater-card__photo {
  position: relative;
  z-index: 1;

  display: block;
  width: 180px;
  height: 180px;
  max-width: 45vw;
  object-fit: cover;
  background: #000;
}


  .guest-skater-card__identity {
    @apply text-left flex-1 min-w-0;
  }

.guest-skater-card__name {
  @apply font-brand text-2xl sm:text-3xl font-extrabold uppercase tracking-wide2 relative;

  color: rgb(var(--accent));
  text-shadow:
    0 0 26px rgb(var(--accent) / 0.4),
    0 0 10px rgb(var(--accent) / 0.3),
    0 2px 0 rgba(0, 0, 0, 0.8);
  animation:
    title-slam 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both,
    title-glow 3s ease-in-out 0.75s infinite;
}

  .guest-skater-card__tagline {
    @apply text-xs sm:text-sm text-white/75 mt-1;
  }

  /* STATS */
  .guest-skater-card__stats {
    @apply relative z-10 mt-2 space-y-1 text-xs;
  }

  .guest-skater-card__stats-row {
    @apply grid grid-cols-3 gap-2;
  }

  .guest-skater-card__stat {
    @apply relative flex flex-col items-center justify-center py-1.5 rounded-md overflow-hidden;
    background:
      radial-gradient(circle at 50% 0%, rgb(var(--accent) / 0.12), transparent 70%),
      rgba(0,0,0,0.8);
    border: 1px solid rgba(148,163,184,0.35);
    box-shadow:
      0 1px 0 rgba(0,0,0,0.8),
      0 6px 10px rgba(0,0,0,0.85);
    transform: skewX(-4deg);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }

  /* Tick accent en haut de chaque tuile */
  .guest-skater-card__stat::before {
    content: "";
    position: absolute;
    top: 0;
    left: 22%;
    right: 22%;
    height: 2px;
    border-radius: 9999px;
    background: linear-gradient(90deg, transparent, rgb(var(--accent) / 0.6), transparent);
    pointer-events: none;
  }

  .guest-skater-card__stat:hover {
    border-color: rgb(var(--accent) / 0.7);
    box-shadow:
      0 1px 0 rgba(0,0,0,0.8),
      0 6px 10px rgba(0,0,0,0.85),
      0 0 12px rgb(var(--accent) / 0.25);
  }

  .guest-skater-card__stat-value {
    @apply font-brand text-base sm:text-lg font-black leading-none;
    color: rgb(var(--accent));
    text-shadow: 0 0 8px rgb(var(--accent) / 0.4);
  }

  .guest-skater-card__stat-unit {
    font-size: 0.6em;
    opacity: 0.75;
    margin-left: 0.05em;
  }

  .guest-skater-card__stat-gauge {
    @apply block w-3/5 rounded-full overflow-hidden mt-1;
    height: 3px;
    background: rgba(148, 163, 184, 0.25);
  }

  .guest-skater-card__stat-gauge-fill {
    @apply block h-full rounded-full;
    background: linear-gradient(90deg, rgb(var(--accent) / 0.7), rgb(var(--accent)));
    box-shadow: 0 0 6px rgb(var(--accent) / 0.5);
  }

  .guest-skater-card__stat-label {
    @apply text-[10px] uppercase tracking-wide2 mt-0.5 text-white/90;
  }

  .guest-skater-card__footer {
    @apply relative z-10 mt-3;
  }

  .guest-skater-card__cta {
    @apply bg-white text-black border border-white font-bold;
    border-radius: 9999px;
    box-shadow:
      0 2px 0 rgba(0,0,0,0.7),
      0 10px 20px rgba(0,0,0,0.8);
    transform: rotate(-1deg) skewX(-3deg);
  }

  .guest-skater-card__cta:hover {
    @apply bg-ink text-white;
  }

  @media (max-width: 640px) {
    .guest-skater-card__shell {
      padding: 1.1rem 1.2rem 1.2rem;
      transform: rotate(-1deg) skewX(-2deg);
    }

    .guest-skater-card__photo {
      width: 150px;
      height: 150px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .guest-skater-card__shell::after,
    .guest-skater-card__name {
      animation: none;
    }
  }
  /* ========== END skater_card.css ========== */

  /* ========== TYBO (Pagy, Tom Select, disabled) ========== */
  .pagy-nav, .pagy-nav-js {
         @apply flex space-x-2;
  }
  .pagy-nav .page a, .pagy-nav .page.active, .pagy-nav .page.prev.disabled, .pagy-nav .page.next.disabled, .pagy-nav-js .page a, .pagy-nav-js .page.active, .pagy-nav-js .page.prev.disabled, .pagy-nav-js .page.next.disabled {
         @apply block rounded-lg px-3 py-1 text-sm font-semibold;
         background:#111827;
         color:#f9fafb;
  }
  .pagy-nav .page a:hover, .pagy-nav .page.active:hover, .pagy-nav .page.prev.disabled:hover, .pagy-nav .page.next.disabled:hover, .pagy-nav-js .page a:hover, .pagy-nav-js .page.active:hover, .pagy-nav-js .page.prev.disabled:hover, .pagy-nav-js .page.next.disabled:hover {
         background:#e11d48;
         color:#fff;
  }
  .pagy-nav .page.prev.disabled, .pagy-nav .page.next.disabled, .pagy-nav-js .page.prev.disabled, .pagy-nav-js .page.next.disabled {
         @apply opacity-60 cursor-default;
    }
     .pagy-combo-nav-js {
         @apply flex max-w-max rounded-full px-3 py-1 text-sm font-semibold bg-slate-900 text-slate-100 shadow-md;
    }
     .pagy-combo-nav-js .pagy-combo-input {
         @apply bg-white px-2 rounded-sm text-ink;
    }
     ts-wrapper {
         @apply w-full !ml-0;
    }
     .ts-control {
         @apply shadow-sm rounded-lg my-5 border-slate-300 bg-white py-2 px-3 text-base;
    }
     .ts-dropdown {
         @apply rounded-md border border-solid border-t border-slate-300 text-base bg-white;
    }
     .ts-dropdown [data-selectable].option:first-child {
         @apply rounded-t-lg;
    }
     .ts-dropdown [data-selectable].option:last-child {
         @apply rounded-b-lg;
    }
     .ts-dropdown .create:hover, .ts-dropdown .option:hover {
         @apply bg-slate-100 text-slate-900;
    }
     .ts-dropdown .active {
         @apply bg-slate-200 text-slate-900;
    }
    .disabled {
         @apply opacity-80 cursor-not-allowed pointer-events-none;
    }
}
 @layer utilities {
     .scrollbar-stable {
         scrollbar-gutter: stable both-edges;
    }

    .pt-safe-top {
      padding-top: env(safe-area-inset-top, 0px);
    }
}

/* ========== LEAFLET MAP ========== */
.leaflet-popup-content-wrapper {
  background: #020617 !important;
  color: #f9fafb !important;
  border: 1px solid rgb(var(--accent) / 0.4) !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 0 rgba(0,0,0,0.6), 0 8px 24px rgba(0, 0, 0, 0.8) !important;
  padding: 0 !important;
}

.leaflet-popup-content {
  margin: 0 !important;
}

.leaflet-popup-tip {
  background: #020617 !important;
}

.leaflet-popup-close-button {
  color: rgb(var(--accent) / 0.6) !important;
  font-size: 18px !important;
  top: 6px !important;
  right: 8px !important;
}

.leaflet-popup-close-button:hover {
  color: rgb(var(--accent)) !important;
}

.cluster-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #020617;
  color: rgb(var(--accent));
  font-size: 13px;
  font-weight: 700;
  font-family: Oswald, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgb(var(--accent) / 0.85);
  box-shadow: 0 0 10px rgb(var(--accent) / 0.25), 0 2px 8px rgba(0, 0, 0, 0.7);
}
/* ========== END LEAFLET MAP ========== */

/* ========== TITRES SLAM (partagé site) ========== */
/* Effet tampon + halo pulsé, à combiner avec font-brand uppercase text-gold */
@keyframes title-slam {
  0% {
    opacity: 0;
    transform: scale(1.9) rotate(-6deg);
    filter: blur(8px);
  }
  55% {
    opacity: 1;
    transform: scale(0.94) rotate(-1.5deg);
    filter: blur(0);
  }
  75% {
    transform: scale(1.04) rotate(-1.5deg);
  }
  100% {
    transform: scale(1) rotate(-1.5deg);
  }
}

@keyframes title-glow {
  0%, 100% {
    text-shadow:
      0 0 26px rgb(var(--accent) / 0.3),
      0 2px 0 rgba(0, 0, 0, 0.6);
  }
  50% {
    text-shadow:
      0 0 55px rgb(var(--accent) / 0.55),
      0 0 18px rgb(var(--accent) / 0.3),
      0 2px 0 rgba(0, 0, 0, 0.6);
  }
}

.title-slam {
  animation:
    title-slam 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both,
    title-glow 3s ease-in-out 0.7s infinite;
}

/* Barre accent inclinée sous le titre */
.title-underline {
  display: block;
  height: 0.25rem;
  width: 6rem;
  margin-top: 0.375rem;
  border-radius: 9999px;
  background: linear-gradient(90deg, rgb(var(--accent)), rgb(var(--accent) / 0.4), transparent);
  transform: skewX(-4deg);
}

.title-underline--center {
  margin-left: auto;
  margin-right: auto;
  background: linear-gradient(90deg, transparent, rgb(var(--accent) / 0.8) 25%, rgb(var(--accent) / 0.8) 75%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .title-slam {
    animation: none !important;
  }
}

/* ========== BOUTON SLAM (partagé site) ========== */
/* Pavé incliné plein accent, à utiliser sur les call to action principaux */
.btn-slam {
  @apply relative isolate inline-flex items-center justify-center gap-2 px-5 py-2
         font-brand text-[13px] font-extrabold uppercase tracking-wide2
         transition-transform duration-150
         focus:outline-none focus-visible:ring-2 focus-visible:ring-gold/70
         focus-visible:ring-offset-2 focus-visible:ring-offset-black;

  color: #020617;
  background: none;
  border: 0;
}

/* Le pavé incliné est dessiné derrière, le contenu reste droit quel que soit le balisage */
.btn-slam::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 0.4rem;
  transform: skewX(-6deg);
  background: linear-gradient(135deg, rgb(var(--accent)), rgb(var(--accent) / 0.85));
  box-shadow:
    0 3px 0 rgba(0, 0, 0, 0.75),
    0 8px 16px rgba(0, 0, 0, 0.55);
}

.btn-slam:hover {
  transform: scale(1.03);
}

.btn-slam:hover::before {
  box-shadow:
    0 3px 0 rgba(0, 0, 0, 0.75),
    0 10px 20px rgba(0, 0, 0, 0.7),
    0 0 16px rgb(var(--accent) / 0.35);
}

.btn-slam:active {
  transform: scale(0.96);
}

.btn-slam--lg {
  @apply px-7 py-3 text-sm;
}

.btn-slam--sm {
  @apply px-4 py-1.5 text-[11px];
}

/* Variante contour, pour une action secondaire au même langage visuel */
.btn-slam--ghost {
  color: rgb(var(--accent));
}

.btn-slam--ghost::before {
  background: #0b0f1a;
  border: 1px solid rgb(var(--accent) / 0.85);
}

/* Variante sobre : annuler, retour, se déconnecter */
.btn-slam--quiet {
  color: rgba(249, 250, 251, 0.9);
}

.btn-slam--quiet::before {
  background: #09090b;
  border: 1px solid rgba(148, 163, 184, 0.45);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.6);
}

.btn-slam--quiet:hover {
  color: rgb(var(--accent));
}

.btn-slam--quiet:hover::before {
  border-color: rgb(var(--accent) / 0.85);
  box-shadow:
    0 3px 0 rgba(0, 0, 0, 0.75),
    0 0 12px rgb(var(--accent) / 0.2);
}

/* Variante refus : même sobriété, signal rouge au survol */
.btn-slam--danger {
  color: rgba(239, 68, 68, 0.85);
}

.btn-slam--danger::before {
  background: rgba(9, 9, 11, 0.8);
  border: 1px solid rgba(220, 38, 38, 0.4);
}

.btn-slam--danger:hover {
  color: #f87171;
}

.btn-slam--danger:hover::before {
  background: rgba(220, 38, 38, 0.1);
  border-color: rgba(220, 38, 38, 0.7);
  box-shadow:
    0 3px 0 rgba(0, 0, 0, 0.75),
    0 0 12px rgba(220, 38, 38, 0.25);
}

/* Variante blanche, pour les connexions tierces qui imposent leur charte */
.btn-slam--white {
  color: #1f1f1f;
}

.btn-slam--white::before {
  background: #ffffff;
  border: 1px solid rgba(31, 31, 31, 0.15);
}

.btn-slam--white:hover::before {
  background: #f2f2f2;
  box-shadow:
    0 3px 0 rgba(0, 0, 0, 0.75),
    0 10px 20px rgba(0, 0, 0, 0.7);
}

/* Variante validation, pour les actions positives non prioritaires */
.btn-slam--success {
  color: #34d399;
}

.btn-slam--success::before {
  background: rgba(9, 9, 11, 0.8);
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.btn-slam--success:hover::before {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.7);
  box-shadow:
    0 3px 0 rgba(0, 0, 0, 0.75),
    0 0 12px rgba(16, 185, 129, 0.25);
}

/* Puce de filtre : même inclinaison que le bouton slam, pour les bascules */
.chip-slam {
  @apply relative isolate inline-flex w-full items-center justify-center gap-2
         px-3 py-2 text-center
         font-brand text-[11px] sm:text-xs font-bold uppercase tracking-wide2
         transition-all duration-150
         focus:outline-none focus-visible:ring-2 focus-visible:ring-gold/70;

  color: rgba(249, 250, 251, 0.85);
}

.chip-slam::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 0.4rem;
  transform: skewX(-6deg);
  background: #09090b;
  border: 1px solid rgba(148, 163, 184, 0.45);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.6);
}

.chip-slam:hover {
  color: rgb(var(--accent));
  transform: translateY(-1px);
}

.chip-slam:hover::before {
  border-color: rgb(var(--accent) / 0.85);
  box-shadow:
    0 3px 0 rgba(0, 0, 0, 0.75),
    0 0 12px rgb(var(--accent) / 0.2);
}

/* État sélectionné : pavé plein, même traitement que .btn-slam.
   La seconde forme couvre les puces pilotées par un input masqué (.peer) */
.chip-slam--active,
.chip-slam--active:hover,
.peer:checked ~ .chip-slam {
  color: #020617;
}

.chip-slam--active::before,
.chip-slam--active:hover::before,
.peer:checked ~ .chip-slam::before {
  background: linear-gradient(135deg, rgb(var(--accent)), rgb(var(--accent) / 0.85));
  border-color: rgb(var(--accent));
  box-shadow:
    0 3px 0 rgba(0, 0, 0, 0.75),
    0 0 14px rgb(var(--accent) / 0.35);
}

/* ========== SOCIAL ========== */

/* Bouton d'action carré des listes (ajouter, accepter, refuser, annuler).
   Même pavé incliné que .btn-slam, remplace les copies de classes inline. */
.icon-slam {
  @apply relative isolate inline-flex items-center justify-center w-10 h-10 shrink-0
         transition-transform duration-150
         focus:outline-none focus-visible:ring-2 focus-visible:ring-gold/70
         focus-visible:ring-offset-2 focus-visible:ring-offset-black;

  color: rgba(226, 232, 240, 0.8);
}

.icon-slam::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 0.4rem;
  transform: skewX(-6deg);
  background: #09090b;
  border: 1px solid rgba(148, 163, 184, 0.4);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.7);
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.icon-slam:hover {
  color: rgb(var(--accent));
  transform: translateY(-1px);
}

.icon-slam:hover::before {
  border-color: rgb(var(--accent) / 0.85);
  box-shadow:
    0 3px 0 rgba(0, 0, 0, 0.8),
    0 0 12px rgb(var(--accent) / 0.25);
}

.icon-slam:active {
  transform: translateY(1px);
}

/* Accepter */
.icon-slam--go {
  color: #6ee7b7;
}

.icon-slam--go::before {
  border-color: rgba(52, 211, 153, 0.55);
}

.icon-slam--go:hover {
  color: #a7f3d0;
}

.icon-slam--go:hover::before {
  border-color: rgba(52, 211, 153, 0.9);
  background: rgba(6, 78, 59, 0.35);
  box-shadow:
    0 3px 0 rgba(0, 0, 0, 0.8),
    0 0 12px rgba(52, 211, 153, 0.3);
}

/* En attente : contour pointillé plutôt qu'une couleur, qui entrerait en
   conflit avec l'accent doré du thème par défaut. */
.icon-slam--wait {
  color: rgba(203, 213, 225, 0.7);
}

.icon-slam--wait::before {
  border-style: dashed;
  border-color: rgba(148, 163, 184, 0.55);
}

.icon-slam--wait:hover {
  color: #fca5a5;
}

.icon-slam--wait:hover::before {
  border-style: solid;
  border-color: rgba(248, 113, 113, 0.8);
  background: rgba(127, 29, 29, 0.3);
  box-shadow:
    0 3px 0 rgba(0, 0, 0, 0.8),
    0 0 12px rgba(248, 113, 113, 0.25);
}

/* Refuser, supprimer */
.icon-slam--danger {
  color: #fca5a5;
}

.icon-slam--danger::before {
  border-color: rgba(248, 113, 113, 0.5);
}

.icon-slam--danger:hover {
  color: #fecaca;
}

.icon-slam--danger:hover::before {
  border-color: rgba(248, 113, 113, 0.9);
  background: rgba(127, 29, 29, 0.35);
  box-shadow:
    0 3px 0 rgba(0, 0, 0, 0.8),
    0 0 12px rgba(248, 113, 113, 0.28);
}

/* Compteur accolé aux titres de section */
.count-slam {
  @apply relative isolate inline-flex items-center justify-center px-2.5 py-0.5 align-middle
         font-brand text-[11px] font-bold uppercase tracking-wide2;

  color: #050608;
}

.count-slam::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 0.3rem;
  transform: skewX(-6deg);
  background: linear-gradient(135deg, rgb(var(--accent)), rgb(var(--accent) / 0.85));
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.7);
}

.count-slam--quiet {
  color: rgba(226, 232, 240, 0.75);
}

.count-slam--quiet::before {
  background: #09090b;
  border: 1px solid rgba(148, 163, 184, 0.4);
}

/* Champ de recherche des écrans sociaux */
.input-slam {
  @apply block w-full rounded-xl border border-slateglass bg-night-900/80
         px-3 py-2.5 ps-9 text-sm text-inkwhite
         placeholder:text-inkwhite/40 outline-none transition
         focus:ring-2 focus:ring-gold/40 focus:border-gold-strong;

  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.6);
}

.input-slam:hover {
  border-color: rgba(148, 163, 184, 0.5);
}

.input-slam-icon {
  @apply pointer-events-none absolute inset-y-0 left-3 flex items-center text-inkwhite/40;
}

/* État vide : cadre pointillé incliné, pictogramme, message et action */
.social-empty {
  @apply relative isolate flex flex-col items-center justify-center gap-3
         px-6 py-10 text-center;
}

.social-empty::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 0.9rem;
  border: 1px dashed rgba(148, 163, 184, 0.28);
  background:
    radial-gradient(70% 90% at 50% -10%, rgb(var(--accent) / 0.09), transparent 68%),
    rgba(2, 6, 23, 0.55);
  transform: skewX(-3deg);
}

.social-empty__icon {
  @apply relative isolate grid place-items-center w-12 h-12;
  color: rgb(var(--accent));
}

.social-empty__icon::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 0.5rem;
  transform: skewX(-6deg);
  background: #09090b;
  border: 1px solid rgb(var(--accent) / 0.5);
  box-shadow:
    0 3px 0 rgba(0, 0, 0, 0.8),
    0 0 16px rgb(var(--accent) / 0.18);
}

.social-empty__title {
  @apply font-brand text-sm font-bold uppercase tracking-wide2 text-inkwhite;
}

.social-empty__text {
  @apply max-w-xs text-xs leading-relaxed text-inkwhite/55;
}

/* ========== MESSAGERIE ========== */

/* Barres haute et basse de la conversation : même éclairage de bord que la dock,
   la lumière vient de l'arête, aucun motif. */
.chat-bar {
  @apply shrink-0 px-3 backdrop-blur;
  background:
    radial-gradient(80% 140% at 20% -20%, rgb(var(--accent) / 0.07), transparent 65%),
    rgba(3, 5, 12, 0.96);
}

.chat-bar--top {
  @apply py-2 border-b border-slateglass;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.chat-bar--bottom {
  @apply py-3 border-t border-slateglass;
  background:
    radial-gradient(85% 140% at 50% 130%, rgb(var(--accent) / 0.09), transparent 70%),
    rgba(3, 5, 12, 0.96);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Champ de saisie */
.chat-input {
  @apply w-full resize-none overflow-hidden rounded-2xl border border-slateglass
         bg-night-900/90 px-4 py-2.5 text-[14px] text-inkwhite
         placeholder:text-inkwhite/40 outline-none transition
         focus:ring-2 focus:ring-gold/35 focus:border-gold-strong;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Bouton d'envoi : pavé d'accent incliné, même langage que .btn-slam */
.chat-send {
  @apply relative isolate inline-flex h-11 w-12 shrink-0 items-center justify-center
         transition-transform duration-150
         focus:outline-none focus-visible:ring-2 focus-visible:ring-gold/70
         focus-visible:ring-offset-2 focus-visible:ring-offset-black;

  color: #050608;
}

.chat-send::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 0.45rem;
  transform: skewX(-6deg);
  background: linear-gradient(135deg, rgb(var(--accent)), rgb(var(--accent) / 0.82));
  box-shadow:
    0 3px 0 rgba(0, 0, 0, 0.75),
    0 8px 16px rgba(0, 0, 0, 0.5);
  transition: box-shadow .15s ease;
}

.chat-send:hover {
  transform: translateY(-1px);
}

.chat-send:hover::before {
  box-shadow:
    0 4px 0 rgba(0, 0, 0, 0.8),
    0 10px 20px rgba(0, 0, 0, 0.6),
    0 0 16px rgb(var(--accent) / 0.35);
}

.chat-send:active {
  transform: translateY(1px);
}

/* Bulles : l'accent identifie l'auteur, le neutre identifie l'interlocuteur.
   Les modificateurs sont posés par chat_subscription_controller.js. */
/* Le style neutre est le défaut : la bulle est déjà présentable avant que
   Stimulus ne pose le modificateur, donc pas de flash au chargement. */
.chat-bubble {
  @apply inline-block rounded-2xl px-4 py-3 text-[14px] leading-snug;
  background: linear-gradient(135deg, #0c111d 0%, #070a12 100%);
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-bottom-left-radius: 0.35rem;
  box-shadow:
    0 2px 0 rgba(0, 0, 0, 0.5),
    0 6px 14px rgba(0, 0, 0, 0.45);
}

.chat-bubble--mine {
  background:
    linear-gradient(135deg, rgb(var(--accent) / 0.18), rgb(var(--accent) / 0.07));
  border-color: rgb(var(--accent) / 0.45);
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 0.35rem;
}

.chat-bubble--mine .name-label {
  color: rgb(var(--accent));
}

.chat-bubble--mine .time-label {
  color: rgba(226, 232, 240, 0.6);
}

.chat-bubble--other {
  background: linear-gradient(135deg, #0c111d 0%, #070a12 100%);
  border-color: rgba(148, 163, 184, 0.28);
  border-bottom-left-radius: 0.35rem;
  box-shadow:
    0 2px 0 rgba(0, 0, 0, 0.5),
    0 6px 14px rgba(0, 0, 0, 0.45);
}

.chat-bubble--other .name-label {
  color: rgba(226, 232, 240, 0.9);
}

.chat-bubble--other .time-label {
  color: rgba(226, 232, 240, 0.5);
}

/* Conversation non lue dans la liste */
.row-item--unread::before {
  background: rgb(var(--accent));
  box-shadow: 0 0 10px rgb(var(--accent) / 0.6);
}

.chat-dot {
  @apply inline-block h-2.5 w-2.5 shrink-0 rounded-full;
  background: rgb(var(--accent));
  box-shadow: 0 0 8px rgb(var(--accent) / 0.7);
}

@media (prefers-reduced-motion: reduce) {
  .btn-slam:hover,
  .btn-slam:active,
  .chip-slam:hover,
  .icon-slam:hover,
  .icon-slam:active,
  .chat-send:hover,
  .chat-send:active {
    transform: none;
  }
}

/* ========== GAME OF SKATE ========== */
dialog.gos-dialog[open] {
  display: flex;
  flex-direction: column;
}

/* Fond d'ambiance : halos accent + trame de points */
.gos-ambiance {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 85% 55% at 50% -12%, rgb(var(--accent) / 0.13), transparent 62%),
    radial-gradient(ellipse 60% 45% at 12% 112%, rgb(var(--accent) / 0.07), transparent 60%),
    radial-gradient(ellipse 55% 40% at 92% 88%, rgba(148, 163, 184, 0.06), transparent 60%);
}

.gos-ambiance::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(148, 163, 184, 0.35) 1px, transparent 1.4px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 18%, black, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 55% at 50% 18%, black, transparent 75%);
  opacity: 0.14;
}

/* Entrées en scène décalées */
@keyframes gos-rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

.gos-rise {
  animation: gos-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.gos-d1 { animation-delay: 0.05s; }
.gos-d2 { animation-delay: 0.15s; }
.gos-d3 { animation-delay: 0.25s; }
.gos-d4 { animation-delay: 0.35s; }
.gos-d5 { animation-delay: 0.45s; }
.gos-d6 { animation-delay: 0.55s; }

/* Bande accent inclinée derrière le trick */
.gos-tape {
  position: absolute;
  left: -8%;
  right: -8%;
  top: 56%;
  height: 0.55em;
  background: linear-gradient(90deg, transparent, rgb(var(--accent) / 0.22) 20%, rgb(var(--accent) / 0.22) 80%, transparent);
  transform: skewX(-12deg);
  filter: blur(2px);
  z-index: -1;
}

/* Pastilles d'essais */
@keyframes gos-pip-in {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  70% {
    transform: scale(1.3);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.gos-pip {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 9999px;
  background: rgb(var(--accent) / 0.9);
  box-shadow:
    0 0 10px rgb(var(--accent) / 0.5),
    0 1px 0 rgba(0, 0, 0, 0.5);
  animation: gos-pip-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.gos-pip:nth-child(1) { animation-delay: 0.55s; }
.gos-pip:nth-child(2) { animation-delay: 0.65s; }
.gos-pip:nth-child(3) { animation-delay: 0.75s; }
.gos-pip:nth-child(4) { animation-delay: 0.85s; }
.gos-pip:nth-child(5) { animation-delay: 0.95s; }
.gos-pip:nth-child(6) { animation-delay: 1.05s; }

/* Glows colorés sur les boutons de résultat */
.gos-btn-success:hover {
  box-shadow:
    0 3px 0 rgba(0, 0, 0, 0.75),
    0 10px 18px rgba(0, 0, 0, 0.9),
    0 0 26px rgba(16, 185, 129, 0.28);
}

.gos-btn-almost:hover {
  box-shadow:
    0 3px 0 rgba(0, 0, 0, 0.75),
    0 10px 18px rgba(0, 0, 0, 0.9),
    0 0 26px rgb(var(--accent) / 0.3);
}

.gos-btn-fail:hover {
  box-shadow:
    0 3px 0 rgba(0, 0, 0, 0.75),
    0 10px 18px rgba(0, 0, 0, 0.9),
    0 0 26px rgba(220, 38, 38, 0.28);
}

/* Reflet balayant sur les CTA */
@keyframes gos-shine {
  0% {
    transform: skewX(-20deg) translateX(-130%);
  }
  45%, 100% {
    transform: skewX(-20deg) translateX(500%);
  }
}

.gos-shine {
  position: relative;
  overflow: hidden;
}

.gos-shine::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 32%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.16), transparent);
  transform: skewX(-20deg) translateX(-130%);
  animation: gos-shine 3.4s ease-in-out 1.2s infinite;
  pointer-events: none;
}

/* Anneau de score animé */
@keyframes gos-ring {
  from {
    stroke-dashoffset: 339.29;
  }
}

.gos-ring {
  stroke-dashoffset: var(--gos-ring-offset, 339.29);
  animation: gos-ring 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both;
}

/* Halo circulaire derrière l'anneau de score */
.gos-ring-halo {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: radial-gradient(circle closest-side, transparent 68%, rgb(var(--accent) / 0.3) 90%, transparent 100%);
  filter: blur(8px);
  pointer-events: none;
}

/* Stagger des lignes du résumé */
.gos-stagger > * {
  animation: gos-rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.gos-stagger > :nth-child(1) { animation-delay: 0.1s; }
.gos-stagger > :nth-child(2) { animation-delay: 0.16s; }
.gos-stagger > :nth-child(3) { animation-delay: 0.22s; }
.gos-stagger > :nth-child(4) { animation-delay: 0.28s; }
.gos-stagger > :nth-child(5) { animation-delay: 0.34s; }
.gos-stagger > :nth-child(6) { animation-delay: 0.4s; }
.gos-stagger > :nth-child(7) { animation-delay: 0.46s; }
.gos-stagger > :nth-child(n+8) { animation-delay: 0.52s; }

/* ---------- Habillage borne d'arcade ---------- */

/* Scanlines + vignette, posées au-dessus du contenu, jamais cliquables.
   Lignes claires : sur un fond quasi noir, un voile sombre ne se verrait pas */
.gos-crt {
  position: fixed;
  inset: 0;
  z-index: 45;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.035) 0 1px,
      transparent 1px 3px
    ),
    radial-gradient(ellipse 115% 85% at 50% 50%, transparent 58%, rgba(0, 0, 0, 0.45) 100%);
}

/* Balayage lent d'un halo horizontal, comme un tube qui rafraîchit */
@keyframes gos-scan {
  from {
    transform: translateY(-25%);
  }
  to {
    transform: translateY(125%);
  }
}

.gos-crt::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 22%;
  background: linear-gradient(to bottom, transparent, rgba(var(--accent), 0.05), transparent);
  animation: gos-scan 7s linear infinite;
}

/* Marquee de borne : le bandeau titre */
.gos-marquee {
  position: relative;
  isolation: isolate;
}

/* Titre néon : halo dense plus micro-scintillement */
@keyframes gos-neon {
  0%, 92%, 100% {
    opacity: 1;
  }
  93% {
    opacity: 0.72;
  }
  95% {
    opacity: 1;
  }
  96% {
    opacity: 0.85;
  }
}

.gos-neon {
  color: rgb(var(--accent));
  text-shadow:
    0 0 4px rgb(var(--accent) / 0.9),
    0 0 18px rgb(var(--accent) / 0.55),
    0 0 42px rgb(var(--accent) / 0.35),
    0 3px 0 rgba(0, 0, 0, 0.8);
  animation: gos-neon 6s linear 1s infinite;
}

/* Panneau HUD : équerres dans les angles */
.gos-panel {
  @apply relative rounded-2xl md:rounded-3xl p-4 md:p-6;
  background: #0d1017;
  border: 1px solid rgb(var(--accent) / 0.22);
  box-shadow:
    0 2px 0 rgba(0, 0, 0, 0.6),
    0 8px 20px rgba(0, 0, 0, 0.75),
    inset 0 0 24px rgb(var(--accent) / 0.05);
}

.gos-panel::before,
.gos-panel::after {
  content: "";
  position: absolute;
  width: 0.9rem;
  height: 0.9rem;
  border: 2px solid rgb(var(--accent) / 0.7);
  pointer-events: none;
}

.gos-panel::before {
  top: 0.55rem;
  left: 0.55rem;
  border-right: 0;
  border-bottom: 0;
}

.gos-panel::after {
  bottom: 0.55rem;
  right: 0.55rem;
  border-left: 0;
  border-top: 0;
}

.gos-panel__tag {
  @apply font-brand text-[10px] uppercase tracking-[0.2em];
  color: rgb(var(--accent) / 0.55);
}

/* Modale règles : même vocabulaire que les panneaux HUD */
.gos-dialog {
  background: #0d1017;
  border: 1px solid rgb(var(--accent) / 0.28);
  box-shadow:
    0 2px 0 rgba(0, 0, 0, 0.6),
    0 22px 48px rgba(0, 0, 0, 0.85),
    inset 0 0 30px rgb(var(--accent) / 0.05);
}

.gos-dialog__head {
  @apply relative flex items-center justify-between gap-3 px-5 py-4 shrink-0 overflow-hidden;
  border-bottom: 1px solid rgb(var(--accent) / 0.22);
  background: linear-gradient(to bottom, rgb(var(--accent) / 0.09), transparent);
}

/* Scanlines dans l'entête, comme le fronton de la page */
.gos-dialog__head::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.04) 0 1px,
    transparent 1px 3px
  );
}

/* Titre de section numéroté */
.gos-rule__num {
  @apply font-brand text-[10px] uppercase tracking-[0.2em];
  color: rgb(var(--accent) / 0.55);
}

.gos-rule__title {
  @apply font-brand text-xs uppercase tracking-wide2 text-inkwhite/80;
}

/* Étiquette de résultat inclinée, couleur portée par la variante */
.gos-tag {
  @apply relative isolate inline-flex shrink-0 items-center gap-1 px-2 py-0.5
         font-brand text-[10px] uppercase tracking-wide2;
}

.gos-tag::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 0.2rem;
  transform: skewX(-6deg);
  border: 1px solid currentColor;
  background: rgba(9, 9, 11, 0.75);
  opacity: 0.9;
}

.gos-tag--success { color: #34d399; }
.gos-tag--almost  { color: rgb(var(--accent)); }
.gos-tag--fail    { color: #f87171; }
.gos-tag--muted   { color: rgba(249, 250, 251, 0.5); }

/* Afficheur chiffré, façon compteur de borne */
.gos-readout {
  @apply relative isolate inline-flex items-center justify-center min-w-[2.75rem] px-2.5 py-1
         font-brand text-2xl font-extrabold leading-none;
  color: rgb(var(--accent));
  text-shadow: 0 0 10px rgb(var(--accent) / 0.55);
}

.gos-readout::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 0.3rem;
  transform: skewX(-6deg);
  background: rgba(9, 9, 11, 0.85);
  border: 1px solid rgb(var(--accent) / 0.55);
  box-shadow:
    0 2px 0 rgba(0, 0, 0, 0.6),
    inset 0 0 12px rgb(var(--accent) / 0.15);
}

/* Jauge de difficulté d'un niveau, en segments */
.gos-gauge {
  @apply inline-flex items-center gap-[2px];
}

.gos-gauge__seg {
  width: 0.25rem;
  height: 0.5rem;
  background: currentColor;
  opacity: 0.25;
  transform: skewX(-6deg);
}

.gos-gauge__seg--on {
  opacity: 1;
}

/* Invite clignotante façon « press start » */
@keyframes gos-blink {
  0%, 49% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0.15;
  }
}

.gos-blink {
  animation: gos-blink 1.1s steps(1, end) infinite;
}

/* Reflet balayant contenu dans le pavé incliné du bouton */
@keyframes btn-slam-shine {
  0% {
    background-position: -60% 0, 0 0;
  }
  45%, 100% {
    background-position: 160% 0, 0 0;
  }
}

.btn-slam--shine::before {
  background-image:
    linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.4) 50%, transparent 58%),
    linear-gradient(135deg, rgb(var(--accent)), rgb(var(--accent) / 0.85));
  background-size: 220% 100%, 100% 100%;
  background-repeat: no-repeat;
  animation: btn-slam-shine 3.4s ease-in-out 1.2s infinite;
}

@media (prefers-reduced-motion: reduce) {
  .gos-rise,
  .gos-pip,
  .gos-ring,
  .gos-stagger > *,
  .gos-shine::after,
  .gos-crt::after,
  .gos-neon,
  .gos-blink,
  .btn-slam--shine::before {
    animation: none !important;
  }

  .gos-ring {
    stroke-dashoffset: var(--gos-ring-offset, 0);
  }
}


@supports (field-sizing: content) {
  [data-controller~="auto-resize-textarea"] {
    field-sizing: content;
  }
}

/* ========== MASTERY UNLOCK (passage du seuil de maîtrise) ========== */
.mastery-unlock {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  cursor: pointer;
  background: rgba(2, 6, 23, 0.72);
  backdrop-filter: blur(6px);
  animation: mastery-unlock-fade 0.25s ease-out both;
}

.mastery-unlock--out {
  animation: mastery-unlock-fade 0.3s ease-in reverse forwards;
}

@keyframes mastery-unlock-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Halo d'accent derrière la carte */
.mastery-unlock__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle 42vmin at 50% 50%, rgb(var(--accent) / 0.22), transparent 70%),
    radial-gradient(circle 70vmin at 50% 50%, rgb(var(--accent) / 0.08), transparent 75%);
  animation: mastery-unlock-pulse 1.6s ease-out both;
}

@keyframes mastery-unlock-pulse {
  0%   { opacity: 0; transform: scale(0.4); }
  40%  { opacity: 1; transform: scale(1.05); }
  100% { opacity: 0.75; transform: scale(1); }
}

/* Carte */
.mastery-unlock__card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  max-width: 26rem;
  padding: 1.75rem 1.5rem;
  text-align: center;
  border-radius: 1rem;
  border: 1px solid rgb(var(--accent) / 0.85);
  background:
    radial-gradient(circle at 50% 0%, rgb(var(--accent) / 0.16), transparent 60%),
    linear-gradient(135deg, #18181b 0%, #09090b 45%, #020617 100%);
  box-shadow:
    0 3px 0 rgba(0, 0, 0, 0.75),
    0 18px 40px rgba(0, 0, 0, 0.9),
    0 0 60px rgb(var(--accent) / 0.28);
  animation: mastery-unlock-slam 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both;
}

@keyframes mastery-unlock-slam {
  0% {
    opacity: 0;
    transform: scale(1.55) rotate(-7deg);
    filter: blur(10px);
  }
  55% {
    opacity: 1;
    transform: scale(0.95) rotate(-1deg);
    filter: blur(0);
  }
  78% {
    transform: scale(1.03) rotate(-1deg);
  }
  100% {
    transform: scale(1) rotate(-1deg);
  }
}

/* Rayons tournants */
.mastery-unlock__rays {
  position: absolute;
  inset: -60%;
  z-index: -1;
  pointer-events: none;
  opacity: 0.35;
  background: repeating-conic-gradient(
    from 0deg,
    rgb(var(--accent) / 0.22) 0deg 6deg,
    transparent 6deg 18deg
  );
  mask-image: radial-gradient(circle closest-side, rgba(0, 0, 0, 0.9) 20%, transparent 72%);
  animation: mastery-unlock-rays 14s linear infinite;
}

@keyframes mastery-unlock-rays {
  to { transform: rotate(360deg); }
}

.mastery-unlock__kicker,
.mastery-unlock__title,
.mastery-unlock__underline,
.mastery-unlock__phrase,
.mastery-unlock__level {
  animation: mastery-unlock-rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.mastery-unlock__kicker   { animation-delay: 0.3s; }
.mastery-unlock__title    { animation-delay: 0.38s; }
.mastery-unlock__underline { animation-delay: 0.46s; }
.mastery-unlock__phrase   { animation-delay: 0.54s; }
.mastery-unlock__level    { animation-delay: 0.62s; }

@keyframes mastery-unlock-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.mastery-unlock__kicker {
  display: inline-block;
  padding: 0.3rem 0.85rem;
  border-radius: 9999px;
  border: 1px solid rgb(var(--accent) / 0.85);
  background: rgb(var(--accent) / 0.14);
  color: rgb(var(--accent));
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transform: skewX(-4deg);
}

.mastery-unlock__title {
  margin-top: 0.85rem;
  color: rgb(var(--accent));
  font-size: clamp(1.6rem, 8vw, 2.25rem);
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-shadow: 0 0 30px rgb(var(--accent) / 0.45), 0 2px 0 rgba(0, 0, 0, 0.7);
}

.mastery-unlock__underline {
  display: block;
  height: 0.25rem;
  width: 5rem;
  margin: 0.55rem auto 0;
  border-radius: 9999px;
  background: linear-gradient(90deg, transparent, rgb(var(--accent) / 0.85) 25%, rgb(var(--accent) / 0.85) 75%, transparent);
  transform: skewX(-4deg);
}

.mastery-unlock__phrase {
  margin-top: 1rem;
  color: #f9fafb;
  font-size: 0.9rem;
  line-height: 1.45;
}

.mastery-unlock__level {
  margin-top: 0.75rem;
  color: rgba(226, 232, 240, 0.75);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.mastery-unlock__pct {
  color: rgb(var(--accent));
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .mastery-unlock,
  .mastery-unlock__glow,
  .mastery-unlock__card,
  .mastery-unlock__rays,
  .mastery-unlock__kicker,
  .mastery-unlock__title,
  .mastery-unlock__underline,
  .mastery-unlock__phrase,
  .mastery-unlock__level {
    animation: none !important;
  }

  .mastery-unlock__card {
    transform: rotate(-1deg);
  }
}

/* ========== ÉTAT "MAÎTRISÉ" DANS LA BARRE DE MAÎTRISE ========== */
.mastery-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
  border: 1px solid rgb(var(--accent) / 0.85);
  background: rgb(var(--accent) / 0.14);
  color: rgb(var(--accent));
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
  transform: skewX(-4deg);
}