/*
Theme Name: Lattes Ortho
Author: Studio des formes / Gaël Gouault 
Author URI: https://studiodesformes.net/
Description: …
Version: 1.0.1
Scan: https://wave.webaim.org | https://accessibe.com
*/

   /*/°\
  !& & (@
 ,-\-- /--,
! _!°°° !_ !
!_/!-__-!25/
  /°./\.°\
/===!  !==*/


:root {
	--color: #000;
	--color-green: #5F847A;
	--color-sand: #FCE4BC;
	--color-light: #F6F4E7;
	--color-grey: #777;
	--bkgrd: #fff;
	--border-width: 0;
	--line-height: 1.4;

	--font-reg: 'Lato-Reg';
	--font-regIta: 'Lato-Ita';
	--font-bold: 'Lato-Bold';
	--font-black: 'Lato-Black';
}


/* --- Typography --- */

@font-face {
    font-family: 'Lato-Reg';
    src: url('fonts/lato-regular-webfont.eot');
    src: url('fonts/lato-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/lato-regular-webfont.woff2') format('woff2'),
         url('fonts/lato-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Lato-Ita';
    src: url('fonts/lato-italic-webfont.eot');
    src: url('fonts/lato-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/lato-italic-webfont.woff2') format('woff2'),
         url('fonts/lato-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Lato-Bold';
    src: url('fonts/lato-bold-webfont.eot');
    src: url('fonts/lato-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/lato-bold-webfont.woff2') format('woff2'),
         url('fonts/lato-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Lato-Black';
    src: url('fonts/lato-black-webfont.eot');
    src: url('fonts/lato-black-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/lato-black-webfont.woff2') format('woff2'),
         url('fonts/lato-black-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


/* --- Normalize --- */

html {
	font-family: sans-serif;
	font-size: 62.5%;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

body {
	margin: 0;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
	display: block;
}

audio,
video {
	display: inline-block;
	vertical-align: baseline;
}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sup {
	top: -0.5em;
}

sub {
	bottom: -0.25em;
}

img,
iframe,
object {
	border: 0;
}

hr {
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}

body,
button,
input,
select,
textarea {
	font-family: var(--font-reg);
	font-size: 16px;
	font-size: 1rem;
	color: var(--color);
	line-height: var(--line-height);
	-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

::placeholder {
	color: var(--color);
	opacity: 1;
}

:-ms-input-placeholder {
	color: var(--color);
}

::-ms-input-placeholder {
	color: var(--color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
	font-family: var(--font-black);
	font-size: 2em;
	font-weight: normal;
	margin: 0;
}

b,
strong {
	font-family: var(--font-bold);
	font-weight: normal;
}

em,
i {
	font-family: var(--font-Ita);
	font-style: normal;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
	content: "";
}

.hidden {
	display: none !important;
}

.no-margin {
	margin: 0 !important;
}
.no-margin-top {
	margin-top: 0 !important;
}

.no-padding {
	padding: 0 !important;
}


/* --- Elements --- */

*,
*:before,
*:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	font-smoothing: antialiased;
}


hr {
	background: var(--color);
	border: 0;
	height: 1px;
	margin: 0 0 1em;
}

ul,
ol {
	margin: 0;
	padding: 0;
}


/* --- Links --- */

a {
	color: var(--color);
	text-decoration: none;
}

a:hover,
a:active {
	color: var(--color);
}


/* --- Header --- */

#masthead {
	position: fixed;
	width: 100%;
	height: auto;
	display: flex;
	flex-direction: column;
	color: var(--color);
	background: var(--bkgrd);
	transition: background .3s;
	z-index: 9;
}
#masthead.open {
	background: var(--color-green);
}

.site-title {
	width: 100%;
	height: 7em;
	display: flex;
	align-items: center;
	justify-content: center;
}

.site-title h1,
.site-title p {
	display: none;
}

.site-title svg {
	width: 30em;
	height: auto;
	transform: translateY(.25em);
}

#masthead.open .site-title svg path {
	fill: var(--bkgrd);
}

/*.site-title * {
	font-size: 3rem;
	color: var(--color);
	transition: color .3s;
}
#masthead.open .site-title * {
	color: var(--bkgrd);
}*/

#min-nav {
	position: absolute;
	top: 2.5em;
	left: 3em;
	width: 2.5em;
	height: 2.25em;
	display: flex;
	align-items: center;
	border: 0;
	border-top: 2.5px solid #000;
	border-bottom: 2.5px solid #000;
	background: transparent;
	z-index: 10;
	transition: border-color .3s;
	cursor: pointer;
}
#masthead.open #min-nav {
	border-color: var(--bkgrd);
}

#min-nav:after {
	position: absolute;
	left: 0;
	top: .75em;
	content: "";
	display: block;
	width: 100%;
	height: 2.5px;
	background: #000;
	transition: background .3s;
}
#masthead.open #min-nav:after {
	background: var(--bkgrd);
}

