:root{
	
	--grisFonce: #1b262c;
	--accent: #2F7AAC;
	--accentFonce: #0f4c75;
	--accentClair: #bbe1fa;
	
	--paddingHB: 20px;
	--paddingGD: calc((100vw - 1200px) / 2);
	
	--espacement: 40px;
	--espacementS: 20px;
	--espacementL: 80px;
	--espacementXS: 10px;
	
	--coinCoupeBD: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
	--coinCoupeHG: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
	
	--coinCoupes: polygon(20px 0, 100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%,0 20px);
	--coinCoupesS: polygon(10px 0, 100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
	
}

*{margin:0;padding:0;}html{width:100%;box-sizing: border-box;font-size:100%;overflow-x:hidden;scroll-behavior: smooth;}img{border:none;}*, *:after, *:before{box-sizing: border-box;} 
body{background:#FFF;font-family:"Roboto Slab", Georgia, serif;font-weight:400;font-size:1.4rem;line-height:2ch;color:var(--grisFonce);text-align:center;} 



.menuMobile, .navMobile{
		display: none;	
	}

a{
	color: var(--accentFonce);
	text-decoration-thickness: 2px;
	text-decoration-color: var(--accentClair);
	&:hover{		
	text-decoration-color: var(--accent);
	}

	&:focus-visible{
		outline: 2px solid var(--accent);
		outline-offset: 2px;
	}
}

h1{
	font-family:"Antonio", sans-serif;
	font-size: 2.5rem;
	line-height: 2.4ch;
	font-weight: 400;
	color: var(--accent);
	margin-bottom: 1.5ch;
}

h2{
	font-family:"Antonio", sans-serif;
	font-size: 2rem;
	line-height: 2.4ch;
	font-weight: 500;
	color: var(--accent);
	margin-bottom: 1.5ch;
}

h3{
	font-family:"Antonio", sans-serif;
	font-size: 1.7rem;
	line-height: 2.4ch;
	font-weight: 700;
	color: var(--accent);
	margin-bottom: 1.5ch;
}
p{
	margin-bottom: 1.5ch;
	&.chapo{
		font-weight: 700;
	}
	&.description {
		color: var(--accentFonce);
		border-left: 5px solid var(--accentFonce);
		padding-left: 5px;
		font-weight: 600;
	}
}
ul, ol{
	margin-bottom: 1.5ch;
}
li {
	margin-left: 2ch;
	margin-bottom: 1ch;
	
	&::marker{
		color:var(--accent);
	}
}
ol{
	li{
		margin-left: 3ch;	
	}
}

.legende{
	font-size: 1rem;
	font-style: italic;
	color: color-mix(in srgb, var(--grisFonce) 70%, white);
	text-align: center;

}

h1, h2, h3, h4, h5, p, ul, ol, li{
	&:last-child{
		margin-bottom: 0;
	}
}

hr{
	border:none;
	border-top: 2px solid var(--accent);
	margin: var(--paddingHB) 0;
}

blockquote {
	background-color: color-mix(in srgb, var(--grisFonce) 10%, white);
	padding: var(--espacement);
	border-left: 5px solid var(--accent);
	clip-path: var(--coinCoupeBD);
}

.container{
	display: flex;
	gap: var(--espacement);
	flex-direction: column;
	min-height: 100dvh;
	justify-content: space-between;
}

header.headerPrincipal {
	
	display: grid;
	grid-template-columns: var(--paddingGD) auto var(--espacement) 1fr var(--paddingGD);
	grid-template-rows: 1fr 1fr 1fr;
	padding: var(--paddingHB) 0 0;
	
	.bande{
		grid-area: 2 / 1 / 3 / 6;
		background-color: var(--grisFonce);
	}

	.logo{
		
		grid-area: 1 / 2 / 4 / 3;
		width: 15vh;
		height: 15vh;
		padding: 2.5vh;
		border-radius: 100%;
		background-color: white;
		box-shadow: 0 0 20px rgb(0,0,0,.2);
		display:flex;
		align-items: center;
		justify-content:center;
		
		a{
			width: 100%;
			height: 100%;
			
			&:focus-visible{
				outline: 2px solid var(--accent);
				outline-offset: 2px;
			}
		}
	
		svg{
			width: 100%;
			height: 100%;
			transition: transform .2s ease-out, fill .2s ease-out;
			fill:var(--grisFonce);
			
			&:hover{
				transform: rotate(-10deg);
				fill:var(--accent);
			}
		}
	}
	
	nav.navPrincipale{
		grid-area: 2 / 4 / 3 / 5;
		display: flex;
		justify-content: space-between;
		align-items: stretch;
		gap: 10px;
		a{
			color: #FFF;
			background-color: var(--grisFonce);
			font-family:"Antonio", sans-serif;
			text-transform: uppercase;
			padding: 10px;
			text-decoration: none;
			line-height: 3.1ch;
			
			&:hover, &.on{
				background-color: var(--accent);
				clip-path: var(--coinCoupeHG);
			}
			
			&:focus-visible{
				outline: 2px solid var(--accent);
				outline-offset: -2px;
			}
			
			&.on{			
				&:focus-visible{
					outline: 2px solid var(--accentClair);
					outline-offset: -2px;
				}
			}
		}
		svg{
			height: 2.4ch;
			width: 2.4ch;
		}
	}
	
	nav.sousNav{
		grid-area: 3 / 4 / 4 / 5;
		display: flex;
		justify-content: flex-start;
		align-items: stretch;
		gap: 10px;
		background-color: var(--accent);
		clip-path: var(--coinCoupeBD);
		padding: 0 30px 0 10px;
		
		a{
			color: #FFF;
			font-family:"Antonio", sans-serif;
			text-transform: uppercase;
			padding: 10px;
			text-decoration: none;	
			position: relative;
			line-height: 3.1ch;
			font-size: 1.3rem;

			&:hover, &.on{
				&:after{
					content:"";
					display:inline-block;
					width: 0;
					height: 0;
					position: absolute;
					bottom: 0;
					margin-left: -10px;
					left: 50%;
					border-right: 10px solid transparent;
					border-bottom: 7px solid #FFF;
					border-left: 10px solid transparent;
						
				}
			}
			&:focus-visible{				
				outline: 2px solid var(--accentClair);
				outline-offset: -2px;
			}
		}
	}
}

article.accueil {
	margin: 0 var(--paddingGD);
	padding: var(--paddingHB);
	background-color: color-mix(in srgb, var(--grisFonce) 10%, white);
	clip-path: var(--coinCoupes);
	display: flex;
	gap: var(--espacement);
	
	figure{
		padding: 5px;
		background-color: color-mix(in srgb, var(--grisFonce) 10%, white);
		clip-path: var(--coinCoupeBD);
		height: fit-content;

		img{
			height: 20vh;			
			clip-path: var(--coinCoupes);
			cursor: zoom-in;
		}
	}

	.texte{
		text-align: left;
		.longtitle{
			font-family:"Antonio", sans-serif;
			font-size: 2.5rem;
			line-height: 2.4ch;
			font-weight: 400;
			color: var(--accentFonce);
			margin-bottom: 1.5ch;
		}
	}
}

section.actualitesUne{
	flex-grow: 1;
	text-align: left;
	
	header{
		background-color: var(--accent);
		display: flex;
		padding: var(--paddingHB) var(--paddingHB) var(--paddingHB) var(--paddingGD);
		width: fit-content;
		clip-path: var(--coinCoupeBD);
		color: #FFF;
		text-transform: uppercase;
		margin-bottom: var(--espacement);
		h1{
			color: #FFF;
		}
	}
	.voirTout {
		padding: 0 var(--paddingGD);
		margin-top: var(--espacement);
		text-align: center;
	}
}

.listeActualitesUne {
  display: flex;
  flex-direction: column;
  gap: var(--espacement);
  padding: 0 var(--paddingGD);
}

.pagination {
	display: flex;
	justify-content: center;
	gap: 5px;
	li{
		list-style-type: none;
		background-color: transparent;
		padding: 3px 10px;
		display: flex;
		justify-content:center;
		align-items: center;
		
		&.disabled{
			opacity: 0;
		}

		&.active{
			background-color: var(--accent);
			color:#FFF;
			a{
				text-decoration: none;
				color:#FFF;
			}
		}
	}
}



article.actualiteUne {
	

	display: flex;
	gap: var(--espacement);

	&:not(:last-child){
		padding-bottom: var(--espacement);
		border-bottom: 1px solid var(--accentClair);
	}
	
	figure{
		padding: 5px;
		background-color: color-mix(in srgb, var(--grisFonce) 10%, white);
		clip-path: var(--coinCoupeBD);
		height: fit-content;

		img{
			width: 15vw;
			clip-path: var(--coinCoupeBD);
			display: block;
			max-height: 15vw;
			object-fit: contain;
		}
		a:focus-visible{
			outline: 2px solid var(--accent);
			outline-offset: 3px;
		}
	}
	
	.texteEtLien {
		display: flex;
		flex-direction: column;
		gap: var(--espacementS);
		justify-content: space-between;
		width: 100%;
		
		.chapo{
			font-weight: 400;
		}
		
		.lien {
			align-self: flex-end;
			background-color: var(--accent);
			padding: 5px 15px;
			color: #FFF;
			clip-path: var(--coinCoupesS);
			
			a{
				color: #FFF;
				text-decoration: none;
				&:focus-visible{
					outline: 2px solid var(--accentClair);
					outline-offset: 2px;
				}
			}
		}
	}
	.embed {
		background-color: var(--grisFonce);
		padding: var(--espacementS);
		clip-path: var(--coinCoupeBD);

		iframe{
			width: 100%;
			height: auto;
			aspect-ratio: 16 / 9;
			clip-path: var(--coinCoupeBD);
			display: block;
		}
	}
	
	a {
		text-decoration: none;
		h2{

			text-decoration-thickness: 2px;
			text-decoration-color: var(--accentClair);
			&:hover{		
				text-decoration-color: var(--accent);
			}

		}
	}
	
}

article.article{
	
	flex-grow: 1;
	text-align: justify;
	padding: 0 var(--paddingGD);
	display: flex;
	flex-direction: column;
	gap: var(--espacement);
	
	h1, h2, h3, h4, h5, h6{
		text-align: left;
	}
	
	figure{
		
		padding: 5px;
		background-color: color-mix(in srgb, var(--grisFonce) 10%, white);
		clip-path: var(--coinCoupeBD);
		height: fit-content;
		a{
			display: block;			
			
			&:focus-visible{
				outline: 2px solid var(--accent);
				outline-offset: 3px;
			}
		}
		
		img{
			display: block;
			width: 100%;
			max-height: 30dvh;
			object-fit: contain;
  			background-color: color-mix(in srgb, var(--grisFonce) 10%, white);
			clip-path: var(--coinCoupeBD);
			cursor: zoom-in;
		}
	}
	
	.descEtChapo, .texte{
		&:empty{
			display: none;
		}
	}
	
	.texteEtLien{
		display: flex;
		flex-direction: column;
		gap: var(--espacement);
		
		&:has(.texte:empty){
			display:none;
		}
		
		.lien {
			align-self: flex-end;
			background-color: var(--accent);
			padding: 5px 15px;
			color: #FFF;
			clip-path: var(--coinCoupesS);
			
			a{
				color: #FFF;
				text-decoration: none;
				&:focus-visible{
					outline: 2px solid var(--accentClair);
					outline-offset: 2px;
				}
			}
		}
	}
	
	.embed {
		background-color: var(--grisFonce);
		padding: var(--espacementS);
		clip-path: var(--coinCoupeBD);

		iframe{
			width: 100%;
			height: auto;
			aspect-ratio: 16 / 9;
			clip-path: var(--coinCoupeBD);
			display: block;
		}
	}
	
	.blocTexte{
		display: flex;
		flex-direction: column;
		gap: var(--espacement);
	}
	
	
}

section.listePubli{
	flex-grow: 1;
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: var(--espacement);
	
	article.article{
		flex-grow: unset;
	}
	
	header.debutListePubli{
		text-align: justify;
		padding: 0 var(--paddingGD);
	}
	
	header.titreSectionPubli{
		background-color: var(--accent);
		display: flex;
		padding: var(--paddingHB) var(--paddingHB) var(--paddingHB) var(--paddingGD);
		width: fit-content;
		clip-path: var(--coinCoupeBD);
		color: #FFF;
		text-transform: uppercase;
		h2{
			color: #FFF;
		}
	}

	.listePubliListe {
		padding: 0 var(--paddingGD);
		gap: var(--espacement);
		display: flex;
		flex-direction: column;

		article.publiUne {
			display: flex;
			gap: var(--espacement);

			&:not(:last-child){
				padding-bottom: var(--espacement);
				border-bottom: 1px solid var(--accentClair);
			}

			figure{

				padding: 5px;
				background-color: color-mix(in srgb, var(--grisFonce) 10%, white);
				clip-path: var(--coinCoupeBD);
				height: fit-content;
				img{
					width: 5vw;
					clip-path: var(--coinCoupeBD);
					display: block;
					cursor: zoom-in;
				}
			}

			.texteEtLien {
				display: flex;
				flex-direction: column;
				gap: var(--espacementS);
				justify-content: space-between;
				flex-grow: 1;
				
				.infosEdition {
					display: flex;
					gap: .5ch;
					
					&:empty{
						display: none;
					}
					
					span{
						&:not(:last-child){
							&:after{
								content: ",";
							}
						}
					}
				}
				
				.document{
					display: flex;
					gap: .5ch;
					align-items: center;
					svg{
						height: 1.5ch;
						width: 1.5ch;
						fill: var(--accentFonce);
					}
				}

				.lien {
					align-self: flex-end;
					background-color: var(--accent);
					padding: 5px 15px;
					color: #FFF;
					clip-path: var(--coinCoupesS);

					a{
						color: #FFF;
						text-decoration: none;
						&:focus-visible{
							outline: 2px solid var(--accentClair);
							outline-offset: 2px;
						}
					}
				}
			}

		}
	}
}

section.contact{
	padding: 0 var(--paddingGD) var(--paddingHB);
	text-align: left;
	display: flex;
	gap: var(--espacementL);
	flex-grow: 1;
	
	.texte{
		flex-grow: 1;
	}
	
	.formulaire{
		flex-grow: 1;
		border-left: 2px solid var(--accentClair);
		padding-left: var(--espacementL);
	}
	
	form {
		display: flex;
		flex-direction: column;
		gap: var(--espacementXS);
		
		sup {
			color: var(--accent);
		}
		
		label {
			margin-bottom: 3px;
			display: inline-block;
		}
		
		input[type="text"], textarea {
			min-width: 30ch;
			width: 100%;
			height: 3ch;
			font-size: 1.2rem;
			padding: 5px;
			border-radius: 3px;
			border: 1px solid var(--grisFonce);
			
			&:focus-visible{
				outline: 2px solid var(--accent);
				outline-offset: 2px;
			}
		}
		textarea{
			height: 15ch;
		}
		img{
			aspect-ratio: 30 / 10;
			object-fit: cover;
			height: 10vh;
			display: block;
			margin-bottom: var(--espacementXS);
		}
		
		button{
			width: 100%;
			font-size: 1.4rem;
			padding: 5px;
			background-color: var(--accent);
			color: #FFF;
			text-transform: uppercase;
			clip-path: var(--coinCoupesS);
			border: none;
			cursor: pointer;
			&:hover{				
				background-color: var(--accentFonce);
			}
			
			&:focus-visible{
				outline: 2px solid var(--accentClair);
				outline-offset: -2px;
			}
		}
	}
}

section.recherche{
	flex-grow: 1;
	text-align: left;
	
	header{
		background-color: var(--accent);
		display: flex;
		padding: var(--paddingHB) var(--paddingHB) var(--paddingHB) var(--paddingGD);
		width: fit-content;
		clip-path: var(--coinCoupeBD);
		color: #FFF;
		text-transform: uppercase;
		margin-bottom: var(--espacement);
		h1{
			color: #FFF;
		}
	}
	
	.moteur {
		padding: 0 var(--paddingGD);
		display: flex;
		flex-direction: column;
		gap: var(--espacementS);

		fieldset{
			border: none;
			display: flex;
			gap: 2ch;
			margin-bottom: 3ch;
		}

		#ajaxSearch_input{
			font-size: 1.5rem;
			padding: 5px 10px;
			border-radius: 10px;
			border: 2px solid var(--grisFonce);
			height: 60px;
			width: 400px;
			&:focus-visible{
				outline:2px solid var(--accent);
				outline-offset: 2px;
			}
		}

		#ajaxSearch_submit{
			height: 60px;
			color: #FFF;
			background: var(--accent);
			border: none;
			font-size: 2rem;
			text-transform: uppercase;
			padding: 5px 20px;
			font-weight: 600;
			cursor: pointer;
			clip-path: var(--coinCoupesS);
			
			
			&:hover{
				background-color: var(--accentFonce);
			}
			&:focus-visible{
				outline:2px solid var(--accentClair);
				outline-offset: -2px;
				background-color: var(--accentFonce);
			}
		}
		#ajaxSearch_intro{
			font-style: italic;
		}
		#grpResult_site_wide {
			display: flex;
			flex-direction: column;
			gap: var(--espacement);
		}
		.nbResultats {
			display: flex;
			gap: var(--espacementXS);
		}
		.ajaxSearch_grpResultName{
			display: none;
		}
	}
}

