/*

Theme Name: Jlouli

Author: Benjamin Maas

Description: Thème réalisé pour le site de Jonathan Louli

Version: 1.0

*/





* {font-family: 'Lato', sans-serif;}

body { box-sizing: border-box; margin: 0;}



body:not(.wp-admin) * {font-size: 16px; box-sizing: border-box; margin: 0;}

body:not(.wp-admin) a {text-decoration: none; scroll-behavior: smooth;}

body:not(.wp-admin) a {color: #909a78; transition: .3s linear;}

body:not(.wp-admin) section p a:hover, body:not(.wp-admin) blockquote a:hover {color: #ca1f3f;}

body:not(.wp-admin) h1, body:not(.wp-admin) h2, body:not(.wp-admin) h3, body:not(.wp-admin) h4, body:not(.wp-admin) h5, body:not(.wp-admin) h6 {font-family: 'Oswald', sans-serif; font-weight: normal;}

body:not(.wp-admin) ul, ol {list-style: none; padding: 0; margin: 10px 0;}

body:not(.wp-admin) ul li, ol li {color: #393939; margin: 5px 0;}

body:not(.wp-admin) ul li:before {content: ""; display: inline-block; vertical-align: -2px; margin-right: 10px; width: 15px; height: 15px; background-image: url(IMG-CSS/puce.svg);}

body:not(.wp-admin) li ul li, li ol li {padding-left: 20px;}

body:not(.wp-admin) li ul li:before {content: ""; display: inline-block; vertical-align: 0; width: 10px; height: 10px; background-image: url(IMG-CSS/sous_puce.svg);}

body:not(.wp-admin) ol {counter-reset: my-awesome-counter;}

body:not(.wp-admin) ol li {counter-increment: my-awesome-counter;}

body:not(.wp-admin) ol li::before {content: counter(my-awesome-counter) ". ";color: #ca1f3f;}

body:not(.wp-admin) blockquote {max-width: 50%; position: relative;margin: 20px 0 50px; align-self: center;}

body:not(.wp-admin) blockquote:before {content: ""; display: inline-block; vertical-align: 0; width: 32px; height: 30px; position: absolute; top: -25px; left: -35px; background-image: url(IMG-CSS/quote.svg);}

body:not(.wp-admin) blockquote:after {content: ""; display: inline-block; vertical-align: 0; width: 32px; height: 30px; position: absolute; top: -25px; right: -45px; transform: rotate(180deg); background-image: url(IMG-CSS/quote.svg);}

body:not(.wp-admin) blockquote p {font-weight: bold; font-style: italic; color: #414a5a; text-align: center;}

body:not(.wp-admin) blockquote cite {color: #414a5a; position: absolute; bottom: -20px; right: 0;}

body:not(.wp-admin) strong {color: #4e525d;}

body:not(.wp-admin) hr {margin: 20px 0 40px;}

body:not(.wp-admin) li a {color: #909a78; transition: .3s linear; font-weight: bold;}

body:not(.wp-admin) li a:hover {color: #ca1f3f;}

.wpcf7 form.sent .wpcf7-response-output {border-color: #909a78 !important; padding: 10px 20px; font-family: 'Oswald', sans-serif;}



/**************    Header    ***************/

body {overflow-x: hidden; }

body > header {

    background-color: #000; height: 60px;

    display: flex; justify-content: space-between; align-items: center;

    padding: 0 20px;

}

body > header.fixed {

    position: fixed; top: 0; left: 0; width: 100%; z-index: 999;

}

body.admin-bar > header.fixed {

    top: 32px;

}

body > header img {

    height: 40px;

}

body > header nav:not(#mobile) {display: none;}



#menu_toggle {display: block; position: relative; top: 2px; right: 0; z-index: 1; -webkit-user-select: none; user-select: none;}

#menu_toggle a {text-decoration: none; font-family: 'Oswald', sans-serif; color: #fff; transition: color 0.3s ease; padding: 2px 0; width: 100%; text-align: end}

#menu_toggle a:hover {color: #ca1f3f;}

#menu_toggle input {display: block; width: 40px; height: 30px; position: absolute; top: -3px; left: -5px; cursor: pointer; opacity: 0; /* hide this */ z-index: 2; /* and place it over the hamburger */

    -webkit-touch-callout: none;}

#menu_toggle a.active {color: #ca1f3f; position: relative;}

#menu_toggle a.active:after {

    content: ""; position: absolute; bottom: 3px; right: -8px;

    height: 20px; width: 2px; background-color: #ca1f3f;

}

/*

 * Just a quick hamburger

 */

#menu_toggle span {display: block; width: 33px; height: 4px; margin-bottom: 5px; position: relative; background: #fff; border-radius: 3px;  

  z-index: 1; transform-origin: 4px 0px; 

  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),

              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),

              opacity 0.55s ease;}



#menu_toggle span:first-child {transform-origin: 0% 0%;}

#menu_toggle span:nth-last-child(2) {transform-origin: 0% 100%;}



/* 

 * Transform all the slices of hamburger

 * into a crossmark.

 */

#menu_toggle input:checked ~ span {opacity: 1; transform: rotate(45deg) translate(-2px, -1px); background: #90af7b;}

#menu_toggle input:checked ~ span:nth-last-child(3) {opacity: 0; transform: rotate(0deg) scale(0.2, 0.2);}

#menu_toggle input:checked ~ span:nth-last-child(2) {transform: rotate(-45deg) translate(0, -1px);}



/*

 * Make this absolute positioned

 * at the top left of the screen

 */

#menu_toggle > div {position: absolute; width: 300px; margin: -100px 0 0 60px; padding: 50px 26px 10px 0; padding-top: 125px; background: #000; list-style-type: none;

  -webkit-font-smoothing: antialiased; transform-origin: 0% 0%; transform: none; transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);

    display: flex; flex-flow: column wrap; align-items: flex-end;

}



#menu li {padding: 10px 0; font-size: 22px;}



/*

 * And let's slide it in from the left

 */

#menu_toggle input:checked ~ div {transform: translate(-100%, 0);}



/**************    Footer    ****************/

body > footer {

    width: 100%; height: 60px; background-color: #000; padding: 0 20px;

    display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center;

}

body > footer div:first-child {

    display: flex;

    flex: 1;

}

body > footer div:first-child a {

    margin-right: 20px;

    font-family: 'Oswald', sans-serif; font-size: 14px; color: #fff;

    transition: .3s linear;

}

body > footer div:first-child a:hover {

    color: #ca1f3f;

}

body > footer > p {

    flex: 1;

    font-family: 'Oswald', sans-serif; color: #ddd; text-align: center; font-size: 12px;

}

body > footer div#RS {

    display: flex; justify-content: flex-end;

    flex: 1;

}

body > footer div#RS a {

    display: inline-block; width: 30px; height: 30px; margin-left: 10px;

}

body > footer div#RS a svg {

    fill: #fff;

    transition: .3s linear;

}

body > footer div#RS a svg:hover {

    fill: #ca1f3f;

}

