/* Déclarations @font-face pour Sentient */
@font-face {
  font-family: "Sentient";
  src: url("../assets/fonts/Sentient/Sentient-Extralight.otf")
    format("opentype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sentient";
  src: url("../assets/fonts/Sentient/Sentient-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: optional;
}

@font-face {
  font-family: "Sentient";
  src: url("../assets/fonts/Sentient/Sentient-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: optional;
}

@font-face {
  font-family: "Sentient";
  src: url("../assets/fonts/Sentient/Sentient-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: optional;
}

@font-face {
  font-family: "Sentient";
  src: url("../assets/fonts/Sentient/Sentient-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: optional;
}

@font-face {
  font-family: "Sentient";
  src: url("../assets/fonts/Sentient/Sentient-ExtralightItalic.otf")
    format("opentype");
  font-weight: 200;
  font-style: italic;
  font-display: optional;
}

@font-face {
  font-family: "Sentient";
  src: url("../assets/fonts/Sentient/Sentient-LightItalic.otf")
    format("opentype");
  font-weight: 300;
  font-style: italic;
  font-display: optional;
}

@font-face {
  font-family: "Sentient";
  src: url("../assets/fonts/Sentient/Sentient-Italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: optional;
}

@font-face {
  font-family: "Sentient";
  src: url("../assets/fonts/Sentient/Sentient-MediumItalic.otf")
    format("opentype");
  font-weight: 500;
  font-style: italic;
  font-display: optional;
}

@font-face {
  font-family: "Sentient";
  src: url("../assets/fonts/Sentient/Sentient-BoldItalic.otf")
    format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: optional;
}

/* Déclarations @font-face pour Switzer */
/* Polices non-critiques : font-display: optional pour ne pas bloquer le rendu */
@font-face {
  font-family: "Switzer";
  src: url("../assets/fonts/Switzer/Switzer-Thin.otf") format("opentype");
  font-weight: 100;
  font-style: normal;
  font-display: optional;
}

@font-face {
  font-family: "Switzer";
  src: url("../assets/fonts/Switzer/Switzer-Extralight.otf") format("opentype");
  font-weight: 200;
  font-style: normal;
  font-display: optional;
}

@font-face {
  font-family: "Switzer";
  src: url("../assets/fonts/Switzer/Switzer-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: optional;
}

@font-face {
  font-family: "Switzer";
  src: url("../assets/fonts/Switzer/Switzer-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Switzer";
  src: url("../assets/fonts/Switzer/Switzer-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: optional;
}

@font-face {
  font-family: "Switzer";
  src: url("../assets/fonts/Switzer/Switzer-Semibold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: optional;
}

@font-face {
  font-family: "Switzer";
  src: url("../assets/fonts/Switzer/Switzer-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: optional;
}

@font-face {
  font-family: "Switzer";
  src: url("../assets/fonts/Switzer/Switzer-Extrabold.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: optional;
}

@font-face {
  font-family: "Switzer";
  src: url("../assets/fonts/Switzer/Switzer-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: optional;
}

@font-face {
  font-family: "Switzer";
  src: url("../assets/fonts/Switzer/Switzer-ThinItalic.otf") format("opentype");
  font-weight: 100;
  font-style: italic;
  font-display: optional;
}

@font-face {
  font-family: "Switzer";
  src: url("../assets/fonts/Switzer/Switzer-ExtralightItalic.otf")
    format("opentype");
  font-weight: 200;
  font-style: italic;
  font-display: optional;
}

@font-face {
  font-family: "Switzer";
  src: url("../assets/fonts/Switzer/Switzer-LightItalic.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
  font-display: optional;
}

@font-face {
  font-family: "Switzer";
  src: url("../assets/fonts/Switzer/Switzer-Italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: optional;
}

@font-face {
  font-family: "Switzer";
  src: url("../assets/fonts/Switzer/Switzer-MediumItalic.otf")
    format("opentype");
  font-weight: 500;
  font-style: italic;
  font-display: optional;
}

@font-face {
  font-family: "Switzer";
  src: url("../assets/fonts/Switzer/Switzer-SemiboldItalic.otf")
    format("opentype");
  font-weight: 600;
  font-style: italic;
  font-display: optional;
}

@font-face {
  font-family: "Switzer";
  src: url("../assets/fonts/Switzer/Switzer-BoldItalic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: optional;
}

@font-face {
  font-family: "Switzer";
  src: url("../assets/fonts/Switzer/Switzer-ExtraboldItalic.otf")
    format("opentype");
  font-weight: 800;
  font-style: italic;
  font-display: optional;
}

@font-face {
  font-family: "Switzer";
  src: url("../assets/fonts/Switzer/Switzer-BlackItalic.otf") format("opentype");
  font-weight: 900;
  font-style: italic;
  font-display: optional;
}

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

/* Styles de base pour le body */
body {
  margin: 0;
  padding: 0;
}

/* Styles pour le hero */
#hero {
  position: relative;
  min-height: 100vh;
}

@media (min-width: 768px) {
  #hero {
    min-height: 200vh;
  }
}

/* Variables CSS pour les couleurs (utilisées en JS) */
@layer base {
  :root {
    --color-primary: #612004;
    --color-primary-dark: #612004;
    --color-beige: #e1d8c9;
    --color-white: #ffffff;
  }
}

/* Classes personnalisées pour les polices avec le bon font-weight */
@layer utilities {
  .font-sentient-extralight {
    font-family: "Sentient", serif;
    font-weight: 200;
  }

  .font-switzer-light {
    font-family: "Switzer", sans-serif;
    font-weight: 300;
  }

  .font-switzer-regular {
    font-family: "Switzer", sans-serif;
    font-weight: 400;
  }
}

/* Classes utilitaires réutilisables avec @apply */
@layer components {
  /* Classe pour les états de focus répétitifs */
  .focus-ring {
    @apply focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2;
  }

  /* Classe pour les champs de formulaire */
  .form-input {
    @apply border-0 border-b border-primary bg-transparent px-0 py-2 
           font-sentient-extralight text-lg leading-[35px] 
           tracking-[-0.9px] text-primary placeholder:text-primary 
           focus:outline-none focus:ring-0 focus:border-b-2 focus:border-primary;
  }

  /* Placeholders en uppercase uniquement */
  .form-input::placeholder {
    text-transform: uppercase;
  }

  /* Classe pour les textarea de formulaire */
  .form-textarea {
    @apply rounded border border-primary bg-transparent px-4 py-2 
           font-sentient-extralight text-lg leading-[35px] 
           tracking-[-0.9px] text-primary placeholder:text-primary 
           focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2;
  }

  /* Placeholders en uppercase uniquement */
  .form-textarea::placeholder {
    text-transform: uppercase;
  }

  /* Styles pour les champs invalides (validation HTML5) */
  .form-input:invalid:not(:placeholder-shown),
  .form-textarea:invalid:not(:placeholder-shown),
  .form-input.invalid-field,
  .form-textarea.invalid-field {
    border-bottom-color: #dc2626;
    border-color: #dc2626;
  }

  .form-input:invalid:focus:not(:placeholder-shown),
  .form-textarea:invalid:focus:not(:placeholder-shown),
  .form-input.invalid-field:focus,
  .form-textarea.invalid-field:focus {
    border-bottom-color: #dc2626;
    border-color: #dc2626;
    outline: none;
  }

  /* Classe pour les boutons de formulaire */
  .form-button {
    @apply flex justify-center items-center gap-[10px] w-[120px] h-[35px] 
           rounded bg-primary font-sentient-extralight text-lg uppercase 
           leading-[35px] tracking-[-0.9px] text-white transition-colors 
           hover:bg-primary-dark focus:outline-none focus:ring-2 
           focus:ring-primary focus:ring-offset-2;
  }

  /* Classe pour les liens de navigation */
  .nav-link {
    @apply block text-center font-switzer-regular text-base uppercase 
           leading-normal tracking-[-0.064px] text-primary-dark 
           transition-colors hover:text-primary focus-ring;
  }

  /* Classe pour les liens du footer */
  .footer-link {
    @apply text-base leading-normal uppercase transition-colors font-switzer-regular text-beige hover:text-white focus:outline-none focus:ring-2 focus:ring-beige focus:ring-offset-2 focus:ring-offset-primary;
  }

  /* Classe pour les liens de navigation mobile transparente (texte blanc) */
  .nav-link-white {
    @apply block text-center font-switzer-regular text-base uppercase 
           leading-normal tracking-[-0.064px] text-white 
           transition-colors hover:text-beige focus:outline-none 
           focus:ring-2 focus:ring-white focus:ring-offset-2;
  }

  /* Classe pour l'optimisation will-change */
  .will-change-transform {
    will-change: transform;
  }

  /* Spinner de chargement pour le formulaire */
  .loading-spinner {
    animation: spin 1s linear infinite;
  }

  @keyframes spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  /* Styles pour les messages du formulaire */
  .form-message {
    animation: fadeIn 0.3s ease-in;
  }

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

  /* Optimisations de performance pour l'image hero */
  #hero-image {
    backface-visibility: hidden;
    image-rendering: -webkit-optimize-contrast;
    transform: translateZ(0);
  }
}