/*
	Theme Name: Estuaires_Loire_Vilaine
	Theme URI: https://www.judithstreff.fr
	Description: The_Light WordPress Theme
	Version: 1.0
	Author: Judith Streff
	Author URI: https://www.judithstreff.fr
	Tags: Blank, HTML5, CSS3, Materialize

*/

/*------------------------------------*\
    MAIN
\*------------------------------------*/

/* global box-sizing */
*,
*:after,
*:before {
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	-webkit-font-smoothing:antialiased;
	font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}
/* html element 62.5% font-size for REM use */
html {
	font-size:62.5%;
}
body {
	font-size: 1.5rem;
	font-family: "Libre Baskerville", serif;
	font-optical-sizing: auto;
	font-weight: 300;
	font-style: normal;
	color:var(--bleu)
}
/* clear */
.clear:before,
.clear:after {
    content:' ';
    display:table;
}

.clear:after {
    clear:both;
}
.clear {
    *zoom:1;
}
img {
	max-width:100%;
	vertical-align:bottom;
}
a {
	color:var(--vert);
	text-decoration:none;
}
a:hover {
	color:var(--bleu);
}
a:focus {
	outline:0;
}
a:hover,
a:active {
	outline:0;
}
input:focus {
	outline:0;
	border:1px solid var(--bleu);
}
.flex{
	display: flex;
}
.wrap{
	flex-wrap: wrap;
}
.justybet{
	justify-content: space-between;
}
:root {
  --bleu: #283036;
  --rouge: #991915;
  --marron: #8d534d;
  --jaune: #e7d8c7;
  --vert: #37a2a3; /* Couleur bleue pour le thème */
}
.bleu{
	color: var(--bleu);
}
.rouge{
	color: var(--rouge);
}
.jaune{
	color: var(--jaune);
}
.marron{
	color: var(--marron);
}
.vert{
	color: var(--vert);
}
.pad30{
	padding: 30px;
}
.pad12{
	padding: 12px;
}
.pad6{
	padding: 6px;
}
.t3{
	width: 30%;
}
.t2{
	width: 50%;
}
.border-rouge{
	border: 6px solid var(--rouge);
}
.border-bleu{
	border: 6px solid var(--bleu);
}
.border-jaune{
	border: 6px solid var(--jaune);
}
.border-marron{
	border: 6px solid var(--marron);
}
.border-vert{
	border: 6px solid var(--vert);
}
.full{
	width: 100%;
}
.acontenven{
	align-content: space-evenly;
}
.acontbet{
	align-content: space-between;
}
main{
	/* border-top: 1px solid var(--bleu); */
}
/*------------------------------------*\
    STRUCTURE
\*------------------------------------*/

/* wrapper */
.wrapper {
	/* max-width: 1280px;
	width: 95%; */
	height: 100vh;
	margin: 0 auto;
	position:relative;
    display: grid;
    /* grid-template-columns: repeat(3, 1fr);*/
    /* gap: 15px; */
	grid-template-areas:
    "head head"
    "main  main"
    "foot  foot";
  	grid-template-rows: auto 1fr 80px;
  	grid-template-columns: 1fr;
	
}
/* header */
.header {
	z-index: 2;
}
/* logo */
.logo {
	/* margin: 36px auto; */
}
.logo-img {
max-width: 200px;
}
/* nav */

/* sidebar */
.sidebar {

}
/* footer */



/*------------------------------------*\
    PAGES
\*------------------------------------*/



/*------------------------------------*\
    IMAGES
\*------------------------------------*/



/*------------------------------------*\
	TYPOGRAPHY
\*------------------------------------*/

@font-face {
	font-family:'Font-Name';
	src:url('fonts/font-name.eot');
	src:url('fonts/font-name.eot?#iefix') format('embedded-opentype'),
		url('fonts/font-name.woff') format('woff'),
		url('fonts/font-name.ttf') format('truetype'),
		url('fonts/font-name.svg#font-name') format('svg');
    font-weight:normal;
    font-style:normal;
}


/*------------------------------------*\
    RESPONSIVE
\*------------------------------------*/

