@media (prefers-color-scheme: dark) {
    p.imgvignette{
        background-color: #fff;
    }
    .metapost_exemple img{
        background: white;
        color-scheme:only light;
        padding:20px;
    }
    img{
        color-scheme:only light;
    }
}



.carousel{
    background: rgb(238, 238, 238);
    padding:20px;
}

.carousel-control-next-icon,
.carousel-control-prev-icon,.carousel-indicators {
  filter: invert(1);
}

p.imgvignette{
    color-scheme: only light;
}
/*.metapost_exemple img{
    color-scheme:only light;
    background: white;
}*/

.vignetteensemble{
    width: 300px;
}
.vignetteensemble img{
    width:145px;
    height:145px;
    object-fit: cover;
    margin:0px;
}
.ensemble_vignette{
    width:300px;
    max-height:400px;
}
.ensemble_titre{
    width:100%;
    position:absolute;
    bottom:0;
}
main h1{
    margin-top:50px;
    margin-bottom:40px;
}

main h3{
    margin-top:40px;
    margin-bottom:10px;
}
main h4{
    margin-top:30px;
}
main h3.section_simple {
    margin-top:40px;
    margin-bottom:10px;
    font-size: 170%;
    border-bottom: 1px solid #666;
    color: #666;
}

main h2{
    margin-top:50px;
    border-bottom: 1px solid #666;
    margin-bottom:30px
}

a.navbar-brand {
    font-size:1.5em!important;
}

.navbar-brand img{
    width:150px;
    height:auto;
    vertical-align: baseline;
}



/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
    a.navbar-brand {
        font-size:3em!important;
    }
    
    .navbar-brand img{
        width:300px;
        height:auto;
        vertical-align: baseline;
    }
}

.car3{
    display: none;
    visibility: hidden; 
}
.car1{
    display: block;
    visibility: visible; 
}

@media only screen 
and (min-width : 760px) {
    .car3{
        display: block;
        visibility: visible; 
    }
    .car1{
        display: none;
        visibility: hidden; 
    }
}
.metapost_exemple img{
    /*background: none;*/
    border: none;
    box-shadow: none;
    width: 400px;
    max-width:100%;
    height:auto;
}

.metapost_exemple p.img {
    text-align: center;
    margin-top:40px;
    margin-bottom:40px;
}

footer img {
    max-width: 200px;
}

footer {
    margin-top:20px;
}
main p{
    margin-bottom:0px;
    margin-top:10px;
}
p.imgvignette{
    padding-top:15px;
    padding-bottom:15px;
    margin-bottom:0px;
}
p.titrevignette{
    margin-bottom:10px;
}
p.auteurs{
    font-size: larger;
}
p.erreur{
    color:red;
}
p.date{
    color:#888;
}
img.vignette{
    object-fit: contain;
    max-height: 200px;
    width:90%;
    height:auto;
}
/* Pour faire un triangle vers la droite */
.triangle{
    width: 0px;
    height: 0px;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid #000000;
}
main ul {
    margin:10px!important;
    margin-top:0px!important;
    padding-top:0px;
    list-style: none;
}

main ul li:before {
    content: "";
    border-color: transparent #111;
    border-style: solid;
    border-width: 0.35em 0 0.35em 0.45em;
    display: block;
    height: 0;
    width: 0;
    left: -1em;
    top: 1.1em;
    position: relative;
}


.py-5{
    padding-bottom:0px!important;
}
p.nombreexemples{
    font-style: italic;
}
p.motscles,p.groupe {
    margin-left:1em;
}
p.motscles:before, p.groupe:before{
    content: "";
    border-color: transparent #111;
    border-style: solid;
    border-width: 0.35em 0 0.35em 0.45em;
    display: block;
    height: 0;
    width: 0;
    left: -1em;
    top: 1.1em;
    position: relative;
}

.metapost_vignette {
    /*border: 1px solid #ddd;*/
    --bs-card-border-radius:0px;
}
.metapost_vignette_titre {
    padding-top:5px;
    background-color: #eff2f5;
    border-top:1px solid #cacaca;
}

