/******************************************* GENERAL *******************************************/
:root {
    --pink-light:#F2E9E8;
    --pink-middle:#E4DAD9;
    --pink-dark:#c79592;
    --orange-light:#F5F1E9;
    --orange-middle:#F3E9D6;
    --orange-dark:#cab281;
    --yellow-light:#F7F7EA;
    --yellow-middle:#F7F6D1;
    --yellow-dark:#b19e35;
    --green-light:#E3F1ED;
    --green-middle:#BCDFCB;
    --green-dark:#608b77;
    --blue-light:#e6f9f8;
    --blue-middle:#C1E2E0;
    --blue-dark:#6399a1;
    --black:rgb(45, 45, 45);
}

a { text-decoration: none; }
a:hover { opacity:.6; transition:all .6s ease-in-out; }

.white-bg {background:white;}
.pink-bg {background:var(--pink-light); --text:var(--green-dark); --link:var(--orange-dark); --accent-color:var(--green-dark); --selection:var(--pink-middle);}

.orange-bg {background:var(--orange-light); --text:var(--blue-dark); --link:var(--yellow-dark); --accent-color: var(--blue-dark); --selection:var(--orange-middle);}
.yellow-bg {background:var(--yellow-light); --text:var(--pink-dark); --link:var(--green-dark); --accent-color: var(--pink-dark); --selection:var(--yellow-middle);}
.green-bg {background:var(--green-light); --text:var(--pink-dark); --link:var(--blue-dark); --accent-color: var(--pink-dark); --selection:var(--green-middle);}
.blue-bg {background:var(--blue-light); --text:var(--orange-dark); --link:var(--pink-dark); --accent-color: var(--orange-dark); --selection:var(--blue-middle);}
    a {color:var(--link);}
    ::selection { background:var(--selection); }
.pink-tx {color:var(--pink-dark);--text:var(--pink-dark);}
.orange-tx {color:var(--orange-dark);--text:var(--orange-dark);}
.yellow-tx {color:var(--yellow-dark);--text:var(--yellow-dark);}
.green-tx {color:var(--green-dark);--text:var(--green-dark);}
    .green-tx a {color:var(--pink-dark);}
    .green-tx ::selection { background:var(--green-light);}
.blue-tx {color:var(--blue-dark);--text:var(--blue-dark);}
.black-tx {color:var(--black); --text:var(--black);}

html { width:100%; height:100%; }
* { box-sizing: border-box; color:var(--text);}
.flex { display:flex; }
.flex-reverse { flex-direction: row-reverse; justify-content: space-between; }
.float-left { float:left; margin-right:0.5rem; }
.float-right { float:right; margin-left:0.5rem; }
.justify { text-align:justify; }
.center { text-align:center; }
hr { border:1px solid var(--green-dark); margin:2rem; }

body {
    font:1rem 'Montaga', serif;
    margin:1rem auto;
    width:100%;
    flex-direction: column;
    justify-content: flex-start;
}

/*************************************** LAYOUT *******************************************/
.ea-menu {
    width:20rem;
    margin-right:2rem;
}
.ea-menu nav > ul li {
    border-bottom:var(--text) 1px solid;
    color:var(--text);
    display: block;
    font-size: 1.3rem;
    padding:.3rem 1rem;
    text-align:right;
    text-transform: uppercase;
}
.ea-menu nav a {
    color:var(--text)!important;
    transition: all 1s ease-in-out;
}
.ea-menu nav > ul li a:hover, .active {
    letter-spacing: .5rem;
}
.ea-menu .ea-pageDescr {
    font-size:.9rem;
    text-align: right;
}
.ea-menu figure { 
    text-align:right;
    margin:0;
}
.ea-menu img { width:150px;}

.ea-main {
    flex-grow: 3;
    justify-content: flex-start;    
    align-items: flex-start;
    max-width: 60rem;
    margin: 2rem;
}

.ea-main header {
    writing-mode: vertical-lr;
    font-size: 4.5rem;
    text-transform: uppercase;
    text-align:right;
}

.ariane {
    font-size:.7rem;
    margin-left:1rem;
}

.ea-content {
    flex-grow:3;
    height:100%;
    min-height:fill-available;
    min-height: -moz-available;
    min-height: -webkit-fill-available;
}
.ea-footer {
    font-size:.8rem;
    padding:.5rem;
    margin:5rem auto 0 auto;
}
.pagination {
    justify-content: space-between;
    margin:auto;
    font-family: 'Montserrat Alternates Black';
    font-size:.8rem;
    width:90%;
    position:relative;
}
.pagination a {
    display: block;
    flex-grow:2;
}
.pagination .next {
    position:absolute;
    right:0;
}

.success {
    width:90%;
    background:var(--green-light);
    border:1px solid var(--green-dark);
    color:var(--green-dark);
    padding:0.5rem;
    margin:.5rem auto;
    border-radius:3px;
}
.warning {
    width:90%;
    background:var(--pink-middle);
    border:1px solid var(--pink-dark);
    color:var(--pink-dark)!important;
    padding:0.5rem;
    margin:.5rem auto;
    border-radius:3px;
}
.info {
    width:90%;
    background:var(--blue-light);
    border:1px solid var(--blue-dark);
    color:var(--blue-dark);
    padding:0.5rem;
    margin:.5rem auto;
    font-size:.9rem;
    border-radius:3px;
}
.invalid {
    border:1px solid var(--pink-dark);
}

