@font-face {
    font-family:'DINPro';
    font-weight:normal;
    src:url('../fonts/DINPro-Light.woff2') format("woff2"), url('../fonts/DINPro-Light.woff') format("woff");
}
@font-face {
    font-family:'DINPro';
    font-weight:bold;
    src:url('../fonts/DINPro-Medium.woff2') format("woff2"), url('../fonts/DINPro-Medium.woff') format("woff");
}

:root {
    --header-bg-color:#0a3357;
    --title-color:#f66457;
    --link-color:#f66457;
    --link-hover-color:#0a3357;
    --text-color:#0f4c81;
    --bg-gray-color:#e6e6e6;
}

*:focus {outline:none;}

body {font-family:'DINPro';}

h1, h2, h3 {color:var(--title-color);font-family:'DINPro';font-weight:bold;line-height:1.2;}
h1 {text-transform:uppercase;font-size:2.6em;}
p {color:var(--text-color);line-height:1.2;font-size:1em;}
a {color:var(--link-color);}
a:hover, a:focus {color:var(--link-hover-color);}
h1 + p::before, h1 + p::after {content:'-';color:var(--title-color);display:block;padding:20px 0;font-weight:bold;}
h2 {text-align:center;color:var(--text-color);font-size:3em;margin:100px 0;position:relative;}
h2 span {color:var(--title-color);font-size:.5em;display:block;}
h2::before, h2::after {content:'';width:1px;height:60px;display:block;margin:0 auto;background:var(--title-color);position:absolute;left:50%;}
h2::before {top:-60px;}
h2::after {margin-top:10px;}

img {opacity:0;transition:all .25s ease-in-out;border-radius:50%;}
img.active {opacity:1;border-radius:0;}

