@font-face {
font-family: 'Pump Triline';
src: url('../fonts/Pump-Triline.woff2') format('woff2'),url('../fonts/Pump-Triline.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'ITC Bauhaus';
src: url('../fonts/ITC-Bauhaus-Medium.woff2') format('woff2'),url('../fonts/ITC-Bauhaus-Medium.woff') format('woff');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'DejaVu Sans Mono';
src: url('../fonts/DejaVuSansMono.woff2') format('woff2'),url('../fonts/DejaVuSansMono.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Helvetica';
src: url('../fonts/Helvetica-Roman.woff2') format('woff2'),url('../fonts/Helvetica-Roman.woff') format('woff');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'Helvetica';
src: url('../fonts/Helvetica-Bold.woff2') format('woff2'),url('../fonts/Helvetica-Bold.woff') format('woff');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'Helvetica';
src: url('../fonts/Helvetica-Oblique.woff2') format('woff2'),url('../fonts/Helvetica-Oblique.woff') format('woff');
font-weight: 500;
font-style: oblique;
}
@font-face {
font-family: 'Helvetica';
src: url('../fonts/Helvetica-BoldOblique.woff2') format('woff2'),url('../fonts/Helvetica-BoldOblique.woff') format('woff');
font-weight: bold;
font-style: oblique;
}
/********** **********/
html {
font-family: sans-serif;
font-size: 12px;
/*valeurs par défaut*/
display: block;
}
html:focus {
/*valeurs par défaut*/
outline: none;
}
/***SECTIONS***/
body {
grid-template-columns: [nav] 12.5% [mainleft] 87.5% [mainright];
grid-template-rows: [header] calc(77/576*100%) [maintop] calc(422/576*100%) [footer] calc(77/576*100%) [bottom];
font-family: "Helvetica";
font-size: calc(1rem/37.656*39.375); /* 1rem/[hauteur de x de Helvetica Roman]pt*[hauteur de x de DejaVu Sans Book]pt */
margin-top: 9.375%; /* ((768px-576px)/2)/1024px */
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
max-width: 1024px;
/*valeurs par défaut adaptées*/
display: grid;
margin: 9.375% auto 0 auto;
}
body:focus {
/*valeurs par défaut*/
outline: none;
}
article {
/*valeurs par défaut*/
display: block;
}
nav {
grid-column-start: nav;
grid-column-end: mainleft;
grid-row-start: maintop;
grid-row-end: footer;
/*valeurs par défaut*/
display: block;
}
h1 {
font-family: "Pump Triline";
/*valeurs par défaut adaptées*/
display: block;
font-size: calc(1rem/3*10/48.024*52.5); /* 1rem/3*10/[hauteur de X de Pump Triline]pt*[hauteur de X de DejaVu Sans Book]pt */
font-weight: normal;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
text-transform: lowercase;
}
header h1 {
height: 100%;
line-height: 100%;
text-align: center;
width: 87.5%;
}
header h1::after {
content : "\00A0\2014";
}
header h1::before {
content : "\2014\00A0";
}
h2 {
font-family: "ITC Bauhaus";
padding-top: calc(1rem/3*2);
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
/*valeurs par défaut adaptées*/
display: block;
font-size: calc(1rem/34.56*39.375); /* 1rem/[hauteur de x de Bauhaus Medium]pt*[hauteur de x de DejaVu Sans Book]pt */
font-weight: 500;
margin-top: 0;
margin-right: 1rem;
margin-bottom: 0;
margin-left: 1rem;
}
h2:first-of-type {
padding-top: 0;
}
header {
grid-column-start: nav;
grid-column-end: mainright;
grid-row-start: header;
grid-row-end: maintop;
max-height: 77px;
/*valeurs par défaut adaptées*/
display: flex;
}
footer {
grid-column-start: mainleft;
grid-column-end: mainright;
grid-row-start: footer;
grid-row-end: bottom;
align-items: flex-end;
box-sizing: border-box;
justify-content: center;
max-height: 77px;
padding-top: calc(48/896*100%); /* (77px-29px)/896px*100% */
/*valeurs par défaut adaptées*/
display: flex;
}
/***GROUPING CONTENT***/
p {
hyphens: auto;
padding-top: calc(1rem/3);
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
text-align: justify;
/*valeurs par défaut adaptées*/
display: block;
margin-top: 0;
margin-right: 1rem;
margin-bottom: 0;
margin-left: 1rem;
}
hr {
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: #0e4e77;
border-left-color: transparent;
border-top-style: none;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-top-width: 0;
border-right-width: 0;
border-bottom-width: 1px;
border-left-width: 0;
/*valeurs par défaut adaptées*/
border-style: none none solid none;
border-width: 0 0 1px 0;
display: block;
margin-top: calc(1rem/3*10/48.024*52.5/2); /* 1rem/3*10/[hauteur de X de Pump Triline]pt*[hauteur de X de DejaVu Sans Book]pt/2 */
margin-right: calc(100%/6);
margin-bottom: calc(1rem/3*10/48.024*52.5/2 - 1px); /* 1rem/3*10/[hauteur de X de Pump Triline]pt*[hauteur de X de DejaVu Sans Book]pt/2-1px */
margin-left: calc(100%/6);
}
hr+* {
padding-top: 0;
}
ul, menu {
list-style-image: url(../illustrations/decor/puce.svg);
list-style-position: outside;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
/*valeurs par défaut adaptées*/
display: block;
list-style-type: square;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: calc(1rem*68.615/72/48.024*52.5); /* 1rem*[largeur de "# "]pt/72pt/[hauteur de X de Pump Triline]pt*[hauteur de X de DejaVu Sans Book]pt */
padding-left: 0;
}
ul {
margin-right:1rem;
margin-left: calc(1rem*68.615/72/48.024*52.5 + 1rem); /* 1rem*[largeur de "# "]pt/72pt/[hauteur de X de Pump Triline]pt*[hauteur de X de DejaVu Sans Book]pt+1rem */
}	
h2+ul { 
padding-top: calc(1rem/3);
}
li {
/*valeurs par défaut*/
display: list-item;
}
::marker {
content: "\0023\00A0";
font-family: "Pump Triline";
font-size: calc(1rem/48.024*52.5); /* 1rem/[hauteur de X de Pump Triline]pt*[hauteur de X de DejaVu Sans Book]pt */
}
figure {
/*valeurs par défaut adaptées*/
display: block;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}
header figure {
height: 100%;
width: 12.5%;
}
main figure {
height: auto;
width: 100%;
}
main {
grid-column-start: mainleft;
grid-column-end: mainright;
grid-row-start: maintop;
grid-row-end: footer;
grid-template-columns: [mainleft] calc(100%/3) [maincolumnleft] calc(100%/3) [maincolumnright] calc(100%/3) [mainright];
grid-template-rows: [maintop] 100% [footer];
display: grid;
max-height: 422px;
}
/***TEXT-LEVEL SEMANTICS***/
a:link {
background-color: transparent;
font-family: "Helvetica";
font-size: calc(1rem/37.656*39.375); /* 1rem/[hauteur de x de Helvetica Roman]pt*[hauteur de x de DejaVu Sans Book]pt */
/*valeurs par défaut adaptées*/
color: #0e4e77;
cursor: pointer;
text-decoration: none;
}
a:visited {
background-color: transparent;
/*valeurs par défaut adaptées*/
color: #0e4e77;
cursor: pointer;
text-decoration: none;
}
a:link:active {
background-color: transparent;
/*valeurs par défaut adaptées*/
color: #dd7cae;
}
a:visited:active {
background-color: transparent;
/*valeurs par défaut adaptées*/
color: #dd7cae;
}
a:hover {
background-color: transparent;
color: #dd7cae;
font-style: oblique;
font-weight: bold;
text-shadow: calc(1rem/6) calc(1rem/6) calc(1rem/6) #f3adb1;
}
a.focus {
background-color: transparent;
color: #dd7cae;
}
small {
/*valeurs par défaut adaptées*/
font-size: calc(1rem/12*8/37.656*39.375); /* 1rem/12pt*8pt/[hauteur de x de Helvetica Roman]pt*[hauteur de x de DejaVu Sans Book]pt */
}
q:lang(fr) {
quotes: '\00AB\202F' '\202F\00BB';
/*valeurs par défaut*/
display: inline;
}
q:lang(en) {
quotes: '\201C' '\201D';
/*valeurs par défaut*/
display: inline;
}
q:lang(de) {
quotes: '\201E' '\201D';
/*valeurs par défaut*/
display: inline;
}
abbr {
cursor: help;
text-decoration: none;
}
/***EMBEDDED CONTENT***/
.areseauxsociaux {
height: 29px; /* cf. https://www.facebook.com/brand/resources/instagram/icons */
padding-top: 0;
padding-right: 14.5px;
padding-bottom: 0;
padding-left: 14.5px;
width: auto;
/*valeurs par défaut adaptées (img)*/
display: block;
}
.entestelogo {
height: auto;
width: 100%;
/*valeurs par défaut adaptées (img)*/
display: block;
}
.illustrationsmarges {
height: auto;
width: 100%;
/*valeurs par défaut adaptées (img)*/
display: block;
}
/***FORMS***/
form {
margin-right: 1rem;
margin-left: 1rem;
/*valeurs par défaut adaptées*/
display: block;
margin-top: calc(1rem/3);
}
label {
display: block;
font-size: calc(1rem/12*8/37.656*39.375); /* 1rem/12pt*8pt/[hauteur de x de Helvetica Roman]pt*[hauteur de x de DejaVu Sans Book]pt */
/*valeurs par défaut*/
cursor: default;
}
input, textarea {
background-color: transparent;
border: 1px solid #0e4e77;
border-radius: calc(1rem/3);
box-sizing: border-box; /* prend en compte le padding et la bordure */
color: #000000;
display: block;
font-family: "DejaVu Sans Mono";
font-size: 1rem;
font-weight: normal;
margin-right: auto;
margin-bottom: calc(1rem/3);
margin-left: auto;
padding-top: calc(1rem/12);
padding-right: calc(1rem/6);
padding-bottom: calc(1rem/12);
padding-left: calc(1rem/6);
width: 100%;
}
input[type="submit"], input[type="reset"] {
width: calc(100%/3*2);
}
textarea {
resize: none;
}
fieldset {
border-top-style: dotted;
border-right-style: dotted;
border-bottom-style: dotted;
border-left-style: dotted;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
margin-top: calc(1rem/3); /*extérieur de la bordure*/
/*valeurs par défaut adaptées*/
border: 1px dotted;
display: block;
margin-left: 0;
margin-right: 0;
padding-top: 0;
padding-right: calc(1rem/3); /*intérieur de le bordure*/
padding-bottom: 0;
padding-left: calc(1rem/3);
}
legend {
background-color: transparent;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
color: #f3adb1;
font-size: calc(1rem/12*8/37.656*39.375); /* 1rem/12pt*8pt/[hauteur de x de Helvetica Roman]pt*[hauteur de x de DejaVu Sans Book]pt */
/*valeurs par défaut adaptées*/
border: none;
display: block;
padding-left: calc(1rem/12*8/37.656*39.375/3); /* 1rem/12pt*8pt/[hauteur de x de Helvetica Roman]pt*[hauteur de x de DejaVu Sans Book]pt/3 */
padding-right: calc(1rem/12*8/37.656*39.375/3);
}
/***MAIN GRID***/
.main100 {
grid-column-start: mainleft;
grid-column-end: maincolumnleft;
}
.main020 {
grid-column-start: maincolumnleft;
grid-column-end: maincolumnright;
}
.main003 {
grid-column-start: maincolumnright;
grid-column-end: mainright;
}
.main120 {
grid-column-start: mainleft;
grid-column-end: maincolumnright;
}
/* --------------------------- */