@tailwind base;
@tailwind components;
@tailwind utilities;
/* ========== 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;
  }

  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{
    @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;
  }
  /* tricks_tabs.css */

  /* ===== Barre sticky ===== */
  .tricks-tabs {
    @apply sticky top-0 z-30 -mx-4 px-4 mb-4;
    padding-top: 0.35rem;
    padding-bottom: 0.6rem;

    /* FULL OPAQUE -> plus jamais translucide */
    background: #05060a;

    border-bottom: 1px solid rgba(15, 23, 42, 0.8);
    box-shadow: 0 6px 18px rgba(0,0,0,0.9);
  }


  /* ════════════════════════════════════════════
     SLASHED TAB BASE STRUCTURE
     (forme identique à la version d’avant)
     ════════════════════════════════════════════ */

  .tab-slashed {
    @apply relative block text-center py-3 px-2 select-none;
  }

  .tab-slashed__bg {
    @apply absolute inset-0 rounded-xl;
    clip-path: polygon(6% 0, 94% 0, 100% 100%, 0 100%);
    z-index: 0;
  }

  .tab-slashed__label {
    @apply relative z-10 font-semibold uppercase tracking-wide2 text-sm;
  }


  /* ════════════════════════════════════════════
     ÉTAT INACTIF — version améliorée
     (fond sombre lisible, jamais blanc)
     ════════════════════════════════════════════ */

  .tricks-tabs .tab-slashed--inactive {
    @apply text-slate-300;
  }

  .tricks-tabs .tab-slashed--inactive .tab-slashed__bg {
    background:
      radial-gradient(circle at 0% 0%, rgba(255,255,255,0.04), transparent 55%),
      #0b0c12;
    border: 1px solid rgba(148,163,184,0.35);

    box-shadow:
      0 1px 0 rgba(0,0,0,0.7),
      0 6px 10px rgba(0,0,0,0.75);

    transition:
      border-color 0.15s ease,
      box-shadow 0.15s ease,
      transform 0.15s ease;
  }

  .tricks-tabs .tab-slashed--inactive:hover .tab-slashed__bg {
    background:
      radial-gradient(circle at 0% 0%, rgba(250,204,21,0.15), transparent 65%),
      #0e1017; 
    border-color: rgba(250,204,21,0.65);
    box-shadow:
      0 2px 0 rgba(0,0,0,0.85),
      0 10px 18px rgba(0,0,0,0.95);
  }

  .tricks-tabs .tab-slashed--inactive:hover {
    color: #f8fafc; /* blanc propre */
  }

  .tricks-tabs .tab-slashed--inactive:hover .tab-slashed__label {
    color: #f8fafc;
  }
  .tricks-tabs .tab-slashed--active {
    @apply text-white;
  }

  .tricks-tabs .tab-slashed--active .tab-slashed__bg {
    background: linear-gradient(
      135deg,
      #facc15 0%,
      #eab308 35%,
      #111827 100%
    );

    border: 1px solid rgba(250, 204, 21, 0.9);

    box-shadow:
      0 3px 0 rgba(0,0,0,0.9),
      0 12px 22px rgba(0,0,0,1);
  }
   .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: #facc15;
    text-shadow:
      0 0 6px rgba(250,204,21,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: rgba(250,204,21,0.55);
    box-shadow:
      0 0 12px rgba(250,204,21,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: #facc15; /* gold */
  }

  .star {
    @apply w-4 h-4;
  }
  /* ========== END tricks_tabs.css ========== */
  /* tricks_pages.css */
    .trick-filter-card {
    @apply rounded-2xl p-6 md:p-8 space-y-4 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-yellow-500/40 focus:border-yellow-500/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: rgba(250,204,21,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: #facc15;
    background:
      radial-gradient(circle at 0% 0%, rgba(250,204,21,0.18), transparent 55%),
      linear-gradient(135deg, #020617 0%, #020617 40%, #111827 100%);
    border: 1px solid rgba(250,204,21,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: #facc15;
    text-shadow:
      0 0 6px rgba(250,204,21,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: #facc15;
  }
  /* ========== 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 grid grid-cols-[auto,1fr,auto] items-center gap-3;
    @apply px-3 py-3 min-h-16 rounded-2xl;
    @apply border border-slateglass bg-night-800/80;
    @apply shadow-doack transition-all duration-150;
  }

  .row-item:hover {
    transform: translateY(-2px);
    border-color: rgba(250,204,21,0.85);
    box-shadow:
      0 0 12px rgba(250,204,21,0.22),
      0 6px 0 rgba(0,0,0,0.75),
      0 22px 32px rgba(0,0,0,0.9);
  }

  .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;
    position: relative;
    overflow: hidden;
    background-color: #020617; /* fond uniforme pour tout le reste */
  }

  .shell-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    /* même gradient que tes trick-cards, mais limité en hauteur */
    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%);
    background-size: 100% 260px;      /* hauteur fixe du “cap” */
    background-repeat: no-repeat;
  }

  /* le contenu passe au-dessus du ::before */
  .shell-card > * {
    position: relative;
    z-index: 1;
  }

  /* Optionnel : hover subtil (pas gold, pas agressif) */
  .shell-card:hover {
    border-color: rgba(148,163,184,0.5);
    box-shadow:
      0 6px 0 rgba(0,0,0,0.75),
      0 22px 34px rgba(0,0,0,0.9);
    transform: translateY(-1px);
  }
  /* ========== END panel_card.css ========== */

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

    background: linear-gradient(
      to bottom,
      rgba(5, 6, 10, 0.98) 0%,
      rgba(5, 6, 10, 0.96) 40%,
      transparent 100%
    );
    border-bottom: 1px solid rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(10px);
  }

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

  /* Marque / logo */

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

  .site-header__brand img {
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.7));
  }

  /* Utilisateur connecté */

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

  .site-header__user-name {
    @apply text-sm text-slate-100;
  }

  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);
  }

  .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: #facc15;
  }

  /* 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));
  }

  .dock {
    @apply fixed bottom-0 inset-x-0 z-50;
    background:
      radial-gradient(circle at 50% 0%, rgba(15,23,42,0.7), transparent 55%),
      linear-gradient(to top, #020617 0%, #020617 45%, #02040a 100%);
    box-shadow:
      0 -1px 0 rgba(0,0,0,0.7) inset,
      0 -10px 26px 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.4) 20%,
      rgba(148,163,184,0.6) 50%,
      rgba(148,163,184,0.4) 80%,
      transparent 100%
    );
    pointer-events: none;
  }

  .dock__list {
    @apply grid grid-cols-5 text-[11px] relative;
    height: var(--dock-h);
  }

  @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 tracking-wide2;
    text-rendering: optimizeLegibility;
    color: rgba(209,213,219,0.85);
    transition: color .16s ease, opacity .16s ease, transform .12s ease;
  }

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

  .dock__link--active {
    color: #facc15;
    font-weight: 600;
  }

  .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: #facc15; /* gold */
    filter: drop-shadow(0 0 4px rgba(250,204,21,0.4));
    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;
    box-shadow:
      0 0 10px rgba(220,38,38,0.6),
      0 2px 6px rgba(0,0,0,0.7);
  }

  /* Fond slashed derrière l’onglet actif */
 .dock__bg {
    content: "";
    position: absolute;
    z-index: -1;              /* <== IMPORTANT : passe derrière le contenu */
    top: 6px;
    bottom: 6px;
    left: 8px;
    right: 8px;
    border-radius: 10px;
    border: 1px solid rgba(250,204,21,0.7);
    background:
      radial-gradient(circle at 0% 0%, rgba(250,204,21,0.18), transparent 55%),
      radial-gradient(circle at 100% 100%, rgba(250,250,250,0.12), transparent 55%),
      linear-gradient(135deg,#020617 0%,#020617 40%,#0b1120 100%);
    box-shadow:
      0 2px 0 rgba(0,0,0,0.7),
      0 8px 18px rgba(0,0,0,0.85);
    transform: rotate(-2deg) skewX(-6deg);
    animation: dock-fadeonly .14s ease-out both;
  }

  /* 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: 10px;
    bottom: 10px;
    left: 12px;
    right: 12px;
    border-radius: 10px;
    border: 1px solid rgba(148,163,184,0.4);
    transform: rotate(-2deg) skewX(-6deg);
    clip-path: polygon(6% 0, 94% 0, 100% 100%, 0 100%);
  }


  @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 {
    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: #facc15; /* 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: #facc15; /* gold */
    text-shadow:
      0 0 10px rgba(250, 204, 21, 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: rgba(250,204,21,0.7);
    box-shadow:
      0 0 10px rgba(250,204,21,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 rgba(250, 204, 21, 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: rgba(250, 204, 21, 0.55);
    box-shadow:
      0 0 14px rgba(250,204,21,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: rgba(250,204,21,0.12);
    color: #facc15;
    border: 1px solid rgba(250,204,21,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%, 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%);

  /* 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;
}

  /* bandeau oblique */
  .guest-skater-card__slash {
    position: absolute;
    inset: 14% -22%;
    background: rgba(0,0,0,0.26);
    transform: rotate(-6deg);
    clip-path: polygon(0 0, 100% 0, 92% 100%, 8% 100%);
    pointer-events: none;
  }

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

  .guest-skater-card__rating {
    @apply flex items-start gap-2;
  }

  /* Score GOLD */
  .guest-skater-card__overall {
    @apply text-4xl sm:text-5xl font-black leading-none;
    color: #facc15;
    text-shadow:
      0 0 6px rgba(250,204,21,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 text-[11px] sm:text-xs text-white/70 mt-0.5;
  }

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

  /* BODY */
  .guest-skater-card__body {
    @apply relative z-10 mt-1 flex flex-col sm:flex-row sm: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 {
    @apply inline-block rounded-xl overflow-hidden;
    background:
      radial-gradient(circle at 50% 30%, rgba(250,204,21,0.35), transparent 70%),
      #000;
    border: 2px solid rgba(250,204,21,0.9);
    box-shadow:
      0 0 14px rgba(250,204,21,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);
  }

  .guest-skater-card__photo {
    display: block;
    width: 180px;
    height: 180px;
    max-width: 45vw;
    object-fit: cover;
  }

  .guest-skater-card__identity {
    @apply text-center sm:text-left flex-1;
  }

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

  color: #facc15;
}

.guest-skater-card__name::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-4px;
  height:6px;
  background:#000;
  border-radius:4px;
  transform: rotate(-1deg) skewX(-4deg);
  clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%);
  opacity:0.9;
  z-index:-1;
}
  .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 flex flex-col items-center justify-center py-1 rounded-md;
    background: 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);
  }

  .guest-skater-card__stat-value {
    @apply text-base sm:text-lg font-black leading-none;
    color: #facc15;
  }

  .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;
    }
  }
  /* ========== 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;
    }
}