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

@layer components {
  /* Boutons Terravox */
  .btn-terravox-primary {
    @apply bg-terravox-red text-white px-6 py-3 rounded-terravox font-semibold hover:opacity-90 transition-opacity;
  }
  
  .btn-terravox-secondary {
    @apply bg-white text-terravox-red border-2 border-terravox-red px-6 py-3 rounded-terravox font-semibold hover:bg-terravox-red hover:text-white transition-colors;
  }
  
  .btn-terravox-accent {
    @apply bg-terravox-yellow text-white px-6 py-3 rounded-terravox font-semibold hover:opacity-90 transition-opacity;
  }

  /* Cartes Terravox */
  .card-terravox {
    @apply bg-white rounded-terravox shadow-terravox p-6 border border-gray-100;
  }

  /* Formulaires Terravox */
  .input-terravox {
    @apply w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:border-terravox-blue focus:outline-none;
  }

  /* Sections colorées */
  .section-header-red {
    @apply bg-terravox-red text-white p-12 rounded-terravox;
  }
  
  .section-header-yellow {
    @apply bg-terravox-yellow text-white p-12 rounded-terravox;
  }
  
  .section-header-blue {
    @apply bg-terravox-blue text-white p-12 rounded-terravox;
  }

  /* Éléments décoratifs */
  .chain-link {
    @apply w-20 h-8 border-4 border-terravox-red rounded-full inline-block m-1;
  }

  .gradient-terravox-red {
    background: linear-gradient(135deg, #FF2000, #ff4000);
  }
}