article.rechercheUne {
	
	> a{
		display: flex;
		gap: var(--espacement);
	}

	&:not(:last-child){
		padding-bottom: var(--espacement);
		border-bottom: 1px solid var(--accentClair);
	}
	
	figure{
		padding: 5px;
		background-color: color-mix(in srgb, var(--grisFonce) 10%, white);
		clip-path: var(--coinCoupeBD);
		height: fit-content;

		img{
			
			width: 15vw;
			clip-path: var(--coinCoupeBD);
			display: block;
			max-height: 15vw;
			object-fit: contain;			
		}
		a:focus-visible{
			outline: 2px solid var(--accent);
			outline-offset: 3px;
		}
	}
	
	.texteEtLien {
		display: flex;
		flex-direction: column;
		gap: var(--espacementS);
		justify-content: space-between;
		width: 100%;
		
		.chapo{
			font-weight: 400;
		}
		
		.lien {
			align-self: flex-end;
			background-color: var(--accent);
			padding: 5px 15px;
			color: #FFF;
			clip-path: var(--coinCoupesS);
			
			a{
				color: #FFF;
				text-decoration: none;
				&:focus-visible{
					outline: 2px solid var(--accentClair);
					outline-offset: 2px;
				}
			}
		}
	}
	.embed {
		background-color: var(--grisFonce);
		padding: var(--espacementS);
		clip-path: var(--coinCoupeBD);

		iframe{
			width: 100%;
			height: auto;
			aspect-ratio: 16 / 9;
			clip-path: var(--coinCoupeBD);
			display: block;
		}
	}
	
	a {
		text-decoration: none;
		h2{

			text-decoration-thickness: 2px;
			text-decoration-color: var(--accentClair);
			&:hover{		
				text-decoration-color: var(--accent);
			}

		}
	}
	
}

