@import "animations.css";
@font-face {
  font-family: 'merienda';
  src:  url('Merienda.ttf');
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'roboto';
  src:  url('Roboto.ttf');
  font-display: swap;
}
@font-face {
  font-family: 'roboto-italic';
  src:  url('Roboto-italic.ttf');
  font-display: swap;
}
@font-face {
  font-family: 'gilda-display';
  src:  url('Gilda-Display.ttf');
  font-style: normal;
  font-display: swap;
}
/*	Initialisation des styles	*/
:root {
	--primary-dark-color: #9f2b19;
	--primary-light-color: #e26c5a;
	--dark-text-color: #84582e;
	--light-text-color: #fff;
	--logo-color: #e94e1b;
	--background-dark: #232323;
	--background-light: #eee;
	--global-padding: 16px;
	--header-height: 60px;
	--footer-height: 130px;
	--footer-height-mobile: 200px;
}
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body {
	font-family: "roboto" !important;
	font-size: 14px !important;
	color: #333;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
html {
    -webkit-tap-highlight-color: transparent; /* Désactive la surbrillance au clic sur tous les navigateurs */
}
a {
	text-decoration: none;
	color: currentColor;
}
h1 {
	letter-spacing: 1px;
	color: #e6c8ab;
	font-family: "gilda-display" !important;
	font-size: 4rem !important;
	font-weight: 700 !important;
	speak: none;
	line-height: 1.2;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	animation: fade-out linear;
	animation-timeline: scroll(root);
	animation-range: 15vh 40vh;
	animation-fill-mode: forwards;
}
h2 {
	letter-spacing: 1px;
	font-family: "gilda-display";
	font-size: 2rem;
	font-weight: 600 !important;
	speak: none;
	line-height: 1.2;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
h3 {
	letter-spacing: 1px;
	font-family: "gilda-display" !important;
	font-size: 1.3rem !important;
	font-weight: 600 !important;
	speak: none;
	line-height: 1.2;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
ul {
	padding-left: 15px;
}
.center {
	text-align: center !important;
}
.full {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}
.hidden {
	display: none;
}
.btn {
	border-radius: 3px;
}
.spaced-text {
	line-height: 1.5;
	letter-spacing: 1px;
}
.grid-element img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;	
}
.square-img {
	display: block;
	aspect-ratio: 1 / 1;
	width: 100%;
	object-fit: cover;
}
.reactive-img {
	opacity: 0.8;
	transition: .2s ease-in-out;
}
.reactive-img:hover {
	opacity: 1;
	transform: scale(1.1);
}
.legend {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 10px;
	background: rgba(0, 0, 0, 0.4);
	backdrop-filter: blur(3px);
	font-weight: 400 !important;
    pointer-events: none;
}
.legend h2 {
	margin-bottom: 0 !important;
	font-weight: 300 !important;
}

#header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background-color: rgba(0,0,0,0);
	height: var(--header-height);
	z-index: 100;
	animation: apparition-menu linear;
	animation-timeline: scroll(root);
	animation-range: 0px 100px;
	animation-fill-mode: forwards;
}
.navbar {
	display: flex;
	align-items: center;
	width: auto;
	max-width: 960px;
	height: 100%;
	margin: auto;
	padding: 0 var(--global-padding);
}
.navbar-brand {
	display: block;
	text-shadow: 0 0 1px black;
}
.navbar-brand-link {
	display: flex;
	width: fit-content;
	align-items: end;
	justify-content: left;
	text-align: right;
	padding-top: 3px;
}
.navbar-logo {
	font-family: "merienda" !important;
	font-size: 50px;
	line-height: 1.2;
	font-weight: bold !important;
	color: var(--logo-color);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	transform: rotate(-20deg);
    animation: logoIn;
    animation-timing-function: cubic-bezier(0.64, 0.57, 0.67, 1.53);
	animation-duration: 0.6s;
    animation-fill-mode: forwards;
}
.navbar-title {
	display: inline-block;
	color: var(--logo-color);
	font-family: "merienda" !important;
	font-size: 30px !important;
	font-weight: 600 !important;
	line-height: 1;
	letter-spacing: 1px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	opacity: 0;
    animation: logoTitleIn;
    animation-timing-function: cubic-bezier(0.64, 0.57, 0.67, 1.53);
	animation-duration: 0.6s;
    animation-fill-mode: forwards;
}
.navbar-subtitle {
	display: inline-block;
	color: var(--light-text-color);
	font-family: "roboto-italic" !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	speak: none;
	line-height: 1;
	letter-spacing: 1px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	opacity: 0;
    animation: logoSubtitleIn;
    animation-timing-function: cubic-bezier(0.64, 0.57, 0.67, 1.53);
	animation-duration: 0.6s;
    animation-fill-mode: forwards;
}

#navbar-links {
	color: var(--light-text-color);
	font-weight: bold;
    letter-spacing: 1px;
    -webkit-flex-basis: 100%;
    flex-basis: 100%;
}
.navbar-nav {
	list-style: none;
}
.nav-item {
	
}
.nav-link, .navbar-btn {
	transition: .2s ease-in-out;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    position: relative;
    padding: 8px 16px;
}
.nav-link:hover {
	color: var(--primary-light-color);
}
.navbar-btn, .btn {
	background-color: var(--primary-light-color);
	color: var(--light-text-color);
}
.navbar-btn:hover, .btn:hover {
	background-color: var(--primary-dark-color);
}
.btn {
	display: block;
	width: fit-content;
	padding: 8px 16px;
	text-shadow: none;
	margin: 20px auto;
	font-weight: bold;
    letter-spacing: 1px;
	transition: .2s ease-in-out;
}
#res-btn {
	animation: grow-btn linear;
	animation-timeline: scroll(root);
	animation-range: 50vh 70vh;
	animation-fill-mode: forwards;
}
#toggler {
    display: none;
    position: fixed;
    right: 0;
}
.navbar-toggle {
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    position: relative;
    color: var(--light-text-color);
    background-color: transparent;
    margin-left: auto;
}
.navbar-toggle {
	cursor: pointer;
}
.navbar-toggle .nav-open, .navbar-toggle .nav-close {
    position: fixed;
    right: 12px;
}
.navbar-toggle .nav-open {
	transform: scaleY(1);
	opacity: 1;
	transition: .2s ease-in-out;
	transition-delay: 0.1s;
}
#toggler:checked ~ label.navbar-toggle .nav-open {
	transform: scaleY(0);
	opacity: 0;
	transition: .2s ease-in-out;
}
.navbar-toggle .nav-close {
	transform: scaleY(0);
	opacity: 0;
	transition: .2s ease-in-out;
}
#toggler:checked ~ label.navbar-toggle .nav-close {
	transform: scaleY(1);
	opacity: 1;
	transition: .2s ease-in-out;
	transition-delay: 0.1s;
}

