/*
 * Global
 */

@import
url('https://fonts.googleapis.com/css2?family=Noto+Sans+Symbols+2&display=swap');

*,
html,
body {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
	border: 0;
	width: 100%;
	height: 100%;
	min-height: fit-content;
	font-size: 17px;
}
h1, h2, h3, h4, h5, h6 {
	font-size: 1em;
	line-height: 1.1em;
	font-weight: normal;
	margin: 0;
}
a {
	color: inherit;
	text-decoration: inherit;
}
sup, sub {
	vertical-align: baseline;
	position: relative;
	top: -0.4em;
}
sub { 
	top: 0.4em; 
}

body {
    --fMain: Garamond, Palatino, 'Palatino Linotype', Georgia, Baskerville, 'Baskerville Old Face', serif;
    --fSymb: 'Noto Sans Symbols 2', 'Segoe UI Symbol', serif;
    --fCaa: Palatino, "Palatino Linotype";
    --fSub: Palatino, 'Palatino Linotype', Georgia, Baskerville, 'Baskerville Old Face', serif;
    --cBg0: #faf7f1;
    --cBg1: #aaa;
	--cFg0: #231f20;
	--cLnk: #4377ab;
	background: center / cover repeat-y url('fond.webp'), var(--cBg0);
	color: var(--cFg0);
	font-family: var(--fMain);
}

.symbol {
    font-family: var(--fSymb);
    font-weight: 400;
    font-style: normal;
}
.links .symbol {
    font-family: serif;
}

#fp,
#prog,
#info {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	font-size: 1.6em;
}
#fp > div,
#prog > div,
#info > div {
	padding-top: 2em;
}

#fp {
	height: 100%;
	background: center / contain no-repeat url('Fleurs1.webp');
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	font-style: italic;
}
#fp > div {
	max-width: 500px;
}

#prog,
#info {
	background: top center / contain no-repeat url('Fleurs2.webp'), bottom center / contain no-repeat url('Chateau.webp');
	text-align: center;
	padding-bottom: min(55vw, 530px);
}
#prog > div,
#info > div {
	font-size: .8em;
}


.caa {
	font-size: 1.8em;
	font-family: var(--fCaa);
	font-style: normal;
	font-weight: lighter;
	line-height: 1.1em;
	letter-spacing: .2ch;
}

#fp .links,
#prog .links,
#info .links {
	max-width: 40ch;
	margin: 2em auto auto;
	line-height: 1.5em;
	color: var(--cLnk);
	font-style: italic;
}
#prog .links,
#info .links {
	margin: 3.5em auto 0;
}
.links a {
	display: inline-block;
	width: 15ch;
	min-width: fit-content;
}
.links a:hover,
.links a:focus {
	text-decoration: underline 1px;
}



#prog h1,
#info h1 {
	font-size: 1.5em;
}
#prog h2,
#info h2 {
	font-size: 1.4em;
	margin: 3em 0 2em;
}
#prog h2::before,
#info h2::before {
    font-family: var(--fSymb);
    font-weight: 400;
    font-style: normal;
	content: '🙚 ';
}
#prog h2::after,
#info h2::after {
    font-family: var(--fSymb);
    font-weight: 400;
    font-style: normal;
	content: ' 🙘';
}

/*
 * Programme
 */

#prog h3,
#prog h4 {
	margin: 2em auto .2em;
	text-transform: uppercase;
	font-variant-caps: titling-caps;
	font-weight: 300;
}

#prog h4 {
	letter-spacing: .1rem;
}
#prog h4::before {
    font-family: var(--fSymb);
    font-weight: 400;
    font-style: normal;
	content: '🙡  ';
}
#prog h4::after {
    font-family: var(--fSymb);
    font-weight: 400;
    font-style: normal;
	content: '  🙣';
}

#prog p {
	margin: .2em auto 2em;
	line-height: 120%;
	font-style: italic;
}

#prog-div {
	background: 82% 85% /12% no-repeat url("Coquelicots.webp"),
                22% 40% /8% no-repeat url("CoquelicotR.webp");
}

/*
 * Informations
 */

iframe.map {
	width: 400px;
	height: 300px;
	border: .5px solid var(--cBg1);
	vertical-align: top;
}

.prat {
	margin-top: -4em;
	padding-top: 3.5em;
	display:grid;
	grid-template-columns: 1fr 2fr;
	column-gap: 1em;
}
.prat .addr {
	margin-top: 2em;
	font-size: 1.2em;
	font-style: italic;
}
.prat > div > img {
	/*width: 400px;*/
	max-width: 100%;
}
.prat .descr {
	text-align: left;
}
.prat .descr h3 {
	font-family: var(--fSub);
	font-weight: 600;
	font-variant-caps: small-caps;
}
.prat .descr p {
	margin: .2em 0 .8em;
}
.prat ul {
	margin: .2em 0 .8em;
	padding: 0 1em;
}
.prat ul li {
	/*
	list-style-type: '‒ ';
	list-style-type: '∼ ';
	list-style-type: '~ ';
	*/
	list-style-type: '⁓ ';
    margin-bottom: .4em;
    line-height: 1.15;
}
.prat ul li b {
    font-weight: bold;
}
.prat a {
	text-decoration: underline;
    text-decoration-thickness: 1px;
}
.prat a:hover,
.prat a:focus {
	text-decoration: underline;
    text-decoration-thickness: 1px;
	color: var(--cLnk);
}

