@charset "utf-8";
/* CSS Document */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

 html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/** Fin Reset CSS Eric Meyer **/

/** Reset perso **/

body * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

body {
    font-size: 100%;  
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    width: auto; /* pour IE */
    height: auto; /* pour IE */
    -ms-interpolation-mode: bicubic; /* lissage pour IE */
}

/** Fin du Reset */

/** Début de la mise en page */

@font-face{
	font-family: 'Brittany Signature';
	src: url("fonts/BrittanySignature.ttf") format("truetype"),
		url("fonts/BrittanySignature.woff2") format("woff2");
}

@font-face{
	font-family: 'Cormorant Garamond';
	src: url("fonts/CormorantGaramond-VariableFont_wght.ttf") format("truetype"),
		url("fonts/CormorantGaramond-VariableFont_wght.woff2") format("woff2");
}

@font-face{
	font-family: 'Playfair Display';
	src: url("fonts/PlayfairDisplay-VariableFont_wght.ttf")format("truetype"),
		url("fonts/PlayfairDisplay-VariableFont_wght.woff2") format("woff2");
}

html,
body{
    width:100%;
    height:100%;
  
}

/* Chaque écran */

.screen{

    width:100%;
    min-height:100vh;

	}

/* Écran 1 */

.screen-1{
    background:#63633f;
	display: flex;
	flex-direction: column;
}

/* Écran 2 */

.screen-2{
    background:#EBE8D7;
}


nav ul{
	display: flex; /*Mettre le menu en ligne */
	justify-content: center; /* Contenu centré */
	font-family: 'Cormorant Garamond';
	color: #EBE8D7;
	font-size: 1.18rem;
	transform: scaleY(1.47); /* Trouver la bonne échelle verticale */
	transform-origin: center;
}

nav ul li{
	margin: 3% 2.5%;
}

.nav-list a:after {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    background: #EBE8D7;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.4s;
}

.nav-list a:hover:after,
.nav-list a.active:after {
    transform: scaleX(1);
}

.intro{
	flex:1;
    display:flex;
    flex-direction:column;
    justify-content:space-around;
    align-items:center;
}

.intro-top{
	display: flex;
	flex-direction: column;
	align-items: center;
}

h2{
	font-family: 'Brittany Signature';
	color: #EBE8D7;
	font-size: 2.2rem;
	margin: 3%;
}

h1{
	font-family: 'Cormorant Garamond';
	color: #EBE8D7;
	font-size: clamp(4rem, 9vw, 6rem);
	transform: scaleY(1.47); /* Trouver la bonne échelle verticale */
	text-transform: uppercase;
	font-feature-settings:
    "aalt" 0,
    "salt" 0,
    "calt" 0,
    "liga" 0,
    "clig" 0,
    "dlig" 0,
    "cv01" 0,
    "cv02" 0,
    "ss01" 0;
	transform-origin: center;
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	margin-top: 3%;
}

.esperluette{
	font-family: 'Playfair Display';
	padding: 0 0.20em;
	position: relative;
	top: -0.1em;
}

.ligne-2{
	display: inline-flex;
	align-items: center;
}

/*Gestion des pots de fleurs*/

.flowers{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:0;
}


.pot{
    position:absolute;
    opacity:0.5;
    height:clamp(450px,36vw,700px);
    width:auto;
	top:50%;
}


/* Pot gauche */
.pot-left{

    left:2vh;
    transform: translateY(-50%);

}


/* Pot droit */
.pot-right{

    right:2vh;
    

    transform:translateY(-50%) scaleX(-1);

}


/* Le contenu reste au-dessus */
header,
.intro-top,
#countdown{
    position:relative;
    z-index:2;
}

/* Conteneur du compte à rebours */
#countdown {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	font-family: 'Cormorant Garamond';
	margin-top: 11vh;
	margin-bottom: 11vh;
	
}


/* Chaque bloc : Mois, Jours, Heures... */
.tag {
	position: relative;
	width: 180px;
	padding: 30px;
	
	
	color: #EBE8D7;
	text-align: center;
	
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}


/* Séparateurs verticaux */
.tag:not(:last-child)::after {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	
	width: 2px;
	height: 140px;
	
	background: #EBE8D7;
}


/* Les chiffres */
.value {
	display: block;
	
	font-weight: 200;
	font-size: 80px;
	line-height: 1;
	font-feature-settings: "case";
}


/* Les labels */
.label {
	display: block;
	
	margin-top: 1%;
	
	font-size: 1.18rem;
	font-weight: 300;
	
	transform: scaleY(1.47);
}