/***********    Retour en haut    ***********/

a#back_to_top {

    position: fixed; bottom: 50px; right: 30px; z-index: 999;

    width: 40px; display: none; border: 0; background-color: transparent;

}

a#back_to_top svg {

    fill: #ca1f3f; transition: .3s linear; transform: rotate(-90deg);

}

a#back_to_top:hover svg {

    fill: #90af7b;

}





/********************************************/

/**************    ACCUEIL    ***************/

/********************************************/



/************    Introduction    ************/

section.intro {

    display: flex; flex-flow: column wrap; justify-content: center; align-items: center;

    min-height: 400px; padding: 0 5% 40px;

}

section.intro h1 {

    position: relative; margin-bottom: 60px;

    font-size: 30px; color: #4e525d; text-align: center;

}

section.intro h1:after {

    content: ""; position: absolute; bottom: -30px; left: calc(50% - 75px);

    height: 2px; width: 150px; background-color: #ca1f3f;

}

section.intro p {

    font-size: 19px; text-align: center;

}

/*************    Services    **************/

section#services article {

    display: flex; flex-flow: row wrap; justify-content: center; overflow: hidden;

    background-color: #222;

}

section#services article > div {

    width: 100%;

}

section#services article:first-child > div:first-child {

    padding: 50px 5% 50px 5%;

}

section#services article div h2 {

    position: relative; margin-bottom: 40px;

    font-size: 25px; text-transform: uppercase; color: #fff;

}

section#services article > div h2:after {

    content: ""; position: absolute; bottom: -20px; left: 0;

    height: 2px; width: 150px; background-color: #ca1f3f;

}

section#services article > div > p {

    margin-bottom: 40px;

    color: #fff; line-height: 25px;

}

.bouton {

    display: inline-block; padding: 15px 30px 15px 30px;

    background-color: #fff; border-radius: 5px;

    transition: .2s linear;

}

.bouton div {

    display: flex; align-items: center;

}

.bouton svg {

    fill: #222; width: 20px; margin-right: 20px;

    transition: .3s linear;

}

.bouton p {

    font-family: 'Oswald', sans-serif; text-transform: uppercase; color: #222;

    transition: .2s linear;

}

.bouton:hover {

    background-color: #ca1f3f;

}

.bouton:hover p {

    color: #fff;

}

.bouton:hover svg {

    fill: #fff;

}

section#services article:nth-child(2) div:nth-child(2) {

     background-color: #444; padding: 50px 5% 50px 5%;

}

section#services article div > img {display: none;}

/**************    Livre    ***************/

section#livre {

    display: flex; flex-flow: column wrap; padding: 40px 5%; align-items: center;

}

section#livre > div:first-child {flex: 2;}

section#livre > div:nth-child(2) {flex: 1; margin-top: 40px;}

section#livre div > div {

    display: flex; flex-flow: column wrap;

}

section#livre div > div p {

    font-family: 'Oswald', sans-serif; text-transform: uppercase; color: #ca1f3f; font-size: 35px;

}

section#livre div div h2 {

    position: relative; margin-bottom: 80px;

    text-transform: uppercase; color: #4e525d; font-size: 35px; font-weight: bold;

}

section#livre div div h2:after {

    content: ""; position: absolute; bottom: -40px; left: 0;

    height: 2px; width: 150px; background-color: #ca1f3f;

}

section#livre > div > p {

    margin-bottom: 40px;

    color: #333333; line-height: 25px;

}

section#livre div a.bouton:not(:hover) {

    background-color: #393939;

}

section#livre div a.bouton p {

    color: #fff;

}

section#livre div a.bouton svg {

    fill: #fff;

}

section#livre img {width: 100%;}

/*******    Dernières publications   ********/

section#last_publi {

    display: flex; flex-flow: column wrap; justify-content: center; align-items: center;

    padding: 40px 5% 40px; background-color: #222222;

}

section#last_publi div#title {

    margin: 0 0 80px 0;

}

section#last_publi div#title h2 {

    margin-bottom: 40px;

    font-size: 42px; color: #ca1f3f; text-transform: uppercase;text-align: center;

}

section#last_publi div#title p {

    color: #fff;

}

section#last_publi div#display_publi {

    display: flex; flex-flow: row wrap; justify-content: center;

    width: 100%;

}

section#last_publi div#display_publi article {

    display: flex; flex-flow: column wrap;

    width: 350px; margin-bottom: 40px;

}

section#last_publi div#display_publi article div:first-child {

    width: 100%; height: 220px; background-color: #1b1a18; border: 1px solid #555555;

    display: flex; justify-content: center; align-items: center;

}

section#last_publi div#display_publi article div:first-child img {

    width: 320px; height: 200px; transition: .3s linear;

    opacity: .7;

}

section#last_publi div#display_publi article:hover div:first-child img {

/*    filter: grayscale(100%);*/

    opacity: 1;

}

section#last_publi div article div.infos p {

    position: relative; margin: 20px 0 40px;

    color: #fff;

}

section#last_publi div article div.infos p a {

    color: #fff;

    transition: .3s linear;

}

section#last_publi div article div.infos p a:not(:last-child):after {

    content: ',';

}