@media only screen and (min-width:320px) {
	body.page-template-default section{
		margin: 190px 36px 0 36px;
		padding: 36px;
	}
	body.page-template-default article{
		margin: 0 auto;
	}
	body.page-template-default h1{
		width: 100%;
	}
	body.contact .inputs input:focus{
		border: none;
		color: var(--bleu);
		border-bottom: 1px solid var(--marron);
		box-shadow: 0 1px 0 0 var(--marron);
		border: none;
}
	
	main{
		grid-column: 1 / 4;
		grid-row: 2;
		display: flex;
		flex-wrap: wrap;
	}
	#icons{
		cursor: pointer;
		color: var(--bleu);
		font-size: calc(3rem + 1.5vw);
	}
	#icons::before {
		content: "\2630";
	}
	.active #icons:before {
		content: "\2715";
	}
	.menu{
		display: flex;
		justify-content: space-around;
		align-items: flex-end;
	}
	
	.menu ul li.menu-item-has-children{
		position: relative;
	}   
	.menu ul li.menu-item-has-children:hover ul.sub-menu{
		display: block;
	}   
	.menu ul li{
	/*     border: solid 1px var(--bleu); */
	}
	.menu ul li a{
		/* text-align: right; */
		font-weight: 600;
		color: var(--bleu);
		/* text-transform: uppercase; */
		font-size: calc(0.5rem + 1.5vw);
	/* 	border: solid 1px var(--bleu); */
	}
	.menu ul.sub-menu, .side-nav ul.sub-menu{
		display: none;
		position: absolute;
		z-index: 1;
		max-width: 160%;
		width: 160%;
		top: 60px;
		
	}
	.menu ul.sub-menu li, .side-nav ul.sub-menu li{
		width: 100%;
	}
	.menu ul.sub-menu li a, .side-nav ul.sub-menu li a{
		display: block;
		float: left;
		font-weight: 300;
		font-size: 14px;
		text-align: left;
		line-height: 25px;
		width: 100%;
		color: var(--marron);
		background-color: white;
	}
	
	.menu ul li a:hover, .side-nav ul li a:hover{
		color: var(--vert);
		border-radius: 6px;
		-webkit-border-radius: 6px;
		-moz-border-radius: 6px;
		-ms-border-radius: 6px;
		-o-border-radius: 6px;
}
	.menu ul li.current-menu-item a{
		/* color: var(--rouge);
		border-bottom: 1px solid var(--rouge); */
	}
	nav{
		height: fit-content;
		justify-content: space-between;
		align-items: center;
		box-shadow: none;
	}
	nav a{
		color: var(--bleu);
	}
	nav a:hover{
		color: var(--marron);
	}
	nav ul{
		display: flex;
		width: 100%;
		/* position: fixed;
		left: -100%;
		top: 5%; */
		flex-direction: column;
		color: var(--bleu);
		text-align: center;
		transition: 0.25s;
		-webkit-transition: 0.25s;
		-moz-transition: 0.25s;
		-ms-transition: 0.25s;
		-o-transition: 0.25s;
	}
	nav.active ul{
		left: 0;
	}
	/* .menu ul{
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin: 0 auto;
	} */
	nav li{
		padding: 3px 0;
	}
	#sidenav-overlay{
		z-index: 0;
	}
	section{
		display: flex;
		flex-wrap: wrap;
		width: 100%;
	}

	.footer{
		grid-column: 1 / 4;
		grid-row: 3;
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
		height: fit-content;
		font-size: 12px;
		justify-content: space-around;
		align-items: center;
		/* text-transform: uppercase; */
		text-align: center;
		background-color: var(--jaune);
		color: var(--bleu);
	}
	.rrss{
		flex-wrap: wrap;
		justify-content: center;
	}
	.rrss h5{
		width: 100%;
	}
	.rrss a{
		font-size: 1.8rem;
		color:var(--bleu);
	}
	.col3{
		margin: 18px 0;
		
	}
	.bloc {
	  width: 48%;
	  margin: 1%;
	}
	  
	.bloc::after {
	  content: '';
	  display: block;
	  padding-bottom: 100%;
	}
	.bloc .content {
	  position: absolute;
	  width: 35%;
	  height: 35%;
	  padding: 30px;
	}
	a.button, button, input[type="submit"]{
		padding: 6px 12px;
		border: 1px solid var(--jaune);
		color: var(--bleu);
		border-radius: 5px;
		background-color: #FFF;
	}
	.newssuscr a.button, .newssuscr button, .newssuscr input[type="submit"]{
		padding: 6px 12px;
		border: 1px solid var(--jaune);
		background-color: var(--jaune);
		color: var(--bleu);
		border-radius: 5px;
	}
	a.button, button a{
		color: var(--bleu);
		font-weight: 800;
	}
	input[type="search"]{
		/*border-bottom: 1px solid var(--rouge);
		*/background-color: var(--vert);
		color: var(--jaune);
		border-radius: 6px;
		-webkit-border-radius: 6px;
		-moz-border-radius: 6px;
		-ms-border-radius: 6px;
		-o-border-radius: 6px;
		padding: 6px;
		font-size: 1.3rem;
		font-weight: 900;
		margin: 18px 0;
}
form.search{
	margin-bottom: 18px;
}
	section.carres{
		max-width: 890px;
		margin: 0 auto;
	}
	.article{
		margin: 18px;
		padding: 18px;
		width: 30%;
	}
	.article ul.wp-block-list{
		width: 80%;
		max-width: 80%;
	}
	.article li{
		list-style: circle;
	}
	.bull{
		padding: 30px;
	}
	.rounded{
		border-radius: 6px;
		-webkit-border-radius: 6px;
		-moz-border-radius: 6px;
		-ms-border-radius: 6px;
		-o-border-radius: 6px;
	}
	.grillehome{
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
		margin: 2rem;
		grid-gap: 0;
	}
	.case{
		width: 33%;
		min-height: 200px;
		border: solid var(--bleu) 2px;
		
	}
	h2.titre_home{
		font-size: 25px;   
		
	}
	.presentation{
		height: 90vh;
		/* position: relative; */
	}
	.presentation:before {
		content: '';
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 90%;
		opacity: 0.2;
		background-image: url('https://estuairesloirevilaine.fr/wp-content/uploads/2025/12/site-etat-initial-31.jpg');
		background-repeat: no-repeat;
		background-position: top center;
		background-size: cover;
		background-color: #fff;
	  }
	  
	.presentation .text{
		padding: 0 18px;
		/* position: absolute; */
		font-size: calc(1.6rem + 1.2vw);
		font-weight: 600;
		color: var(--bleu);
		/* bottom: 0;
		left: 0; */
	}
	.text > div.wp-block-group{
		padding-top: 0;
		padding-bottom: 0;
	}
	h2.up{
		font-size: calc(1.9rem + 1.2vw);
	}
	.demi{
		width: 48%;
	}
	section.actu{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-evenly;
		/* background-color: #eee; */
		padding: 18px;
		margin: 36px 0;
	}
	section.actu h2{
		width: 100%;
	}
	section.actu .video{
		width: 100%;
	}
	section.actu figure{
		margin: 0;
	}
	.newscover{
		margin: 0 auto;
  		width: 50%;
	}
	.titre-text{
		justify-content: center;
	}
	section.equipe .titre-text h3{
		font-size: 1.8rem;
	}
	section.projets{
		padding: 18px;
		background-color: var(--jaune);
	}
	section.projets .child-page{
		width: 80%;
		border-radius: 18px;
		-webkit-border-radius: 18px;
		-moz-border-radius: 18px;
		-ms-border-radius: 18px;
		-o-border-radius: 18px;
		color: #fff;
		padding: 2%;
	}
	section.clefs .grille{
		flex-direction: column;
	}
	section.clefs .article-cle{
		width: 80%;
		padding: 18px;
		margin: 0 auto;
	}
	section.clefs .article-cle a{
		font-size: calc(0.8rem + 1vw);
	}

	section.clefs .article-cle:nth-child(even) {
		border-top: 2px solid var(--bleu);
		border-bottom: 2px solid var(--bleu);
	}
	section.projets > div.flex{
		justify-content: space-around;
	}
	.child-page .icon{
		margin: 0 auto;
		text-align: center;
	}
	section.projets h2{
		width: 100%;
	}
	h2.projet-title{
		font-size: 18px;
		font-weight: 600;
		text-align: left;
		padding: 0 18px;
	}
	.quarts{
		position: relative;
		width: 50%;
		height: 250px;
		background-size: cover;
		background-position: center center;
		
	}
	.quarts .text{
		background: rgba(238, 238, 238, .7);
		line-height: 15px;
		width: 100%;
    	min-height: 50px;
		height: fit-content;
		align-items: stretch;
	}
	.quarts .text a{
		font-size: 14px;
		color: var(--bleu);
		width: 100%;
	}
	section.clefs{
		justify-content: space-between;
		
	}
	section.clefs .demi:first-child{
		background-color: #eee;
		padding: 36px;
	}
	h3.cle-titre a{
		font-size: 2.3rem;
		font-weight: 500;
		color: var(--marron);
		text-align: left;
	}
	.grille{
		margin: 0 auto;
		justify-content: space-between;
	}
	.inscription{
		text-align: center;
		margin: 0 auto;
	}
	.actu .video{
		width: 80%;
	}
	.card{
  		/* border: solid 1px var(--bleu); */
  		border-radius:18px;
  		box-shadow: 9px 8px 8px -7px rgba(40,48,54,0.72);
  		-webkit-box-shadow: 9px 8px 8px -7px rgba(40,48,54,0.72);
  		-moz-box-shadow: 9px 8px 8px -7px rgba(40,48,54,0.72);
  		-webkit-border-radius:18px;
  		-moz-border-radius:18px;
  		-ms-border-radius:18px;
  		-o-border-radius:18px;
}
	.centre{
		
			display: flex;
			flex-wrap: wrap;
			width: 100%;
			align-items: center;
			justify-content: center;
			max-width: 850px;
			margin: 36px auto;
			flex-direction: column;
  }
  .dtiers{
	width: 85%;
  }
  .tiers{
	width: 85%;
	align-items: center;
	text-align: center;
  }
  .cimg{
	height: 45vh;
    position: relative;
  }
  .text-card{
	position: absolute;
	bottom: 0;
	height: 25vh;
	background-color: #fff;
	padding: 0px;
    width: 100%;
    left: 0;
    border-radius: 0 0 18px 18px;
  }
  .text-presentation{
	color: var(--bleu);
	font-size: 15px;
	padding: 36px;
  }
  .photo{
	border-radius: 50%;
	overflow: hidden;
	width: 250px;
	margin: 0 auto;
	text-align: center;
	height: 250px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
}
section.equipe, section.nosnews{
	margin: 190px auto;
}
section.equipe .titre-text{
	text-align: center;
}
label {
	font-size: calc(0.5rem + 1.5vw);
	color: var(--marron);
  }

}

	

