@font-face {
  font-family: 'ROBOTO';
  src: url('../front/font/Roboto-Bold.ttf') format('truetype')
}
@font-face {
  font-family: 'CIRCULAR';
  src: url('../front/font/circular-std-medium-500.woff') format('otf')
}

*:not(head, script)
{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 18px;
    display: flex;

}
*:not(.tox-tinymce * * * *, .tox-silver-sink> * * * * *)
{
    flex-direction: column;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
#google_translate_element {
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 9999;
}
.goog-te-banner-frame.skiptranslate { display: none !important; }
.goog-te-gadget-simple
{
    flex-direction: row !important;
    border: 2px solid red;
}
.tox-tinymce
{
    z-index: 0;
}
.tox-tinymce * * * *
{
    display: block;
    /* border: 2px solid rgb(238, 255, 0) !important; */
}
.tox-editor-header
{
    flex-direction: column !important;
    /* height: 100px !important; */
    /* overflow: hidden; */
    /* grid: none; */
} 
.tox-menubar
{
    width: max-content !important;
    flex-direction: row !important;
    /* height: 100px; */
}
.tox-toolbar-overlord
{
    width: min-content;
} 
img
{
    border-radius: 5px;
    /* margin: 10px; */
}
.titre
{
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.titre>h1
{
    width: min-content;
}
body
{
    /* background-size: cover; */
    background-image: url("../images/stroke-small-biodiversity-HERP-CAMEROON.png");
    /* background-color: #b04242; */
}
/* LES  ELEMENTS QUI SE REPETTENT*/
h1, h2, h3, h4
{
    font-weight: bold;
    font-family: 'ROBOTO';
    text-transform: capitalize;
    width: 100%;
    text-transform: uppercase;
    text-align: center;
    padding-bottom: 10px;
    margin-bottom: 10px;
}
p
{
    font-family: 'CIRCULAR';
    /* text-align: justify; */
    text-overflow: clip;
    text-wrap: wrap;
}
li
{
  list-style-type: circle;
}

h1
{
    font-size: 100px ;
}

h2
{
    font-size: 55px ;
}
h3
{
    font-size: 30px ;
}

h4
{
    font-size: 25px ;
}
button, input, textarea
{
    border-radius: 5px ;
    padding: 5px;   
}
button
{
    border: none;
    cursor: pointer;
}
.underline-white
{
    color: white;
    border-bottom: 3px solid white;
}

.underline-green
{
    color: #0E400C;
    border-bottom: 4px solid #0E400C;
}
.color-green
{
    color: #0E400C !important;
}

.color-white
{
    color: white !important;
}
.arondi
{
    border-radius: 5px;
}
input, textarea, select
{
    background-color: white ;
    border: 1px solid #0E400C;
    color: #0E400C ;
    min-width: 350px;
    min-height: 50px;
    padding: 10px;
    margin: 5px;
}
input[type="checkbox"], input[type="radio"]
{
    padding: 0px !important;
    margin: 0px !important;
    background-color: white ;
    border: 1px solid #0E400C;
    color: #0E400C ;
}
textarea
{
    height: 200px;
}
label
{
    margin: 0px;
    padding: 0px;
}

.bkg-green
{
    background-color: #0E400C ;
    color: white;
}
.btn
{
    border-radius: 5px;
    min-width: 160px;
    max-width: max-content;
    padding-left: 6px;
    padding-right: 6px;
    height: 50px;
    align-items: center;
    justify-content: center;
    border: 0px solid #0E400C ;
    margin: 5px;
    cursor: pointer;
}
button.bkg-white, a.bkg-white
{
    border: 1px solid #0E400C;
}
.btn-long
{
    width: 100%;
    height: 40px;
    border: 0px solid #0E400C ;
    cursor: pointer;
}

.btn-small
{
    width: max-content;
    height: fit-content;
    border: 0px solid #0E400C ;
    cursor: pointer;
}
.btn-min
{
    flex-direction: row ;
    justify-content: center;
    align-items: center;
    width: fit-content ;
    height: 25px;
    margin: 2px;
    padding-left: 4px;
    padding-right: 4px;
    border: 0px solid #0E400C ;
    cursor: pointer;
    border-radius: 5px;
}

.btn-min > *
{
    font-size: 20px !important;
    min-width: min-content;
    height: min-content;
    margin: 0px;
    padding: 0px;
}

.bkg-white
{
    background-color: white !important;
    /* border: 1px solid #0E400C ; */
    color: #0E400C ;
}

.bkg-green
{
    background-color: #0E400C ;
    color: white;
}

.bkg-white-border
{
    background-color: white ;
    border: 1px solid #0E400C;
    color: #0E400C ;
}
.btn-red
{
    background-color: #EE3E3E ;
    color: white ;
    border: 1px solid white;
}
.btn-etat-red
{
    width: fit-content;
    background-color: #ee3e3ec5 ;
    color: white ;
    position: absolute;
    margin: 15px;
}

.btn-etat-green
{
    width: fit-content;
    background-color: #2db906c5 ;
    color: white ;
    position: absolute;
    margin: 15px;
}
.btn-etat-black
{
    width: fit-content;
    background-color: #000000c5 ;
    /* border: 1px solid #ffffff; */
    color: white ;
    position: absolute;
    margin: 15px;
}
.non-actif
{
    opacity: 0.6;
}
.texte-gras
{
    font-weight: bold;
}
.texte-souligner
{
    text-decoration: underline;
}
.texte-italic
{
    font-style: italic;
}
.align-left
{
    align-items: flex-start !important;
    justify-content: flex-start !important;
}
.align-right
{
    align-items: flex-end !important;
    justify-content: flex-end !important;
}
.align-center
{
    /* border: 2px solid green; */
    align-items: center !important;
    justify-content: center !important;
}
.titre-contenu-item
{
    font-size: 23px;
}
.appercu-paragraphe
{
    font-size: 15px;
}
a
{
    text-decoration: none;
    color: white;
}
.conteneur-large
{
    width: 100%;
    /* border: 2px solid red; */
}

.algn-vertical-c
{
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    /* border: 2px solid rgb(255, 247, 0); */
}
.algn-horizontal-c
{
    flex-direction: row;
    /* border: 2px solid red; */
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.algn-vertical-t
{
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    /* border: 2px solid rgb(255, 247, 0); */
}
.algn-horizontal-t
{
    flex-direction: row;
    /* border: 2px solid red; */
    justify-content: center !important;
    align-items: start !important;
    flex-wrap: wrap;
}
/* LES BOITES QUI CONTIENNENT LES ELEMENTS */
.box
{
    width: 100vw;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.couvertureTransparanteGreen
{
    background-color: #0e400cc5;
    text-align: center;
}
.couvertureTransparenteWhite
{
    background-color: rgba(255, 255, 255, 0.504);
}
.barreDeNavigation
{
    min-height: 90px;
    font-size: 20px;
}
.barreDeNavigation>.conteneur
{
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.menu
{
    flex-direction: row;
    min-width: fit-content;
}
.menu>*
{
    color: white;
    margin-left: 20px;
}
.menu>*:hover
{
    text-decoration: underline;
    font-weight: bold;
}
.menu>.actualPage
{
    text-decoration: underline;
    font-weight: bold;
}

.box
{
    width: 100%;
}

.conteneur
{
    padding-left: 12%;
    padding-right: 12%;
    width: 100%;
    height: 100%;
    flex-wrap: wrap;
    /* border: 2px solid red; */
    align-items: center;
}

.box5-home
{
    min-height: 500px;
}
.box7-home
{
    height: 600px;
    background-size: cover;
    background-position: center;
    background-image: url("../images/grenouille-sur-plante.png");
}
.box8-home
{
    background-color: #0E400C;
    color: white;
    min-height: 400px;
    padding-top: 50px;
    padding-bottom: 50px;
}
.footer-elt
{
    max-width: 300px;
    margin: 30px;
    flex-wrap: wrap;
    color: white;
}
.icone
{
    width: 20px;
    margin: 3px;
}
.cadre-option
{
    overflow: scroll;
    background-color: white;
}

.menu-large-screen
{
    flex-direction: row;
    min-width: fit-content;
}
.box-menu-small-screen
{
    z-index: 500;
    padding: 50px;
    top: 0;
    right: 0;
    position: fixed;
    width: 95vw;
    height: 100vh;
    background-color: #0E400C;
    visibility: hidden;
}
.box-menu-small-screen>.menu
{
    flex-direction: column;
    padding: 20px;
}
.box-menu-small-screen>.menu>*
{
    margin-top: 20px;
}
.menu-large-screen>*
{
    color: white;
    margin-left: 20px;
}
.menu-large-screen>*:hover
{
    border-bottom: 2px solid #0E400C;
    font-weight: bold;
}
.btn-menu-small-screen
{
    visibility: hidden;
    display: none;
}

.logo-bailleur
{
    max-height: 200px;
    max-width: 200px;
    margin: 20px;
}
.localisation-map, .localisation-map>iframe
{
    max-width: 250px;
    max-height: 300px;
}
.spinner {
  display: none; /* Caché par défaut */
  border: 3px solid rgba(255, 255, 255, 0.536);
  border-top: 3px solid #fff;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  animation: spin 1s linear infinite;
  margin-right: 8px; /* Espace avec le texte */
}
.spinner_green {
  display: none; /* Caché par défaut */
  border: 3px solid rgba(0, 80, 33, 0.536);
  border-top: 3px solid #0E400C;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  animation: spin 1s linear infinite;
  margin-right: 8px; /* Espace avec le texte */
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Style pour quand le bouton est en chargement */
button:disabled .spinner {
  display: inline-block; /* Afficher le spinner */
}

button:disabled {
  cursor: not-allowed;
  /* Optionnel: changer l'opacité du bouton */
}
@media (max-width: 1000px)
{
    input, textarea, select
    {
        min-width: 95%;
    }
    .titre>h1
    {
        /* font-size: 1rem; */
        /* white-space: wrap; */
        /* font-size: 1.5rem; */
        font-size: 3.5rem;
    }

    h1
    {
        font-size: 70px ;
    }

    h2
    {
        font-size: 35px ;
    }
    h3
    {
        font-size: 30px ;
    }

    h4
    {
        font-size: 25px ;
    }
    .barreDeNavigation
    {
        align-items: center;
        justify-content: space-between;
    }
    .menu-large-screen
    {
        visibility: hidden;
        display: none;
    }
    
    .conteneur
    {
        padding-left: 20px;
        padding-right: 20px;
    }
        
    .btn-menu-small-screen
    {
        visibility: visible;
        display: flex;
    }
}