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


/* ========== BASE ========== */
@layer base {
  html, body { @apply bg-white text-ink; }

  /* Typo : Inter pour le texte, Oswald pour titres/brand */
  html { @apply font-sans; }
  h1, h2, h3, .brand { @apply font-brand uppercase tracking-wide2; }
  h1, h2, h3 { @apply font-semibold; }

  a { @apply decoration-ink hover:opacity-80; }

  /* util perso (non-standard Tailwind) */
  .tracking-wide2 { letter-spacing: .08em; }
}

/* ========== COMPONENTS ========== */
@layer components {
  .progress-steps {
    display: grid;
    grid-template-columns: repeat(10, minmax(6px, 1fr));
    gap: 3px;
    align-items: center;
  }

  .progress-steps__step {
    position: relative;
    height: 14px;
    border-radius: 6px;
    overflow: visible;
  }

  .progress-steps__step::before {
    content: "";
    position: absolute;
    inset: 0;
    left: -1px;
    right: -1px;
    border-radius: inherit;
    border: 1px solid rgba(17,17,17,.2);
    background: transparent;
    transform: rotate(-2deg) skewX(-6deg);
    transition: background-color .15s ease, border-color .15s ease, transform .2s ease;
  }

  .progress-steps__step.is-on::before {
    border-color: #111;
    background: #111;
  }

  /* Grain pour style “baker” */
  .progress-steps__step.is-on::after {
    content:"";
    position:absolute; inset:0;
    border-radius: inherit;
    pointer-events:none;
    background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 3px 3px;
    opacity:.25;
    mix-blend-mode: screen;
    transform: rotate(-2deg) skewX(-6deg);
  }

  @screen md {
    .progress-steps__step { height: 16px; }
  }

  /* ====== Variante statique ====== */
  .progress-steps--static .progress-steps__step::before {
    cursor: default;
    pointer-events: none;
  }

  /* ====== Variante éditable ====== */
  .progress-steps--editable .progress-steps__step::before {
    cursor: pointer;
  }

  .progress-steps--editable .progress-steps__step:hover::before {
    background: rgba(17,17,17,.08);
    transform: rotate(-3deg) skewX(-7deg);
  }
  .progress-module .step {
      @apply relative overflow-visible w-full transition-colors;
      background: transparent;
      border: none; /* on dessine la forme via ::before */
    }

  .progress-module .step::before {
    content: "";
    position: absolute;
    inset: 0;
    /* un peu d’overdraw pour éviter les interstices visuels à cause du skew/rotate */
    left: -1px; right: -1px;
    border-radius: 0.25rem; /* plus épais que la version droite */
    border: 1px solid var(--off);
    background: transparent;

    /* l’angle “baker”, cohérent avec .baker-title */
    transform: rotate(-2deg) skewX(-6deg);
    transition: background-color .15s ease, border-color .15s ease, transform .2s ease;
  }

  .progress-module .step:hover::before {
    background: color-mix(in srgb, var(--off) 20%, transparent);
  }

  .progress-module .step.is-on::before {
    background: var(--on);
    border-color: var(--on);
  }

  /* Option: un effet “poussé” au survol des actifs */
  .progress-module .step.is-on:hover::before {
    transform: rotate(-2.5deg) skewX(-7deg);
  }

  /* Hauteurs (confort tactile) — garde tes tailles !important si tu avais un override */
  .progress-module .step {
    @apply h-12 sm:h-14 md:h-16 rounded-md;
  }
  /* ---- Stance / Baker title ---- */
  .stance-goofy { display:inline-block; transform:scaleX(-1); }
  .mini-bar .mini-step.ghost { @apply inline-block h-2 w-6 rounded bg-ink/10 border border-ink/10; }
  .mini-bar .mini-step + .mini-step { @apply ml-1; }
  .card-eq { @apply h-full flex flex-col; }

  /* Pied de card réservé (même hauteur partout) */
  .card-footer { @apply mt-3 space-y-2 min-h-16; } /* ~64px */
  .baker-title--xl {
    @apply text-4xl sm:text-5xl font-black uppercase tracking-wide;
  }
  .baker-title {
    @apply relative inline-block text-white font-semibold;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: .4rem .9rem;
    background: #111;
    border-radius: .125rem;
    box-shadow: 0 2px 0 rgba(0,0,0,.08);
    transform: rotate(-2deg) skewX(-6deg);
  }
  .baker-title > span { display:block; transform: skewX(6deg); }
  .baker-title--grain::after {
    content:""; position:absolute; inset:0; pointer-events:none;
    background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 3px 3px; opacity:.25; mix-blend-mode: screen; border-radius: inherit;
  }
  .baker-title--sm { font-size:.9rem;  padding:.28rem .7rem; }
  .baker-title--lg { font-size:1.25rem; padding:.5rem 1rem; }
  .baker-title--accent { background:#e11d48; }
  .baker-title--flat { transform:none; }
  .baker-title--flat > span { transform:none; }

  /* ---- Buttons ---- */
  .btn { @apply inline-flex items-center justify-center gap-2 px-4 py-2 font-medium rounded-md transition; }
  .btn-primary { @apply bg-ink text-white border border-ink hover:opacity-90; }
  .btn-outline { @apply bg-white text-ink border border-ink/70 hover:bg-ink hover:text-white; }
  .btn-ghost   { @apply px-2 py-1 rounded-md text-ink hover:bg-ink/5; }
  .btn-sm      { @apply px-3 py-1.5 text-sm; }

  /* ---- Cards / tokens ---- */
  .card   { @apply bg-white border border-ink/10 rounded-md; }
  .badge  { @apply px-2 py-0.5 rounded-md border border-ink/20 text-sm; }
  .label  { @apply text-xs uppercase tracking-wide2 text-ink/80; }
  .divider{ @apply my-3 border-t border-ink/10; }
  .shadow-hair { box-shadow: 0 1px 0 rgba(17,17,17,.06); }
  .card-padded { @apply card p-6 md:p-8 shadow-hair; }

  /* ---- Forms (inputs texte, selects) ---- */
  .input {
    @apply w-full bg-white border border-ink/20 rounded-md px-3 py-2
           focus:outline-none focus:ring-2 focus:ring-ink/20 focus:border-ink;
  }
  .error { @apply text-sm text-red-600; }
  .hint  { @apply text-xs text-ink/60; }
  .form-field { @apply space-y-1; }
  /* ---- Toggle iOS (boolean) ---- */

  .switch::after {
    content: "";
    @apply absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-white border border-ink/20 transition;
  }
  .peer:checked + .switch { @apply border-ink; background:#111; }
  .peer:checked + .switch::after { transform: translateX(1.25rem); }
  .peer:focus-visible + .switch { @apply ring-2 ring-ink/20; }
  .switch-label { @apply cursor-pointer text-sm; }

  /* ---- Avatar ---- */
  .avatar { @apply w-9 h-9 rounded-full border border-ink grid place-items-center text-sm font-semibold uppercase bg-white text-ink; }
  .avatar:hover { @apply bg-ink text-white; }
  .avatar--md { @apply w-10 h-10 text-base; }
  .avatar--sm { @apply w-8 h-8 text-xs; }

  /* ---- Dropdown (mobile) ---- */
  .dropdown { @apply absolute right-0 mt-2 w-44 rounded-md border border-ink/10 bg-white shadow-hair p-2 z-10; }
  .dropdown a { @apply block px-3 py-2 rounded-md hover:bg-ink hover:text-white; }
  details > summary::-webkit-details-marker { display:none; }

  /* ---- Stars (difficulté 0..10) ---- */
  .stars { @apply inline-flex items-center gap-1; }
  .star  { @apply w-4 h-4 text-ink; }

  /* ========== MODULE PROGRESSION % (0..100 / pas de 10) ========== */
  .progress-module { --on:#111; --off:#d1d5db; }
  .progress-module .grid { align-items:center; }
  .progress-module .step{ @apply h-2 rounded transition; width:100%; background:transparent; border:1px solid var(--off); }
  .progress-module .step.is-on{ background:var(--on); border-color:var(--on); }
  .progress-module .step:hover{ transform: translateY(-1px); }
  @screen md { .progress-module .step{ @apply h-3; } }

  /* “Barre d’actions” simple */
  .actions-top { @apply flex items-center justify-between gap-3; }

  /* mini barre % (10 segments) */
  .mini-bar  { display:grid; grid-template-columns: repeat(10, minmax(6px,1fr)); gap:2px; }
  .mini-step { height:6px; border:1px solid rgba(17,17,17,.2); border-radius:2px; background:transparent; }
  .mini-step.is-on { background:#111; border-color:#111; }

  /* ========== TYBO (Pagy, Tom Select, disabled) ========== */

  /* Pagy */
  .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 text-tybo-500 font-semibold bg-tybo-200 shadow-md;
  }
  .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 { @apply bg-tybo-300; }

  .pagy-nav .page a:active,
  .pagy-nav .page.active:active,
  .pagy-nav .page.prev.disabled:active,
  .pagy-nav .page.next.disabled:active,
  .pagy-nav-js .page a:active,
  .pagy-nav-js .page.active:active,
  .pagy-nav-js .page.prev.disabled:active,
  .pagy-nav-js .page.next.disabled:active { @apply bg-tybo-400 text-white; }

  .pagy-nav .page.prev.disabled,
  .pagy-nav .page.next.disabled,
  .pagy-nav-js .page.prev.disabled,
  .pagy-nav-js .page.next.disabled { @apply text-tybo-400 cursor-default; }

  .pagy-nav .page.prev.disabled:hover,
  .pagy-nav .page.next.disabled:hover,
  .pagy-nav-js .page.prev.disabled:hover,
  .pagy-nav-js .page.next.disabled:hover { @apply text-tybo-400 bg-tybo-200; }

  .pagy-nav .page.active,
  .pagy-nav-js .page.active { @apply text-white cursor-default bg-tybo-400; }
  .pagy-nav .page.active:hover,
  .pagy-nav-js .page.active:hover { @apply text-white bg-tybo-400; }

  .pagy-combo-nav-js { @apply flex max-w-max rounded-full px-3 py-1 text-sm text-tybo-500 font-semibold bg-tybo-200 shadow-md; }
  .pagy-combo-nav-js .pagy-combo-input { @apply bg-white px-2 rounded-sm; }
  .pagy-combo-nav-js .page.prev:hover,
  .pagy-combo-nav-js .page.next:hover { @apply text-tybo-800; }
  .pagy-combo-nav-js .page.prev:active,
  .pagy-combo-nav-js .page.next:active { @apply text-tybo-800; }
  .pagy-combo-nav-js .page.prev.disabled,
  .pagy-combo-nav-js .page.next.disabled { @apply text-tybo-400 cursor-default; }

  /* Tom Select */
  ts-wrapper { @apply w-full !ml-0; }
  .ts-control { @apply shadow-sm rounded-lg my-5 border-tybo-300 bg-white py-2 px-3 text-base; }
  .ts-dropdown { @apply rounded-md border border-solid border-t border-tybo-300 text-base; }
  .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-sky-50 text-sky-900; }
  .ts-dropdown .active { @apply bg-tybo-100 text-tybo-900; }

  /* Disabled helper */
  .disabled { @apply opacity-80 cursor-not-allowed pointer-events-none; }
}