:root {

    --x-unit: 3mm;
    --y-unit: 4mm; 

           
   } 

/* FONT UPLOAD */



@font-face {
    font-family: "variableneon";
    src: url("../font/TiltNeon-Regular.ttf");

  /*  font-variation-settings: "XROT" -45deg;
    font-variation-settings: "YROT" -45deg;*/
  }


@font-face {
    font-family: "neonbouge";
    src: url("../font/TiltNeon-Regular.ttf");
/* 
    font-variation-settings: "XROT" 50deg;
    font-variation-settings: "YROT" 75deg; */
}

@font-face {
    font-family: "publifluor";
    src: url(../font/PubliFluorChrystelise.otf);

} 

@font-face {
    font-family: "publifluor_droite";
    src: url(../font/PubliFluorNormale.otf);

} 



@font-face {

    font-family: "molle";
    src: url(../font/Molle-Italic.ttf);

}



/*GROSSES CLASSES */

body {

    overflow-y: hidden; 
    height: 100%;
}


main {

display: grid;
grid-template-columns: repeat(7, 1fr);
column-gap: 10pt;

}






h1 {

    font-family: "publifluor"; 
    text-align: center;
    font-size: 43pt;
    line-height: 12mm;
    string-set: title content(text); 


}

h2 {

    font-family: "publifluor";
    text-align: center;
    font-size: 40pt;
    line-height: 12mm;

    margin-top: calc(var(--y-unit) * 1);
    margin-bottom: calc(var(--y-unit) * 1)
}

h3 {

    position : sticky;
    top: 0;
    background-color: white;
    padding-top:20px;
    padding-bottom:25px;
    text-decoration: underline dotted;
    text-decoration-thickness: 2px;


    font-family: "publifluor";
    text-align: center;
    font-size: 15pt;
    line-height: 15pt;
    page-break-before: right;

}

h4 {

    font-family: "publifluor";
    text-align: center;
    font-size: 23pt;
    line-height: 20pt;
    margin-bottom: calc(var(--y-unit) * 1);
    margin-top: calc(var(--y-unit) * 1);
    
    /*text-decoration: underline dotted;*/

}

h5 {

    font-family: "variableneon";
    text-align: center;
    font-size: 17pt;
    line-height: 20pt;
    margin-bottom: calc(var(--y-unit) * 0);
    margin-top: calc(var(--y-unit) * 0 );


}




p {

    font-family: "variableneon";
    font-size: 10pt;
    line-height: 4mm;
    text-align: center;
    margin-top: calc(var(--y-unit) * 2);
  /*  margin-left: calc(var(--x-unit) * 2);
    margin-right: calc(var(--x-unit) * 2);
    column-count: 2;
    column-gap: calc(var(--x-unit) * 1);
    column-fill: auto;
    

   /* text-align: justify;*/
   
}

figcaption {

    font-family: "variableneon";
    font-size: 10pt;
    line-height: 4mm;
    text-align: center;
    margin-top: 5px;
  /*  margin-left: calc(var(--x-unit) * 2);
    margin-right: calc(var(--x-unit) * 2);*/
    

}


img {
    
    
    width: 85%;

    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
    margin-left: calc(var(--x-unit) * 0);

     
}

a {

    font-family: "variableneon";
    text-align: left;
    font-size: 10pt;
    color: green;
    
}

a:hover {

    color: rgb(89, 89, 226);
    cursor: pointer;    

}
    
    

sup {

    font-family: amieamierounditalique;
    font-size: 7pt;
    
}

figure {


    margin-left: 0;
    margin-right: 0;


}


/* PETITES CLASSES*/

.img_corpus {

  /* transform: rotate(5deg);*/
   /*margin-left: 15px;
   width: 50%;*/


}


.img_titre {


width: 120%;
box-shadow: none;

}

.colonne_1 {

    grid-column: 1/3;
    width: 110% ;
    height: 100vh;




}

.colonne_2 {


    column-count: 1/2;
    height: 100vh;
    overflow: scroll;


}


.colonne_3 {

    column-count: 2/3;

    height: 100vh;

    overflow: scroll;



}

.colonne_4 {

    height: 100vh;
    overflow: scroll;



}

.colonne_5 {

    height: 100vh;
    overflow: scroll;



}


.colonne_6 {

    height: 100vh;
    overflow: scroll;



}

.caller {



    font-family: publifluor_droite;
    font-size: 10pt;
    text-align: center;



}


@media screen and (max-width: 915px) {


body {

        overflow-y: auto;
}

main {


    display: inline-block;

}

img {

    margin-left: 30px ;
}

figcaption {

    margin-top: 10px;
    margin-bottom: 15px;
}

h4 {

width: 90%;

margin-left: 20px;

margin-top: 30px;
margin-bottom: 20px;

}

.img_titre {

    width: 100%;
    margin-left: -20px;
}

.caller {

 font-size: 15pt;


}



.colonne_2 {


    column-count: 1/2;
    height: 100%;
    overflow: auto;


}


.colonne_3 {

    column-count: 2/3;

    height: 100%;

    overflow: auto;



}

.colonne_4 {

    height: 100%;
    overflow: auto;



}

.colonne_5 {

    height: 100%;
    overflow: auto;



}


.colonne_6 {

    height: 100%;
    overflow: auto;



}
    
}