h1#actus {
    font-size:1.6rem;
    font-weight: normal;
    text-transform: uppercase;
    border-bottom:1px solid var(--text);
    text-align: center;
}

/***************************************** BY PAGE ************************************************/

#home-logo {
    margin: 2rem auto;
    background-image: url('design-imgs/logo_endo-ac_vert.png');
    width: -moz-available;
    width: -webkit-fill-available;
    height: -moz-available;
    height: -webkit-fill-available;
    min-height: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top center;
    padding-bottom: 0;
}
h3 {
    text-align:center;
    text-transform: uppercase;
    font-weight:normal;
    margin: 0 auto;
    width:40rem;
}
#home-mobile { display:none; }
#themes {
    text-align:center;
    /*background:white;*/
    margin:auto;
}
#themes img{
    width:15rem;
    transition:all ease-in-out 1s;
}
#themes img:hover {
    transform: scale(1.25);
}
#themes a:hover { opacity:1; }

.article-list, .residence-card {
    padding:1rem;
    margin:1rem;
    font-size:.9rem;
    text-align:justify;
}
.article-list a {
    color:var(--text)
}
.article-list p:last-of-type, .residence-card {
    margin-bottom:0;
}
.date {
    font-family: 'Montserrat Alternates Black';
    font-size:.7rem;
}
.tags {
    font-family: 'Montserrat Alternates Black';
    font-size: .7rem;
    text-transform: lowercase;
    display: block;
    float:right;
}
.article-list figure {
    height:5rem;
    width:5rem;
    overflow: hidden;
    margin:0 1rem 1rem 0;
    background-size:cover!important;
    background-position:center!important;
}
.article-list img{
    height:10rem;
}
.article-list .excerpt h3, .article-list .excerpt p {
    display: inline;
    margin:0;
}
.main-img {
    width:49rem;
    height:10rem;
    overflow: hidden;
    margin:auto;
}
.main-img img {
    width:49rem;
}
.residence-card h2 {
    text-transform: uppercase;
    border-bottom: 1px solid var(--link);
    width:49rem;
    margin:1rem auto;
    font-size:2rem;
    text-align:center;
}

.ea-article {
    border:2rem solid white;
    padding:1rem;
    margin:1rem;
}
.ea-article h2, .article-form input[name="title"] {
    text-transform: uppercase;
    font-size:3rem;
    margin:.5rem;
    border-bottom: 1px solid var(--text);
}
.ea-article figure {
    margin:1rem auto;
    width:80%;
    overflow-x:scroll;
    scrollbar-width:none;
    text-align:center;
}
.ea-article img {
    max-width:500px;
    margin:auto;
    display:block;
}

.ea-article iframe {
    margin:auto;
}

.ea-article h3 {
    text-transform: uppercase;
    text-align:center;
    margin:0!important; padding:0!important; width:100%;
}

.ea-article blockquote {
    border-left:solid 3px var(--selection);
    padding:.5rem;
}
.ea-article blockquote p {
    margin:0;
    color:var(--accent-color);
}

.past {
    filter:grayscale(100%);
}


/******************************** ADMIN *************************************/

table.admin {
    width:100%;
    margin:auto;
}
table.admin thead {
    text-transform: uppercase;
}
table.admin td {
    padding:.3rem;
    border-bottom: 1px solid var(--green-middle);
}
.btn {
    display:inline-block;
    background:var(--green-dark);
    font-size:.9rem;
    color:white;
    padding:.2rem;
    text-align:center;
    margin:auto;
    border-radius:3px;
    font-family:'Montaga', serif;
    box-shadow:none;
    border:none;
    cursor:pointer;
    transition:all ease-in-out .3s;
}
.btn:hover {
    background:var(--pink-dark);
}

.article-form textarea,
.article-form input, 
.article-form select {
    font-family: 'Montaga', serif;
    border:none;
    background:var(--pink-light);
    border-radius: 3px;
    font-size:1rem;
}

.article-form input[name="title"] {
    width:100%;
    border-bottom:1px solid var(--text);
    margin:1rem auto;
    padding:.2rem;
}

.selects {
    width:80%;
    margin:1rem auto;
}
.selects h2 {
    font-size:1.1rem;
    padding:.2rem;
}
.article-form select {
    width:100%;
}
textarea {
    height:30rem;
    width:100%;
    border:1px solid var(--pink-dark);
    border-radius:3px;
    font-family: 'Montaga', serif;
}
.article-form .btn {
    display: block;
    padding:.5rem 1rem;
    font-size:1.2rem;
    text-transform: uppercase;
    margin:1rem auto;
}

#presse {
    text-align:center;
}
#presse img {
    max-height:10rem;
    display:inline-block;
}