/* line 1, app/assets/stylesheets/alchemy/elements/article.scss */
article {
  width: 50%;
  font: 16px/20px Helvetica, Arial, sans-serif;
  color: #333;
  margin: 1em auto;
  padding: 0.5em 1em;
  background: #f4f4f4;
}

/* line 9, app/assets/stylesheets/alchemy/elements/article.scss */
article h2 {
  font-size: 24px;
  line-height: 1.25;
  font-weight: bold;
}

/* line 15, app/assets/stylesheets/alchemy/elements/article.scss */
article a {
  color: #5588D3;
}

/* line 19, app/assets/stylesheets/alchemy/elements/article.scss */
article img {
  max-width: 100%;
}

/* line 23, app/assets/stylesheets/alchemy/elements/article.scss */
article figure {
  margin: 0;
}

/* line 27, app/assets/stylesheets/alchemy/elements/article.scss */
article figcaption {
  font-size: 14px;
}
@tailwind base;
@tailwind components;
@tailwind utilities;

/*********************/
/* Class Définitions */
/*********************/


@layer components {

  /* Custom button styles */
  .custom-link-div {
    @apply mt-4 flex justify-center;
  }

  .custom-link-div a {
    @apply inline-block px-4 py-2 bg-[#5d4595] text-white font-semibold rounded-md shadow-md hover:bg-[#4b3a7a] hover:text-gray-300 focus:outline-none focus:ring-2 focus:ring-[#5d4595] focus:ring-opacity-75 my-2;
  }

  .site-bg-color {
    @apply bg-white;
  }

  .site-header-bg-color {
    @apply site-bg-color;
  }

  .site-footer-bg-color {
    @apply bg-blue-950 text-white;
  }

  .header-size {
    @apply max-w-[830px];
  }

  .content-size {
    @apply w-[70%] max-w-[900px] pl-5 pr-5;
  }

  .content_mask {
    @apply bg-slate-600;
    @apply fixed top-0 bottom-0 left-0 right-0;
    @apply transition-all ease-in-out duration-200 delay-0;
    @apply opacity-0;
  }

  .content_mask.active {
    @apply opacity-70;
    @apply pointer-events-auto;
  }

  .content_mask.inactive {
    @apply opacity-0;
    @apply pointer-events-none;
  }

  /*********************/
  /* Site wide CSS     */
  /*********************/

  a {
    @apply text-blue-500 hover:text-blue-800;
  }

  h1 {
    @apply text-4xl font-extrabold text-center mt-12 mb-12;
  }

  h2 {
    @apply text-3xl leading-snug font-bold text-center mt-8 mb-4;
  }

  h3 {
    @apply text-2xl/4 font-semibold text-center;
  }

  ul {
    @apply mt-4;
  }

  ul.no-bullets {
    @apply list-none;
  }

  ul.no-margin-left {
    @apply mx-auto;
  }

  ul.no-margin-left>li {
    @apply ml-0 list-none;
  }

  ol>li {
    @apply list-decimal list-inside ml-6;
  }

  p {
    @apply mt-4;
  }

  img {
    @apply mt-4;
  }

  .written-by figure {
    @apply m-0;
  }

  .written-by figure>picture>img {
    @apply mt-0;
  }

  .written-by p {
    @apply mt-0;
  }

  /*******************/
  /* Menu Navigation */
  /*******************/


  /*** Menu Level 1  */
  .site_menu li {
    @apply list-none;
  }

  .site_menu>ul {
    @apply mt-4;
  }

  .site_menu>ul>li {
    @apply list-none mx-10 mt-2;
  }

  .site_menu>ul>li>a {
    @apply text-black hover:text-black font-normal text-base;
  }

  /** Site Menu submenu div **/
  .site_menu>ul>li>div {
    @apply transition-all ease-in-out duration-200 delay-0;
    @apply bg-white;
  }

  .site_menu>ul>li>div.inactive {
    @apply opacity-0;
    @apply pointer-events-none;

  }

  .site_menu>ul>li>div.active {
    @apply opacity-100;
    @apply pointer-events-auto;
  }

  /*-- END : Site Menu submenu div --*/

  /** Site Menu button **/
  .site_menu>ul>li>a {
    @apply text-base m-0 p-0;
  }

  .site_menu>ul>li>button {
    @apply transition-all ease-in-out duration-1000 delay-0;
    @apply text-base m-0 p-0;
  }

  .site_menu>ul>li>button.active {}

  .site_menu>ul>li>button.inactive {}

  .site_menu>ul>li>button>span {
    @apply transition-all ease-in-out duration-300 delay-0;
  }

  .site_menu>ul>li>button.active>span {
    @apply w-full
  }

  .site_menu>ul>li>button.inactive>span {
    @apply w-0;
  }

  /*-- END : Site Menu button --*/

  .site_menu div a {
    @apply text-black hover:text-blue-800 font-semibold text-xs;

  }


  /*** Menu Level 2 and more */
  .site_menu_sublevels {
    @apply font-semibold text-sm ml-10 list-none;
    @apply uppercase;
  }

  .site_menu_sublevels ul {
    @apply mt-2 border-t border-t-black/15 pt-4 normal-case;
  }

  .site_menu_sublevels ul>li {
    @apply list-none ml-4 mt-2 pb-4;
  }

  .site_menu_sublevels ul>li>a {
    @apply text-sm m-0 p-0;
  }

  .site_menu_sublevels a {
    @apply text-xs m-0 p-0;
  }

  .link_description {
    @apply text-black hover:text-black font-normal text-xs mt-1;
  }

  .submit-button {
    @apply inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-[#5d4595] hover:bg-[#4b3a7a] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 cursor-pointer;
  }

}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *



 */