#info-eglise-div {
	background: 100% 45% /12% no-repeat url("Coquelicots.webp"),
				0% 100% /26% no-repeat url("Violet.webp");
}
#info-chateau-div {
	background: 100% 0% /14% no-repeat url("Chene.webp"),
				0% 0% /18% no-repeat url("Fougere.webp");
}
#info-hotels-div {
	background: 95% 10% /15% no-repeat url("ChatBotte.webp"),
				12% 60% /20% no-repeat url("ChaperonRouge.webp"),
				100% 95% /10% no-repeat url("Coquelicot.webp"),
				0% 0% /15% no-repeat url("PetitesRoses.webp"),
				0% 100% /10% no-repeat url("Bleuets.webp");
}
#info-addr-div {
	background: 15% 100% /20% no-repeat url("Orange.webp"),
				18% 50% /10% no-repeat url("CoquelicotR.webp"),
	            0% 70% /15% no-repeat url("Hortensia.webp");
}
#info-photos-div {
	background: 5% 100% /16% no-repeat url('Bleuets2.webp');
	min-height: 4em;
}
#info-liste-div {
	background: 15% 0% /15% no-repeat url("Rose.webp");
	min-height: 4em;
}
#info-faq-div {
	background: 0% 100% /18% no-repeat url('Sakura.webp'),
				20% 5% /10% no-repeat url("Verdure1.webp");
	min-height: 10em;
}


/*
 * Vertical
 */


@media
screen and (max-width: 1000px) {
.prat .addr {
	font-size: 1em;
}
}

@media
screen and (max-width: 800px) {
#fp {
	height: auto;
	min-height: 100%;
	background: 50% 0% / contain no-repeat url('Fleurs1H.webp'), 50% 100% / contain no-repeat url('Fleurs1B.webp');
	font-size: 1.3em;
}
#prog,
#info {
	min-height: 100%;
	font-size: 1.3em;
	padding-top: .5em;
}
#prog-div {
	background: 95% 75% /16% no-repeat url("Coquelicots.webp"),
                10% 40% /12% no-repeat url("CoquelicotR.webp");
}
#info > div {
	max-width: 95vw;
	margin: auto;
}
#info .prat {
	grid-template-columns: 1fr;
}
#info .prat img {
	display: none;
}
#info iframe.map {
	max-width: 100%;
}
#info h2 {
	font-size: 1.35em;
}
#info .prat .addr {
	font-size: 1.2em;
	margin-top: 0;
}
#info-eglise-div {
	background: 95% 50% /15% no-repeat url("Coquelicots.webp"),
				0% 5% /20% no-repeat url("Violet.webp");
}
#info-chateau-div {
	background: 100% 40% /18% no-repeat url("Chene.webp"),
				0% 5% /22% no-repeat url("Fougere.webp"),
				95% 10% /12% no-repeat url("Bleuets.webp");
}
#info-hotels-div {
	background: 92% 25% /20% no-repeat url("ChatBotte.webp"),
				95% 85% /24% no-repeat url("ChaperonRouge.webp");
}
#info-addr-div {
	background: 100% 38% /15% no-repeat url("Orange.webp"),
                0% 0% /15% no-repeat url('PetitesRoses.webp'),
                100% 100% /12% no-repeat url("Chene.webp");

}
#info-photos-div {
	background: 100% 100% /12% no-repeat url('Bleuets2.webp'),
                5% 0% /15% no-repeat url('Hortensia.webp');
	min-height: 4em;
}
#info-liste-div {
	background: 5% 0% /13% no-repeat url("Rose.webp");
}
#info-faq-div {
	background: 99% 0% /9% no-repeat url("Verdure1.webp"),
	            2% 0% /12% no-repeat url("Orange.webp");
}
}
@media
screen and (max-width: 500px) {
#fp {
	height: auto;
	min-height: 100%;
	background: 50% 0% / contain no-repeat url('Fleurs1H.webp'), 50% 100% / contain no-repeat url('Fleurs1B.webp');
	font-size: 1em;
}
#prog,
#info {
	font-size: 1em;
}
}

/*
 * Horizontal
 */

@media
screen and (max-height: 800px) and (min-width: 800px) {
#fp {
	height: auto;
	min-height: 100%;
	background: 50% 0% / contain no-repeat url('Fleurs1H.webp'), 50% 100% / contain no-repeat url('Fleurs1B.webp');
	font-size: 1.3em;
}
#fp h1,
#fp h1 .caa {
    line-height: .9;
}
.links {
    margin-top: 1.3em;
}

}
@media
screen and (max-height: 500px) {
#fp {
	height: auto;
	min-height: 100vw;
	font-size: 1.3em;
}
#fp .links {
	margin: 3em auto 5em;
}
#prog,
#info {
	font-size: 1.3em;
}
}