#site-navigation {
	display: none;
	overflow: auto;
}

.main-navigation {
	display: flex;
	flex-direction: column;
	height: calc(100vh - 7em);
}

.main-navigation .menu-header-container {
	flex: 1;
	display: flex;
}

.main-navigation .menu {
	flex: 1;
	width: 100%;
	height: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-evenly;
	padding: 2em;
}

.main-navigation .menu li {
	font-family: var(--font-black);
	font-size: 3em;
	text-transform: uppercase;
	text-align: center;
	list-style-type: none;
	margin: 0 1em;
}

.main-navigation .menu li a {
	color: var(--bkgrd);
}

#banner {
	width: 100%;
	height: 4.5em;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-sand);
}

#banner p {
	font-size: 1.6em;
	font-family: var(--font-black);
	text-transform: uppercase;
}

#banner a:after {
	display: inline-block;
	content: "";
	width: .8em;
	height: .8em;
	margin: 0 0 -.05em .5em;
	background: url(icons/link_ext.svg) no-repeat;
	background-size: contain;
}


/* --- Main Content --- */

.site-content {
	width: 100%;
	background: var(--bkgrd);
}

.content-area {
	width: 100%;
	padding: 11.5em 2em 2em 2em;
	background: var(--bkgrd);
}


/* --- Contact --- */

.section-first-page {
	position: relative;
	width: 100%;
}

.section-first-page .text {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 74em;
	max-width: 100%;
	margin: 2em auto;
	padding: 2em 4em;
	background: var(--color-green);
	z-index: 1;
	pointer-events: none;
}

.section-first-page .text * {
	font-size: 2.1rem;
	color: var(--bkgrd);
	text-align: center;
	margin: 0.5em 0;
}

.gallery {
	width: calc(100% + 4em);
	margin-left: -2em;
}