header {--text-color:#fff;position:relative;}
header::before {content:'';background:url('../img/bg-header.jpg') var(--header-bg-color) no-repeat center center;background-size:cover;position:absolute;width:100%;height:85%;display:block;z-index:-1;}
header .grid-padding-x:first-of-type {padding:30px 0;}
header .grid-padding-x:first-of-type .cell {align-self:center;}
header .logo {height:75px;}
header nav {--link-color:#fff;--link-hover-color:#f66457;}
header nav ul {margin:0;display:flex;flex-direction:row;justify-content:flex-end;}
header nav ul li {list-style-type:none;text-transform:uppercase;font-size:1em;font-weight:bold;color:var(--link-color);}
header nav ul li::after {content:'|';margin:0 15px;display:inline-block;}
header nav ul li:last-child::after {display:none;}
header .scroll + p {margin-top:60px;--text-color:#0f4c81;}

.scroll {background:url('../img/picto-scroll.png') no-repeat center center;background-size:cover;display:block;width:20px;height:50px;margin:40px 0;}

#cabinet img[alt="Les avocats du cabinet"] {max-width:446px;display:block;margin:0 0 0 auto;}

section#avocats article {display:flex;flex-direction:row;--title-color:#0f4c81;margin:20px 0;align-items:flex-start;}
section#avocats article h3 {margin:0;}
section#avocats article h3 ~ a {display:block;}
section#avocats article a.linkedin {font-size:2em;}
section#avocats article img {max-width:33.3333%;object-fit:contain;filter:grayscale(1);}
section#avocats article:hover img {filter:grayscale(0);}
section#avocats article div {padding-left:20px;text-align:justify;}

footer {position:relative;margin-top:65px;}
footer h2 {color:#fff;margin:30px 0 100px 0;}
footer::before {content:'';background:var(--header-bg-color);position:absolute;width:100%;height:75%;display:block;z-index:-1;}
footer .localisation {background:url('../img/bg-map-108.jpg') var(--bg-gray-color) no-repeat center right;background-size:cover;padding:80px 0;}
footer a.button {background:var(--link-color);border:none;font-size:1em;padding:0 20px;margin-bottom:20px;border-radius:10px;line-height:1.3em;}
footer p.horaires::first-line {color:var(--link-color);font-weight:bold;}
footer p.address, footer p.telephone, footer p.email {display:flex;align-items:center;font-size:1em;}
footer p.address i, footer p.telephone i, footer p.email i {font-style:normal;}
footer p.address::before, footer p.telephone::before, footer p.email::before {content:'';background:url('../img/picto-map.svg') center center no-repeat;width:30px;height:30px;display:block;margin-right:10px;}
footer p.telephone::before {background-image:url('../img/picto-phone.svg');}
footer p.email::before {background-image:url('../img/picto-email.svg');}
footer .mentions .cell {padding:0;}
footer .mentions p {font-size:.8em;line-height:2;}

/* FORM */
footer form br {display:none;}
footer form label {font-size:0;}
footer form input, footer form textarea {background:none;border-radius:20px;padding:8px 12px;font-size:1em;margin-bottom:10px;height:auto;line-height:1.2;}
footer form input.wpcf7-not-valid, footer form textarea.wpcf7-not-valid {border-color:#f00;}
footer form textarea {height:150px;resize:none;font-size:1rem;}
footer form input[type="submit"] {background:var(--link-color);border:none;padding:8px 30px;text-transform:uppercase;color:#fff;cursor:pointer;margin:0 0 0 auto;border-radius:10px;font-weight:bold;}
footer form input[type="submit"]:hover {background:var(--link-color);}
footer form p {display:flex;flex-wrap:wrap;}
footer form p label {flex:1 0 48%;margin:0 1%;}
footer form p label:last-of-type {flex:1 0 98%;margin:0 1%;}
footer form .consentement label {font-size:12px;color:var(--text-color);line-height:1;}
footer form .consentement input[name="consentement"] {margin-bottom:0;}
div.wpcf7 .ajax-loader {position:absolute;bottom:25px;}
.wpcf7 form .wpcf7-response-output {border-radius:20px;text-align:center;font-size:14px;border-color:var(--link-color);margin:1em 0;line-height:1.2;}
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output {border-color:#f00;}
::placeholder {color:var(--text-color);}
[type='text'], [type='password'], [type='date'], [type='datetime'], [type='datetime-local'], [type='month'], [type='week'], [type='email'], [type='number'], [type='search'], [type='tel'], [type='time'], [type='url'], [type='color'], textarea {border-radius:10px;box-shadow:none;background:none;border:1px solid #fff;height:auto;line-height:1.2;}
textarea[rows] {height:80px;}
[type='text']:focus, [type='password']:focus, [type='date']:focus, [type='datetime']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='week']:focus, [type='email']:focus, [type='number']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='url']:focus, [type='color']:focus, textarea:focus {border:1px solid var(--text-color);background:none;}

#cmplz-document.cookie-statement {margin:30px auto 0 auto;max-width:100%;}
body.page-template-page section h2, body.page-template-page section h3 {font-size:1.5em;margin:20px 0;text-align:left;}
body.page-template-page section h3 {font-size:1.2em;}
body.page-template-page section h2::before, body.page-template-page section h2::after {display:none;}
body.page-template-page p {text-align:justify;}
body.page-template-page ul li {color:var(--text-color);}

body:not(.home) #cabinet {text-align:center;}
body:not(.home) #cabinet .scroll {margin-left:auto;margin-right:auto;}

@media screen and (max-width:1024px){
    footer .localisation {background-position-x:50%;}
}
@media screen and (max-width:768px){
    main {font-size:.7em;}
    #cabinet img[alt="Les avocats du cabinet"] {width:100%;}
    section#avocats article h3, footer h3 {font-size:2em;}
    footer form p label, footer form p label:last-of-type {flex:1 0 100%;margin:0;}
    [type='text'], [type='password'], [type='date'], [type='datetime'], [type='datetime-local'], [type='month'], [type='week'], [type='email'], [type='number'], [type='search'], [type='tel'], [type='time'], [type='url'], [type='color'], textarea {margin-bottom:5px;padding:5px;}
    footer .localisation {padding:40px 0;}
    footer .localisation .grid-padding-x {align-items:center;}
    footer .localisation {background-position-x:60%;}
    .mentions {text-align:center;}
}
@media screen and (max-width:680px){
    header .grid-padding-x:first-of-type .cell, h1, h1 + p::before, h1 + p::after, p {text-align:center;}
    header nav ul {justify-content:center;margin-top:20px;}
    .scroll {margin:40px auto;}
    section#avocats article p {text-align:justify;}
    footer form input[type="submit"] {margin:20px auto;}
    footer .localisation {background-image:none;}
    footer .localisation p {font-size:1.2em;}
    footer p.address, footer p.telephone, footer p.email {justify-content:center;}
    footer a.button {margin:20px auto;display:block;width:60%;line-height:2;}
}