/***************************************************************************************************************/
/* Theme Biblio
/* 2018-2024 Jean de La Taille
/***************************************************************************************************************/

/************************************************************************/
/* Polices */
/************************************************************************/

/* Police par défaut de ToutApprendre */
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

* {
    font-family: 'Poppins', sans-serif;
}

/************************************************************************/
/* Classes spéciales pour l'accessibilité */
/************************************************************************/

*:focus {
    outline: none;
}
*:focus:not(:focus-visible) {
    outline: none;
}
button:focus-visible, div:focus-visible, input:focus-visible, select:focus-visible {
    outline: 4px solid  #EEA7A550 !important;
    /*box-shadow: 0 0 12px #EEA7A5;*/
}
a:focus-visible, label:focus-visible {
    background: #EEA7A555 !important;
    outline: 4px solid  #EEA7A555 !important;
    border: none;
    border-radius: 10px;
}

/************************************************************************/
/* Liens et effets de liens */
/************************************************************************/
a {
    cursor: pointer;
    text-decoration: none;
    outline: none;
}
a:hover {
    text-decoration: none;
}

/* Lien zoom avec animation, utilisé par les liens et les boutons */
.hoverZoom {
    transition: all 0.2s;
}
.hoverZoom:hover {
    transform: scale(1.03, 1.03);
}

/* Lien gras et zoom avec animation */
.hoverBold {
    opacity: 0.8;
    transition: transform 0.2s;
}
.hoverBold:hover, .hoverBoldSelected {
    opacity: 1;
    /*filter: drop-shadow(0.2px 0 0 black);*/
    transform: scale(110%);
    transition: transform 0.2s;
}

/* Lien souligné avec animation */
.hoverUnderlined {
    position: relative;
    outline: 0;
}
.hoverUnderlined:before {
    content: "";
    position: absolute;
    width: 20%;
    bottom: 0;
    left: 40%;
    border-bottom-width: 0px;
    border-bottom-style:  solid;
    transition: all 0.5s;
}
.hoverUnderlined:hover:before {
    width: 60%;
    left: 20%;
    border-bottom-width: 5px;
    border-bottom-style:  solid;
    transition: all 0.1s;
}
.hoverUnderlinedSelected:before {
    content: "";
    position: absolute;
    bottom: 0;
    transition: all 0.5s;
    width: 60%;
    left: 20%;
    border-bottom-width: 5px;
    border-bottom-style:  solid;
}
/* Couleur des packs */
.hoverUnderlined.pack1:before {
    border-bottom-color : #E96C31; /*C1004A;*/
}
.hoverUnderlined.pack2:before {
    border-bottom-color : #2E6B66 /*128C6F*/;
}
.hoverUnderlined.pack3:before {
    border-bottom-color : #D49593; /*336FBB;*/
}
.hoverUnderlined.pack4:before {
    border-bottom-color : #F1BF47; /*F7C24E;*/
}
.hoverUnderlined.pack5:before {
    border-bottom-color : #2E6B66; /*F7C24E;*/
}
.hoverUnderlined.presse:before {
    border-bottom-color : #3975EA; /*AC1322; */
}
.hoverUnderlined.livres:before {
    border-bottom-color : #56BAF1; /*#57B8CF;*/
}
.hoverUnderlined.services:before {
    border-bottom-color : #252428; /*#148C6F;*/
}

/************************************************************************/
/* Styles des éléments forms */
/************************************************************************/

input[type=text], input[type=password], input[type=date], input[type=time], input[type=email] {
    border-radius: 5px;
    padding: 10px;
    outline: none;
    background: none;
    /*border: none;*/
}
input:focus {
    outline: none;
}
label {
    display: inline-block;
}

button, input[type=submit], input[type=button], .button {
    border: none;
    background: none;
    outline: none;
}

button:hover, input[type=submit]:hover, input[type=button]:hover, .button:hover {
}

.stdButton {
    font-size: 18px;
    padding: 10px;
    border-radius: 5px;
}

/************************************************************************/
/* Style des dialogues                                                  */
/************************************************************************/

