/*fonts import*/

@font-face {
    font-family: 'RText';
    src: url('font/RText.woff2') format('woff2'),
        url('font/RText.woff') format('woff'),
        url('font/RText.svg#RText') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
.RText, body * {font-family: RText;font-optical-sizing: auto;font-weight: 400;font-style: normal;margin:0;padding:0;}
.italic{font-style: italic;}
.majuscules{text-transform:uppercase;}
.difference{mix-blend-mode: difference;}
.autoJustify{text-align: left;hyphens: none;}
/* smartphone=60%*/
h1,h2,h3,h4,h5,h6,p{font-family:RText;font-size:16px;font-style:normal;font-variant:normal;font-weight:normal;line-height:18.4px;color:#000;margin:0;padding:0;display:inline-block;width:auto; letter-spacing:-0.1px;text-align: left;hyphens: none;}
h3,h4{font-size:40px;line-height:40px;text-align: left;letter-spacing:-0.2px;}

/*colors settings*/
.blanc{color:#ffffff;}
.noir{color:#000000;}

.blancBG{background-color:#ffffff;}
.noirBG{background-color:#000000;}

.blancSVG-elmt,.blancSVG *{fill:#ffffff;}
.noirSVG-elmt, .noirSVG *{fill:#000000;}
.text-center{text-align:center;}
.text-right{text-align:right;}


/*
GRID- marge exterieurs : 15px 
- goutiere : 8px 
- marge haut bas : 4px
- middlemarge : 4px;
- nbre goutiere : 16
- taille d'une goutiere : calc( ( ( 100vw - ( 2 * 15px ) - ( 15 * 8px ) ) / 16 ) * 1 )
goutiere : width: calc( ( ( ( 100vw - ( 2 * 15px ) - ( 15 * 8px ) ) / 16 ) * 1 ) + ( 0 * 8px ) + ( 0 * 15px ) );
block-right:width: calc( ( ( ( 100vw - ( 2 * 15px ) - ( 15 * 8px ) ) / 16 ) * 4 ) + ( 4 * 8px ) + ( 1 * 15px ) );
block-left:width: calc( ( ( ( 100vw - ( 2 * 15px ) - ( 15 * 8px ) ) / 16 ) * 12 ) + ( 11 * 8px ) + ( 1 * 15px ) );

*/
.grid{position:fixed;z-index:3000;width:100vw;height:100vh;}
.col-border{width:15px;background-color:rgba(0,0,255,.3);}
.col-col{width:calc( ( ( 100vw - ( 2 * 15px ) - ( 15 * 8px ) ) / 16 ) * 1 );}
.bord-1{width:14px;}
.col-gout{width:8px;background-color:rgba(255,0,0,.3);}
.col-line{height:4px;position:absolute;top:0;background-color:rgba(0,255,0,.3);}
.col-line-1{height:4px;position:absolute;top:auto;bottom:0;}
.col-middle{width: 8px;position:absolute;background-color:rgba(255,255,0,.5);}


/*version grand smartphone*/
@media screen and (max-width: 800px){
    
.col-col{width:calc( ( ( 100vw - ( 2 * 10px ) - ( 15 * 2px ) ) / 16 ) * 1 );}
    .col-gout{width: 2px;}
    .col-border{width:10px;}

}