app.css

@import "@fontsource/lato/index.css";
@import "@fontsource/lato/300.css";
@import "@fontsource/lato/300-italic.css";
@import "@fontsource/lato/400-italic.css";
@import "@fontsource/lato/700.css";
@import "@fontsource/lato/700-italic.css";
@import "@fontsource/lato/900.css";
@import "@fontsource/lato/900-italic.css";
@import "@fontsource/lora/index.css";
@import "@fontsource/lora/500-italic.css";
@import "@fontsource/lora/700.css";
@import "@fontsource/lora/700-italic.css";

/* Write your global styles here, in PostCSS syntax */
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

@layer components {
  /* *******--- LIENS ---******* */

  /* LIEN TEXTE: lien basique à l'intérieur d'un corps de texte, souligné sans changement de couleur*/
  .lx-link-text {
    @apply underline underline-offset-4 hover:decoration-2;
  }

  /* lien texte, bleu au survol : si besoin de plus de visibilité */
  .lx-link-text-le-bleu {
    @apply underline underline-offset-4 hover:text-le-bleu hover:decoration-2;
  }

  /* LIEN SIMPLE : lien solo (en dehors d'un corps de texte), se caractérise par un écard entre les lettres plus grand*/
  .lx-link-simple {
    @apply lx-link-simple-no-underline underline;
  }
  /* lien simple, sans soulignement : si besoin de plus de discretion */
  .lx-link-simple-no-underline {
    @apply cursor-pointer font-sans tracking-wider underline-offset-4 hover:underline hover:decoration-2;
  }

  /* LIEN UPPERCASE : lien solo à la frontière avec un bouton, se caractérise par une casse en majuscule et un écard entre les lettres plus grand*/

  .lx-link-uppercase {
    @apply gap-2 text-nowrap font-semibold uppercase tracking-widest text-neutral-700 decoration-2 underline-offset-4 hover:text-black hover:underline;
  }
  /* lien uppercase, bleu au survol : si besoin de plus de visibilité */
  .lx-link-uppercase-le-bleu {
    @apply gap-2 text-nowrap font-semibold uppercase tracking-widest text-le-bleu decoration-2 underline-offset-4 hover:underline;
  }
  /* *******--- TITRES ---******* */
  .lx-titreh2 {
    @apply mb-3 mt-5 inline-flex bg-le-vert-100 px-1 font-sans text-2xl font-bold text-black;
  }
  .lx-titreh3 {
    @apply mb-3 mt-5 flex font-sans text-xl font-bold text-black;
  }
  /* *******--- CARTES ---******* */
  /* CARTE : conteneur avec des coins arrondis, de l'ombre et des états au survol/clic */
  .lx-card {
    @apply rounded-lg border bg-white shadow-md transition-all hover:scale-105 hover:bg-gray-50 hover:shadow-lg active:bg-gray-100;
  }
  /* carte avec une bordure inférieure le-jaune-dark */
  .lx-card-underline-le-vert {
    @apply lx-card rounded-b-none border-b-4 border-b-le-vert-400 hover:border-b-le-jaune-very-dark;
  }
  /* carte grise avec une bordure inférieure le-jaune-dark */
  .lx-card-bg-gray-underline-le-vert {
    @apply lx-card-underline-le-vert bg-gray-100/70 hover:bg-gray-200/50 active:bg-gray-200/70;
  }
  /* *******--- ANIMATION ---******* */
  .lx-opacity-0-unclickable {
    @apply pointer-events-none opacity-0;
  }
}

input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}