/* GLIGHTBOX */
.glightbox-clean .gslide-description{
	background-color: var(--grisFonce) !important;
	color: #FFF !important;
	
	h4, p{
		font-family:"Roboto Slab", Georgia, serif;
		line-height:2ch;
		color: #FFF !important;
		&:last-child{
			margin-bottom:0;
		}
	}
	
}

/* Mailerlite */

.ml-form-align-center {
  padding: 0 var(--paddingGD);
	.ml-form-embedWrapper.embedForm{
		max-width: unset !important;
	}
}
.contact .ml-form-align-center{
	padding: 0;
}

footer {
  background-color: var(--grisFonce);
  padding: var(--paddingHB) var(--paddingGD);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
	
	a{
		color: #FFF;
		text-decoration-color: #FFF;

			&:focus-visible{
				outline: 2px solid var(--accent);
				outline-offset: 2px;
			}
	}
}
@media screen and (max-width : 1280px){
	
	:root{
		--paddingGD: calc((100vw - 1020px) / 2);
	}
	header.headerPrincipal {
  & nav.sousNav {
	  & a{
	  	font-size: 1.2rem;
	  }
		}
	}
	
}

@media screen and (max-width : 1080px){
	
	:root{
		
	--paddingGD: 40px;
	}
	
	article.accueil {
		
		flex-direction: column;	
		align-items: flex-start;
	
		& .texte {
			& .longtitle {
				font-size: 3.5rem;
			}
		}
	}
	body{font-size:2.45rem;}
	h1{font-size: 3.5rem;}
	h2{font-size: 2.75rem;}
	h3{font-size: 2.4rem;}
	
	
	
	header.headerPrincipal {

		nav.navPrincipale, nav.sousNav{
			display: none;
		}
	}
	
	.menuMobile{
		display: flex;
		grid-area: 2 / 4 / 3 / 5;
		justify-content: flex-end;
		align-content: center;
		
		a#boutonHamburger{
			display: flex;
			align-items: center;
			
			svg{
				height: 10vmin;
				width: 10vmin;
				aspect-ratio: 1 / 1;
				
				path{
					stroke: #FFF;
				}
			}
		}
	}
	
	#hamburger {
		position: fixed;
		top: 0;
		right: 0;
		width: 100vw;
		height: 100dvh;
		background-color: var(--grisFonce);
		display: grid;
		z-index: 100;
		transition: right .2s ease-in-out;
		padding: var(--espacement);
      	grid-template-columns: 1fr 9vw;
      	grid-template-rows: 9vw 1fr;
		
		.croix{
			grid-area: 1 / 2 / 2 / 3;
			svg{
				width: 10vmin;
				height: 10vmin;
				path{
					fill: #FFF;
				}
			}
		}
		
		> nav{			
			grid-area: 2 / 1 / 3 / 3;
			display: flex;
			flex-direction: column;
			font-size: 3.5rem;			
			line-height: 2.4ch;
			text-align: left;
			align-items: flex-start;
			gap: var(--espacement);
			overflow: auto;

			
			a{
				color: #FFF;

			}
		}

		.sousNavMobile{
			padding: var(--espacementS) var(--espacement);
			border-left: 10px solid var(--accent);
			display: flex;
			flex-direction: column;
			font-size: 3rem;
			line-height: 2.4ch;
			text-align: left;
			align-items: flex-start;
			gap: var(--espacementS);
		}
		
	}
	
	article.actualiteUne {
		flex-direction: column;
		& figure {
			& img {
				width: 100%;
				max-height: 30vh;
			}
		}
	}

	section.listePubli {
		& .listePubliListe {
			gap: var(--espacementL);
			& article.publiUne {
				flex-direction: column;

				&(:not(:last-child)){
					padding-bottom: var(--espacementL);
					border-bottom: 1px solid var(--accentClair);
				}
				& figure {
					& img {
						width: 100%;
						max-height: 30vh;
						object-fit: contain;							
						background-color: color-mix(in srgb, var(--grisFonce) 10%, white);
					}
				}
			}
		}
	}
	
	section.contact{
		flex-direction: column;	
		.texte{
			flex-grow: unset;
		}

		.formulaire{
			flex-grow: unset;
			border-left: 0;
			padding-left: 0;
			
			input[type="text"], textarea, button {
				font-size: 3rem;
				padding: 10px;
			}
			
			
		}
	}
	
}