section#last_publi div article div.infos p:after {

    content: ""; position: absolute; bottom: -20px; left: 0;

    height: 2px; width: 100px; background-color: #ca1f3f;

}

section#last_publi div article div.infos h3 {

    font-family: 'Oswald', sans-serif; font-size: 16px; color: #90af7b;

    transition: .3s linear;

}

section#last_publi div article:hover div.infos h3 {

    color: #ca1f3f;

}

section#last_publi div article div.infos p a:hover {

    color: #90af7b;

}

section#last_publi div article div.infos p a:hover:after {

    color: #fff;

}

/*************    Newsletter   **************/

section#newsletter {

    padding: 40px 12%; background-color: #90af7b;

    display: flex; flex-flow: row wrap; align-items: center; justify-content: center;

}

section#newsletter .tnp {

    display: flex; flex-flow: row wrap; align-items: center; justify-content: center; max-width: 100%;

}

section#newsletter .tnp form, section#newsletter .tnp form .tnp-field-email {

    display: flex; flex-flow: row wrap; align-items: center;

}

section#newsletter .tnp form {

	justify-content: center;

}

section#newsletter .tnp form .tnp-field-email {

    margin-right: 20px;

}

section#newsletter .tnp form .tnp-field-email label {

    font-family: 'Oswald', sans-serif; margin-right: 10px; color: #fff;

}

section#newsletter .tnp-subscription input[type=email] {

    width: 300px; font-weight: bold;

}

section#newsletter .tnp-subscription input[type=submit]{

    display: inline-block; padding: 15px 30px 15px 30px; background-color: #fff; border-radius: 5px; cursor: pointer;

    transition: .2s linear; font-family: 'Oswald', sans-serif; text-transform: uppercase; color: #222;

}

section#newsletter .tnp-subscription input[type=submit]:hover {

    background-color: #ca1f3f; color: #fff;

}

section#newsletter .tnp form .tnp-field-email input:focus {

    border: 1px solid #ca1f3f; outline: 0;

}

/************    Me contacter   *************/

section.contact {

    display: flex; flex-flow: column wrap; justify-content: center; align-items: center;

    padding: 40px 5%;

}

section.contact h2 {

    position: relative; margin-bottom: 60px;

    font-size: 42px; color: #4e525d; text-align: center; text-transform: uppercase;

}

section.contact h2:after {

    content: ""; position: absolute; bottom: -30px; left: calc(50% - 75px);

    height: 2px; width: 150px; background-color: #ca1f3f;

}

section.contact > p {

    font-size: 19px; text-align: center; margin-bottom: 40px;

}

section.contact a.bouton:not(:hover) {

    background-color: #393939;

}

section.contact a.bouton p {

    color: #fff;

}

section.contact a.bouton svg {

    fill: #fff;

}

/********************************************/

/*******    FORMATION - RECHERCHES    *******/

/********************************************/



/************    Thématiques   **************/

section#thematiques {

    padding: 0 12%; background-color: #333; overflow: hidden;

    display: flex; flex-flow: row wrap; justify-content: center; align-content: center;

}

section#thematiques > div:first-child {

    flex: 1; padding: 40px 30px 40px 0;

}

section#thematiques > div:first-child h2 {

    position: relative; margin: 50px 0 100px 0;

    font-size: 42px; color: #fff; text-transform: uppercase;

}

section#thematiques > div:first-child h2:after {

    content: ""; position: absolute; bottom: -50px; left: 0;

    height: 2px; width: 150px; background-color: #ca1f3f;

}

section#thematiques > div:first-child p {

    color: #999; line-height: 25px;

}

section#thematiques > div:last-child {

    display: flex; flex-flow: row wrap; justify-content: center;

    max-width: 1000px;

}

section#thematiques > div:last-child article {

    position: relative; overflow: hidden; margin-bottom: 40px;

    width: 250px; height: 300px; border: 1px solid #222; 

    transition: .5s linear;

}

section#thematiques > div:last-child article > div {

    position: absolute; bottom: -125px; left: 0; height: 100%;

    padding: 0 30px;

    transition: .5s linear;

}

section#thematiques > div:last-child article div div {

    display: flex; flex-flow: column; justify-content: center; align-items: center;

}

section#thematiques > div:last-child article div div svg {

    width: 60px; height: 60px; margin-bottom: 30px;

    fill: #90af7b;

}

section#thematiques > div:last-child article div div h3 {

    min-height: 60px;

    position: relative; margin-bottom: 50px; display: flex; align-items: center;

    text-transform: uppercase; font-size: 16px; font-family: 'Oswald', sans-serif; color: #fff; text-align: center;

}

section#thematiques > div:last-child article div div h3:after {

    content: ""; position: absolute; bottom: -25px; left: calc(50% - 75px);

    height: 2px; width: 150px; background-color: #ca1f3f;

}

section#thematiques > div:last-child article div p {

    text-align: center; font-size: 14px; color: #fff;

}



section#thematiques > div:last-child article:hover {

    background-color: #292929;

}

section#thematiques > div:last-child article:hover > div {

    bottom: 60px;

}



/**************    Exemples   ***************/

section#exemples {

    display: flex; flex-flow: column; justify-content: center; align-items: center;

    padding: 40px 12%;

}

section#exemples h2 {

    position: relative; margin-bottom: 80px;

    font-size: 42px; color: #393939; text-transform: uppercase; text-align: center;

}

section#exemples h2:after {

    content: ""; position: absolute; bottom: -25px; left: calc(50% - 75px);

    height: 2px; width: 150px; background-color: #ca1f3f;

}

section#exemples > div:last-child {

    display: flex; flex-flow: column wrap; justify-content: flex-start; align-items: center;

    width: 100%; position: relative;

}

section#exemples > div:last-child article {

    position: relative;    margin-top: 20px;

}

section#exemples > div:last-child article > div:first-child {

    display: inline-block;

    width: 300px; padding: 30px; border: 1px solid #ddd;

    transition: .3s linear;

}

section#exemples > div:last-child article > div:first-child:hover {

    background-color: #ddd;

}

