html {
scroll-behavior: smooth;
}
p.small {
line-height: 0.1;
font-size: 3px;
}
p.moyen {
line-height: 0.1;
font-size: 10px;
}
@font-face {
font-family: 'Simple Ornament';
src: url('fonts/Simple Ornament.otf') format('opentype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Gouttes';
src: url('fonts/Gouttes.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
.goutte{
font-family: 'Gouttes';
}
.ornement{
font-family: 'Simple Ornament';
}
.titlepage{
width:100vw;
font-family: 'Simple Ornament', sans-serif;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
background-color: blue;
color: white;
padding: 0px;
margin-left:-10px;
margin-top: -10px;
border: 3px solid black;
}
#go14 {
background-color: white; /* Vert */
color: blue;
font-family: Vernada,Arial;
font-size: 14pt;
border : none;
cursor: pointer;
}
#go1ÿ ho ?? {
background-color:green; /* cyan */
color: white;
}
#go16 {
background-color: white; /* Vert */
color: blue;
font-family: Vernada,Arial;
font-size: 16pt;
border : none;
cursor: pointer;
}
#go16:hover {
background-color:green;
color: white; /* cyan */
}
/********** fonds ********/
.bgblanc{
background-color: white;
color: black;
}
/********** taille polices ********/
.t8{
font-size: 8pt;
}
.t9{
font-size: 9pt;
}
.t10{
font-size: 10pt;
}
.t11{
font-size: 11pt;
}
.t12{
font-size: 12pt;
}
.t13{
font-size: 13pt;
}
.t14{
font-size: 14pt;
}
.t15{
font-size: 15pt;
}
.t16{
font-size: 16pt;
}
.t17{
font-size: 17pt;
}
.t18{
font-size: 18pt;
}
.t19{
font-size: 19pt;
}
.t20{
font-size: 20pt;
}
.t22{
font-size: 22pt;
}
.t24{
font-size: 24pt;
}
.t26{
font-size: 26pt;
}
.t28{
font-size: 28pt;
}
.t30{
font-size: 30pt;
}
.t32{
font-size: 32pt;
}
.t34{
font-size: 34pt;
}
.t36{
font-size: 36pt;
}
.t38{
font-size: 38pt;
}
.t40{
font-size: 40pt;
}
/********** couleur polices ********/
.cv{
color:green;/* vert*/
}
.cb{
color:blue; /* blueu */
}
.cr{
color:red; /* rouge */
}
.cj{
color:yellow; /* jaune */
}
.cy{
color:cyan; /* cyan */
}
/********** polices en gras ********/
.gr{
font-weight: bold;
}
/********** fonds gris ********/
.fond1{
background-color: #000; /* noir */
}
.fond1{
background-color: #000; /* noir */
}
.fond0{
background-color: #000; /* noir */
}
.fond1{
background-color: #111;
}
.fond2{
background-color: #222;
}
.fon3{
background-color: #333;
}
.fond4{
background-color: #444;
}
.fond5{
background-color: #555;
}
.fond6{
background-color: #666;
}
.fond7{
background-color: #777;
}
.fond8{
background-color: #888;
}
.fond9{
background-color: #999;
}
.fonda{
background-color: #aaa;
}
.fondb{
background-color: #bbb;
}
.fondc{
background-color: #ccc;
}
.fondd{
background-color: #ddd;
}
.fonde{
background-color: #eee;
}
.fondf{
background-color: #fff; /* blanc */
}
/********** espace extérieur gauche - marge ********/
.mg10{
margin-left : 10px;
}
.mg15{
margin-left : 15px;
}
.mg20{
margin-left : 20px;
}
.mg25{
margin-left : 25px;
}
.mg30{
margin-left : 30px;
}
.mg35{
margin-left : 35px;
}
.mg40{
margin-left: 40px;
}
.mg45{
margin-left : 45px;
}
.mg50{
margin-left: 50px;
}
.mg55{
margin-left : 55px;
}
.mg60{
margin-left: 60px;
}
.mg65{
margin-left : 65px;
}
.mg70{
margin-left : 70px;
}
.mg75{
margin-left : 75px;
}
.mg80{
margin-left: 80px;
}
.mg85{
margin-left : 85px;
}
.mg90{
margin-left : 90px;
}
.mg95{
margin-left : 95px;
}
.mg100{
margin-left: 100px;
}
.mg150{
margin-left: 150px;
}
/********** espace extérieur droite- marge ********/
md10{
margin-right : 10px;
}
.md15{
margin-right : 15px;
}
.md20{
margin-right : 20px;
}
.md25{
margin-right : 25px;
}
.md30{
margin-right : 30px;
}
.md35{
margin-right : 35px;
}
.md40{
margin-right: 40px;
}
.md45{
margin-right : 45px;
}
.md50{
margin-right: 50px;
}
.md55{
margin-right : 55px;
}
.md60{
margin-right: 60px;
}
.md65{
margin-right : 65px;
}
.md70{
margin-right : 70px;
}
.md75{
margin-right : 75px;
}
.md80{
margin-right: 80px;
}
.md85{
margin-right : 85px;
}
.md90{
margin-right : 90px;
}
.md95{
margin-right : 95px;
}
.md100{
margin-right: 100px;
}
.md150{
margin-right: 150px;
}
/********** espace extérieur haut - marge ********/
.mh-10{
margin-top : -10px;
}
.mh-5{
margin-top : -5px;
}
.mh0{
margin-top : 0px;
}
.mh10{
margin-top : 10px;
}
.mh15{
margin-top : 15px;
}
.mh20{
margin-top : 20px;
}
.mh25{
margin-top : 25px;
}
.mh30{
margin-top : 30px;
}
.mh35{
margin-top : 35px;
}
.mh40{
margin-top: 40px;
}
.mh45{
margin-top : 45px;
}
.mh50{
margin-top: 50px;
}
.mh55{
margin-top : 55px;
}
.mh60{
margin-top: 60px;
}
.mh65{
margin-top : 65px;
}
.mh70{
margin-top : 70px;
}
.mh75{
margin-top : 75px;
}
.mh80{
margin-top: 80px;
}
.mh85{
margin-top : 85px;
}
.mh90{
margin-top : 90px;
}
.mh95{
margin-top : 95px;
}
.mh100{
margin-top: 100px;
}
.mh150{
margin-top: 150px;
}
/********** espace extérieur bas - marge ********/
.mb10{
margin-bottom : 10px;
}
.mb15{
margin-bottom : 15px;
}
.mb20{
margin-bottom : 20px;
}
.mb25{
margin-bottom : 25px;
}
.mb30{
margin-bottom : 30px;
}
.mb35{
margin-bottom : 35px;
}
.mb40{
margin-bottom: 40px;
}
.mb45{
margin-bottom : 45px;
}
.mb50{
margin-bottom: 50px;
}
.mb55{
margin-bottom : 55px;
}
.mb60{
margin-bottom: 60px;
}
.mb65{
margin-bottom : 65px;
}
.mb70{
margin-bottom : 70px;
}
.mb75{
margin-bottom : 75px;
}
.mb80{
margin-bottom: 80px;
}
.mb85{
margin-bottom : 85px;
}
.mb90{
margin-bottom : 90px;
}
.mb95{
margin-bottom : 95px;
}
.mb100{
margin-bottom: 100px;
}
.mb150{
margin-bottom: 150px;
}
/********** espace intérieur autour - padding ********/
.pad10{
padding : 10px;
}
.pad15{
padding : 15px;
}
.pad20{
padding : 20px;
}
.pad25{
padding : 25px;
}
.pad30{
padding : 30px;
}
.pad35{
padding : 35px;
}
.pad40{
padding: 40px;
}
.pad45{
padding : 45px;
}
.pad50{
padding: 50px;
}
.pad55{
padding : 55px;
}
.pad60{
padding: 60px;
}
.pad65{
padding : 65px;
}
.pad70{
padding : 70px;
}
.pad75{
padding : 75px;
}
.pad80{
padding: 80px;
}
.pad85{
padding : 85px;
}
.pad90{
padding : 90px;
}
.pad95{
padding : 95px;
}
.pad100{
padding: 100px;
}
.pad150{
padding: 150px;
}
/********** interligne ********/
.es0 {
line-height: -10%;
}
.es10 {
line-height: 10%;
}
.es30 {
line-height: 30%;
}
.es50 {
line-height: 50%;
}
.es60 {
line-height: 60%;
}
.es70 {
line-height: 70%;
}
.es80 {
line-height: 80%;
}
.es100 {
line-height: 100%;
}
.es110 {
line-height: 110%;
}
.es120 {
line-height: 120%;
}
.es130 {
line-height: 130%;
}
.es140 {
line-height: 140%;
}
.es150 {
line-height: 150%;
}
.es160 {
line-height: 160%;
}
.es170 {
line-height: 170%;
}
.es180 {
line-height: 180%;
}
.es200 {
line-height: 200%;
}
/********** texte centré absolute ********/
.textaucentre {
top:50%;
left:50%;
transform: translate(-50%, -50%);
}
/********** choix police ********/
.pa {
font-family: Arial;
}
.pab {
font-family: Arial Black;
}
.pv {
font-family: Verdana;
}
.pva {
font-family: Verdana, Arial;
}
.pc {
font-family: cabibri;
}
.pt {
font-family: Trebuchet MS, sans-serif;
}
.ps {
font-family: Segoe UI , sans-serif;
}
/********** alignement texte horizontal ********/
.ahg {
text-align: left;
}
.ahd {
text-align: right;
}
.ahc {
text-align: center;
}
.ahj {
text-align: justify;
}
/********** alignement texte vertical ********/
.avh {
vertical-align: top;
}
.avb {
vertical-align: bottom;
}
.avm {
vertical-align: middle;
}
/********** bordure simple noire ********/
.bs1{
border: 1px solid black;
}
.bs2{
border: 2px solid black;
}
.bs3{
border: 3px solid black;
}
/********** bordure double noire ********/
.bd1{
border: 1px double black;
}
.bd2{
border: 2px double black;
}
.bd3{
border: 3px double black;
}
/********** style d'écriture ********/
.sti{
font-style : italic;
}
.sts{
text-decoration : underline;
}
.stb{
text-decoration : line-through;
}
.tsblack{
text-shadow: 2px 2px 4px black; /*** noir ***/
}
.tsblue{
text-shadow: 2px 2px 4px blue; /*** bleu ***/
}
.tsgray{
text-shadow: 2px 2px 4px #999; /*** gris ***/
}
.tsblue2{
text-shadow: 2px 2px 4px #9ee7ed; /*** bleu pâle ***/
}
/********** angle arrondi ********/
.br3{
border-radius: 3px;
}
.br5{
border-radius: 5px;
}
.br7{
border-radius: 7px;
}
.br10{
border-radius: 10px;
}
/********** position *********/
.posa{
position: absolute;
}
.posr{
position: relative;
}
/********** boutons *********/
.bntbleu a {
display: inline-block;
padding: 10px 15px;
background-color: blue;
color: white;
font-weight: bold;
text-decoration: none;
/*border-radius: 8px;*/
border: 2px solid white;
font-size: 14px;
}
.bntbleu a:hover {
background-color: cyan;
color: black;
border-color: black;
}
.bntrouge a {
display: inline-block;
padding: 10px 15px;
background-color: red;
color: white;
font-weight: bold;
text-decoration: none;
/*border-radius: 8px;*/
border: 2px solid white;
font-size: 14px;
}
.bntrouge a:hover {
background-color: cyan;
color: black;
border-color: black;
}
.bntvert a {
display: inline-block;
padding: 10px 15px;
background-color: green;
color: white;
font-weight: bold;
text-decoration: none;
/*border-radius: 8px;*/
border: 2px solid white;
font-size: 14px;
}
.bntvert a:hover {
background-color: cyan;
color: black;
border-color: black;
}
.container {
width: 100%;
height: 100%;
display: flex; /* Utilise Flexbox pour aligner le titre et le cadre */
align-items: center; /* Aligne verticalement les éléments au centre */
margin: 0 auto;
}