.top-background {
	position: fixed;
	top: 0;
	width: 100%;
    background-position: 50% 50%;
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 100vh;
    overflow: hidden;
    z-index: -1;
	animation: parallax-effect linear;
	animation-timeline: scroll(root);
	animation-range: 0 200vh;
	animation-fill-mode: forwards;
}
#background-accueil {
    background-image: url("../img/Oustalou.webp");
}
#background-gite {
    background-image: url("../img/Gite-oustalou.webp");
	animation-range: 0 150vh;
}
#background-visite {
    background-image: url("../img/Paysage-Oustalou.webp");
}
.overlay {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #000;
	opacity: 0.4;
	width: 100%;
}

.content {
	width:100%;
	text-align: justify;
	padding: 30px;
}
section.content p, section.content h2 {
	margin-bottom: var(--global-padding);
}

.content:nth-last-child(1 of .content) {
	margin-bottom: var(--footer-height) !important;
}

.container {
	padding: var(--global-padding);
	max-width: 960px;
	margin: 0 auto;
}
.container p:last-child {
	margin-bottom: 0 !important;
}
#content-1 {
	padding: 0;
}
#content-1 .container {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	min-height: 100vh;
	text-shadow: 0 0 1px black;
	padding-top: calc(var(--header-height) + var(--global-padding)) !important;
}
#content-1 .pre-title, #content-1 .underline {
	color: var(--light-text-color);
	animation: fade-out linear;
	animation-timeline: scroll(root);
	animation-range: 5vh 15vh;
	animation-fill-mode: forwards;
}
#content-1 .underline {
	background: var(--light-text-color);
}
#content-2 {
	font-size: 1rem;
}
.pre-title {
	text-align: center;
	letter-spacing: 1px;
	font-size: 12px !important;
	font-weight: bold !important;
	text-transform: uppercase;
	speak: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	margin: 0 auto;
}
.parallax {
	background-size: cover;
	background-position: center;
	background-attachment: local; /* Important : fixe par rapport au conteneur, pas au viewport */
  
	/* 2. LIAISON DE L'ANIMATION AU SCROLL DE L'ÉLÉMENT */
	/* On lance l'animation nommée 'parallax-bg' */
	animation-name: parallax-bg;
	/* L'animation est liée à la visibilité de l'élément */
	animation-timeline: view(); 
	/* L'animation doit être linéaire pour être fluide */
	animation-timing-function: linear;
}
#content-4 h2 {
	color: var(--light-text-color);
	text-shadow: 0 0 2px #000;
}
#content-4 .bullet-text {
	background-color: #84582e;
}
.bullet-text {
	padding: var(--global-padding);
	display: flex;
	margin: var(--global-padding) 0;
}
.bullet-text img {
	width: 150px;
	height: 150px;
	border-radius:50%;
	margin: var(--global-padding);
}
.bullet-text div {
	margin: var(--global-padding);
}
.bullet-text div p:last-child {
	text-align: right;
}
.quote {
	position: relative;
	font-style: italic;
	font-family: "gilda-display";
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: 1px;
	direction: ltr;
	color: #e6c8ab;
}
.quote span {
	display: inline-block;
	font-size: 2.4rem;
	line-height: 0;
}
.quote span.quote-start {
	margin-left: -20px;
}
.quote span.quote-end {
	transform: translateY(2rem);
}