section#exemples > div:last-child article div:first-child h3 {

    margin-bottom: 20px;

    color: #ca1f3f; font-size: 19px; text-transform: uppercase;

}

section#exemples > div:last-child article div:first-child p {

    color: #1b1a18;

}

section#exemples > div:last-child article div:first-child a {

    color: #90af7b; transition: .3s linear;

}



section#exemples > div:last-child article div:first-child a:hover {

    color: #ca1f3f;

}

section#exemples > div:last-child article div:first-child ul, section#exemples > div:last-child article div:first-child ul li {

    margin: 5px 0 5px;

}

section#exemples > div:last-child article div.date {

    position: absolute; top: -12px; z-index: 2; width: 100px;

    display: flex; align-items: center;

}

section#exemples > div:last-child article:nth-child(even) div.date {

    right: -5px;

}

section#exemples > div:last-child article:nth-child(odd) div.date {

    left: -5px;    

}

section#exemples > div:last-child article div.date div {

    width: 12px; height: 12px; background-color: #ca1f3f; border: 2px solid #fff;

}

section#exemples > div:last-child article:nth-child(even) div.date {justify-content: flex-end;}

section#exemples > div:last-child article:nth-child(odd) div.date {justify-content: flex-start;}

section#exemples > div:last-child article:nth-child(even) div.date div {margin-left: 10px; order: 2}

section#exemples > div:last-child article:nth-child(odd) div.date div {margin-right: 10px;}

section#exemples > div:last-child article div.date p {

    display: flex; flex-flow: column wrap; 

    font-size: 18px; color: #90af7b; line-height: 13px;

}

section#exemples > div:last-child article:nth-child(odd) .date p {

    align-items: flex-end;

}

section#exemples > div:last-child article div.date span {

    font-size: 14px; font-style: italic;

}

/************    Explications   **************/

section#explications {

    padding: 40px 12% 0; background-color: #90af7b;

    display: flex; flex-flow: row wrap; justify-content: space-between; align-items: flex-start;

}

section#explications div {

    width: 100%; margin-bottom: 40px;

}

section#explications div h3 {

    position: relative; margin-bottom: 40px;

    font-size: 25px; color: #fff; text-transform: uppercase;

}

section#explications div h3:after {

    content: ""; position: absolute; bottom: -20px; left: 0;

    height: 2px; width: 100px; background-color: #ca1f3f;

}

section#explications div p {

    color: #fff;

}



/************    Me contacter   **************/

section#contact_exemples {

    background-color: #90af7b;

}

section#contact_exemples h2, section#contact_exemples p {color: #fff;}

section#contact_exemples a.bouton:not(:hover) {

    background-color: #fff;

}

section#contact_exemples a.bouton p {

    color: #333;

}

section#contact_exemples a.bouton svg {

    fill: #333;

}

section#contact_exemples a.bouton:hover p {

    color: #fff;

}

section#contact_exemples a.bouton:hover svg {

    fill: #fff;

}



/********************************************/

/************    PUBLICATIONS    ************/

/********************************************/

/**************    Filtres   ****************/

section#filters {

    padding: 40px 12%; background-color: #222;

}

section#filters > p {

    position: relative; margin-bottom: 50px;

    font-family: 'Oswald', sans-serif; font-size: 42px; color: #fff; text-align: center;

}

section#filters > p:after {

    content: ""; position: absolute; bottom: -25px; left: calc(50% - 75px);

    height: 2px; width: 150px; background-color: #ca1f3f;

}

section#filters form.checkbox_filters {

    position: relative;

    display: flex; flex-flow: column wrap; justify-content: center; align-content: center;

}

section#filters form.checkbox_filters div {

    position: relative; margin-bottom: 50px;

    display: flex; flex-flow: row wrap; justify-content: center; align-content: center;

}

section#filters form div#formats_publi:after {

    content: ""; position: absolute; bottom: -25px; left: calc(50% - 75px);

    height: 2px; width: 150px; background-color: #90af7b;

}

/* Checkbox perso */

section#filters form.checkbox_filters div > label {display: flex; align-items: center; font-size: 14px;margin: 0 15px;}

section#filters form.checkbox_filters div > label p {color: #fff; font-family: 'Oswald', sans-serif; font-size: 19px;}

section#filters form.checkbox_filters input[type='checkbox'], section#filters form.checkbox_filters input[type='radio']{ height: 0; width: 0; }

section#filters form.checkbox_filters div > label input + span {display: flex; justify-content: center; align-items: center; margin: 3px 10px 0 0; width: 14px; height: 14px; background: #fff; border-radius: 2px; cursor: pointer; transition: all 250ms cubic-bezier(.4,.0,.23,1); position: relative;}

section#filters form.checkbox_filters div > label:hover > p, section#filters form.checkbox_filters div > input:focus + p {color: #ca1f3f; cursor: pointer;}

section#filters form.checkbox_filters div > label:hover > span, section#filters form.checkbox_filters div > label input:focus + section#filters form.checkbox_filters div > label:hover > span{background-color: #ca1f3f;}

section#filters form.checkbox_filters input[type='checkbox']:checked + span, section#filters form.checkbox_filters input[type='radio']:checked + span {border: 7px solid #90af7b;animation: shrink-bounce 200ms cubic-bezier(.4,.0,.23,1);}

section#filters form.checkbox_filters input[type='checkbox']:checked + span:before, section#filters form.checkbox_filters input[type='radio']:checked + span:before {content: ""; position: absolute; top: -2px; left: -6px; border-right: 3px solid transparent; border-bottom: 3px solid transparent; transform: rotate(45deg); transform-origin: 0% 100%; animation: checkbox-check 125ms 250ms cubic-bezier(.4,.0,.23,1) forwards;}

section#filters form.checkbox_filters input[type='checkbox']:checked ~ p, section#filters form.checkbox_filters input[type='radio']:checked ~ p {color: #90af7b;}



@keyframes shrink-bounce{

  0%{

    transform: scale(1);

  }

  33%{    

    transform: scale(.85);

  }

  100%{

    transform: scale(1);    

  }

}

