/* Css  */

body {
    margin:0;
    background-color:var(--main-bg-color);
    color:var(--main-text-color);
    font-family: var(--main-font);
    font-size:var(--main-text-size);
}

img {
    max-width: 100%;
}
/* framework stephane */
.container {
    width:100%;
    padding: var(--grid-gutter);
    box-sizing: border-box;
}
.cleanul, .cleanul > li {
    margin:0;
    padding:0;
    list-style-type:none;
}
/* grid system */
.grid {
    display:grid;
    grid-gap: var(--grid-gutter);
}
.autorows {
    grid-auto-flow:row;    
}
.autocolumns {
    grid-auto-flow: column; 
}

.regular-4, .regular-1-2, .regular-2, .regular-3 {
    grid-template-columns: 1fr;
}
.special-1-2 {
    grid-template-columns: 1fr 2fr;
}
.special-2-1 {
    grid-template-columns: 2fr 1fr;
}
.fixed-2 {
    grid-template-columns: 1fr 1fr; 
}
.fixed-6 {
    grid-template-columns: repeat(6,1fr); 
}
.fixed-7 {
    grid-template-columns: repeat(7,1fr);
}

.align-bottom {
    align-items: end;
}

.grid.gutter-2 {
    grid-gap: 2rem;  
}
/* utilitaires margin et padding */
.mt-1 {
    margin-top:1rem;
}
.mb-1 {
    margin-bottom:1rem;
}
.my-1 {
    margin-top:1rem;
    margin-bottom:1rem;
}
.ml-1 {
    margin-left:1rem;
}
.mx-1 {
    margin-left:1rem;
    margin-right:1rem;
}
.mt-2 {
    margin-top:2rem;
}
.mb-2 {
    margin-bottom:2rem;
}
.my-2 {
    margin-top:2rem;
    margin-bottom:2rem;
}
.mx-2 {
    margin-left:2rem;
    margin-right:2rem;
}
.pt-1 {
    padding-top:1rem;
}
.pb-1 {
    padding-bottom:1rem;
}
.mp-1 {
    padding-top:1rem;
    padding-bottom:1rem;
}
.py-1 {
    padding-left:1rem;
    padding-right:1rem;
}
.pt-2 {
    padding-top:2rem;
}
.pb-2 {
    padding-bottom:2rem;
}
.px-2 {
    padding-top:2rem;
    padding-bottom:2rem;
}
.py-2 {
    padding-left:2rem;
    padding-right:2rem;
}

/* alignements */
.text-right {
    text-align: right;
}
.text-center {
    text-align: center;
}
.text-left {
    text-align: left;
}


/* positionnement */
.flexit {
    display:flex;
}
.position-fixed {
    position:fixed;
}
.outside-right {
    left:100%;
}
.w-100 { width:100%; }
.top-0 { top:0; }
/* styles de texte */
.no-decoration, .no-decoration a {
    text-decoration: none;
}
.decoration-hover, .decoration-hover a {
    text-decoration: none;
}
.decoration-hover:hover .decoration-hover a:hover {
    text-decoration: underline;
}
.text {
    font-size:var(--main-text-size);
}
.text-small {
    font-size:var(--text-small-size);
}
.text-medium {
    font-size:var(--text-medium-size);
}
.text-big {
    font-size:var(--text-big-size);
}

h1,h2,h3,h4,h5,h6 {
    font-weight:normal;
    margin:0;
}
b,strong,.font-bold {
    font-family: var(--font-bold);
    font-weight:normal;
}
.font-light {
    font-family: var(--font-light);
}
.font-medium {
    font-family: var(--font-medium); 
}
.font-standard {
    font-family: var(--font-main); 
}

/* display */
.d-none {
    display:none;
}

/* adaptative : mobile first*/

/* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) 
sm
*/
@media (min-width:600px) { 
    .container {
        padding-left:2rem;
        padding-right:2rem;
    }
    .regular-4 {
        grid-template-columns: 1fr 1fr;
    }
}
/* tablet, landscape iPad, lo-res laptops ands desktops 
md
*/ 
@media (min-width:801px) { 

    .regular-4 {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .regular-3 {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .regular-2 {
        grid-template-columns: 1fr 1fr;
    }
    .regular-1-2 {
        grid-template-columns: 1fr 2fr;
    }
    .d-md-none {
        display:none; 
        height:0;
    }
    
    .d-md-block {
        display:block;
    }
    .md-autocolumns {
        grid-auto-flow: column; 
    }
    .position-md-none {
        position:static;
    }
    
}
/* big landscape tablets, laptops, and desktops 
lg
*/ 
@media (min-width:1025px) { 
    .container {
        padding-left:3rem;
        padding-right:3rem;
    }
    .regular-4 {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
    .d-lg-none {
        display:none; 
    }
}
/* hi-res laptops and desktops 
xl
*/
@media (min-width:1281px) {  
    .container {
        max-width:1240px;
        margin:0 auto;
    }
    .d-xl-none {
        display:none; 
    }
}

/* css print minimale */