.underline {
	display: block;
    height: 1px;
    width: 40px;
    margin: 0 auto;
    margin-top: 20px;
    background: black;
}
.pre-title {
	color: black;
    margin: 20px auto;
}
.underline {
	background: black;
}
.intro {
	letter-spacing: 1px;
	color: var(--light-text-color);
	font-family: "gilda-display" !important;
	font-size: 2rem !important;
	speak: none;
	line-height: 1.2;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	animation: fade-out linear;
	animation-timeline: scroll(root);
	animation-range: 45vh 70vh;
	animation-fill-mode: forwards;
}

.white {
	background-color: white;
	color: var(--dark-text-color);
}
.light {
	background-color: var(--background-light);
	color: var(--dark-text-color);
}
.dark {
	background-color: var(--background-dark);
	color: var(--light-text-color);
}
.light-text {
	color: var(--light-text-color);
}
#chambre, #salon {
	padding-bottom: 15px !important;
}
#res-form * {
	font-family: "roboto";
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
#res-form h3 {
	color: var(--primary-dark-color);
	padding-bottom: 10px;
}
#tarifs {
	position: relative;
	color: white;
	font-size: 0.9rem;
	line-height: 1.5;
	font-weight: bold;
	letter-spacing: 1px;
	padding-top: calc(var(--header-height) + var(--global-padding)) !important;
	background-image: url("../img/Paysage-Oustalou.webp");
	background-position: center; 
	background-repeat: no-repeat; 
	background-size: cover;
}
#tarifs .container {
	position: relative;
	z-index: 1;
}
#tarifs .pre-title {
	color: var(--light-text-color);
}
#tarifs .underline {
	background: var(--light-text-color);
}
.details-tarifs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
}
.details-tarifs > div {
	display: flex;
	flex-direction: column;
}
.details-tarifs > div > div {
	margin: 0;
	padding: 30px;
	height: fit-content;
}
.details-tarifs .white {
	flex-grow: 1;
}
.details-tarifs h2 {
	margin-bottom: 0 !important;
	font-weight: 300 !important;
}
.details-tarifs .white p {
	border-bottom: solid 1px #e6c8ab;
	padding-bottom: 6px;
	margin-bottom: 6px;
	color: #333;
	height: auto;
}
.red-bg {
	display: inline-block;
	padding: 6px 12px;
	background-color: var(--primary-dark-color);
	border-radius: 15px;
    opacity: 0;
    transform: scale(2);
    filter: blur(10px);
	animation: apparition-fade 0.6s ease-out;
	animation-fill-mode: forwards;
	animation-delay: 1s;
}
.offer {
	display: inline-block;
    opacity: 0;
    transform: scale(10);
	animation: apparition-fade 0.6s ease-out;
	animation-fill-mode: forwards;
	animation-delay: 0.5s;
}
.features-icons {
	display: flex;
    align-items: flex-end;
    width: fit-content;
    margin: 30px auto;
    color: var(--dark-text-color);
    letter-spacing: 0;
    font-weight: 500;
}
.features-icons div {
	margin: 0 10px;
}
.features {
	display: flex;
    align-items: flex-start;
    gap: 30px;
    width: fit-content;
    margin: 0 auto;
}
.features > div {
	flex: 1;
	display: flex;
    align-items: center;
    width: fit-content;
    margin: 0;
}
.features > div > div {
	border-left: solid 2px currentcolor;
	padding-left: 10px;
}
.features svg {
	min-width: 64px;
	max-width: 64px;
    margin-right: 10px;
}
.features h2 {
	font-weight: normal !important;
	margin-bottom: 0 !important;
}
.grid {
	display: grid;
	gap: 30px var(--global-padding);
	width: auto;
	max-width: 960px;
	margin: auto;
}
.grid.full {
	padding: var(--global-padding) !important;
	gap: var(--global-padding) !important;
}
#features {
	margin: 30px auto;
}
.grid-element {
	position: relative;
	overflow: hidden;
}
.double-block-left {
	display: grid;
	grid-template-columns: 2fr 1fr;
	width: 100%;
	max-width: 100%;
	padding: 0;
}
.double-block-right {
	display: grid;
	grid-template-columns: 1fr 2fr;
	width: 100%;
	max-width: 100%;
	padding: 0;
}
.double-block-left .txt, .double-block-right .txt {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 30px 4rem;
}
.double-block-left .img, .double-block-right .img {
	position: relative;
	overflow: hidden;
}
.double-block-left .img img, .double-block-right .img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.google-map {
	width: 100%;
	height: 400px;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: gray;	
}