@keyframes checkbox-check{

  0%{

    width: 0;

    height: 0;

    border-color: #444;

    transform: translate3d(0,0,0) rotate(45deg);

  }

  33%{

    width: .2em;

    height: 0;

    transform: translate3d(0,0,0) rotate(45deg);

  }

  100%{    

    width: .2em;

    height: .5em;    

    border-color: #000;

    transform: translate3d(0,-.5em,0) rotate(45deg);

  }

}



/******    Listes des publications   ********/

section#liste_publi, #archives {

    padding: 40px 12%;

}

section#liste_publi > p {

    color: #555; font-size: 14px; margin-bottom: 20px;

}

section#liste_publi > div article, #archives section article {

    margin-bottom: 40px;

}

section#liste_publi > div article a, #archives section article a {

    display: flex; flex-flow: row wrap; justify-content: space-between; background-color: #ddd;

    transition: .3s linear;

}

section#liste_publi > div article img, #archives section article img {

    width: 100%; height: auto; opacity: .7;

    transition: .3s linear;

}

section#liste_publi > div article div, #archives section article div {

    width: calc(100%); position: relative; padding: 20px 25px;

}

section#liste_publi > div article div h2, #archives section article h2 {

    font-size: 25px; color: #555; text-transform: uppercase;

    transition: .3s linear;

}

section#liste_publi > div article div p.tags, #archives section article p.tags {

    font-size: 14px; color: #90af7b; margin: -5px 0 15px 0;

}

section#liste_publi > div article div p.tags span:not(:last-child):after, #archives section article p.tags span:not(:last-child):after {

    content: ",";

}

section#liste_publi > div article div p, #archives section article p {

    color: #555;

}

section#liste_publi > div article div p.date, #archives section article p.date {

    position: absolute; top: 5px; right: 10px;

    font-size: 14px; color: #555;

}

section#liste_publi > div article:hover a, #archives section article:hover a {

    box-shadow: 0 0 0 2px #ca1f3f inset;

}

section#liste_publi > div article:hover img, #archives section article:hover img {

    opacity: 1;

}

section#liste_publi > div article:hover h2, #archives section article:hover h2 {

    color: #ca1f3f;

}



section#liste_publi #not_found {

    display: flex; justify-content: center; align-items: center;

}

section#liste_publi #not_found div {

    display: flex; flex-flow: column wrap; justify-content: center; align-items: center;

}

section#liste_publi #not_found p {

    margin: 10px 0; font-weight: bold; color: #222;

}

section#liste_publi a {

    color: #90af7b; transition: .3s linear;

}

section#liste_publi a:hover {color: #ca1f3f;}

section#liste_publi #not_found svg {

    width: 200px; fill: #222;

}





/******    Pagination Publications   ********/

section#liste_publi footer {

    position: relative; padding: 10px 0;

    display: flex; justify-content: center; align-items: center;

}

section#liste_publi footer:before, section#liste_publi footer:after {

    content: "";

    position: absolute; left: 25%;

    width: 50%; height: 1px; background-color: #ddd;

}

section#liste_publi footer:before {

    top: 0;

}

section#liste_publi footer:after {

    bottom: 0;

}

section#liste_publi footer a {

    margin: 0 5px;

    color: #222; font-weight: bold;

    transition: .3s linear;

}

section#liste_publi footer a.active {

    color: #90af7b;

}

section#liste_publi footer a:hover {

    color: #ca1f3f;

}



/********************************************/

/**************    A PROPOS    **************/

/********************************************/

section#presentation_about {

    padding: 40px 12%; background-color: #ddd;

    display: flex; flex-flow: column wrap;

}

section#presentation_about > div {

    display: flex; flex-flow: row wrap; justify-content: center; align-items: flex-start; margin-bottom: 40px;

}

section#presentation_about > div:nth-child(2) {

    margin-bottom: 80px; position: relative;

}

section#presentation_about > div:nth-child(2):after {

    content: ""; position: absolute; bottom: -40px; left: calc(50% - 25%);

    height: 1px; width: 50%; background-color: #ca1f3f;

}

section#presentation_about > div img {

    width: 100%;

}

section#presentation_about div div {

    margin-bottom: 40px; order: -1;

}

section#presentation_about div div h2 {

    position: relative; margin-bottom: 40px;

    font-size: 25px; color: #4e525d; text-transform: uppercase;

}

section#presentation_about div div h2:after {

    content: ""; position: absolute; bottom: -20px; left: 0;

    height: 2px; width: 100px; background-color: #90af7b;

}

section#presentation_about div div p {

    color: #4e525d; margin-bottom: 20px;

}

section#presentation_about div iframe {max-width: 100%;}



/********************************************/

/***************    SINGLE    ***************/

/********************************************/

/********    Contenu d'un article   *********/

.single main article > p {

    margin: -5px 0 0 0;

    font-size: 14px; color: #333; font-weight: bold;

}

.single main p a {

    color: #90af7b;

    transition: .3s linear;

}

.single main article > p a:not(:last-child):after { content: ' - '; color: #333;}

.single main article > p a:hover:not(:last-child):after { color: #333; }

.single main p a:hover {

    color: #ca1f3f;

}

.single main article {

    padding: 0 12%;

}

.single main article h1 {

    font-size: 42px; color: #393939; margin-top: 40px;

}

.single main article header {

    display: flex; justify-content: space-between; align-items: center;

    margin: 10px 0 30px 0; position: relative; padding: 5px 0;

}

.single main article header:before, .single main article header:after {

    content: "";

    position: absolute; left: 0;

    width: 100%; height: 1px; background-color: #ddd;

}

.single main article header:before {

    top: 0;

}

.single main article header:after {

    bottom: 0;

}

.single main article header p {

    font-size: 14px; color: #555;

}

.single main article header > div {

    display: flex; align-items: center;

}

.single main article header > div div:first-child {

    display: none; justify-content: center; align-items: center;

    cursor: pointer;

}

.single main article header > div div p {transition: .3s linear;}

.single main article header > div div:first-child svg {

    fill: #90af7b; width: 30px; margin-left: 10px;

    transition: .3s linear;

}

.single main article header > div div:first-child:hover p {color: #ca1f3f;}

.single main article header > div div:first-child:hover svg {fill: #ca1f3f;}

.single main article header > div div#share_top {

    display: flex; justify-content: center; align-items: center; margin-left: 30px;  

}

.single main article header > div div#share_top a {margin: 0 5px -3px;}

.single main article header > div div#share_top svg {

    width: 20px; fill: #ccc; transition: .3s linear;

}

.single main article header > div div#share_top a:hover svg {

    fill: #ca1f3f;

}



.single main article section {display: flex; flex-flow: column wrap;}

.single main article section div#intro {

    display: flex; flex-flow: row wrap; margin-bottom: 40px;

}

