@font-face {
    font-family: 'League Spartan';
    src: url('league-spartan-master/_webfonts/leaguespartan-bold.eot');
    src: url('league-spartan-master/_webfonts/leaguespartan-bold.eot?#iefix') format('embedded-opentype'),
         url('league-spartan-master/_webfonts/leaguespartan-bold.woff2') format('woff2'),
         url('league-spartan-master/_webfonts/leaguespartan-bold.woff') format('woff'),
         url('league-spartan-master/_webfonts/leaguespartan-bold.ttf') format('truetype'),
         url('league-spartan-master/_webfonts/leaguespartan-bold.svg#league_spartanbold') format('svg');
    font-weight: bold;
    font-style: normal;
}

body {
    font-family: sans-serif;
    margin: 0;
    line-height: 1.2;
    --side-width: .65rem; /* i wanted 1ch but ch varies accros font-size and root ch does not exist */
    --main-width: 70ch;
}

header, nav, main, footer {
    max-width: var(--main-width);
    margin: 1rem auto;
}

h1, h2, h3, h4 {
    font-family: 'League Spartan', sans-serif;
    /* background-color: rgba(24,89,151,.1); */
    color: #185997;
}

a {
    color: #185997;
}

img {
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
    justify-content: center;
}

header {
    margin-top: 0;
    text-align: center;
}

header img {
    width: 20rem;
    margin-bottom: -1em;
}

/*   nav   */

nav {
    background-color: rgba(24,89,151,.2);
    border: 1px solid rgba(24,89,151,.4);
    border-bottom: 4px solid rgba(24,89,151,.4);
    border-radius: 8px;
    margin: 1rem auto;
}

nav ul {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
}

nav li {
    display: inline;
    margin: 8px;
}

nav a {
    color: #185997;
    text-decoration: none;
    font-family: 'League Spartan', sans-serif;
}

nav a:hover {
    text-decoration: underline;
}

/*   article   */

article {
    --color: #ff9916;
    border: 1px solid var(--color);
    border-bottom: 3px solid var(--color);
    border-radius: 8px;
    margin: 1rem auto;
}

section:nth-child(2n+1) article {
    --color: #185997;
}

section:nth-child(2n+1) article .more{
    background-color: #18599733;
}

article h3 {
    color: white;
    background-color: var(--color);
    margin-top: 0;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    padding: 8px;
    padding-left: var(--side-width);
    margin: 0;
}

article .side {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

article > * {
    margin: 1em var(--side-width);
}

article .banner {
    display: flex;
}

.banner img {
    justify-content: center;
}

article .more {
    display: inline-block;
    margin: 0;
    width: 100%;
    text-align: center;
    padding: 1rem 0;
    background-color: rgba(255,153,22,.2);
    font-family: 'League Spartan', sans-serif;
    color: #185997;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

/*   specifics   */

/* summary */
/* ademe + ecusson */
.sc {
    font-variant: small-caps;
}

.short table {
    width: calc(100% - 2 * var(--side-width));
}

.short tbody {
    width: 100%;
}

.short tr {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    flex-direction: row;
}

.short th{
    /* display: inline; */
    text-transform: uppercase;
    color: var(--color);
    text-align: left;
    padding: 0;
    padding-right: 1ch;
}

.short td {
    /* display: inline; */
    text-align: right;
    flex-grow: 1;
}

.logos {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
}

@media (max-width: 50ch) {
    .logos {
        flex-wrap: wrap;
    }
}

@media (min-width: 50ch) {
    .ecusson img{
        max-width: calc(var(--main-width)/3)
    }
}

/* image grid */

.images{
    display: grid;
}

.images * {
    grid-row-start: 1;
}

/* list of partners */
.partenaires {
    padding: 0;
}

.partenaire {
    border-bottom: 1pt solid var(--color);
    margin: 1rem 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.partenaire>*:first-child {
    width: 12rem;
    text-align: center;
}

.partenaire:last-child {
    border: none;
}

.partenaires img {
    max-width: 12rem;
    max-height: 6rem;
}

/*   footer   */

footer {
    text-align: center;
}

@media print{
    article {
        page-break-inside: avoid;
    }

    h2 {
        page-break-after: avoid;
    }
}