#footer {
	display: flex;
    align-items: center;
	position: fixed;
	bottom: 0;
	width: 100%;
	height: var(--footer-height);
	background-color: var(--background-dark);
	color: var(--light-text-color);
	letter-spacing: 1px;
	z-index: -2;
}
#footer .container {
	display: flex;
    align-items: flex-start;
    justify-content: space-evenly;
    width: 100%;
}
#footer a {
	color: #c19b76;
	line-height: 24px;
}

#footer svg {
	padding: 6px;
	margin: 12px;
	margin-left: 0;
	border-radius: 6px;
}
#footer #open_preferences_center svg {
	padding: 0;
	margin: 0;
	border-radius: none;
	vertical-align: middle;
}
@media (width >= 800px) {
	#navbar-links {
		display: flex;
		position: relative;
		top: 0;
		left: 0;
		right: 0;
		padding: 0;
		margin-left: auto;
		width: fit-content;
		align-items: center;
		justify-content: right;
		background-color: transparent;
	}
	.navbar-nav {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.nav-item {
		margin: 0;
	}
	.nav-link::before {
	    position: absolute;
	    content: '';
	    height: 2px;
	    bottom: 0px;
	    width: 0;
	    background: var(--primary-light-color);
	    transition: width 0.3s ease-in;	
	}
	.nav-link:hover::before {
		width: calc(100% - 6px);
	}
	.navbar-btn {
		border-radius: 3px;
	}
	.navbar-toggle {
	    display: none;
	}
	.container.narrow {
		max-width: 600px;
	}
	.grid {
		grid-template-columns: repeat(4, 1fr);
	}
	#features {
		grid-template-columns: repeat(6, 1fr);
	}
	.bullet-text {
		align-items: flex-start;
	}
	.bullet-text:nth-child(odd) {
		direction: rtl;
	}
	#tarifs div.grid {
		grid-template-columns: 1fr 2fr;
	}
}
@media (width < 800px) {
	#navbar-links {
	    display: block;
	    position: fixed;
	    top: 0px;
	    left: 0;
	    right: 0;
	    padding: 72px 12px 12px;
		z-index: -1;
		overflow: hidden;
		opacity: 0;
	    transform: translateY(-100%);
	    transition: 0.3s ease-in-out;
		background-color: rgba(0,0,0,0.7);
	}
	.nav-link:hover {
		background-color: rgba(0,0,0,0.2);
	}
	#toggler:checked ~ #navbar-links {
		transform: translateY(0) !important;
		opacity: 1;
	}
	h1 {
		font-size: 3rem !important;
	}
	.intro {
		font-size: 1.5rem !important;
	}
	.grid {
		grid-template-columns: repeat(2, 1fr);
	}
	#features {
		grid-template-columns: repeat(3, 1fr);
	}
	.bullet-text {
		align-items: center;
		flex-direction: column;
	}
	.features {
		display: flex;
		flex-direction: column;
	    width: 100%;
	    margin: 0 auto;
	}
	.features > div {
		margin: 10px 0;
	}
	.double-block-left, .double-block-right {
		display: block;
		padding: var(--global-padding);
	}
	.double-block-left h2, .double-block-right h2 {
		text-align: center;
	}
	.double-block-left .txt, .double-block-right .txt {
		padding: var(--global-padding) 0;
	}
	#res-form #intro {
		text-align: justify;
	}
	#tarifs div.grid {
		grid-template-columns: repeat(1, 1fr);
	}
}
@media (width <= 680px) {
	:root {
		--footer-height: 330px;
	}
	#footer .container {
		display: flex;
		flex-direction: column;
	    align-items: center;
	}
	#footer .container div {
		text-align: center;
		margin-bottom: 20px;
	}
	#footer .container div:last-child {
		margin-bottom: 0;
	}
	.grid {
		grid-template-columns: repeat(1, 1fr);
	}
	#features {
		grid-template-columns: repeat(2, 1fr);
	}
	.features svg {
		max-width: 48px;
		min-width: 48px;
	}
	.features div {
		width: 100%;
	}
	.details-tarifs {
		grid-template-columns: repeat(1, 1fr);
		gap: 30px;
	}
}