.single main article section div#intro img {

    width: 100%; height: auto;

}

.single main article section div#intro div {padding-top: 20px;}

.single main article section div#intro h2 {margin-top: 0;}

.single main article section div#intro p {

    color: #393939; margin-bottom: 20px;

}

.single main article section h2 {

    margin: 20px 0;

    font-size: 25px; color: #393939;

}

.single main article section h3 {

    margin: 20px 0;

    font-size: 19px; color: #393939;

}

.single main article section ul {margin-bottom: 20px;}

.single main article section ul li {margin: 10px 0;}

.single main article section p {color: #393939; margin-bottom: 20px;}

.single main article figure {text-align: center;}

.single main article .wp-block-columns {margin: 40px 0;}

.single main article section div#tags h2 {

    margin: 40px 0; position: relative;

}

.single main article section div#tags h2:after {    

    content: ""; position: absolute; bottom: -20px; left: 0;

    height: 2px; width: 150px; background-color: #ca1f3f;

}

.single main article section div#tags div a {

    display: inline-block; padding: 10px 15px; border-radius: 10px 0; margin-right: 10px;

    background-color: #90af7b; color: #fff; font-family: 'Oswald', sans-serif;

    transition: .3s linear; margin-bottom: 20px;

}

.single main article section div#tags div a:hover {

    background-color: #ca1f3f; 

}

.single main article footer {

    margin-top: 80px;

    display: flex; flex-flow: row wrap; justify-content: center; align-content: center;

}

.single main article footer div {

    position: relative; height: 100px; border: 1px solid #ddd; margin-bottom: 40px;

}

.single main article footer div#share_bottom {

    width: 320px; display: flex; justify-content: center; align-items: center;

}

.single main article footer div > p {

    position: absolute; top: -20px; left: calc(50% - 55px);

    width: 110px; height: 40px; background-color: #fff;

    font-family: 'Oswald', sans-serif; color: #4e525d; text-align: center; font-size: 25px;

}

.single main article footer div#share_bottom a {margin: 0 30px -15px;}

.single main article footer div#share_bottom svg {

    width: 55px; fill: #ccc; transition: .3s linear;

}

.single main article footer div#share_bottom  a:hover svg {

    fill: #ca1f3f;

}

.single main article footer div#tipeee {

    width: 320px; display: flex; justify-content: center; align-items: center;

}

.single main article footer div#tipeee p {

    top: -20px; left: calc(50% - 125px);

    width: 250px; 

}

.single main article footer div#tipeee a {margin-top: 10px;}

.single main article footer div#tipeee img {

    height: 50px; filter: grayscale(100%);

    transition: .3s linear;

}

.single main article footer div#tipeee img:hover {

    filter: grayscale(0);

}

/*********    Espace commentaire   **********/

.single main section#commentaires {

    padding: 40px 12%; background-color: #222;

    display: flex; flex-flow: column wrap; justify-content: center;

}

.single section#commentaires h2 {

    position: relative; margin-bottom: 80px;

    color: #fff; font-size: 25px;

}

.single section#commentaires h2:after {    

    content: ""; position: absolute; bottom: -20px; left: 0;

    height: 2px; width: 150px; background-color: #ca1f3f;

}

.single section#commentaires > .post-comments {

    display: flex; flex-flow: column wrap;

    position: relative; margin-bottom: 40px;

}

.single section#commentaires > .post-comments:after {    

    content: ""; position: absolute; bottom: -20px; left: calc(50% - 75px);

    height: 2px; width: 150px; background-color: #90af7b;

}

.single section#commentaires > .post-comments .comment > div {

    margin-bottom: 40px; 

}

.single section#commentaires > .post-comments .comment > div:not(:last-child) {

    border-bottom: 1px solid #ddd; padding-bottom: 60px;

}

.single section#commentaires > .post-comments .comment p {

    color: #fff;

}

.single section#commentaires > .post-comments .comment p.infos {

    margin-bottom: 20px;

    font-style: italic; font-size: 14px; color: #ddd;

}

.single section#commentaires > .post-comments .comment p.infos span {

    text-decoration: underline;

}

.single section#commentaires > .post-comments .comment em {

    color: #ca1f3f; margin-bottom: 10px;

}

.single section#commentaires #respond form {

    align-self: center; display: flex; flex-flow: column wrap;    

}

.single section#commentaires #respond form > p {

    color: #fff; font-style: italic; margin: 10px 0;

}

.single section#commentaires #respond form > p:first-child {

    font-family: 'Oswald', sans-serif; font-style: normal; font-size: 25px; margin: 0;

}



.single section#commentaires form div {

    display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center;

    margin-top: 20px;

}

.single section#commentaires form div label input {

    height: 50px; width: 300px; border-radius: 5px; margin-bottom: 20px;

    font-size: 14px; padding: 0 15px; font-weight: bold;

}

.single section#commentaires form label p {

    position: relative; margin: 0 0 5px 10px;

    color: #fff;

}

.single section#commentaires form label p:after {    

    content: ""; position: absolute; bottom: 0; left: -8px;

    height: 20px; width: 2px; background-color: #ca1f3f;

}

.single section#commentaires form label {}

.single section#commentaires form label textarea {

    width: 100%; min-height: 200px; border-radius: 5px; resize : none;

    font-size: 14px; padding: 15px 15px; font-weight: bold;

}

