body {
margin:20px 20px 100px 20px;
/*width:75%;*/
padding:0;
font-family:Roboto, sans-serif;
font-size:1em;
color:#212121;
text-align:justify;
}

a {text-decoration:none;}
h2 {font-size:1em;border-bottom: 1px solid black;}

.beau {font-family: Archive, sans-serif; font-size: 1.125em; font-weight: 300;}

.bouton7 {text-align:center;display:inline-block;margin:0 7px 10px 7px;
padding:0.5em;
border:1px solid;
border-radius:0.2em;
transition: 0.5s ease-in-out;
overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}

.bouton7:hover {box-shadow:0 3px 5px 0 rgba(0,0,0,0.4)}
.bouton7.small {width:60px;color:white;}

/* Media queries pour le grand bouton */
@media screen and (min-width: 564px) {.bouton7.large {width:140px;}}
@media screen and (max-width: 563px) {.bouton7.large {width: calc((100% - 104px)/3);}}



.bouton7.tspe {border-color:#19246caa;} .bouton7.large.tspe {color:#19246c;background:#19246c0f;} .bouton7.small.tspe {background:#19246cee;}
.bouton7.pspe {border-color:#c3003aaa;} .bouton7.large.pspe {color:#c3003a;background:#c3003a0f;} .bouton7.small.pspe {background:#c3003aee;}
.bouton7.tstl {border-color:#461e61aa;} .bouton7.large.tstl {color:#461e61;background:#461e610f;} .bouton7.small.tstl {background:#461e61ee;}
.bouton7.pstl {border-color:#9c0946aa;} .bouton7.large.pstl {color:#9c0946;background:#9c09460f;} .bouton7.small.pstl {background:#9c0946ee;}
.bouton7.tn {border-color:#424242aa;} .bouton7.large.tn {color:#424242;background:#4242420f;} .bouton7.small.tn {background:#424242ee;}
.bouton7.pn {border-color:#005734aa;} .bouton7.large.pn {color:#005734;background:#0057340f;} .bouton7.small.pn {background:#005734ee;}
.bouton7.bw {border-color:#146bffaa;} .bouton7.large.bw {color:#146bff;background:#146bff0f;} .bouton7.small.bw {background:#146bffee;}
.bouton7.kk {border-color:#f97352aa;} .bouton7.large.kk {color:#f97352;background:#f973520f;} .bouton7.small.kk {background:#f97352ee;}
.bouton7.cs {border-color:#ff5280aa;} .bouton7.large.cs {color:#ff5280;background:#ff52800f;} .bouton7.small.cs {background:#ff5280ee;}
.bouton7.hp {border-color:#4faf00aa;} .bouton7.large.hp {color:#4faf00;background:#4faf000f;} .bouton7.small.hp {background:#4faf00ee;}

/**************************************************************************/
/************** LA SUITE NE CONCERNE QUE LES POLICES **********************/
/**************************************************************************/

/* Titres */
@font-face {
  font-family: 'Archive';
  font-style: normal;
  font-weight: 400;
  src:url(/fonts/Archive-Regular.otf), url(/fonts/Archive-Regular.ttf);
  font-display: swap;
}

/* roboto-100 - latin_latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  src: local('Roboto Thin'), local('Roboto-Thin'), url('/fonts/roboto-v16-latin_latin-ext-100.woff2') format('woff2'), url('/fonts/roboto-v16-latin_latin-ext-100.woff') format('woff');
  font-display: swap;
}

/* roboto-100italic - latin_latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 100;
  src: local('Roboto Thin Italic'), local('Roboto-ThinItalic'), url('/fonts/roboto-v16-latin_latin-ext-100italic.woff2') format('woff2'), url('/fonts/roboto-v16-latin_latin-ext-100italic.woff') format('woff');
  font-display: swap;
}

/* roboto-300 - latin_latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url('/fonts/roboto-v16-latin_latin-ext-300.woff2') format('woff2'), url('/fonts/roboto-v16-latin_latin-ext-300.woff') format('woff');
  font-display: swap;
}

/* roboto-300italic - latin_latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  src: local('Roboto Light Italic'), local('Roboto-LightItalic'), url('/fonts/roboto-v16-latin_latin-ext-300italic.woff2') format('woff2'), url('/fonts/roboto-v16-latin_latin-ext-300italic.woff') format('woff');
  font-display: swap;
}

/* roboto-regular - latin_latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url('/fonts/roboto-v16-latin_latin-ext-regular.woff2') format('woff2'), url('/fonts/roboto-v16-latin_latin-ext-regular.woff') format('woff');
  font-display: swap;
}

/* roboto-italic - latin_latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: local('Roboto Italic'), local('Roboto-Italic'), url('/fonts/roboto-v16-latin_latin-ext-italic.woff2') format('woff2'), url('/fonts/roboto-v16-latin_latin-ext-italic.woff') format('woff');
  font-display: swap;
}

/* roboto-500 - latin_latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'), url('/fonts/roboto-v16-latin_latin-ext-500.woff2') format('woff2'), url('/fonts/roboto-v16-latin_latin-ext-500.woff') format('woff');
  font-display: swap;
}

/* roboto-500italic - latin_latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'), url('/fonts/roboto-v16-latin_latin-ext-500italic.woff2') format('woff2'), url('/fonts/roboto-v16-latin_latin-ext-500italic.woff') format('woff');
  font-display: swap;
}

/* roboto-700 - latin_latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'), url('/fonts/roboto-v16-latin_latin-ext-700.woff2') format('woff2'), url('/fonts/roboto-v16-latin_latin-ext-700.woff') format('woff');
  font-display: swap;
}

/* roboto-700italic - latin_latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url('/fonts/roboto-v16-latin_latin-ext-700italic.woff2') format('woff2'), url('/fonts/roboto-v16-latin_latin-ext-700italic.woff') format('woff');
  font-display: swap;
}