@font-face {
	font-family : 'Entete' ;
	src : url('Monday_Routines.ttf') format('opentype') ;
    font-display: swap;
}

* {
color:#000;
font-family:Roboto,"Helvetica Neue",Arial,sans-serif;
outline:0;
text-decoration:none;
}

h2,h3 {
color:#742c1c;
}

a,.summary {
color:#307957;
text-decoration:underline;
text-decoration-color:transparent;
transition:.1s;
}

a:hover,.summary:hover {
text-decoration-color:#307957;
}

summary {
-moz-user-select:none;
background-color:#c1efd9;
cursor:pointer;
margin:.1rem 0;
padding:.4rem;
padding-left:.7rem;
transition-duration:.3s;
transition-property:background-color;
user-select:none;
width:10rem;
}

summary:hover {
background-color:#e1fff1;
}

details[open] summary ~ * {
animation:sweep .5s ease-out;
}

@keyframes sweep {
    0% {
    opacity:0;
    }

    100% {
    opacity:1;
    }
}

li {
list-style-type:none;
}

.centrer {
text-align:center;
}

#about table {
border-spacing:1.5rem 0;
margin-top:.5rem;
}

.details {
display:none;
}

.lien_label {
color:#e60000;
}

.lien_label:hover {
text-decoration-color:#e60000;
}

.PDF {
color:#e60000;
}

.PDF:hover {
text-decoration-color:#e60000;
}

.rouge {
color:#e60000;
}

.summary {
-moz-user-select:none;
cursor:pointer;
user-select:none;
}

/******************** CORPS ********************/
html,body {
height:100%;
margin:0;
padding:0;
scroll-behavior: smooth;
}

body {
background-color:#fff;
display:table;
width:100%;
}

/******************** ENTETE ********************/
header {
background:#22563e;
min-height:13rem;
align-items:center;
cursor:pointer;
display:flex;
flex-direction:column;
justify-content:center;
border-bottom: 3px solid white;
padding:1rem;
}

header h1 {
color: white;
font-family: 'Entete';
font-size:9rem;
font-weight:400;
margin:0;
text-align:center;
}

header h2 {
color:white;
font-size:1.3rem;
font-weight:500;
margin:0;
text-align:center;
}

/******************** MENU ********************/
nav {
display:flex;
justify-content:center;
position:sticky;
top:0;
-moz-user-select:none;
user-select:none;
z-index:1000;
clear:left;
background:#D9B68B;
border-bottom: 3px solid white;
}

nav > a, nav > span {
color: white;
font-size: 1.5rem;
font-weight: 500;
float:left;
cursor:pointer;
display:flex;
text-decoration:none;
padding:0.8rem;
}

nav > span {
padding-left:0;
padding-right:0;
}

nav > a.ici {
color:rgb(116,44,28);
}

/*nav > a.ici, nav > a.ici:hover {
color:#742c1c !important;
}

nav > a:hover, nav > a:not(.ici):hover {
color:#A66641 !important;
}*/

/******************** section ********************/
section {
background:#fff;
font-size:1rem;
text-align:justify;
}

section > article {
padding:1rem 10%;
padding-top: 3rem;
padding-bottom: 3rem;
scroll-margin-top: 3rem;
}

section > article:nth-child(even) {
background: #fff9f0;
}

section > article:first-child {
padding-top: 3rem;
}

section > article:last-child {
padding-bottom: 3rem;
border-bottom: 3px solid white;
}

section h3 {
padding-left:1rem;
margin:0;
padding-top:1rem;
}

section h2 {
margin-bottom:0;
padding-bottom:1rem;
}

section p {
margin-bottom:0;
padding-left:2rem;
}

section table {
border-spacing:1.5rem;
}

section table div {
padding-top:.5rem;
}

section td {
vertical-align:top;
}

section td > ul > li {
padding-bottom:.5rem;
}

section tr td:first-child {
min-width:8rem;
text-align:right;
}

section tr td:first-child b, .lien_b {
color:#A66641;
}

section ul {
margin:0;
padding:0;
}

section details ul {
padding-left:1.2rem;
}

section details ul li {
list-style-type:disc;
}

section details > div {
padding-top:0;
}

#prof {
display:flex;
}

#prof > div:nth-child(1) {
width:70%;
}

#prof > div:nth-child(2) {
padding-left:5%;
}

#photo {
-moz-border-radius:7.5rem;
-webkit-border-radius:7.5rem;
border-radius:7.5rem;
box-shadow:0 0 5px #343434;
height:auto;
margin-bottom:1rem;
margin-top:1rem;
overflow:hidden;
width:14rem;
}

#reseau img {
height:auto;
padding-right:1rem;
width:1.4rem;
padding-right:0.6rem;
}

/******************** FOOTER ********************/

footer {
background:#D9B68B;
text-align:center;
font-size:.9em;
padding: 1.7rem;
}

footer a:hover {
text-decoration-color:#742c1c;
}

footer div,footer a {
color:#742c1c;
}

/******************** MOBILE ********************/
@media (max-width: 950px) {
    #about table {
    border-spacing:0;
    }

    #about table tr {
    margin-bottom:0;
    margin-top:0;
    }

    body {
    margin:auto;
    }

    header {
    min-height:0;
    padding:1rem;
    }

    header h1 {
    font-size:7rem;    
    }

    header h2 {
    font-size:1.5rem;    
    }

    nav {
    display:flex;
    flex-wrap:wrap;
    padding-top: 0.4rem;
    }

    nav a, nav span {
    padding-bottom:0.4rem;
    padding-top:0;
    font-size: 1.1rem;
    }

    section {
    margin-left:0;
    margin-right:0;
    padding:0;
    text-align:left;
    }

    section > article {
    padding: 1rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
    scroll-margin-top: 3rem;
    }

    section > article:first-child {
    padding-top: 1rem;
    }

    section > article:last-child {
    padding-bottom: 1rem;
    }

    section h3 {
    padding-left:0.5rem;
    padding-top:1rem;
    }

    section h2 {
    margin-bottom:0;
    padding-bottom:0;
    }

    section p {
    padding-left:0.5rem;
    }

    section table {
    border-spacing:0;
    }

    section table tr {
    display:flex;
    flex-direction:column;
    margin-left:1rem;
    margin-top:1rem;
    }

    section tr td:first-child {
    text-align:left;
    }

    #prof {
    flex-direction:column;
    }

    #prof > div:nth-child(1) {
    order:2;
    width:100%;
    }

    #prof > div:nth-child(2) {
    order:1;
    }
}

@media (max-width: 660px) {
    header h1 {
    font-size:3rem;    
    }

    header h2 {
    font-size:1rem;    
    }
}