.single section#commentaires #respond form > p.form-submit {align-self: flex-end;}

.single section#commentaires form button.bouton {    

    display: flex; align-items: center; cursor: pointer;

    margin-top: 20px; border: 0;

}

.single section#commentaires form div label input:focus, .single section#commentaires form label textarea:focus {

    border: 1px solid #ca1f3f; outline: 0;

}

.single section#commentaires form button svg {

    width: 25px;

}

.single section#commentaires form button svg line, .single section#commentaires form button svg polyline, .single section#commentaires form button svg polygon {

    stroke: #222; transition: .3s linear;

}

.single section#commentaires form button:hover svg line, .single section#commentaires form button:hover svg polyline, .single section#commentaires form button:hover svg polygon {

    stroke: #fff;

}

.single section#commentaires form button p {}



/********************************************/

/**************    ARCHIVES    **************/

/********************************************/

/* CF Page publication */

#archives h1 {

    position: relative; margin-bottom: 60px;

    font-size: 30px; color: #4e525d; text-align: center;

}

#archives h1 span {

    font-family: 'Oswald', sans-serif; font-size: 30px; color: #ca1f3f;

}

#archives h1:after {

    content: ""; position: absolute; bottom: -30px; left: calc(50% - 75px);

    height: 2px; width: 150px; background-color: #ca1f3f;

}



/********************************************/

/**************    CONTACT    ***************/

/********************************************/

section#content {

    padding: 40px 12%; background-color: #90af7b ;

    display: flex; flex-flow: column wrap;

}

section#content p {

    color: #fff; margin-bottom: 20px;

}

section#content strong {color: #fff;}

div.wpcf7 {

    padding: 40px 12%;

}

form.wpcf7-form {

    align-self: center; display: flex; flex-flow: row wrap; justify-content: space-between;

}

form.wpcf7-form > p {

    width: 100%; margin-bottom: 10px; display: flex; justify-content: flex-end;

}

form.wpcf7-form label {

    position: relative; margin: 0 0 5px 10px; width: 100%;

    color: #4e525d; font-family: 'Oswald', sans-serif;

}

form.wpcf7-form label input {

    height: 50px; width: 100%; border-radius: 5px; margin: 10px 0;

    font-size: 14px; padding: 0 15px; font-weight: bold;

}

form.wpcf7-form label:after {    

    content: ""; position: absolute; top: 0; left: -8px;

    height: 20px; width: 2px; background-color: #ca1f3f;

}



form.wpcf7-form label textarea {

    width: 100%; min-height: 200px; border-radius: 5px; resize : none;

    font-size: 14px; padding: 15px 15px; font-weight: bold; margin: 10px 0

}

form.wpcf7-form button.bouton {    

    display: flex; align-items: center; cursor: pointer;

    margin-top: 20px; border: 0; background-color: #393939; color: #fff;

}

form.wpcf7-form label input:focus, form.wpcf7-form label textarea:focus {

    border: 1px solid #ca1f3f; outline: 0;

}

form.wpcf7-form button.bouton p {

    color: #fff;

}

form.wpcf7-form button svg {

    width: 25px;

}

form.wpcf7-form button svg line, form.wpcf7-form button svg polyline, form.wpcf7-form button svg polygon {

    stroke: #fff; transition: .3s linear;

}

form.wpcf7-form button:hover {

    background-color: #ca1f3f;

}

form.wpcf7-form button:hover svg line, form.wpcf7-form button:hover svg polyline, form.wpcf7-form button:hover svg polygon {

    stroke: #fff;

}

/********************************************/

/***********    MENTIONS LEGALES    *********/

/********************************************/

.page-id-42 .intro {

    height: 200px;

} 

.page-id-42 h2 {

    margin-bottom: 20px;

}

.page-id-42 h2:not(:first-child) {

    margin-top: 20px;

}

.page-id-42 h2 strong {

    font-family: 'Oswald', sans-serif; font-size: 25px;

}

.page-id-42 a {

    color: #222; transition: .3s linear;

}

.page-id-42 a:hover {

    color: #ca1f3f;

}



/********************************************/

/**************    PAGE 404    **************/

/********************************************/

.error404 .intro, .page-id-293 #content {

    height: calc(100vh - 130px); padding-top: 40px;

}

.page-id-293 #content {

    display: flex; justify-content: center; align-items: center;

}

.error404.admin-bar .intro, .page-id-293.admin-bar #content {

    height: calc(100vh - 166px);

}

.error404 .intro > div {

    display: flex; justify-content: center; flex-flow: row wrap; align-items: center;

}

.error404 .intro > div p {

    width: 100%; margin-top: 20px;

}

.error404 .intro svg {

    width: 150px; margin-right: 40px; order: 2; margin-top: 40px;

}

.error404 a {

    color: #909a78; transition: .3s linear; font-size: 19px;

}

.error404 a:hover {

    color: #ca1f3f;

}



/********************************************/

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

/********************************************/

#adminmenu li.current a .awaiting-mod, .column-response .post-com-count-pending, #adminmenu .awaiting-mod, #adminmenu .update-plugins {

    background-color: #ca1f3f;

}

/********************************************/

/*************    RESPONSIVE    *************/

/********************************************/

@media (min-width: 400px) {}

@media (min-width: 568px) {

    section#last_publi div#display_publi article {

        width: 430px;

    }

    section#last_publi div#display_publi article div:first-child {

        height: 250px;

    }

    section#last_publi div#display_publi article div:first-child img {

        width: 400px; height: 225px;

    }

    section#exemples > div:last-child article > a {

        width: 400px;

    }

}

@media (min-width: 667px) {  

    .single section#commentaires #respond { display: flex; justify-content: center; align-items: center;}  

}