.gallery .cell {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.gallery .item {
  position: relative;
  width: 50%;
  height: 0;
  padding-bottom: 50%;
  overflow: hidden;
}

.gallery .item img {
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* --- Section cover ---*/

.section-cover {
	width: calc(100% + 4em);
	margin-left: -2em;
}

.section-cover figure {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 32%;
	margin: 0;
	overflow: hidden;
}

.section-cover figure img {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.section-cover ~ article.type-page {
	padding-top: 3em;
}


/* --- Page ---*/

article.type-page {
	width: 100%;
	padding: 2em 6%;
}

article .entry-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 3.5em 2em;
	color: var(--bkgrd);
	background: var(--color-green);
}
article.simple-header .entry-header {
	padding: 0;
	background: none;
}
article.simple-header .entry-header.conseils {
	display: none;
}
section .entry-header {
	width: 100%;
	display: flex;
	justify-content: center;
}

article .entry-header .title,
section .entry-header .title {
	width: 32em;
	max-width: 100%;
	height: 2.5em;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bkgrd);
}
article.simple-header .entry-header .title,
section .entry-header .title {
	background: var(--color-green);
}

article .entry-header .title h1,
section .entry-header .title h2 {
	font-size: 1.4em;
	line-height: 1;
	color: var(--color);
	text-transform: uppercase;
}
article.simple-header .entry-header .title h1,
section .entry-header .title h2 {
	color: var(--bkgrd);
}

article .entry-header .text {
	width: 56em;
	max-width: 100%;
	text-align: center;
	margin-top: 3em;
}
article.simple-header .entry-header .text {
	display: none;
}

article .entry-header .text * {
	font-size: 1.7rem;
}

article .entry-header .text ul li {
	list-style-position: inside;
	margin: 1em 0;
}


/* --- Section --- */

.section {
	display: flex;
	gap: 5em 2.5em;
	padding: 0 6%;
	margin: 4em 0;
}

.section.even {
	justify-content: stretch;
}

.section.even:nth-of-type(1) {
	margin-top: 0;
}

.section.even:nth-of-type(even) {
	flex-direction: row-reverse;
}

.section-page {
	margin: 4em 0;
	padding: 0 6%;
}

.home .section-page {
	margin-bottom: 8em;
}

.section .column {
	width: 100%;
}

.section .entry-image {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 65%;
	overflow: hidden;
}

.section.even .entry-image {
	height: 100%;
	min-height: 28vw;
	padding-bottom: 0;
}

.section .office-gallery .item {
	position: relative;
	width: 100%;
	height: calc(100vh - 11.5em);
	overflow: hidden;
}

.section .entry-image img,
.section .office-gallery .item img {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.section.even .entry-image img {
	object-fit: contain;
}

.section .entry-title {
	text-align: center;
	padding: 0 2em;
	margin-bottom: 3em;
}

.section .entry-title h3 {
	font-family: var(--font-bold);
	color: var(--color-grey);
}

.section .entry-text,
.section-advice .entry-text {
	text-align: center;
	padding: 0 2em;
}

.home .section-advice .entry-text {
	padding: 0;
}

.section .entry-text *,
.section-advice .entry-text * {
	font-size: 1.7rem;
	text-align: center;
	color: var(--color-grey);
}

.section .entry-text h2,
.section .entry-text h3,
.section-advice .entry-text h2 {
	font-family: var(--font-black);
	font-size: 2.1rem;
	line-height: 1.2;
	letter-spacing: 0.025em;
	text-transform: uppercase;
	color: var(--color);
	margin: 1em 0;
}

.section .entry-text h4 {
	text-transform: uppercase;
}

.section .entry-text p {
	margin: 0;
}


/* --- Parcours --- */

.parcours {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2.5em;
	padding: 0 6%;
	margin: 4em 0;
}

.home .parcours {
	grid-template-columns: repeat(4, 1fr);
}

.parcours .column {
	position: relative;
	width: 100%;
	background: var(--color-light);
}

.parcours .entry-text {
	text-align: center;
	padding: 0 2em 2em 2em;
}

.parcours .entry-text * {
	font-size: 1.7rem;
	text-align: center;
	color: var(--color-grey);
}

.parcours .entry-text h2,
.parcours .entry-text h3 {
	font-family: var(--font-black);
	font-size: 2.1rem;
	line-height: 1.2;
	letter-spacing: 0.025em;
	text-transform: uppercase;
	color: var(--color);
	margin: 1.5em 0 0.5em 0;
}

.parcours .entry-text p {
	margin: 0;
}

.parcours .num {
	font-family: var(--font-black);
	font-size: 2em;
	color: var(--bkgrd);
	width: 1.5em;
	height: 1.5em;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	margin: 1em auto;
	background: var(--color-green);
}


/* --- Advice ---*/

.section-advice {
	display: flex;
	gap: 5em 2.5em;
	padding: 0 6%;
	margin: 0 0 4em 0;
}

.section-advice .column {
	width: 100%;
}

.section-advice a.link {
	font-family: var(--font-black);
	font-size: 1.4em;
	color: var(--bkgrd);
	text-transform: uppercase;
	white-space: nowrap;
	width: auto;
	height: 2.5rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 6rem;
	margin-bottom: 3em;
	background: var(--color-green);
}

.section-advice .entry-text h2 {
	margin-top: 1rem;
}

.section-advice .entry-text .title {
	width: 32rem;
	max-width: 100%;
	height: 2.5rem;
	margin: 2rem auto 4rem auto;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-green);
}

.home .section-advice .entry-text .title {
	margin-bottom: 3rem;
}

.section-advice .entry-text .title h3 {
	font-size: 1.4rem;
	line-height: 1;
	color: var(--bkgrd);
	text-transform: uppercase;
}

.section-advice .entry-text h4 {
	font-family: var(--font-black);
	font-size: 1.7rem;
	text-transform: uppercase;
	color: var(--color);
}

.section-advice .entry-text h4 + p {
	margin-top: 0.25em;
}

.section-advice .appli-link {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.section-advice .appli-link img {
	width: auto;
	height: 4em;
}

.section-advice .entry-image img {
	width: 100%;
	height: auto;
	margin: 2em 0;
}

/* --- Contact --- */

.contact {
	width: 100%;
	padding: 2em 0;
	background: var(--color-green);
}

.contact article {
	width: 100%;
	padding: 11.5em 6% 0 6%;
}

.contact .section {
	padding: 0;
	margin-top: 0;
}

.entry-map {
	padding: 1em 0;
}

.entry-map #map {
	width: 100%;
	height: 32em;
	border: 3px solid var(--bkgrd);
}

.entry-map p {
	font-family: var(--font-black);
	font-size: 1.7em;
	text-align: center;
	color: var(--bkgrd);
	margin: 0.5em;
}

.entry-form label,
.entry-form .wpcf7-submit {
	font-family: var(--font-black);
	font-size: 1.4em;
	color: var(--color-green);
	text-transform: uppercase;
	white-space: nowrap;
	display: flex;
	align-items: center;
	width: 100%;
	height: 5rem;
	padding: 0 2rem;
	background: var(--bkgrd);
}

.entry-form .wpcf7-submit {
	display: inline-flex;
	width: auto;
	height: 3.8rem;
}

.entry-form label.msg {
	display: grid;
	height: auto;
	padding: 1.5rem 2rem;
}

.entry-form input,
.entry-form textarea {
	font-family: var(--font-black);
	font-size: 1.4rem;
	color: var(--color-green);
	outline: 0;
	border: 0;
}

.entry-form input {
	padding: 0 2rem;
	cursor: pointer;
}

.entry-form textarea {
	width: 100%;
	padding: 0;
	margin-top: 1em;
	resize: none;
}

.wpcf7-not-valid-tip {
	font-family: var(--font-reg);
	font-size: 1.4rem;
	padding: 0 2rem;
	text-transform: none;
}

.wpcf7 form.invalid .wpcf7-response-output {
	font-family: var(--font-reg);
	font-size: 1.7rem;
	color: var(--bkgrd);
	margin: 1em 0;
	padding: 0;
	border: 0;
}


.custom-marker {
    width: 2.5em;
    height: 2.5em;
    background: var(--color-green);
    /*border: 2px solid var(--color-sand);*/
    border-radius: 50%;
    /*box-shadow: 0 0 5px rgba(0,0,0,0.5);*/
    cursor: pointer;
}


/* --- Not Found --- */

.not-found {
	min-height: calc(100vh - 15.5em);
}

.not-found .entry-header {
	margin-top: 2em;
}

.not-found .entry-header h2 {
	font-family: var(--font-black);
	font-size: 2.1rem;
	line-height: 1.2;
	letter-spacing: 0.025em;
	text-transform: uppercase;
	color: var(--color);
	margin: 3em 0 0 0;
}

.not-found .entry-header .entry-text {
	font-size: 1.7em;
	color: var(--color-grey);
}


/* --- Footer --- */

#footer {
	width: 100%;
	height: 27em;
	display: flex;
	align-items: flex-end;
	padding: 1em 2em;
	background: var(--color-green);
}

