/* Configuration personnalisée Tailwind */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Performance Optimizations - Core Web Vitals */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-display: swap;
}

/* Critical Resource Hints */
img {
  loading: lazy;
  decoding: async;
}

/* Préchargement des polices critiques (à inclure dans le head) */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Open Sans Regular'), local('OpenSans-Regular');
}

@font-face {
  font-family: 'Libre Baskerville';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Libre Baskerville'), local('LibreBaskerville-Regular');
}

/* Optimisations Layout Shift Prevention */
.book-3d, .book-shadow-3d {
  aspect-ratio: 2/3;
  contain: layout style paint;
}

/* Optimisations animations */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Optimisations containment pour de meilleures performances */
.hero-bg {
  contain: layout style paint;
}

.card {
  contain: layout style paint;
}

/* Polices personnalisées */
.font-serif {
  font-family: 'Libre Baskerville', serif;
}

.font-sans {
  font-family: 'Open Sans', sans-serif;
}

/* Couleurs personnalisées - Palette Pompier Moderne */
:root {
  --fire-red: #d73527;
  --fire-orange: #f97316;
  --fire-cream: #fef7ed;
  --fire-gradient: linear-gradient(135deg, #d73527 0%, #f97316 50%, #fb923c 100%);
  --fire-gradient-reverse: linear-gradient(135deg, #fb923c 0%, #f97316 50%, #d73527 100%);
  
  /* Anciens amber remplacés */
  --amber-50: #fef7ed;
  --amber-700: #d73527;
  --amber-800: #b91c1c;
}

/* Styles pour les éléments spéciaux */
.hero-bg {
  background: linear-gradient(135deg, var(--fire-cream) 0%, #fed7aa 100%);
}

.fire-gradient-bg {
  background: var(--fire-gradient);
}

.fire-gradient-text {
  background: var(--fire-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.book-shadow {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.btn-primary {
  background: var(--fire-gradient);
  @apply text-white font-semibold py-3 px-6 rounded-lg transition-all duration-200 shadow-lg hover:shadow-xl hover:scale-105;
}

.btn-secondary {
  @apply border-2 text-white font-semibold py-3 px-6 rounded-lg transition-all duration-200 hover:scale-105;
  border-image: var(--fire-gradient) 1;
  background: linear-gradient(white, white) padding-box, var(--fire-gradient) border-box;
  color: var(--fire-red);
}

.btn-secondary:hover {
  background: var(--fire-gradient);
  color: white;
}

/* Animations subtiles */
.fade-in {
  animation: fadeIn 0.8s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.slide-in-left {
  animation: slideInLeft 1s ease-out;
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-50px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Styles pour les formulaires */
.form-input {
  @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500 transition-colors;
}

.form-label {
  @apply block text-sm font-medium text-gray-700 mb-2;
}

/* Styles pour les cartes */
.card {
  @apply bg-white rounded-xl shadow-lg border border-gray-100 p-6 hover:shadow-xl transition-shadow duration-300;
}

/* Responsive typography */
@media (max-width: 768px) {
  .hero-title {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}

/* Styles pour le livre 3D */
.book-cover {
  perspective: 1200px;
}

.book-3d {
  position: relative;
  transition: all 0.4s ease;
  transform-style: preserve-3d;
  transform: rotateY(-5deg) rotateX(2deg);
}

.book-cover:hover .book-3d {
  transform: rotateY(-15deg) rotateX(5deg) translateZ(20px);
}

.book-3d::before {
  content: '';
  position: absolute;
  top: 0;
  right: -8px;
  width: 8px;
  height: 100%;
  background: linear-gradient(to right, rgba(0,0,0,0.2), rgba(0,0,0,0.4));
  transform: rotateY(90deg);
  transform-origin: left center;
}

.book-3d::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 100%;
  height: 8px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.4));
  transform: rotateX(-90deg);
  transform-origin: top center;
}

/* Effet ombre pour livre 3D */
.book-shadow-3d {
  filter: drop-shadow(10px 15px 25px rgba(215, 53, 39, 0.3));
}