@media (min-width: 768px) {

    body > header nav#mobile {display: none;}

    body > header nav:not(#mobile) {display: flex; height: 100%;}

    body > header nav:not(#mobile) a {

        display: flex; justify-content: space-between; align-items: center;

        padding: 0 10px; height: 100%;

        color: #fff; font-size: 16px; font-family: 'Oswald', sans-serif;

        transition: .3s linear;

    }

    body > header nav:not(#mobile) a.active {

        background-color: #fff; border-bottom: 5px solid #ca1f3f;

        color: #ca1f3f;

    }

    body > header nav:not(#mobile) a:hover {        

        color: #ca1f3f;

    }

    section.intro {

        padding: 0 12%;

    }

    section.intro p, section.contact > p {

        width: 75%;

    }

    section.intro h1 {

        font-size: 42px;

    }
    section#services article { max-height: 450px; }

    section#livre {

        display: flex; flex-flow: row wrap; align-items: center; padding: 40px 12%;

    }

    section#livre > div:first-child {padding-right: 80px;}

    section#livre > div:nth-child(2) {margin: 0;}

    section#last_publi {

        padding: 40px 12% 40px;

    }

    section#last_publi div#display_publi article {

        width: 350px;

    }

    section#last_publi div#display_publi article div:first-child img {

        width: 320px; height: 225px;

    }

    section#explications div {

        width: 45%;

    }  

    .single main section#commentaires {

        padding: 40px 5%;

    }

    .single section#commentaires form div label:first-child {

        margin-right: 40px;

    }

    .single main article header > div div:first-child {

        display: flex;

    }

    form.wpcf7-form > p:nth-child(2),form.wpcf7-form > p:nth-child(3),form.wpcf7-form > p:nth-child(4) {

        width: 48%;

    }

}

@media (min-width: 1024px) {

    body > header, body > footer {height: 100px; padding: 0 100px;}

    body > header.fixed {height: 80px;}

    body > header img {height: 80px;}

    body > header.fixed img {height: 60px;}

    body > header nav:not(#mobile) a {font-size: 19px; padding: 0 20px;}

    footer div:first-child a {

        font-size: 19px;

    }

    body > footer > p {

        font-size: 16px;

    }

    section#services article > div {

        width: 50%;

    }

    section#services article div > img {display: block;}

    section#livre div > div p {

        font-size: 45px;

    }

    section#livre div div h2 {

        margin-bottom: 80px;font-size: 45px;

    }

    section#last_publi div#display_publi {

        justify-content: space-between;

    }

    section#exemples > div:last-child article:nth-child(2n) {

        align-self: flex-start; margin-top: -100px;

    }

    section#exemples > div:last-child {

        align-items: flex-end;

    }  

    section#liste_publi > div article img, #archives section article img {

        width: 420px;

    }

    section#liste_publi > div article div, #archives section article div {

        width: calc(100% - 420px); position: relative; padding: 20px 25px;

    }    

    section#liste_publi > div article:nth-child(even) img, #archives section article:nth-child(even) img {

        order: 1;

    }

/*

    section#exemples > div:last-child:after {

        content: "";

        position: absolute; top: 0; left: calc(50% - 1px);

        height: 100%; width: 2px; background-color: #ccc;

    }

*/

    section#exemples > div:last-child article div.date {

        top: 35px;

    }    

    section#exemples > div:last-child article > div:first-child {

        width: 350px;

    }

    section#exemples > div:last-child article:nth-child(even) div.date {

        right: -83px; justify-content: flex-start;

    }

    section#exemples > div:last-child article:nth-child(odd) div.date {

        left: -83px; justify-content: flex-end;   

    }

    section#exemples > div:last-child article:nth-child(even) div.date div {margin-right: 10px; order: -1;}

    section#exemples > div:last-child article:nth-child(odd) div.date div {margin-left: 10px; order: 2;}

    .single main article footer div#share_bottom {

        margin-right: 100px;

    }

    .single main article section div#intro img {

        width: 50%;

    }

    .single main article section div#intro div {

        width: 50%; padding-left: 30px; margin-top: 0;

    } 

    .single main section#commentaires {

        padding: 40px 12%;

    }

    .error404 .intro, .page-id-293 #content {

        height: calc(100vh - 200px); padding-top: 40px;

    }

    .error404.admin-bar .intro, .page-id-293.admin-bar #content {

        height: calc(100vh - 232px);

    }

    

}

@media (min-width: 1300px) {    

    section.intro p, section.contact > p {

        width: 50%;

    }

    section#services article:first-child > div:first-child {

        padding: 50px 80px 50px 12%;

    }

    section#services article:nth-child(2) div:nth-child(2) {

        padding: 50px 12% 50px 80px;

    }   

    section#last_publi div#display_publi article {

        width: 430px;

    }

    section#last_publi div#display_publi article div:first-child {

        height: 250px;

    }

    section#last_publi div#display_publi article div:first-child img {

        width: 400px; height: 225px;

    }

    section#thematiques > div:last-child article {

        margin-bottom: 0;

    }

    section#exemples > div:last-child article > div:first-child {

        width: 450px;

    }

    section#explications div {

        width: 30%;

    }

    section#presentation_about div img {

        width: 450px;

    }

    section#presentation_about div div {

        padding-left: 40px; width: calc(100% - 560px);

    }    

    section#presentation_about div:first-child div {

        order: 0;

    }

    section#presentation_about div:nth-child(2) div {

        padding: 0 40px 0 0;

    }

    section#presentation_about div:last-child div {

        padding: 0 0 0 40px; order: 0;

    }

    .error404 .intro svg { order: -1;}

}

@media (min-width: 1400px) {

    section#exemples > div:last-child article > div:first-child {

        width: 500px;

    }    

}

@media (min-width: 1600px) {

    section#exemples > div:last-child article > div:first-child {

        width: 550px;

    }    

}

@media (min-width: 1600px) {

    section#exemples > div:last-child article > div:first-child {

        width: 600px;

    }    

}

@media (min-width: 1921px) {    

    section#services article div > img {float: right;}

    section#services article:first-child div > img {float: left;} 

}



@media print {

    @page {margin: 2.5cm 1cm;}

    

    * {-webkit-print-color-adjust: exact;}

    

    ul, ol, blockquote, p {break-inside: avoid;}

    .single main > p {margin: 0;}

    body > header,.single main article header > div, .single main article footer, .single main section#commentaires, body > footer {display: none;}

    .single main article, .single main > p {padding: 0;}



}