@media only screen and (min-width:480px) {
	.text-card{
		height: 20vh;
	}
	
}
@media only screen and (min-width:768px) {
	.article{
		width: 30%;
	}
	.case{
		width: 24%;
		border: solid var(--bleu) 2px;
	}
	section.projets .child-page{
		width: 28%;	
	}
	.child-page h3{
		font-size: 2rem;
		text-align: center;
	}
	.quarts{
	}
	nav {
		display: flex;
		justify-content: space-between;
		color: var(--bleu);
		height: auto;
		box-shadow: none;
		position: absolute;
		top: 0;
		left: 0;
	}
	nav ul{
		position: relative;
		left: 0;
		top: 0;
		flex-direction: row;
	}
	.menu ul{
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin: 0 auto;
	} 
	.menu ul li a{
		font-size: calc(0.2rem + 1.2vw);
	}
	
	#icons{
		display: none;
	}
	.presentation .text{
		position: absolute;
		bottom: 0;
		left: 0;
		padding: 0 5%;
	}
	section.clefs .grille{
		flex-direction: row;
	}
	section.clefs .article-cle{
		width: 32%;
		padding: 18px;
	}
	section.clefs .article-cle a{
		font-size: calc(0.8rem + 1vw);
	}

	section.clefs .article-cle:nth-child(even) {
		border-right: 2px solid var(--bleu);
		border-left: 2px solid var(--bleu);
		border-top: none;
		border-bottom: none;
	}
	section.projets > div.flex{
		justify-content: space-around;
	}
	h2.projet-title{
		font-size: calc(0.4rem + 1.4vw);
	}
	.text-presentation{
		font-size: calc(0.1rem + 1.2vw);
		padding: 4%;
	}
	.dtiers{
		width: 65%;
	}
	.tiers{
	width: 32%;
	}
	.centre{
		flex-direction: row;
		align-items: stretch;
		justify-content: space-around;
	}
	section.actu .video{
		width: 80%;
	}
	section.actu figure{
		margin: 1em 40px;
	}
	.footer{
		flex-direction: row;
	}
	
	
}
@media only screen and (min-width:935px) {
	nav {
		display: flex;
		justify-content: space-between;
		color: var(--bleu);
		height: auto;
		box-shadow: none;
		position: absolute;
		top: 0;
		left: 0;
	}
	nav ul{
		position: relative;
		left: 0;
		top: 0;
		flex-direction: row;
	}
	.menu ul{
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin: 0 auto;
	} 
	.menu ul li a{
		font-size: calc(0.2rem + 1.2vw);
	}
	
}
@media only screen and (min-width:1024px) {
	.presentation:before {
		height: 95%;
	  }
	  .text-presentation {
        font-size: calc(0.1rem + 0.8vw);
        padding: 2%;
    }
}
@media only screen and (min-width:1140px) {

}
@media only screen and (min-width:1280px) {

}
@media only screen and (-webkit-min-device-pixel-ratio:1.5),
	   only screen and (min-resolution:144dpi) {

}

