@import url('https://cdn.jsdelivr.net/npm/@gouvfr/dsfr@1.9.0/dist/fonts/Marianne-Thin.woff2');
@import url('https://cdn.jsdelivr.net/npm/@gouvfr/dsfr@1.9.0/dist/fonts/Marianne-Light.woff2');
@import url('https://cdn.jsdelivr.net/npm/@gouvfr/dsfr@1.9.0/dist/fonts/Marianne-Regular.woff2');
@import url('https://cdn.jsdelivr.net/npm/@gouvfr/dsfr@1.9.0/dist/fonts/Marianne-Medium.woff2');
@import url('https://cdn.jsdelivr.net/npm/@gouvfr/dsfr@1.9.0/dist/fonts/Marianne-Bold.woff2');
@import url('https://cdn.jsdelivr.net/npm/@gouvfr/dsfr@1.9.0/dist/fonts/Marianne-ExtraBold.woff2');

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

@font-face {
  font-family: 'Marianne';
  src: url('https://cdn.jsdelivr.net/npm/@gouvfr/dsfr@1.9.0/dist/fonts/Marianne-Thin.woff2') format('woff2');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Marianne';
  src: url('https://cdn.jsdelivr.net/npm/@gouvfr/dsfr@1.9.0/dist/fonts/Marianne-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Marianne';
  src: url('https://cdn.jsdelivr.net/npm/@gouvfr/dsfr@1.9.0/dist/fonts/Marianne-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Marianne';
  src: url('https://cdn.jsdelivr.net/npm/@gouvfr/dsfr@1.9.0/dist/fonts/Marianne-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Marianne';
  src: url('https://cdn.jsdelivr.net/npm/@gouvfr/dsfr@1.9.0/dist/fonts/Marianne-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Marianne';
  src: url('https://cdn.jsdelivr.net/npm/@gouvfr/dsfr@1.9.0/dist/fonts/Marianne-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@layer base {
  :root {
    --background: 84 43% 94%; /* Vert clair */
    --foreground: 222.2 84% 4.9%;

    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;

    --primary: 131 24% 36%; /* Basé sur la couleur principale FORESTT #46724B */
    --primary-foreground: 210 40% 98%;

    --secondary: 84 53% 42%; /* Basé sur la couleur secondaire FORESTT #68A532 */
    --secondary-foreground: 222.2 47.4% 11.2%;

    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

    --accent: 240 100% 28%; /* Basé sur la couleur d'accent FORESTT #000091 */
    --accent-foreground: 0 0% 100%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 131 24% 36%; /* Même que --primary */

    --radius: 0.5rem;

    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
    
    /* Nouvelle couleur de fond secondaire (tons de vert pâle) */
    --background-secondary: 84 43% 94%;
  }

  .dark {
    --background: 84 43% 94%; /* Même vert clair en mode sombre */
    --foreground: 222.2 84% 4.9%; /* Texte foncé pour meilleure lisibilité */

    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;

    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;

    --primary: 131 24% 36%; /* Même que la version light */
    --primary-foreground: 0 0% 100%;

    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;

    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;

    --accent: 240 100% 28%; /* Même que la version light */
    --accent-foreground: 0 0% 100%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;

    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
    
    /* Nouvelle couleur de fond secondaire en mode sombre */
    --background-secondary: 84 43% 94%;
  }
}

@layer base {
  * {
    @apply border-[hsl(var(--border))];
  }

  body {
    @apply bg-background text-foreground font-marianne;
    font-feature-settings: "rlig" 1, "calt" 1;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-marianne tracking-tight;
  }

  h1 {
    @apply text-4xl font-extrabold md:text-5xl text-forestt-primary;
  }

  h2 {
    @apply text-3xl font-bold md:text-4xl text-forestt-primary;
  }

  h3 {
    @apply text-2xl font-medium md:text-3xl text-forestt-primary;
  }

  p {
    @apply leading-relaxed font-marianne;
  }
}

@layer components {
  .glass-card {
    @apply bg-white/80 backdrop-blur-sm border border-white/20 shadow-md;
  }
  
  .transition-custom {
    @apply transition-all duration-300 ease-in-out;
  }

  .link-hover {
    @apply relative after:absolute after:bottom-0 after:left-0 after:h-[2px] after:w-0 after:bg-forestt-primary after:transition-all after:duration-300 hover:after:w-full;
  }

  .forestt-gradient {
    @apply bg-gradient-to-r from-forestt-secondary to-forestt-primary;
  }

  .secondary-gradient {
    @apply bg-gradient-to-r from-white to-forestt-secondary/20;
  }
  
  /* Nouvelle classe pour les sections avec la couleur de fond secondaire */
  .bg-secondary-background {
    @apply bg-[hsl(var(--background-secondary))];
  }

  /* Ajout de classes pour la structure WordPress */
  .wp-block {
    @apply max-w-none;
  }

  .wp-block-column {
    @apply flex-1;
  }

  .wp-block-group {
    @apply py-8;
  }

  .wp-block-buttons {
    @apply flex flex-wrap gap-4;
  }

  .wp-block-button__link {
    @apply inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background bg-forestt-primary text-white hover:bg-forestt-primary/90 h-10 py-2 px-4;
  }
  
  /* Classes WordPress complémentaires pour l'édition */
  .wp-block-image {
    @apply my-4;
  }
  
  .wp-block-quote {
    @apply border-l-4 border-forestt-primary pl-4 my-6 italic;
  }
  
  .wp-block-separator {
    @apply my-8 border-t border-gray-200;
  }
  
  .wp-block-table {
    @apply my-6;
  }
  
  .wp-block-table table {
    @apply w-full border-collapse;
  }
  
  .wp-block-table td,
  .wp-block-table th {
    @apply border border-gray-300 p-2;
  }
  
  .wp-embed-responsive {
    @apply my-6;
  }
}

/* Styles WordPress supplémentaires */
.wordpress-content {
  @apply max-w-none;
}

.wordpress-content img {
  @apply max-w-full h-auto;
}

.wordpress-content iframe {
  @apply max-w-full;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

.animate-fade-in {
  animation: fadeIn 0.6s ease-out forwards;
}

.animate-slide-up {
  animation: slideUp 0.6s ease-out forwards;
}

.delay-100 {
  animation-delay: 100ms;
}

.delay-200 {
  animation-delay: 200ms;
}

.delay-300 {
  animation-delay: 300ms;
}