.metapost_vignette_titre{
    padding-left: 5px;
    padding-right: 5px;
}
main p.date{
    font-style: italic;
}
main p.archive{
    background-color: #eff2f5;
    padding:5px;
    border-top:#888 0.5px solid;
    border-bottom:#888 0.5px solid;
}

.container {
    margin-top:20px;
}

footer.bg-dark {
    background-color: #D7DEE6!important;
    padding-bottom: 60px!important;
}


a {
    text-decoration: none!important;
}

main a,main a:visited, footer a, footer a:visited {
    color: #b14040 !important;
}

main a.pdf::before{
    content:url('../icones/pdf.png')!important;
    vertical-align: -60%!important;
    margin-right:5px!important;
}

main a.metapost::before{
    content:url('../icones/mp.png')!important;
    vertical-align: -60%!important;
    margin-right:5px!important;
}
main a.zip:before{
    content:url('../icones/zip.png')!important;
    vertical-align: -60%!important;
    margin-right:5px!important;
}

main a.txt:before{
    content:url('../icones/txt.png')!important;
    vertical-align: -60%!important;
    margin-right:5px!important;
}
.exempletexte {
    overflow: auto;
    background: #f5f5f5;
    padding: 20px;
    padding-top: 10px;
    padding-bottom: 15px;
    margin-bottom: 13px;
    margin-top: 10px;
    clear: both;
    border-left: 4px solid #b14040;
    background-image: url(../images/bc-info.png);
    background-repeat: no-repeat;
    background-size: 70px;
    background-position: 100% 100%;
}


span.motscles {
    padding: 2px 4px;
    font-size: 90%;
    color: #c7254e;
    background-color: #f9f2f4;
    border-radius: 4px;
    border: 1px solid #cacaca;
    margin: 2px;
}

p.motscles{
    font-size:larger;
}

p.groupe{
    font-size:larger;
}
span.groupe {
    padding: 2px 4px;
    font-size: 90%;
    color: #677991;
    background-color: #f9f2f4;
    border-radius: 4px;
    border: 1px solid #D7DEE6;
    margin: 2px;
}

.fichierauxiliare{
width:100%;
border: 1px solid #cacaca;
padding:0pt;
margin-left:calc(var(--bs-gutter-x) * .5);
margin-right:calc(var(--bs-gutter-x) * .5);
margin-bottom:10px;
}

.fichierauxiliaretitre{
    background: whitesmoke;
    padding:5pt;
    padding-bottom:0pt;
}

.fichierauxiliaretitre p{
    margin-bottom:0px;
}
.fichierauxiliaretitre button{
float:right;
    margin-bottom:0px;
}


.fichierauxiliarecontenu{
    border-top: 1px solid #cacaca;
}


pre {
    height: auto;
    max-height: 600px;
    white-space: pre-wrap!important;
}​

.btn-dark{
    --bs-btn-bg:#6b7278;
    --bs-btn-border-color:#454a4f;
}

div.code-toolbar>.toolbar>.toolbar-item>a, div.code-toolbar>.toolbar>.toolbar-item>button, div.code-toolbar>.toolbar>.toolbar-item>span {
    color: #bbb;
    font-size: .8em;
    padding: 0 0.5em;
    background: #f5f2f0;
    background: rgba(224,224,224,.2);
    box-shadow: 0 2px 0 0 rgb(0 0 0 / 20%);
    border-radius: 0em;
    padding:4px;
    padding-top:8px;
    padding-bottom:8px;
    margin:5px;
}

.thumbnail-simple {
    top: 4px;
    bottom: 4px;
    left: 4px;
    right: 4px;
    text-align: center;
    padding: 15px 6px 15px 6px;
    margin-bottom: calc(5px - 1.42%);
    border: none;
    background: whitesmoke;
    border-radius: 2px;
    box-shadow: 1px 1px 1px 1px gainsboro;
}

.infos{
    font-size:smaller;
    font-style:italic ;
}

.banniere{
    margin:30px;
}

.banniere img{
    width:600px;
    max-width: 90%;
}