@charset "UTF-8";
/* CSS Document */
@font-face {
    font-family: "Cardo";
    src: url("../fonts/Cardo-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Cardo";
    src: url("../fonts/Cardo-Italic.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "Cardo";
    src: url("../fonts/Cardo-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "DMSans";
    src: url("../fonts/DMSans-Variable.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
}
:root {
    --marine: #273354;
	--marine-less: #30457f;
	--bleu-gris: #8A96B6;
    --or: #B29261;
    --creme: #FEF7EE;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:"Cardo", Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
	font-size:16px;
	color: var(--marine);
}
h2 {font-size:clamp(45px, 5vw, 60px); line-height: 1.2em;}
h3 {font-size:clamp(35px, 4vw, 48px); line-height: 1.1em; color:var(--marine); margin-bottom: 50px;}
h4 {font-size:clamp(21px, 2.5vw, 28px); line-height: 1.1em; color:var(--or); margin-bottom: 25px;}
h5 {font-size:clamp(18px, 2.2vw, 24px); line-height: 1.1em; color:var(--or); margin-bottom: 15px;}
p, li, address, form, .localisation {font-family:"DMSans", Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";}
.nomargin {margin:0 !important;}
.cbg {color:var(--bleu-gris);}
.col2 {
	display: flex;
	width: 100%;
    align-items: center;
	gap: 40px;
}
.col2 div {
	width: 50%;
}
.container{
    max-width:1200px;
    margin:auto;
    padding:80px 20px;
}
.txtRight {text-align: right;}
.txtCenter {text-align: center;}
.eyebrow {color:var(--or);}
.btn, button {
    display:inline-block;
    padding:15px 35px;
    background:var(--or);
    color:white;
    text-decoration:none;
    font-weight:700;
    transition:.3s;
	align-self: center;
	width: fit-content;
	border:none;
	cursor: pointer;
}
.btn:hover, button:hover {
    background:var(--bleu-gris);
    transform:translateY(-2px);
}
section ul {margin-left: 30px;}


/* HEADER **************************************************************/

header{
    background:var(--marine);
	position: sticky;
	top:0;
	z-index:2;
}

header li {font-family:"Cardo", Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";}
header a {color:#fff;}

header .container{
    max-width:1200px;
    margin:auto;
    padding:0 20px;
    height:80px;

    display:flex;
    align-items:center;
    justify-content:space-between;
}

.logo h1{
	width:188px;
    height:71px;
    display:block;
	text-indent:-9999px;
	overflow:hidden;
	background: url('../img/logo-manoir-neo-normand-bl.svg') no-repeat;
	background-size: contain;
}

.menu{
    display:flex;
    align-items:center;
    gap:35px;
    list-style:none;
}

.menu a,
.submenu-title{
    text-decoration:none;
    color:#fff;
    font-weight:600;
    cursor:pointer;
    transition:.3s;
}

.menu a:hover,
.submenu-title:hover{
    color:var(--bleu-gris);
}

.menu a.actif,
.submenu-title.actif{
    color:var(--or);
}

/*************
Sous-menu
**************/

.has-submenu{
    position:relative;
}

.submenu{

    position:absolute;
    top:100%;
    left:0;

    min-width:220px;

    background:var(--marine-less);
    list-style:none;

    box-shadow:0 5px 15px rgba(0,0,0,.15);

    display:none;
}

.submenu li a{
    display:block;
    padding:15px 20px;
	border-bottom:solid 1px var(--bleu-gris);
}
.submenu li:last-child a{
	border-bottom:none;
}

/*.submenu li a:hover{
    background:#f5f5f5;
}*/

.has-submenu:hover > .submenu{
    display:block;
}

/*****************
Burger
******************/

.burger{

    display:none;

    background:none;
    border:none;
    cursor:pointer;
}

.burger span{

    display:block;
    width:28px;
    height:3px;

    margin:6px 0;

    background:#fff;
}

/* FOOTER **************************************************************/
footer{
    background:var(--marine);
    color:#fff;
}

footer h3 {font-family:"Cardo", Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";}
.footer-content{

    max-width:1200px;
    margin:auto;

    padding:50px 20px;

    display:flex;
    gap:50px;
}

address {font-style: normal;}

/*****************
Google Maps
******************/

.footer-map{

    flex:0 0 40%;
}

.footer-map iframe{

    width:100%;
    height:300px;

    border:0;
    border-radius:8px;
}

/*****************
Colonnes
******************/

.footer-links{

    flex:1;

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:40px;
}

.footer-column h3{

    margin-bottom:20px;
    font-size:28px;
	color:var(--or);
}

.footer-column ul{

    list-style:none;
}

.footer-column li{

    margin-bottom:12px;
}

.footer-column a{

    color:#fff;
    text-decoration:none;

    transition:.3s;
}

.footer-column a:hover{

    color:var(--bleu-gris);
    padding-left:5px;
}
.facebook, .instagram {display:inline-block; margin:0 7px; width:26px; height:20px; background-position: center center; background-repeat:no-repeat; background-size: contain; text-indent:9999px; overflow: hidden;}
.facebook {background-image: url('../img/facebook.svg');}
.facebook:hover {background-image: url('../img/facebook-ho.svg');}
.instagram {background-image: url('../img/instagram.svg');}
.instagram:hover {background-image: url('../img/instagram-ho.svg');}

/*****************
Bas du footer
******************/

.footer-bottom{
	max-width:1200px;
    margin:auto;
	display: flex;
	gap: 20px;
	flex-flow: row;
	justify-content: space-between;
	align-items: center;
	
    border-top:1px solid rgba(255,255,255,.15);

    text-align:left;

    padding:20px;

    font-size:.9rem;
    color:var(--bleu-gris);
}
.footer-bottom a, #tarteaucitronManager{color:var(--bleu-gris); text-decoration:none; cursor:pointer;}
.footer-bottom a:hover, #tarteaucitronManager:hover{color:#fff; text-decoration:underline;} 

/* MAIN *********************************************************************/
#menusecondaire {position:absolute; bottom:20px;}
#menusecondaire a {display:inline-block; padding:7px 17px; margin:10px; border-radius:9px; border:solid 1px #fff; color: #fff; text-decoration: none;font-family:"DMSans", Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";}
#menusecondaire a:hover {background: var(--bleu-gris);}
.hero{

    min-height:75vh;

    display:flex;
    align-items:center;
    justify-content:center;

    text-align:center;

    background:var(--marine);
	color:white;

    padding:100px 30px;
}

.hero-content{
    color:white;
	animation:fadeIn 1s ease;
}
@keyframes fadeIn{

    from{
        opacity:0;
        transform:translateY(30px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

.hero h2{
    margin-bottom:35px;
	text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
}

/* MAIN */
.bgmarine {background:var(--marine);}
.bgmarine h3 {color:var(--or);}
.bgmarine p {color:white;}

.bgcreme {background:var(--creme);}

/* HOME */
#homepage .hero{background:url("../img/home/manoir.jpg") center center / cover no-repeat;}
.services {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.service {
    flex: 1;
    text-align: center;
}

.service img {
    margin-bottom: 10px;
}

.service p {
    margin: 0;
    font-size: 16px;
	font-family:"Cardo", Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
	color:var(--or);
}

.service p.chiffre {
    margin-bottom: 20px;
	font-size:76px;
	font-weight: bold;
}

.cards {
    display: flex;
	flex-wrap: wrap;
    gap: 50px;
}

.card {
    /*flex: 1;*/
	flex: 0 0 calc((100% - 2 * 50px) / 3);
    display: flex;
    flex-direction: column;
}

.card img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 25px;
}
.card h4 {text-align:center;}
.card p {
	text-align: center;
	padding:0 30px 30px;
    flex-grow: 1; /* pousse le bouton vers le bas */
}
.card .localisation {display:inline-block; text-align: center;align-self: center;
  width: fit-content; color:var(--or); padding:5px 10px 5px 30px; border-radius:12px; border:solid 1px var(--or); background:url("../img/pictos/localisation.svg") no-repeat 5px center; background-size:20px; }

.listeLogos {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center; /* optionnel */
}

.listeLogos a {
  display: flex;           /* permet de centrer le logo dans le lien */
  align-items: center;
  justify-content: center;
  width: 120px;            /* largeur de la "case" */
  height: 80px;            /* hauteur de la "case" */
  text-decoration: none;
}

.listeLogos a img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.imgConfiance img {margin:0 20px 20px; vertical-align:middle;}



form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-row--two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.form-field {
    width: 100%;
}

.form-field input,
.form-field textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;

    padding: 16px 18px;

    border: 1px solid #ccc;
    border-radius: 5px;

    background: rgba(0, 0, 0, 0.05);
    color: #000;

    font-family: inherit;
    font-size: 16px;
}
.form-field input[type="checkbox"] {display: inline-block;
  width: auto;
  margin-right: 10px;}
.form-field textarea {
    min-height: 160px;
    resize: vertical;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
    color: #777;
    opacity: 1;
}
#contact-url {
  visibility: hidden;
}
form button {font-family:"Cardo", Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif"; font-size:16px;}
.error {color:#f00;}
.valid {color:#278518;}



/* Slider presse */
		.presse-slider{
			max-width:1200px;
			margin:auto;
			padding-bottom:60px;
		}

		.card-presse{

			display:grid;
			grid-template-columns:40% 60%;

			background:#fff;
			overflow:hidden;

			/*border-radius:12px;
			box-shadow:0 10px 25px rgba(0,0,0,.08);*/

			height:450px;
		}
		
		.card-image {background-size: cover !important;}
		/*.card-image img{
			width:100%;
			height:100%;
			object-fit:cover;
			display:block;
		}*/

		.card-content{

			display:flex;
			flex-direction:column;
			justify-content:center;

			padding:35px;
		}

		.card-content p{
			margin-bottom:20px;
			font-family:"DMSans", Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
			color: var(--marine);
		}

		.card-content a{
			font-family:"DMSans", Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
			color:var(--bleu-gris);
			text-decoration:none;
		}

		.card-content a:hover{
			color:var(--marine-less);
			text-decoration:underline;
		}

		/* Flèches */

		.swiper-button-next,
		.swiper-button-prev{
			color:#000;
			
			display :none;
		}

		/* Points */

		.swiper-pagination-bullet{
			width:10px;
			height:10px;
			background:var(--bleu-gris);
		}

		.swiper-pagination-bullet-active{
			background:var(--or);
		}


/* SALLES ************************************************/

.bloc {
	display: grid;
    grid-template-columns: 40% 55%;
    grid-template-areas: "galerie contenu";
    gap: 5%;
	margin: 80px 0;
    align-items: stretch;
	background:#fff;
	padding: 40px;
}

/* Blocs pairs : inversion */
.bloc__galerie {
    grid-area: galerie;
}

.bloc__contenu {
    grid-area: contenu;
}

.bloc:nth-child(even) {
    grid-template-columns: 55% 40%;
    grid-template-areas: "contenu galerie";
}

/* Galerie */
.bloc__galerie {
    overflow: hidden;
}

/* Contenu centré verticalement */
.bloc__contenu {
    display: flex;
    align-items: center;
}

.bloc__contenu h5 {
    margin-top: 0;
    margin-bottom: 20px;
}

.bloc__contenu p {
    margin-bottom: 30px;
    line-height: 1.6;
}

/* Pictos */
.pictos {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
	color:var(--or);
	font-family:"DMSans", Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-size:12px;
}

.picto {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
}

.picto img {
    /*width: 42px;*/
    height: 60px;
}

/* Carrousel */
.carousel {
    position: relative;
    /*aspect-ratio: 4 / 3;*/
	aspect-ratio: 2 / 1;
    overflow: hidden;
}

.carousel img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;

    opacity: 0;
    transition: opacity .8s ease;
}

.carousel img.active {
    opacity: 1;
}

.carousel button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;

    /*width: 40px;
    height: 40px;*/

    border: none;
    border-radius: 50%;

    background: none;
    color: white;

    font-size: 50px;
    line-height: 0;

    cursor: pointer;
		
	padding:0;
}

.carousel-prev {
    left: 15px;
}

.carousel-next {
    right: 15px;
}

.carousel button:hover {
    background: rgba(0, 0, 0, 0.8);
}


/* FAQ */
details {
    overflow: hidden;
    transition: all .3s ease;
	border-bottom: solid 1px var(--bleu-gris);
}

summary {
    padding: 25px 45px 25px 0;
    cursor: pointer;
    font-weight: bold;
    list-style: none;
    position: relative;
	font-size: 25px;
}

/* Masque la flèche sur Chrome, Edge, Safari */
summary::-webkit-details-marker {
    display: none;
}

/* Masque la flèche sur les navigateurs récents */
summary::marker {
    content: "";
}

/* Signe + */
summary::after {
    content: "+";
    position: absolute;
    right: 15px;
    transform: translateY(-50%);
    font-size: 1.5rem;
    font-weight: bold;
    transition: transform 0.2s ease;
	top:50%;
}

details[open] summary {color:var(--or);}

details[open] summary::after {
    content: "−";
}

details p {
    padding: 0 45px 25px 0;
    color: var(--bleu-gris);
}


/******************************************************************************
Responsive
******************/

@media (max-width:900px){
	.col2 {flex-direction: column;}
	.col2 div {width: 100%;}
	
	/* Header */
    .burger{
        display:block;
    }

    .nav{

        display:none;

        position:absolute;
        top:80px;
        left:0;

        width:100%;

        background:var(--marine);
        box-shadow:0 10px 20px rgba(0,0,0,.1);
    }

    .nav.active{
        display:block;
    }

    .menu{
        flex-direction:column;
        align-items:flex-start;
        gap:0;
    }

    .menu li{
        width:100%;
		border-top:solid 1px var(--bleu-gris);
    }

    .menu a,
    .submenu-title{

        display:block;
        padding:18px 25px;
		text-align:center;
    }

    .submenu{

        position:static;
        display:none;
        box-shadow:none;
        background:var(--marine-less);
    }

    .submenu li a{
        padding-left:45px;
    }

    .has-submenu.open .submenu{
        display:block;
    }
	
	/* Footer */
	.footer-content{
        flex-direction:column;
    }

    .footer-map{
        width:100%;
		flex:none;
    }
	
	.footer-column{
		width:100%;
        display:grid;
        grid-template-columns:repeat(2, 1fr);
        gap:30px;
    }
	
	.footer-column h3{ text-align:right;}
	.footer-column ul, .footer-column address{margin-top: 12px;}

    .footer-links{
        grid-template-columns:1fr;
    }
	
	.footer-bottom{display:block;}
	.footer-bottom p{text-align:center !important;}
	
	/* Home */
	.services {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 20px;
	}

	.service {
		flex: 1 1 150px;
		max-width: 180px;
		text-align: center;
	}
	
	.cards {flex-wrap: wrap; gap:100px;}
	.card {flex: 1 1 100%;}
	
	/* Salles */
	.bloc,
    .bloc:nth-child(even) {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 20px;
    }

    /* La galerie est toujours en premier */
    .bloc__galerie {
        grid-column: 1;
        grid-row: 1;
		margin-bottom:30px;
    }

    /* Le contenu est toujours en second */
    .bloc__contenu {
        grid-column: 1;
        grid-row: 2;
    }
}

@media (max-width:768px){
	/* Home */
	.card-presse{
		grid-template-columns:1fr;
		height:auto;
	}

	.card-image{
		height:220px;
	}

}