@media screen and (max-width: 950px){
	
	.intro-top{
		margin-top: 2.5rem;
	}

	
	
    #countdown{
        display: grid;
        grid-template-columns: repeat(6, 1fr);
		width: min(100vw, 750px);
		margin: auto;
        justify-content: center;
        align-items: center;
		column-gap: 0;
        row-gap: 0;
        
    }
	
	.tag{
		width: auto;
		padding: 15%;
	}

    .tag:nth-child(1){
        grid-column: 3;
		grid-row: 1;
		justify-self:end;
		
		margin-right: 15%;
    }

    .tag:nth-child(2){
        grid-column: 4;
		grid-row: 1;
		justify-self:start;
		
		margin-left: 15%;
    }

    .tag:nth-child(3){
        grid-column: 2;
		grid-row:2;
		justify-self:center;
		
		
    }

    .tag:nth-child(4){
        grid-column: 3/ span 2;
		grid-row:2;
		justify-self:center;
		
    }

    .tag:nth-child(5){
        grid-column: 5;
		grid-row:2;
		justify-self:center;
		
    }
	
		/* Suppression des anciens séparateurs */
	.tag::after{

		display:none;

	}
	
	/* Nouveau séparateur mois / jours */
	.tag:nth-child(1)::after{

		display:block;

		content:"";

		position:absolute;

		right:-20%;

		top:50%;

		transform:translateY(-50%);

		width:2px;

		height:100px;

		background:#EBE8D7;

	}



	/* Nouveau séparateur heures / minutes */
	.tag:nth-child(4)::before{

		display:block;

		content:"";

		position:absolute;

		right:115%;

		top:50%;

		transform:translateY(-50%);

		width:2px;

		height:100px;

		background:#EBE8D7;

	}
	
	/* Nouveau séparateur minutes / secondes */
	.tag:nth-child(4)::after{

    display:block;

    content:"";

    position:absolute;

    right:-15%;

    top:50%;

    transform:translateY(-50%);

    width:2px;

    height:100px;

    background:#EBE8D7;
}
	
	.date-bottom{
		margin-bottom: 2.5rem;
	}
	
	
}

@media (min-width:951px) and (max-width:1350px){
	.pot{
		display: none;
	}
}

@media (min-width:751px) and (max-width:951px){

    .pot{
        height:clamp(300px,60vw,500px);
    }

    .pot-left{
        left:-160px;
        top:60%;
        transform:translateY(-50%);
    }

    .pot-right{
        right:-160px;
        top:60%;
        transform:translateY(-50%) scaleX(-1);
    }

}


@media (max-width: 750px) {

	    nav ul{

        transform:scaleY(1.3);
    }

    nav ul li{
        margin:20px 12px;
    }
  
  nav ul li a {
    font-size: 12px;
  }
	
	.intro-top {
		gap:25px;
	}
	
	h1 {
		flex-direction: column;
		gap:0;
		font-size: clamp(3rem, 16vh, 4rem);
		margin-top: 0;
	}
	
}

.avenir {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
	margin: 14rem;
}

/* Texte manuscrit */

.avenir h2 {
    margin: 0;

    font-family: "Brittany Signature";
    font-weight: normal;
    color: #F7F2E8;

    font-size: clamp(2rem, 5vw, 4rem);

    line-height: 1;
    white-space: nowrap;
}

/* Texte principal */

.avenir h1 {
    margin: 0;

    font-family: "Cormorant Garamond", serif;
    font-weight: 400;
    color: #F7F2E8;

    font-size: clamp(4rem, 12vw, 9rem);

    line-height: .9;
    transform: scaleY(1.47);

    white-space: nowrap;
}

@media (min-width:620px) and (max-width:750px){

    .pot{
        display:block;
        height:clamp(300px,60vw,600px);
        opacity:0.35;
    }

    .pot-left{
        left:-120px;
		top: 65%;
		 transform:translateY(-50%);
    }

    .pot-right{
        right:-120px;
		 top:65%;
        transform:translateY(-50%) scaleX(-1);
    }

}

@media (max-width:619px){
    .pot{
        display:none;
    }
	
	    .tag:nth-child(3){
        transform:translateX(-20px);
    }

    .tag:nth-child(5){
        transform:translateX(20px);
    }
	
}

h3{
	
	font-family: 'Cormorant Garamond';
	color: #63633f;
	font-size: clamp(2rem, 5vw, 3.5rem);
	transform: scaleY(1.47);
	text-transform: uppercase;
	text-align: center;
	padding: 5%;
	
}

.desktop-break {
    display: inline;
}

.row
	{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		
	}

.column
	{
		flex: 50%;
		max-width: 50%;
		padding-bottom: 1%;
	}	

.column:first-child
	{
		display: flex;
		justify-content: flex-end;
	}

.column img
	{
		vertical-align: middle;
		margin: 1rem;
		height: auto;
	}