.footer-content {
	width: 100%;
	height: auto;
	text-align: center;
}

.footer-content .address,
.footer-content .social {
	display: flex;
	justify-content: center;
	margin: 2em 0;
}

.footer-content p {
	font-family: var(--font-bold);
	font-size: 1.7em;
	color: var(--bkgrd);
	margin: 0;
}

.footer-content p a,
.footer-content p span {
	color: var(--bkgrd);
	text-decoration: underline;
}

.ico {
	width: 3em;
	height: 3em;
}

.ico svg {
	width: 100%;
	height: 100%;
}



/* --- Media Queries --- */

@-ms-viewport {
	width: device-width;
}

@viewport {
	width: device-width;
}


/* --- >= 710px --- */

@media screen and (min-width: 1600px) {
	html {
		font-size: 68.8%;
	}
}

@media screen and (min-width: 1920px) {
	html {
		font-size: 75.0%;
	}
}

@media screen and (max-width: 1080px) {
	.parcours {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (max-width: 960px) {
	html { 
		font-size: 58%;
	}
	.gallery .cell {
		flex-direction: column;
	}
	.gallery .item {
		width: 100%;
		padding-bottom: 70%;
	}
	.section,
	.section-advice {
		flex-wrap: wrap;
		padding: 0;
	}
	.parcours {
		padding: 0
	}
	.home .parcours {
		grid-template-columns: repeat(2, 1fr);
	}
	.home .section .column {
		display: flex;
		flex-direction: column;
	}
	.home .section .column .entry-image {
		order: 2;
		margin-top: 2em;
	}
	.home .section .column .entry-text h3 {
		margin-top: .5em;
	}
	.home .section-advice {
		gap: 0;
	}
	.home .section-advice .column:first-child {
		order: 2;
	}
	.home .section-advice .column .entry-text > *:not(.title) {
		display: none;
	}
	.section.even .entry-image {
		height: 0;
		padding-bottom: 65%;
	}
	/*.section.even .entry-image img {
		position: relative;
		height: auto;
		object-fit: unset;
	}*/
}

@media screen and (max-width: 600px) {
	#wpadminbar {
		position: fixed;
	}
	#min-nav {
		left: 2em;
	}
	.site-title svg {
		width: 28em;
	}
	.section-page {
		padding: 0;
	}
	.section-first-page .text {
		position: relative;
	}
	article.type-page {
		padding-left: 0;
		padding-right: 0;
	}
	article.contact {
		padding-left: 2em;
		padding-right: 2em;
	}
	.parcours,
	.home .parcours {
		grid-template-columns: 1fr;
	}
	.parcours .column:not(.column:last-child):after {
		position: absolute;
		left: calc(50% - .75em);
		bottom: -2em;
		display: block;
		content: "";
		width: 1.5em;
		height: 1.5em;
		background: url(icons/arrow_down.svg) no-repeat;
		background-size: contain;
	}
	.entry-form label {
		flex-wrap: wrap;
		height: 8rem;
		padding: 1rem 2rem;
	}
	.entry-form input {
		width: 100%;
		padding: 0;
	}
	.wpcf7-not-valid-tip {
		padding: 0;
	}
	.section .office-gallery .item {
		height: 0;
		padding-bottom: 56.25%;
	}
}