/* corot_common.css */

  body {
    background-color: var(--bg-page) !important;
  }

  hr {
    margin-bottom: 1%;
  }

  /*========================*/
  /*    COULEUR DE FOND     */
  /*========================*/

  /*    Normal     */
  .bg-env {
    background-color: var(--env-ui-color);
  }
  .bg-env-light {
    background-color: var(--env-ui-color-light);
  }
  .bg-env-dark {
    background-color: var(--env-ui-color-dark);
  }
  .bg-card {
    background-color: var(--bg-card);
  }
  .bg-page {
    background-color: var(--bg-page);
  }
  .bg-card-header {
    background-color: var(--bg-card-header);
  }

  /*    Highlight     */
  .bg-env-highlight-1 {
    background-color: var(--env-ui-color-highlight-1);
  }
  .bg-env-highlight-2 {
    background-color: var(--env-ui-color-highlight-2);
  }
  .bg-env-highlight-3 {
    background-color: var(--env-ui-color-highlight-3);
  }
  .bg-env-highlight-4 {
    background-color: var(--env-ui-color-highlight-4);
  }

  /*    Hover     */
  .hover\:bg-env:hover {
    background-color: var(--env-ui-color);
  }
  .hover\:bg-env-light:hover {
    background-color: var(--env-ui-color-light);
  }
  .hover\:bg-env-dark:hover {
    background-color: var(--env-ui-color-dark);
  }
  .hover\:bg-card:hover {
    background-color: var(--bg-card);
  }
  .hover\:bg-page:hover {
    background-color: var(--bg-page);
  }
  .hover\:bg-card-header:hover {
    background-color: var(--bg-card-header);
  }

  /*    Hover highlight     */
  .hover\:bg-env-highlight-1:hover {
    background-color: var(--env-ui-color-highlight-1);
  }
  .hover\:bg-env-highlight-2:hover {
    background-color: var(--env-ui-color-highlight-2);
  }
  .hover\:bg-env-highlight-3:hover {
    background-color: var(--env-ui-color-highlight-3);
  }
  .hover\:bg-env-highlight-4:hover {
    background-color: var(--env-ui-color-highlight-4);
  }

  /*    Active     */
  .active\:bg-env:active {
    background-color: var(--env-ui-color);
  }
  .active\:bg-env-light:active {
    background-color: var(--env-ui-color-light);
  }
  .active\:bg-env-dark:active {
    background-color: var(--env-ui-color-dark);
  }
  .active\:bg-card-header:active {
    background-color: var(--bg-card-header);
  }

  /*    Active highlight     */
  .active\:bg-env-highlight-1:active {
    background-color: var(--env-ui-color-highlight-1);
  }
  .active\:bg-env-highlight-2:active {
    background-color: var(--env-ui-color-highlight-2);
  }
  .active\:bg-env-highlight-3:active {
    background-color: var(--env-ui-color-highlight-3);
  }
  .active\:bg-env-highlight-4:active {
    background-color: var(--env-ui-color-highlight-4);
  }

  /*===========================*/
  /*    COULEUR DE BORDURE     */
  /*===========================*/
  /* Normal */
  .border-env {
    border-color: var(--env-ui-color);
  }
  .border-env-light {
    border-color: var(--env-ui-color-light);
  }
  .border-env-dark {
    border-color: var(--env-ui-color-dark);
  }
  .border-simple {
    border-color: var(--border-simple) !important;
    border: solid 1px;
  }

  /*    Highlight     */
  .border-env-highlight-1 {
    border-color: var(--env-ui-color-highlight-1);
  }
  .border-env-highlight-2 {
    border-color: var(--env-ui-color-highlight-2);
  }
  .border-env-highlight-3 {
    border-color: var(--env-ui-color-highlight-3);
  }
  .border-env-highlight-4 {
    border-color: var(--env-ui-color-highlight-4);
  }

  /* Hover */
  .hover\:border-env:hover {
    border-color: var(--env-ui-color);
  }
  .hover\:border-env-light:hover {
    border-color: var(--env-ui-color-light);
  }
  .hover\:border-env-dark:hover {
    border-color: var(--env-ui-color-dark);
  }

  /*    Hover highlight     */
  .hover\:border-env-highlight-1:hover {
    border-color: var(--env-ui-color-highlight-1);
  }
  .hover\:border-env-highlight-2:hover {
    border-color: var(--env-ui-color-highlight-2);
  }
  .hover\:border-env-highlight-3:hover {
    border-color: var(--env-ui-color-highlight-3);
  }
  .hover\:border-env-highlight-4:hover {
    border-color: var(--env-ui-color-highlight-4);
  }
  .hover\:border-simple:hover {
    border-color: var(--border-simple);
  }

  /* Focus */
  .focus\:border-env:focus {
    border-color: var(--env-ui-color);
  }

  /*========================*/
  /*           RING         */
  /*========================*/

  /* ENV */
  .ring-env:focus,
  .ring-env:focus-visible {
    --tw-ring-color: var(--env-ui-color);
  }
  .ring-env-light:focus,
  .ring-env-light:focus-visible {
    --tw-ring-color: var(--env-ui-color-light);
  }
  .ring-env-dark:focus,
  .ring-env-dark:focus-visible {
    --tw-ring-color: var(--env-ui-color-dark);
  }

  /* Page / Card */
  .ring-card:focus,
  .ring-card:focus-visible {
    --tw-ring-color: var(--bg-card);
  }
  .ring-page:focus,
  .ring-page:focus-visible {
    --tw-ring-color: var(--bg-page);
  }
  .ring-card-header:focus,
  .ring-card-header:focus-visible {
    --tw-ring-color: var(--bg-card-header);
  }

  /* Highlights */
  .ring-env-highlight-1:focus,
  .ring-env-highlight-1:focus-visible {
    --tw-ring-color: var(--env-ui-color-highlight-1);
  }
  .ring-env-highlight-2:focus,
  .ring-env-highlight-2:focus-visible {
    --tw-ring-color: var(--env-ui-color-highlight-2);
  }
  .ring-env-highlight-3:focus,
  .ring-env-highlight-3:focus-visible {
    --tw-ring-color: var(--env-ui-color-highlight-3);
  }
  .ring-env-highlight-4:focus,
  .ring-env-highlight-4:focus-visible {
    --tw-ring-color: var(--env-ui-color-highlight-4);
  }

  /*========================*/
  /*    COULEUR DE TEXTE    */
  /*========================*/

  /* Normal */
  .color-env {
    color: var(--env-ui-color);
  }
  .color-env-light {
    color: var(--env-ui-color-light);
  }
  .color-env-dark {
    color: var(--env-ui-color-dark);
  }
  .color-simple {
    color: var(--text-color);
  }

  /*    Highlight     */
  .color-env-highlight-1 {
    color: var(--env-ui-color-highlight-1);
  }
  .color-env-highlight-2 {
    color: var(--env-ui-color-highlight-2);
  }
  .color-env-highlight-3 {
    color: var(--env-ui-color-highlight-3);
  }
  .color-env-highlight-4 {
    color: var(--env-ui-color-highlight-4);
  }

  /* Hover */
  .hover\:color-env:hover {
    color: var(--env-ui-color);
  }
  .hover\:color-env-light:hover {
    color: var(--env-ui-color-light);
  }
  .hover\:color-env-dark:hover {
    color: var(--env-ui-color-dark);
  }
  .hover\:color-simple:hover {
    color: var(--text-color);
  }

  /*    Hover highlight     */
  .hover\:color-env-highlight-1:hover {
    color: var(--env-ui-color-highlight-1);
  }
  .hover\:color-env-highlight-2:hover {
    color: var(--env-ui-color-highlight-2);
  }
  .hover\:color-env-highlight-3:hover {
    color: var(--env-ui-color-highlight-3);
  }
  .hover\:color-env-highlight-4:hover {
    color: var(--env-ui-color-highlight-4);
  }

  /* Active / Focus */
  .active\:color-simple:active {
    color: var(--text-color);
  }
  .focus\:color-simple:focus {
    color: var(--text-color);
  }

  /*========================*/
  /*         BOUTONS        */
  /*========================*/
  .btn-env {
    font-size: 14px;
    font-weight: 600;
    padding: 0.5rem 1rem;
    color: white;
    border: 1px solid var(--env-ui-color);
    background-color: var(--env-ui-color);
    border-radius: 6px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
  }

  .btn-env-small {
    font-size: 10px;
    font-weight: 600;
    padding: 0.3rem 0.7rem;
    color: white;
    border: 1px solid var(--env-ui-color);
    background-color: var(--env-ui-color);
    border-radius: 6px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
  }

  .btn-env:hover,
  .btn-env-small:hover {
    background-color: var(--env-ui-color-light);
    border-color: var(--env-ui-color-light);
    color: white;
  }

  .btn-env:active,
  .btn-env-small:active {
    background-color: var(--env-ui-color-dark);
    border-color: var(--env-ui-color-dark);
    color: white;
  }

  .btn-env:focus,
  .btn-env-small:focus {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
      var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
      calc(2px + var(--tw-ring-offset-width)) var(--env-ui-color-light);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
      var(--tw-shadow, 0 0 #0000);
  }

  button:disabled,
  button:disabled:hover,
  .disabled-button,
  .disabled-button:hover {
    background-color: #9ca3af !important;
    color: #ffffff !important;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    cursor: not-allowed;
    appearance: none;
    pointer-events: none;
  }

  .disabled-button-small,
  .disabled-button-small:hover {
    background-color: #9ca3af; /* équivalent de bg-gray-400 */
    color: #ffffff; /* équivalent de text-white */
    font-size: 10px;
    font-weight: 600;
    padding: 0.3rem 0.7rem; /* py-2 = 0.5rem haut/bas, px-4 = 1rem gauche/droite */
    border-radius: 0.5rem; /* équivalent de rounded-lg */
    cursor: not-allowed; /* équivalent de cursor-not-allowed */
    appearance: none;
  }

  .disabled-action-button,
  .disabled-action-button:hover {
    display: flex; /* flex */
    align-items: center; /* items-center */
    width: 20rem; /* w-80 -> 80 * 0.25rem = 20rem */
    gap: 0.5rem; /* gap-2 -> 0.5rem */
    padding: 0.5rem 1rem; /* py-2 = 0.5rem, px-4 = 1rem */
    background-color: var(--bg-disabled); /* bg-gray-400 */
    color: var(--text-disabled); /* text-gray-300 */
    font-style: italic; /* italic */
    font-size: 0.875rem; /* text-sm */
    cursor: not-allowed; /* cursor-not-allowed */
    appearance: none; /* appearance-none */
  }

  /*========================*/
  /*        CKEditor        */
  /*========================*/
  .ckeditor-content,
  .ckeditor-content * {
    color: var(--text-color) !important;
    background-color: var(--bg-card-header) !important;
    overflow: hidden;
  }

  .ckeditor-content a {
    color: var(--env-ui-color-light) !important;
    text-decoration: underline;
  }

  .ckeditor-content a:hover {
    color: var(--env-ui-color-light) !important;
    background-color: var(--env-ui-color-highlight-3) !important;
  }

  .ckeditor-richtext-inner {
    all: revert;
    overflow-wrap: break-word;
    overflow: hidden;
    display: block;
  }

  /*========================*/
  /*   EXTENSION TAILWIND   */
  /*========================*/
  .prose-xs {
    @apply text-xs leading-snug prose prose-sm;
  }

  @media (min-width: 768px) {
    .prose-xs {
      @apply text-sm;
    }
  }

  /*========================*/
  /*        POP OVER        */
  /*========================*/
  .popover .popover-body {
    padding: 0 !important;
    margin: 0 !important;
  }

  @media (max-width: 768px) {
    h3 {
      font-size: 2.6vw;
      font-weight: 600;
    }
  }

  @media (min-width: 769px) {
    h3 {
      font-size: 1.3vw;
      font-weight: 500;
    }
  }

  /*=====================================*/
  /*   COMPORTEMENT BOUTON SUR NAVBAR    */
  /*=====================================*/

  .btn-outline-invert {
    background-color: transparent;
    color: white; /* pour svg via fill: currentColor */
    transition: all 0.2s ease-in-out;
  }

  .btn-outline-invert:hover {
    background-color: white;
    border-color: black;
    color: black;
  }

  .btn-outline-invert:active {
    background-color: var(--env-ui-color-light); /* bleu clair */
    border-color: white;
    color: white;
  }

  /*=====================================*/
  /*               COLLAPSE              */
  /*=====================================*/

  .collapse {
    visibility: visible !important;
  }