/* 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);
}

/*========================*/
/*        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;
    }

    h5 {
        font-size: 2.6vw;
        font-weight: 600;
    }
}

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

    h5 {
        font-size: 1.4vw;
        font-weight: 100;
        padding:  0 0 0.5rem 0;
    }
}



/*=====================================*/
/*   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;
}