img
	{
		width: 65%;
	}	

h5
	{
		font-family: 'Brittany Signature';
		color: #63633f;
		font-size: clamp(1.8rem, 3vw, 2.2rem);
		margin: 0 0 0.8rem 0;
		text-align: center;
	}	

section
	{
		margin: 3.5rem 0;
		padding-bottom: 1.5rem;
	}

p
	{  
		font-family: 'Cormorant Garamond';
		color: #63633f;
		transform: scaleY(1.47);
    	transform-origin: top center;
		font-size: clamp(0.9rem,1vw,1.2rem);
		text-align: center;	
	}

.lieu, .programme, .dress-code
	{
		margin-right: 10rem; /*à retirer dans le @media*/
	}

@media (max-width: 1570px)
	{
		img
			{
				width: 70%;
			}
	}


@media (min-width:1251px) and (max-width:1570px){

.row{
        display:grid;
        grid-template-columns:0.7fr 2fr 1.5fr 0.7fr;
        align-items:center;
    }


    /* Annulation des anciennes règles flex */
    .column{
        flex:none;
        max-width:none;
        width:auto;
        padding-bottom:1%;
    }


    /* Placement du manoir */
    .column:first-child{
        grid-column:2;
        display:flex;
        justify-content:center;
        align-items:center;
		transform:translateX(clamp(10px,3vw,80px));
    }


    /* Placement des informations */
    .column:last-child{
        grid-column:3;
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
    }


    /* Taille du manoir */
    .column img{
        width:95%;
        max-width: 500px;
		
    }


    /* Suppression du décalage créé pour l'ancien flex */
    .lieu,
    .programme,
    .dress-code{
        margin-right:0;
		transform: translateX(100px);
    }


    /* Espacement vertical des blocs infos */
    section{
        margin:2.5rem 0;
        padding-bottom:0.5rem;
    }
	
	h3{
		padding-bottom: 5rem;
	}

}

@media (min-width:1001px) and (max-width:1250px){

    .row{
        grid-template-columns:0.4fr 2.2fr 1.3fr 0.4fr;
    }


	.column img{
    width:85%;
    max-width:550px;
	transform:translateX(70px);
}

	.lieu, .programme, .dress-code{
		transform: translateX(100px);
	}
	
	section{
		padding-bottom: 0.4rem;
	}
	
	h3{
		padding-bottom: 5rem;
	}
	
	.desktop-break {
        display: none;
    }
	
}

@media (min-width: 629px) and (max-width: 1199px) {
    h3 {
        max-width: 850px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 1000px)
	{
		.column
			{
				flex: 100%;
				max-width: 100%;
			}
			
		img	
			{
				width: 42%;
			}
		
		.lieu, .programme, .dress-code 
			{
    			margin: 1rem;
			}	
		
		.column:first-child
			{
				display: flex;
				justify-content: center;
				transform: none;
			}
	
		.column:last-child 
			{
				display: flex;
				justify-content: center; /* centre les 3 sections */
				align-items: flex-start;
        		gap: 2rem;               /* espace entre elles */
   			 }
	
		section{
			padding-top: 2rem;
			
		}
		
		p
			{
				font-size: 0.8rem;
			}
		
		.desktop-break {
        display: none;
    }
		
.intro-top{
    position: relative;
    top: -5vh;
}
	}	

@media (max-width: 850px)
	{
		.column
			{
				
				flex: 100%;
				max-width: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}
			
		img	{
			
			width: 35%;
		}
		
		.column:last-child
		{
			align-items: center;
		}
		
		h3
			{
				padding: 10% 5%;
			}
		section
			{
				margin: 1rem 0;
				padding-bottom: 0.5rem;
			}
		.lieu, .programme, .dress-code
			{
				margin: 0.8rem;
			}
		
		.desktop-break {
        display: none;
    }
	}	

@media (min-width: 601px) and (max-width: 850px) {
	
	    .column:first-child img {
        width: 45%;
        max-width: 380px;
    }

    .column:last-child {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        justify-items: center;
        align-items: start;
    }

    .dress-code {
        grid-column: 1 / 3; /* occupe les deux colonnes */
        justify-self: center;
    }

    .lieu,
    .programme,
    .dress-code {
        margin: 0;
    }
	
	    .programme {
        transform: translateX(-30px);
    }

}


@media (max-width: 600px)
	{
		img
			{
				width: 45%;
			}
		
		.desktop-break {
        display: none;
    }
		
		    section {
        margin: 0.4rem 0;
        padding: 0;
    }

    .lieu,
    .programme,
    .dress-code {
        margin: 0.3rem 0;
    }
		
		.intro-top{
    position: relative;
    top: 0;
}
	}