/* Paramètres apr défaut dialogue */
dialog.popup {
    position: relative;
    max-width: 100% !important;
    max-height: 100% !important;
    border: none;
    width: 100%;
    height: 100%;
    background:  #0005;

    opacity: 1;
    transition: opacity 0.5s 0.001s;
}
dialog.popup.closed {
    opacity: 0;
    transition: opacity 0.5s 0.001s;
}
dialog.popup::backdrop {
    background-color: transparent
}

dialog.popup > div {
    width: fit-content;
    max-width: 80%;
}
/* Dialogue pour mobile */
@media (max-width: 18cm) and (orientation: landscape), (orientation: portrait) {
    dialog.popup > div {
        max-width: 100%;
        width: 100%;
    }
}

/************************************************************************/
/* Couleurs de ToutApprendre par défaut  V5                             */
/************************************************************************/

/* Arrières plans */
html {
    background-color: white;
    color: black;
}
.bgWhite        { background-color: white; }
.bgGray         { background-color: #252428; }
.bgLightGray    { background-color: #F2F2F1; }
.bgBlack        { background-color: #000; }
.bgTransparent  { background: transparent; }

/* Background */
.bgLightOrange  { background-color: #FFD3BF; }
.bgOrange       { background-color: #E96C31; color: white; }
.bgLightLime    { background-color: #C2E5E2; }
.bgLime         { background-color: #2E6B66; color: white; }
.bgLightRose    { background-color: #FFE7E7; }
.bgRose         { background-color: #EEA7A5; }
.bgLightGold    { background-color: #F5E6C2; }
.bgGold         { background-color: #F1BF47; }

/* Border */

.borderOrange       { border: 2px solid #E96C31; }
.borderLime         { border: 2px solid #2E6B66; }
.borderRose         { border: 2px solid #EEA7A5; }
.borderGold         { border: 2px solid #F1BF47; }
.borderBlack        { border: 2px solid #000; }
.borderGray         { border: 2px solid #EBEBEB; }
.borderWhite        { border: 2px solid #fff; }

/* Police */
.gray           { color: #777 !important; }
.black          { color: black !important; }
.white          { color: white !important; }
.orange         { color: #E96C31 !important; }
.lime           { color: #2E6B66 !important; }
.rose           { color: #EEA7A5 !important; }
.gold           { color: #F1BF47 !important; }

.dkGray         { color: #252428 !important; }
.ltGray         { color: #EBEBEB !important; }

/* Packs et catalogues */
.bgPack1        { background : #FFD3BF; }
.bgPack2        { background : #FFE7E7; }
.bgPack3        { background : #C2E5E2; }
.bgPack4        { background : #F5E6C2; }
.bgPackPress    { background : #CDDEFF; }
.bgPackLivres   { background : #DCF2FF; }


/************************************************************************/
/* Décorations                                                          */
/************************************************************************/

/* Divers */
.pointer    { cursor: pointer; }

.disabled   { opacity: 0.5; }
.nospace::before    { font-size: 0; }
.nospace::after     { font-size: 0; }

/* Template de base n'est pas visible */
.template {
    display: none;
}

/* Barres et bordures */
.framed, .border    { border: 1px solid #555 !important; }
.noBorder           { border: 0 !important; }
hr {
    border: 0;
    border-bottom: 2px solid gray;
    margin: 0 0;
}
.borderBottom { border-bottom: 1px solid #eeeded !important; }
.rounded { border-radius: 40px;}

/* Ombres : utilisé pour les menus ou les popup */
.shadow-m             { box-shadow: 0 0 5mm #0007; } /* 3mm #ccc; } */
.shadow-l             { box-shadow: 0 0 10mm #0007; } /* 3mm #ccc; } */

/* Zoom utilisé par les cards, avec ombrage */
.zoom       {
    transition: all 0.2s;
    box-shadow: 0 0 0mm 0mm #ccc;
}
.zoom:hover {
    transform: scale(1.03, 1.03);
    transition: all 0.2s;
    box-shadow: 0 0 3.5mm 0mm #ccc;
}

/* Effet de zoom pour les petites icones dans différents écrans */
.iconZoom       {
    transition: transform 0.2s;
}
.iconZoom:hover {
    transform: scale(1.4, 1.4);
    transition: transform 0.2s;
    transition-timing-function: ease-in-out;
}