/*------------------------------------*\
    MISC
\*------------------------------------*/

/* ::selection {
	background:#04A4CC;
	color:#FFF;
	text-shadow:none;
}
::-webkit-selection {
	background:#04A4CC;
	color:#FFF;
	text-shadow:none;
}
::-moz-selection {
	background:#04A4CC;
	color:#FFF;
	text-shadow:none;
} */

/*------------------------------------*\
    WORDPRESS CORE
\*------------------------------------*/

.alignnone {
	margin:5px 20px 20px 0;
}
.aligncenter,
div.aligncenter {
	display:block;
	margin:5px auto 5px auto;
}
.alignright {
	float:right;
	margin:5px 0 20px 20px;
}
.alignleft {
	float:left;
	margin:5px 20px 20px 0;
}
a img.alignright {
	float:right;
	margin:5px 0 20px 20px;
}
a img.alignnone {
	margin:5px 20px 20px 0;
}
a img.alignleft {
	float:left;
	margin:5px 20px 20px 0;
}
a img.aligncenter {
	display:block;
	margin-left:auto;
	margin-right:auto;
}
.wp-caption {
	background:#FFF;
	border:1px solid #F0F0F0;
	max-width:96%;
	padding:5px 3px 10px;
	text-align:center;
}
.wp-caption.alignnone {
	margin:5px 20px 20px 0;
}
.wp-caption.alignleft {
	margin:5px 20px 20px 0;
}
.wp-caption.alignright {
	margin:5px 0 20px 20px;
}
.wp-caption img {
	border:0 none;
	height:auto;
	margin:0;
	max-width:98.5%;
	padding:0;
	width:auto;
}
.wp-caption .wp-caption-text,
.gallery-caption {
	font-size:11px;
	line-height:17px;
	margin:0;
	padding:0 4px 5px;
}
.sticky {

}
.bypostauthor {

}

/*------------------------------------*\
    PRINT
\*------------------------------------*/

@media print {
	* {
		background:transparent !important;
		color:#000 !important;
		box-shadow:none !important;
		text-shadow:none !important;
	}
	a,
	a:visited {
		text-decoration:underline;
	}
	a[href]:after {
		content:" (" attr(href) ")";
	}
	abbr[title]:after {
		content:" (" attr(title) ")";
	}
	.ir a:after,
	a[href^="javascript:"]:after,
	a[href^="#"]:after {
		content:"";
	}
	pre,blockquote {
		border:1px solid #999;
		page-break-inside:avoid;
	}
	thead {
		display:table-header-group;
	}
	tr,img {
		page-break-inside:avoid;
	}
	img {
		max-width:100% !important;
	}
	@page {
		margin:0.5cm;
	}
	p,
	h2,
	h3 {
		orphans:3;
		widows:3;
	}
	h2,
	h3 {
		page-break-after:avoid;
	}
}