/*
    Author : Sébastien Ronjon
    Date : 04/10/2021
    Version : 1.0.0
*/

/*-----------------------------------------------------------------*/
/* GLOBAL */
/*-----------------------------------------------------------------*/
*,
*:before,
*:after {
    box-sizing: border-box;
}


body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px; 
    line-height: 1.5; 
    color: #333; 
}

.home {
    background-image: url('../images/fond-accueil-1920x2000.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-color: #f26530;
}

.life {
    background-image: url('../images/fond-sa-vie-1920x2000.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-color: #f26530;
}

.work {
    background-image: url('../images/fond-son-oeuvre-1920x2000.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-color: #f26530;
}

.secrets {
    background-image: url('../images/fond-ses-secrets-1920x2000.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-color: #f26530;
}

.now {
    background-image: url('../images/fond-2021-1920x2000.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-color: #f26530;
}

.mentions {
    background-image: url('../images/fond-mentions-legales-1920x2000.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-color: #f26530;
}
    
/* Typography */
/*--------------------*/

h1,
h2,
h3,
h4,
h5,
h6 { 
    font-weight: 700;
    line-height: 1.2;
    color: #333;
    margin: 20px 0;
}
h1 {
    font-size: 32px;
}
h2 {
    font-size: 22px;
    text-transform: uppercase;
    margin: 40px 0px 0px 0px;
}
h3 {
    font-size: 58px;
    font-family:'Arial Black';
    letter-spacing: -7px;
    margin-top: 8px;
    margin-bottom: 10px;
}
h4 {
    font-size: 26px;
    font-family:'Arial Black';
    line-height: -2px;
    line-height: 0.9;
    margin-left: 20px;
    margin-bottom: 10px;

}
h5 {
    font-size: 18px;
}
h6 {
    font-size: 16px;
    font-style: italic;
}

/* links */
/*--------------------*/

a {
    color: #F1662F;
    text-decoration: none;
}
a:hover {
    text-decoration: none;
    color: #656565;
}

/* buttons */
/*--------------------*/

.btn { 
    display: inline-block;
    background-color: #e5e5e5;
    font-weight: bold;
    color: #656565;
    border: none;
    text-decoration: none;
    padding: 7px 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    border-radius: 3px; 
}
.btn:hover {
    background-color: #AAAAAA;
    color: #343434;
}
.btn-current {
    display: inline-block;
    background-color: #F1662F;
    font-weight: bold;
    color: #fff;
    border: none;
    text-decoration: none;
    padding: 7px 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    border-radius: 3px;
}
.btn-current:hover {
    background-color: #AAAAAA;
    color: #343434;
}

/* grouping content */
/*--------------------*/

p {
    margin: 20px 0;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}
iframe {
    border: none;
}
blockquote {
    border-left: 10px solid #e04259;
    padding-left: 30px;
    margin: 20px 50px;
}

code {
    font-weight: 700;
    color: #e04259;
    background-color: #e0e0e0;
    padding: 3px 5px;
    border-radius: 5px;
}

dt {
    font-weight: 700;
}

dt:first-child {
    /* cible le premeir enfant d'une suite de dt*/
    color: #e04259;
}

dt+dt {
    /* sélecteur adjascent ==> deux dt qui se suivent dans le code HTML */
    font-style: italic;
}


/* table */
/*--------------------*/

table {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 20px;
    border-collapse: collapse;
    text-align: center;
    margin-bottom: 20px;
}

th {
    background-color: #e04259;
    color: #fff;
}

th,
td {
    vertical-align: middle;
    padding: 5px;
    border: 1px solid #343434;
    height: 50px;
}

.price {
    font-size: 40px;
    font-weight: 700;
    height: 100px;
}

.price-sold {
    text-decoration: line-through;
    font-size: 25px;
    color: rgb(151, 151, 151);
}


/* forms */
/*--------------------*/

fieldset {
    border: 1px solid #a7a7a7;
    background-color: #eee;
    padding: 20px;
}

legend {
    font-size: 20px;
    font-weight: 700;
    padding: 0 10px;
}

label {
    /* display: block; pour passer les labels au dessus des input */
    display: inline-block;
    width: 135px;
    cursor: pointer;
}

input,
textarea,
select {
    width: 300px;
    margin-bottom: 20px;
    padding: 5px;
    border: 1px solid #feb7c1;
    color: #333;
}

input:focus,
textarea:focus,
select:focus {
    outline: 3px solid #e04259;
}

textarea {
    vertical-align: top;
    min-height: 200px;
    max-height: 400px;
    resize: vertical;
}

input[type="submit"] {
    width: initial;
    padding: 5px 15px;
    background-color: #e04259;
    color: #fff;
    border-radius: 20px;
    cursor: pointer;
    border: 1px solid #e04259;
    margin-left: 140px;
}

input[type="submit"]:hover {
    background-color: #fff;
    color: #e04259;
}

.title {
    border-bottom: solid #e5e5e5 6px;
}



/* CSS GRID */
/*-------------------------*/

/*
        Container flex --> .grid
        Flex items     --> les enfants directs de grid
        1- J'ai besoin d'un container pour les colonnes ==> .grid
        2- je pose les classes de taille col-xxx sur 
            les éléments enfants de grid (les colonnes)
        3- Je ne met JAMAIS JAMAIS JAMAIS un wrap et un grid sur
            le même élément HTML (àcause du margin auto sur le wrap
            et le margin negatif sur le grid == ils s'annulent)
        4- si j'ai besoin d'un fond de ccouleur sur un élément HTML 
            qui porte une classe col-xxx et que je souhaite conserver 
            les gouttières : je rajoute div à l'intérieur qui recevra 
            le fond de couleur (sinon nous perdons les gouttières)
        */

.grid {
    display: flex;
    flex-wrap: wrap;
    /* retour ligne automatique*/
    margin-right: -10px;
    margin-left: -10px;
}

.grid [class*="col-"] {
    /*création des goutières 
                                    selecteur d'attribut css3 
                                    ==> cible que le prefix col-*/
    padding-left: 10px;
    padding-right: 10px;
}

.col-1 {
    width: calc(1*(100%/12));
}

.col-2 {
    width: calc(2*(100%/12));
}

.col-3 {
    width: calc(3*(100%/12));
}

.col-4 {
    width: calc(4*(100%/12));
}

.col-5 {
    width: calc(5*(100%/12));
}

.col-6 {
    width: calc(6*(100%/12));
}

.col-7 {
    width: calc(7*(100%/12));
}

.col-8 {
    width: calc(8*(100%/12));
}

.col-9 {
    width: calc(9*(100%/12));
}

.col-10 {
    width: calc(10*(100%/12));
}

.col-11 {
    width: calc(11*(100%/12));
}

.col-12 {
    width: calc(12*(100%/12));
}


/* helpers */
/*--------------------*/

.flex {
    display: flex;
}

.flex .logo p {
    color: #656565;
    font-style: italic;
}

.packlogo {
    padding-top: 6px;
}

.img-left {
    float: left;
    margin-right: 4px;
}

.img-right {
    float: right;
    margin-left: 10px;
}

.clear {
    clear: both;
}

.bg-light {
    background-color: #d3dfec;
    padding: 20px;
}

.bg-medium {
    background-color: #c6c6c6;
    padding: 20px;
}

.bg-dark {
    background-color: #808080;
    padding: 20px;
}

.overflow p {
    font-size: 12px;
    font-style: italic;
    color: #AAAAAA;
    margin: 3px 0px 0px 0px;
}

/*-----------------------------------------------------------------*/
/* LAYOUT */
/*-----------------------------------------------------------------*/

.wrap { 
    width: 960px; 
    margin-top: 50px;
    padding-left: 10px; 
    padding-right: 10px;
    margin-left: auto; 
    margin-right: auto;
    background-color: #fff;
}

/* header */
/*--------------------*/

.icons {
    padding-top: 10px;
}

.icons a {
    align-items: right;
}

.logo {
    position: relative;
}

.logo p {
    position: absolute;
    top: 64px;
    left: 2px;
    color: #656565;
    letter-spacing: 0.6px;
}

.packlogo .dates {
    font-size: 15px;
    padding-top: 15px;
    padding-left: 140px;
}

header .flex {
    padding-bottom: 100px;
}
header h1 {
    background-image: url('../images/00-logo-226x120.png');
    height: 0;
    width: 226px;
    overflow: hidden;
    padding-top: 120px;
    margin:0;
}
header a:hover {
    opacity: 0.8;
}
header a:hover h1 {
    opacity: 0.8;
}
/* nav */
/*--------------------*/

nav {
    width: 632px;
    align-items: center;
    justify-content: flex-end;
}

nav a {
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    color: #656565;
    border-bottom: solid #ffffff 6px;
    margin: 80px 30px 0 30px;
}

nav a:hover {
    color: #AAAAAA;
    border-bottom: solid #F1662F 6px;
}

nav .current {
    border-bottom: solid #F1662F 6px;
}

/* banner */
/*-------------------------*/

.banner {
    position: relative;
}

.banner div {
    position: absolute;
    top: 34px;
    left: 600px;
    right: 30px;
    color: #94351a;
    font-style: italic;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.7);
    padding: 20px;
    border-radius: 3px;
}

.citation {
    letter-spacing: 0.8px;
    line-height: 1.2;
    margin: 0;
}

.journal {
    font-size: 10px;
    text-align: right;
    margin: 0px 12px 0px 0px;
}

/* main */
/*--------------------*/
.copyright {
    float: right;
    width: 76px;
}
.copyright img {
    margin-top: 2px;
}
.dates {
    font-size: 15px;
    padding-top: 15px;
    padding-left: 80px;
}

/* page 1 - sa vie */
/*--------------------*/

.life .video iframe {
    width: 100%;
}
.life .video {
    width: 620px;
}
.life .video-desc {
    width: 293px;
    padding: 1rem;
    padding-top: 20px;
}
.life .video-desc p {
    margin-top: 0px;
}
.life .textleft p {
    text-align: left;
}
.life .grid {
    padding-bottom: 55px;
}

/* 1917 */

.year1917 .contentleft {
    text-align: right;
    padding-left: 260px;
}
.year1917 .bigtitle01 {
    padding-left: 203px;
}
.year1917 .overflow {
    padding-left: 540px;
}
.year1917 .grid {
    padding-bottom: 0px;
}
/* 1934 */

.year1934 .contentright {
    text-align: left;
    padding-right: 30px;
    margin-bottom: 10px;
}
.year1934 .bigtitle02 {
    padding-left: 43px;
    padding-bottom: 15px;
}
.year1934 .overflow {
    padding-left: 0px;
}
/* 1943 */

.year1943 .contentleft {
    text-align: right;
    padding-left: 107px;
}
.year1943 .bigtitle03 {
    padding-left: 203px;
}
.year1943 .overflow {
    padding-left: 460px;
}
.year1943 .grid {
    padding-bottom: 25px;
}
/* 1946 */

.year1946 .contentright {
    text-align: left;
    padding-right: 30px;
    margin-top: 2px;
    margin-bottom: 7px;
}
.year1946 .bigtitle04 {
    padding-left: 43px;
    padding-bottom: 15px;
}
.year1946 .overflow {
    padding-left: 0px;
}
/* 1951 */

.year1951 .contentleft {
    text-align: right;
    padding-left: 25px;
    margin-bottom: 9px;
}
.year1951 .bigtitle05 {
    padding-left: 203px;
}
.year1951 .overflow {
    padding-left: 185px;
}
/* 1955 */

.year1955 .contentleft {
    text-align: right;
    padding-left: 26px;
    margin-top: 35px;
}
.year1955 .photo6 {
    padding-right: 30px;
}
.year1955 .bigtitle06 {
    padding-left: 203px;
}
.year1955 .overflow {
    padding-left: 280px;
}
.year1955 .grid {
    padding-bottom: 0px;
}
/* 1960 */

.year1960 .contentright {
    text-align: left;
    padding-right: 70px;
    margin-bottom: 10px;
}
.year1960 .photo7 {
    padding-left: 50px;
}
.year1960 .bigtitle07 {
    padding-left: 43px;
    padding-bottom: 15px;
}
.year1960 .overflow {
    padding-left: 0px;
}
/* 1972 */

.year1972 .contentleft {
    text-align: right;
    padding-left: 26px;
    margin-top: 14px;
    margin-bottom: 7px;
}
.year1972 .bigtitle08 {
    padding-left: 203px;
}
.year1972 .overflow {
    padding-left: 155px;
}

/* 2002 */

.year2002 .contentright {
    text-align: left;
    padding-right: 85px;
    padding-top: 50px;
    margin-top: 4px;
    margin-bottom: 16px;
}
.year2002 .bigtitle09 {
    padding-left: 43px;
    padding-bottom: 15px;
}
.year2002 .overflow {
    padding-left: 0px;
}
/* 2017 */

.year2017 .contentleft {
    text-align: right;
    padding-left: 150px;
}
.year2017 .photo10 {
    padding-right: 40px;
}
.year2017 .bigtitle10 {
    padding-left: 203px;
}
.year2017 .overflow {
    padding-left: 460px;
}
.year2017 .grid {
    padding-bottom: 0px;
}
/* 2019 */

.year2019 .contentright {
    text-align: left;
    padding-right: 45px;
    padding-top: 50px;
    margin-top: 4px;
    margin-bottom: 16px;
}
.year2019 .photo11 {
    padding-left: 40px;
}
.year2019 .bigtitle11 {
    padding-left: 43px;
    padding-bottom: 15px;
}
.year2019 .overflow {
    padding-left: 0px;
}

/* page 2 - son oeuvre */
/*--------------------*/

.work .video iframe {
    width: 100%;
}
.work .video {
    width: 620px;
}
.work .video-desc {
    width: 298px;
    padding: 1rem;
    padding-top: 5px;
}
.work .video-desc p {
    margin-top: 0px;
    margin-bottom: 10px;
}
.work .grid {
    padding-bottom: 55px;
}
.work .dates {
    padding-bottom: 50px;
}
.work .expo p {
    margin: 0px 0px 10px 50px;
}
.work .expo .conception {
    margin: 0px 0px 60px 50px;
    font-size: 15px;
}

/* page 3 - ses secrets */
/*--------------------*/

.secrets .photo {
    width: 100%;
}
.secrets .photo {
    width: 620px;
}
.secrets .photo-desc {
    width: 290px;
    padding: 1rem;
    padding-top: 55px;
}
.secrets .photo-desc p {
    margin-top: 0px;
    margin-bottom: 10px;
}
.secrets .conseils {
    font-size: 15px;
    padding-left: 80px;
    padding-top: 38px;
    padding-bottom: 50px;
}
.secrets .conseil-detail p {
    margin: 0px 0px 60px 54px;
}
.secrets .you {
    padding-left: 600px;
}

/* page 4 - 2021 ? */
/*--------------------*/

.now .photo {
    width: 100%;
}
.now .photo {
    width: 620px;
}
.now .photo-desc {
    width: 290px;
    padding: 1rem;
    padding-top: 5px;
}
.now .photo-desc p {
    margin-top: 0px;
    margin-bottom: 10px;
}
.now .dates {
    padding-bottom: 20px;
}
.now .vids p {
margin: 0px;
}
.now iframe {
    margin-top: 60px;
}
.now .vimeo {
    margin-bottom: 50px;
}

/* page 5 - mentions légales */
/*--------------------*/

.mentions h2 {
    margin-top: 12px;
}
.mentions .photo-desc {
    padding-left: 20px;
}
.mentions .datecrea {
    margin-bottom: 14px;
}
.mentions .links {
    margin-left: 80px;
}
.mentions .links p {
    font-weight: 700;
}


/* aside */
/*--------------------*/

aside {
    background-color: #e5e5e5;
    border-radius: 3px;
    height: 1000px;
    padding-right: 0px;
}
aside .shop {
    width: 150px;
}
aside h2 {
    margin-top: 10px;
    text-align: center;
}
aside a {
    text-align: center;
    display: block;
}
aside .shoplink:hover {
    opacity: 0.6;
}
aside p {
    margin-top: 5px;
    line-height: 1;
    font-size: 14px;
}
aside .website {
    margin-bottom: 20px;
}
aside img {
    border-radius: 3px;
}
aside .reeditions {
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    margin-top: 0px;
    margin-bottom: 10px;
}
.ml-0 {
    padding-left: 0;
    width: 150px;
}

/* footer */
/*--------------------*/

footer {
    font-size: 12px;
    color: #AAAAAA;
    font-weight: lighter;
    text-align: center;
    padding-top: 50px;
    padding-bottom: 10px;
}