/**
 * @file
 * Subtheme specific CSS.
 */


/* +P
  __      ____
 /\ \    /\  _`\  
 \_\ \___\ \ \L\ \
/\___  __\\ \ ,__/
\/__/\ \_/ \ \ \/ 
    \ \_\   \ \_\ 
     \/_/    \/_/ 
     Yeah! 2021 plusproduit.com
     
     stable9plus subtheme 21.08.26
*/

@font-face {
    font-family: "infofauna";
    src: url("fonts/infofauna.eot");
    src: url("fonts/infofauna.eot?#iefix") format("embedded-opentype"),
        url("fonts/infofauna.woff") format("woff"),
        url("fonts/infofauna.ttf") format("truetype"),
        url("fonts/infofauna.svg#infofauna") format("svg");
    font-weight: normal;
    font-style: normal;

}


:root {
    /* Les couleurs sont divisées en 4 valeurs
		pale : pâle
		prim : couleur de base
		sec : médian
		sombre : sombre
	*/

    /* bleu Infofauna */
    --if-main-prim: #034D7C;
    --if-main-sec: #0074E8;
    /* Pas utilisé ! */
    --if-main-pale: #e3f3fc;
    --if-main-sombre: #023657;

    /* CC amphibiens */
    --if-amphi-prim: #A4BF60;
    --if-amphi-sec: #bace88;
    --if-amphi-pale: #F6F6E6;
    --if-amphi-sombre: #4F4E04;

    /* CC reptiles */
    --if-reptiles-prim: #E5AE33;
    --if-reptiles-sec: #edca7c;
    --if-reptiles-pale: #FFF8E6;
    --if-reptiles-sombre: #4E3800;

    /* CC Castor */
    --if-castor-prim: #CE753E;
    --if-castor-sec: #d8946a;
    --if-castor-pale: #FDF0E8;
    --if-castor-sombre: #57311A;

    /* CC Loutre */
    --if-loutre-prim: #5E9794;
    --if-loutre-sec: #7caca9;
    --if-loutre-pale: #EFF5F5;
    --if-loutre-sombre: #2F4A49;

    /* CC Petits Mammifères (PM) */
    --if-pm-prim: #a64e5e;
    --if-pm-sec: #c08489;
    --if-pm-pale: #efe0e0;
    --if-pm-sombre: #560F1B;

    /* CC Insectes */
    --if-insectes-prim: #5488AF;
    --if-insectes-sec: #829FBB;
    --if-insectes-pale: #DFE6EF;
    --if-insectes-sombre: #003F63;

    /* CC Mollusques */
    --if-moll-prim: #9D8099;
    --if-moll-sec: #BDACBB;
    --if-moll-pale: #E4DCE3;
    --if-moll-sombre: #481D48;

    /* CC Neozoa */
    --if-neo-prim: #708B75;
    --if-neo-sec: #A2B4A3;
    --if-neo-pale: #DBE0D9;
    --if-neo-sombre: #003519;

}


html {
    font-size: 16px;
    background-color: #FFF;
    height: 100%;
}

body {
    font-family: 'Inter', Helvetica, Arial, sans-serif;
    font-weight: 300;
    letter-spacing: 0.01rem;
    line-height: 1.5;
    text-align: inherit;
    background: transparent;

    color: #666;
}


a.field-group-link .contextual button.trigger {
    display: none !important;
    visibility: hidden !important;

}

/* #region PRELOADER */


/* affichage du contenu */
#page {
    opacity: 0;
    animation: reveal .8s 5s;
    animation-fill-mode: forwards;
}

@keyframes reveal {
    to {
        opacity: 1;
    }
}

.js .p-loaded #page {
    opacity: 1;
    transition: opacity .8s .5s;
    animation: none;
}

/* #endregion */


/* #region FORM */

.form-group {
    margin-bottom: 1rem;
}

.form-control {
    border-radius: 0;
    color: #777;
}

.form-control:focus {
    color: #333;
    border-color: #fff;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, .2);
}

.webform-required {
    display: none;
}

.form-required::after {
    content: "*";
}


/* #endregion */

/* #region MESSAGES ALERT */
.alert-wrapper,
div[data-drupal-messages] {
    opacity: 0.9;
    background: transparent;
    color: var(--bs-dark);
    font-size: 14px;
    position: static;
    width: auto;
    max-width: 700px;
    border: 0 none;
    border-radius: 0;
    animation: none;
    margin-left: 5.8vw;
    margin-right: 5.8vw;
}

/* div[data-drupal-messages] {
    position: fixed;
    z-index: 999;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    margin: auto;
    max-width: var(--p-mw);
} */

.alert-wrapper .messages,
div[data-drupal-messages] .messages {
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3);
    margin: 1rem 0 2rem;
    padding: 1rem;
}

.alert-wrapper .messages--error,
div[data-drupal-messages] .messages--error {
    background-color: #fff1f1;
    color: brown;
    border-top: 3px solid brown;
}

.alert-wrapper .messages--status,
div[data-drupal-messages] .messages--status {
    background-color: #f1fff1;
    color: #088933;
    border-top: 3px solid #088933;
}

.invalid-feedback {
    display: block;
    font-size: 12px;
}

.alert-wrapper .placeholder,
div[data-drupal-messages] .placeholder {
    display: inline;
    background: transparent;
}

/* #endregion */

.path-user .block-system-main-block,
.path-connexion .block-system-main-block {
    max-width: 500px;
    margin: 6rem auto 8rem;
}

/* #region REVEAL ON SCROLL */

.js .p-reveal-class {
    position: relative;
    opacity: 0;
    top: 30px;

    transition: opacity 1s .2s, top 1s .2s ease-out;
}

.js .p-visible {
    opacity: 1;
    top: 0;
}

/* #endregion */




/* #region HOVER ZOOM */

.p-zoom {
    overflow: hidden;
}

.p-zoom img {
    display: block;
    transform: scale(1);
    transition: transform 3s linear;
}

.p-zoom:hover img {
    transform: scale(1.2);
}

/* #endregion */

/* #region MODAL */

/* voile */
.p-modal {
    background: rgba(0, 0, 0, 0.8);
}

/* fenêtre */
.p-modal-inner {
    /* largeur modal ------ */
    max-width: 600px;
    /* fermé */
    /*transform: scale(.7) rotateX(15deg);*/
}

.p-modal-open .p-modal-inner {
    /* ouvert */
    /*transform: scale(1) rotateX(0deg);*/
}

.p-modal-overflow {
    /* hauteur et position de la modale ---- */
    max-height: 70vh;
    margin: 15vh 10px;

    background: #fafafa;
    color: #333;
}

.p-modal-overflow a {
    color: #034D7C;
}

.p-modal-overflow a:hover {
    color: #333;
}

/* #endregion */









/* #region MEDIA QUERIES */

/* #region MOBILE FIRST */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {}

/* #endregion */

/* #region DESKTOP FIRST */


/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
    /*html {
        font-size: 15px;
    }*/
}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {

    /* module nbsp */
    .nbsp {
        display: inline-block;
    }
}

/* #endregion */

/* #endregion */