/*

Frédéric Demelle - 2012
-----------------------

*/



/* ---------------------------------------------------- */
/* @font-face                                           */
/* ---------------------------------------------------- */

	@font-face {
		font-family: 'ubuntu';
		src: url('fonts/ubuntu-r-webfont.woff2') format('woff2'),
			url('fonts/ubuntu-r-webfont.woff') format('woff');
		font-weight: normal;
		font-style: normal;
		font-display: block;
		/*font-display: swap;*/
	}

	@font-face {
		font-family: 'ubuntu';
		src: url('fonts/ubuntu-ri-webfont.woff2') format('woff2'),
			url('fonts/ubuntu-ri-webfont.woff') format('woff');
		font-weight: normal;
		font-style: italic;
		/*font-display: block;*/
		/*font-display: swap;*/
	}
/*
	@font-face {
		font-family: 'ubuntu';
		src: url('fonts/ubuntu-b-webfont.woff2') format('woff2'),
			url('fonts/ubuntu-b-webfont.woff') format('woff');
		font-weight: bold;
		font-style: normal;
		font-display: swap;
	}

	@font-face {
		font-family: 'ubuntu';
		src: url('fonts/ubuntu-bi-webfont.woff2') format('woff2'),
			url('fonts/ubuntu-bi-webfont.woff') format('woff');
		font-weight: bold;
		font-style: italic;
		font-display: swap;
	}
*/


@keyframes wheelHueBackgroundColor {
	from, to { background-color: hsl(183, 93%, 31%) }
	50%      { background-color: hsl(81, 93%, 38%); }
}


/* ---------------------------------------------------- */
/* VARIABLES                                            */
/* ---------------------------------------------------- */

	:root {
		
		--ff-transition-duration: 0.3s; 



		--ff-lightest-sand:  #eeece6;
		--ff-lighter-sand:   #e8e6df;

		--ff-middle-grey:    #666666;
		--ff-dark-grey:      #333333;
		--ff-darker-grey:    #191919;
		--ff-darkest-grey:   #131313;

		--ff-green:          #7cbc07;
		--ff-orange:         #ec7f1f;
		--ff-yellow:         #e1d51f;
		--ff-turquoise:      #079097;
		--ff-blue:           #025d74;


	}




/* ---------------------------------------------------- */
/* INITIALISATION                                       */
/* ---------------------------------------------------- */

	/* Reset */

		html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, dfn, em, img, q, s, strong, sub, sup, var, b, u, i, 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, menu, nav, section, summary, time, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
			
		article, aside, details, figcaption, figure, footer, header, menu, nav, section { display: block; }

		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; }




	/* Box-sizing */

		html { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

		*, *:before, *:after { -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit; }



	/* Accessibilité */

		.screen-reader-text {
			clip: rect(1px,1px,1px,1px);
			word-wrap: normal !important;
			border: 0;
			-webkit-clip-path: inset(50%);
			clip-path: inset(50%);
			height: 1px;
			margin: -1px;
			overflow: hidden;
			padding: 0;
			position: absolute;
			width: 1px;
		}

			.screen-reader-text:focus {
			clip: auto !important;
			-webkit-clip-path: none;
			clip-path: none;
			display: block;
			height: auto;
			line-height: normal;
			width: auto;
			z-index: 100000;
			background-color: var(--ff-blue);
			color: var(--ff-lightest-sand);
			border: solid 2px;
			font-size: 1.8rem;
			padding: 12px 16px;
			top: 5px;
			left: 5px;
			}



	/* Smooth scrolling */

		@media (prefers-reduced-motion: no-preference) {
			:root {
			scroll-behavior: smooth;
			}
		}




/* ---------------------------------------------------- */
/* GLOBAL                                               */
/* ---------------------------------------------------- */

	body {
		font-family: 'ubuntu', helvetica, sans-serif; font-display:optional;
		line-height: 1.5;
		font-size: 16px;
		overflow-x: hidden;
	}

		@media all and (min-width: 1000px) {

			html, body { height: 100%; }
			body {
			display: flex;
			flex-direction: column;
			}
			body > article { flex: 1 0 auto; }
			.site_header, .site-footer { flex-shrink: 0; }

		}
		
		
	.wrap { padding: 0 1rem; }

		@media all and (min-width: 1200px) {

			.wrap { max-width: 1200px; margin: 0 auto; }

		}

	.main-content { padding: 7rem 0 2rem 0; }


		
	h1, h2, h3, h4{}




	a,
	button { color: var(--ff-blue); text-decoration: none; cursor: pointer; }

	a:hover, a:focus,
	button:hover, button:focus { color: var(--ff-turquoise); }

	.non-clic { cursor: default; }


	.bouton { color: var(--ff-lightest-sand); text-align: center; height: 40px; line-height: 40px; padding: 0 1em; border-radius: 4px; text-decoration: none; display: inline-block; transition: var(--ff-transition-duration); border: none; margin-top: 0.5rem; background-color: var(--ff-turquoise); font-size: 1rem; }
	.bouton:hover, aside .bouton:focus { background-color: var(--ff-blue); color: var(--ff-lightest-sand); }






/* ---------------------------------------------------- */
/* HEADER                                               */
/* ---------------------------------------------------- */
		
	.site_header {
		position: fixed;
		right: 0;
		left: 0;
		z-index: 10;
	}


	@media all and (min-width: 1000px) {
		
		.site_header > .wrap {
			padding-bottom: 1rem;
		}
	}


	@media all and (min-width: 1000px) {

		.site_header > .wrap {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 0;
		}

	}

	.logo > a, .logo svg { display: inline-block; vertical-align: top; }


	/* Navigation */
	/* ---------------------------------------------------- */
	

		.site_header li{ list-style-type: none; }


		.menu-real a{ background-image: url(images/soucoupe.png); }

		.menu-team a{ background-image: url(images/puzzle.png); }

		.menu-contact button { background-image: url(images/message.png); }

		.menu-theme button {  }


		/* Menu responsive */

		@media all and (max-width: 350px) {
			
			.site_header { text-align: center; }

			.menu-principal-control { position: static; display: block; margin: 20px auto 0 auto; }

		}

		@media all and (max-width: 999px) {

			.menu-principal-pc,
			.menu-principal-responsive ul:not(.opened-menu) { display: none; }
			
			.menu-principal-responsive .opened-menu { }

			.menu-principal-control { position: absolute; top: 0.5rem; right: 1rem; height: 3.5rem; line-height: 3.6rem; padding: 0 1rem; font-size: 1.4rem; color: var(--ff-lightest-sand); background: var(--ff-turquoise); cursor: pointer; text-transform: uppercase; border: none; display: inline-block; }

			.menu-principal-control:hover, 
			.menu-principal-control:focus { background: var(--ff-blue); }

			.menu-principal-responsive ul { transition: calc(2 * var(--ff-transition-duration)); overflow: hidden; height: 0; }

				.site_header li a,
				.site_header li button{ font-size: 1.1rem; color: var(--ff-lightest-sand); display: block; height: 4rem; line-height: 4rem; padding-left: 6rem; background-color: var(--ff-blue); background-repeat: no-repeat; background-position: 1rem 50%; background-size: contain; }

				.site_header li button{ line-height: 1.5; border: none; width: 100%; text-align: left; }

					.site_header li a:hover, .site_header li a:focus,
					.site_header li button:hover, .site_header li button:focus{ background-color: var(--ff-turquoise); color: var(--ff-lightest-sand); }


			/* Le bouton hamburger */

			.hamburger-menu { 
				position: absolute; 
				top: 16px; 
				right: 30px; 
				z-index: 2000; 
				display: block; 
				height: 35px; 
				width: 45px; 
				padding: 0;
				cursor: pointer;
				border: none;
				border-radius: 4px;
				text-shadow: none;
				transition: var(--ff-transition-duration);      
			}

			/* Les 3 spans du hamburger */

			.hamburger-span { display: block; position: absolute; height: 4px; width: 33px; margin-bottom: 5px; z-index: 2000; opacity: 1; left: 0; user-select: none; transform: rotate(0deg); border-radius: 0; background-color: var(--ff-lightest-sand); 
				transition: var(--ff-transition-duration);  }

			.hamburger-span:nth-child(1) { left: 6px; top: 6px; transform-origin: left center; }
			.hamburger-span:nth-child(2) { left: 6px; top: 15px; transform-origin: left center; }
			.hamburger-span:nth-child(3) { left: 6px; top: 24px; transform-origin: left center; }

			/* the first span rotates 45° \ */
			.menu-is-opened span:nth-child(1) { top: 4px; left: 11px; transform: rotate(45deg); }

			/* the second span disappears */
			.menu-is-opened span:nth-child(2) { width: 0; opacity: 0; }

			/* the last span rotates -45° / */
			.menu-is-opened span:nth-child(3) { top: 27px; left: 11px; transform: rotate(-45deg); }


		}


		/*Menu PC */

		@media all and (min-width: 1000px) {

			.menu-principal-responsive,
			.menu-principal-control { display: none; }

		
			.site_header nav { /*position: absolute; right: 0; top: 1.25rem;*/ }
			
			.site_header ul { display: flex; gap: 1rem; }

			.site_header li {  }
			
				.site_header li a,
				.site_header li button { display: inline-block; vertical-align: bottom; background-position: 0.2rem 50%; background-color: transparent; background-repeat: no-repeat; background-size: contain; margin: 0.5rem 0; padding: 0.25rem 0 0.25rem 2.5rem; transition: var(--ff-transition-duration); font-size: 1rem; opacity: 0.5; }

				.site_header li button { line-height: 1.5; border: none; }

					.site_header li a:hover, .site_header li a:focus,
					.site_header li button:hover, .site_header li button:focus { background-color: transparent; opacity: 1; }
					
		}





	/* ---------------------------------------------------- */
	/* Gestion de la fenêtre de contact                     */
	/* ---------------------------------------------------- */	


		body > header nav, body > article, body > footer { opacity: 1; transition: var(--ff-transition-duration) calc(var(--ff-transition-duration) * 3) ease; }

		.contact-active > header nav { opacity: 0; transition: var(--ff-transition-duration) ease; }

		.contact-active > article, .contact-active > footer { opacity: 0.15; transition: var(--ff-transition-duration) ease; }

		
		body > aside { position: absolute; top: 6rem; right: -100%; z-index: 100; transition: calc(var(--ff-transition-duration) * 3) ease; height: 100%; overflow-x: auto; /*visibility: hidden; */}


			@media all and (min-width: 1000px) {
					
				body > aside { max-width: 600px; top: 0; position: fixed; }
				
			}

		.contact-active > aside { right: 0; transition: calc(var(--ff-transition-duration) * 3) calc(var(--ff-transition-duration) + 100ms) ease; /*visibility: visible;*/ }
			




/* ---------------------------------------------------- */
/* CONTENU                                              */
/* ---------------------------------------------------- */


	/* Page "Accueil" */

		/* Zone des titres */	
	
			.index .principal { padding-bottom: 4rem; }	
			.index .principal header { text-align: center; padding: 1rem 0 4rem 0; }	
			.index .principal header h1 { font-size: 2.5rem; color: var(--ff-turquoise); }
			.index .principal header h2 { font-size: 1.4rem; color: var(--ff-blue); } 


			@media all and (min-width: 1200px) {
	
				.index .principal header {padding: 2rem 0 5rem 0;}
		
			}	
	
			@media all and (max-width: 480px) {
				
				.index .principal header h1 {font-size: 2rem; line-height: 2rem;}
				.index .principal header h2 {font-size: 1.3rem; line-height: 1.3rem;} 
	
			}


		/* Bloc projets */

			.bloc-projets { display: grid; gap: 1rem; }

			.bloc-projets li { overflow: hidden; position: relative; box-shadow: 0 1px 4px rgba(0,0,0,0.2); }		
			
			.bloc-projets li p {
				height: 16rem; 
				font-style: italic; 
				display: table;
				color: white;
				margin: 0.4rem; 
				box-shadow: 0 1px 3px rgba(0,0,0,0.4), inset 0 0 40px rgba(0,0,0,0.1);
			}

			.bloc-projets .projets-uniques p { background: var(--ff-green) url(images/pousse.png) no-repeat 50% 50%; background-size: contain; }			
			.bloc-projets .projets-enjeux p { background: var(--ff-orange) url(images/rocket.png) no-repeat 50% 50%; background-size: contain; }
			.bloc-projets .projets-responsives p { background: var(--ff-yellow) url(images/responsive.png) no-repeat 50% 50%; background-size: contain; }
			.bloc-projets .projets-reseau p { background: var(--ff-turquoise) url(images/puzzle.png) no-repeat 50% 50%; background-size: contain; }

			.bloc-projets li p span { display: table-cell; vertical-align: middle; height: 14em; padding: 1em; transition:  var(--ff-transition-duration); opacity: 0; cursor: pointer; background: rgba(0,0,0,0.5); }

			.bloc-projets li:hover span { opacity: 1; transition: var(--ff-transition-duration); }
			.bloc-projets li span.active { opacity: 1; }		
			.bloc-projets li:after { content: "+"; color: var(--ff-lightest-sand); text-shadow: 0 1px 1px rgba(255,255,255,0.4),  0 -1px 1px rgba(0,0,0,0.5); position: absolute; bottom: 0.5rem; right: 0.5rem; border-radius: 100% 0 0 0; background: var(--ff-dark-grey); padding: 0.2em 0.4em 0.1em 0.7em; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.5) inset; }
			.bloc-projets li:hover:after { content: initial; }

			@media all and (min-width: 800px) {	
				
				.bloc-projets { grid-template-columns: repeat(2,1fr);}
		
			}

			@media all and (min-width: 1200px) {
			
				.bloc-projets { grid-template-columns: repeat(4,1fr);}
		
			}

		
		/* Zone de la citation */

			.index .principal blockquote {font-size: 1.2rem; font-style: italic; padding: 5rem 2rem 1rem 2rem; text-align: center;line-height: 3rem;}
				.index .principal blockquote:before, 
				.index .principal blockquote:after {font-size: 2rem; text-shadow: 0 1px 2px rgba(0,0,0,0.3);font-family: 'Gabriela', 'serif';}
				.index .principal blockquote:before {content: "«" ; padding-right: 1rem;}
				.index .principal blockquote:after {content: "»"; padding-left: 1rem;}


			@media all and (min-width: 800px) {
	
				.index .principal blockquote {font-size: 1.3rem; line-height: 1.3rem;}			
		
			}

			@media all and (min-width: 1200px) {

				.index .principal blockquote {font-size: 1.5rem; line-height: 1.5rem;}
		
			}


			@media all and (max-width: 480px) {
		
				.index .principal blockquote {line-height: 2rem;}

			}




		
		.index .additionnel .wrap {
			padding: 3rem 1rem;}
			
		.index .additionnel h3 {
			margin-bottom: 1.5rem;
			text-align: center;
			text-transform: uppercase;
			color: var(--ff-middle-grey);
			font-weight: bold;}
					
		.index .additionnel ul { display: grid; grid-template-columns: 1fr; gap: 1rem; }

		@media all and (min-width: 800px) {

			.index .additionnel ul { grid-template-columns: repeat(2,1fr); }

		}

		@media all and (min-width: 1200px) {

			.index .additionnel ul { grid-template-columns: repeat(4,1fr); }

		}

		.index .additionnel li { padding: 1.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }		
		
			
		.index .additionnel p { padding-top: 0.75rem; text-align: center; font-size: 0.9rem; }


		@media all and (max-width: 480px) {

			.index .additionnel .wrap li p {
				padding: 0 1rem;}

		}

			
		.index .like-wordpress::before {
			mask-image: url(images/wordpress.png);
		}
		.index .like-e-commerce::before{
			mask-image: url(images/shop-two.png); 
		}
		.index .like-forfaits::before{
			mask-image: url(images/calendrier-icon.png); 
		}	
		.index .like-newsletters::before{
			mask-image: url(images/contact-icon.png);
		}		
		.index .like-rest-api::before{
			mask-image: url(images/api-settings.png);
		}
		.index .like-e-paiements::before{
			mask-image: url(images/paiement-icon.png);
		}		
		.index .like-traduction::before{
			mask-image: url(images/animals-Sheep-on-bike-icon.png);
		}		
		.index .like-demandes::before {
			mask-image: url(images/yes.png);			
		}
		.index .like-ajlj::before {
			mask-image: url(images/logo-au-jour-le-jour.png);			
		}


		.index .like-box::before {
			content: " ";
			display: block;
			height: 32px;
			mask-repeat: no-repeat;
			mask-position:  50% 0; 
			mask-size: 32px;			
			background: var(--ff-turquoise);
			transition: var(--ff-transition-duration);
		}
		
		.index .like-box:hover::before {
			animation: wheelHueBackgroundColor 10s infinite;
		}		




		.raccourci-realisations {
			padding: 0 1rem;
			background-image: url(images/soucoupe.png);
			background-repeat: no-repeat;
			background-position: 50% 50%;
			background-size: contain; 
			height: 10rem;
			position: relative; 
			overflow: hidden;
			position: relative;
		}
			

		.raccourci-realisations h3 {text-align: center; height: 10rem; line-height: 10rem; font-size: 1.8rem; opacity: 1; transition-duration: 10s; }

			.raccourci-realisations:is(.let-us-go) h3 { opacity: 0; transition-duration: calc(2 * var(--ff-transition-duration)); }

		    
		.soucoupe-volante, .rocket { position: absolute; top: 10rem; }

		.soucoupe-volante-1{ left: 10%; width: 240px; height: 240px; opacity: 0.4; transition-duration: 2000ms; transition-delay: 0; }
		.soucoupe-volante-2{ left: 55%; width: 340px; height: 340px; opacity: 0.4; transition-duration: 2000ms; transition-delay: 250ms; }
		.soucoupe-volante-3{ left: 5%; width: 200px; height: 200px; opacity: 0.7; transition-duration: 1500ms; transition-delay: 1000ms; }
		.soucoupe-volante-4{ left: 85%; width: 280px; height: 280px; opacity: 0.5; transition-duration: 2000ms; transition-delay: 500ms; }
		.soucoupe-volante-5{ left: 35%; width: 340px; height: 340px; opacity: 0.7; transition-duration: 1500ms; transition-delay: 1000ms; }		
		.soucoupe-volante-6{ left: 75%; width: 140px; height: 140px; opacity: 0.5; transition-duration: 1500ms; transition-delay: 750ms; }
		.soucoupe-volante-7{ left: 45%; width: 180px; height: 180px; opacity: 0.6; transition-duration: 1500ms; transition-delay: 750ms; }
		
		.rocket-1{ left: 15%; width: 340px; height: 340px; opacity: 0.8; transition-duration: 1500ms; transition-delay: 2000ms; }


		.let-us-go .soucoupe-volante, .let-us-go .rocket { top: -30rem; opacity: 1; transition-duration: 0; transition-delay: 0; } 

			.let-us-go .soucoupe-volante-1 { left: 50%; } 
			.let-us-go .soucoupe-volante-2 { left: 70%; }
			.let-us-go .soucoupe-volante-3 { left: 15%; }
			.let-us-go .soucoupe-volante-4 { left: 40%; }
			.let-us-go .soucoupe-volante-5 { left: 30%; }
			.let-us-go .soucoupe-volante-6 { left: 30%; }
			.let-us-go .soucoupe-volante-7 { left: 80%; }

			.let-us-go .rocket { left: 65%; }

			







	/* Page "Team" */

		.team > article {  }

		.team > article header{ padding: 0 0 1rem 0; }

		.team > article h1{ font-size: 1.5em; padding: 0 0 1rem 0; color: var(--ff-turquoise); }

		.team > article p {}


		.team .liste-simple li {width: 100%; margin: 0 0 0 2rem;}
		
			.team .liste-simple li:first-child, .team .liste-simple li:last-child {margin: 0 0 0 2rem;}
		
			.team .liste-simple li:before {content: "✓ ";}


		/* Bloc Cartes de présentation */

			.team .cartes { display: grid; gap: 1rem; margin: 20px 0; }

			.team .cartes li{ padding: 0.5rem; vertical-align:top; box-shadow: 0 1px 3px rgba(0,0,0,0.4);}

			.team .cartes li div{
				padding: 20rem 0 2rem 0;
				text-align: center;
				box-shadow: 0 1px 3px rgba(0,0,0,0.4), inset 0 0 40px rgba(0,0,0,0.2);
				
			}		
			.team .gaelle div{background: var(--ff-yellow) url(images/crab.png) no-repeat 50% 25%;}
			.team .alexis div{background: var(--ff-green) url(images/elephant.png) no-repeat 50% 25%;}
			.team .fred div{background: var(--ff-turquoise) url(images/panda.png) no-repeat 50% 25%;}
			.team .cartes h3{
				font-size: 1.1em;
				font-weight: bold;
				padding: 0 1rem;}	


			@media all and (min-width: 1000px) {
				
				.team .cartes{ grid-template-columns: repeat(3,1fr); }

				.team .gaelle div{background: var(--ff-yellow) url(images/crab.png) no-repeat 50% 20%;}
				.team .alexis div{background: var(--ff-green) url(images/elephant.png) no-repeat 50% 20%;}
				.team .fred div{background: var(--ff-turquoise) url(images/panda.png) no-repeat 50% 20%;}
		
				.team .cartes h3{
					height: 3rem;} 
				.team .cartes h3 + p{
					height: 2rem;
					line-height: 2rem;
					margin-bottom: 1.5rem;}
			
			}
		
	
	
	/* Page simples */	
	
		body > article section.wrap {}
			
		body > article section.wrap h1 {font-size: 1.5em; margin: 0 0 2rem 0; color: var(--ff-turquoise);}
		
		body > article section.wrap h2 {font-size: 1.2em; margin: 2rem 0 0.5rem 0; color: var(--ff-middle-grey); font-weight: bold;}
		
		body > article section.wrap h3 {font-size: 1em; font-weight: bold;}
		
		body > article section.wrap p {font-size: 1em; font-style: italic;}
		
		body > article section.wrap li p:before {content: ">"; font-weight: bold; padding: 0 0.2rem 0 1rem;}
		
		
		
		
	/* Page réalisations */	


		.realisations > article section.wrap li p::before { content: ""; padding: 0 ;}
		



		.grid {margin: 0 -1rem;}
		
		.grid-sizer, .grid-item {width: 100%; padding: 1rem;}
		

								
			@media screen and (min-width: 800px) {
			
			.grid-sizer, .grid-item {width: 33.333%;}
			.grid-item--width2 {width: 66.666%;}
			}
			
			@media screen and (min-width: 1000px) {
			
			.grid-sizer, .grid-item {width: 25%;}
			.grid-item--width2 {width: 50%;}
			}
			
			@media screen and (min-width: 1200px) {
			
			.grid-sizer, .grid-item {width: 20%;}
			.grid-item--width2 {width: 40%;}
			}
		
		.grid-item div {overflow: hidden; box-shadow: 0 3px 6px rgba(0,0,0,0.2); position: relative;}
		

		
						
		.grid-item div h2 {display: none;}
		
			.grid-item.yours h2 {display: block; margin: 0;}
			
		.realisations .grid-item div p {margin: 0; padding: 1rem; font-style: normal;}
			
			.grid-item div .voir {padding-top: 0;}
			
		.grid-item div figure { padding: 1rem 1rem 0 1rem;}
			
			.grid-item--width2 div figure {float: left; width: 45%; padding: 1rem;}
				
			.grid-item div img {display: block; color: var(--ff-dark-grey); max-width: 100%; margin: auto;}
				
			
		.voir a {}
		
			.voir a:before {content: "> ";}

				.voir a.bouton:before {content: "";}
				
				.voir a:hover, .voir a:focus { text-decoration: underline; }
		
		
		.realisations .grid-item div .avec {position: absolute; bottom: 5px; right: 5px; padding: 0;}
		
			.grid-item div .avec img {width: 20px; opacity: 0.6;}
		
				.grid-item div .avec img:hover, .grid-item div .avec img:focus {opacity: 1;}
		
			
				
				.yours div {text-align: center; }
		
				.yours .bouton {background-color: var(--ff-turquoise);}
				
					.yours .bouton:hover, .yours .bouton:focus {background-color: var(--ff-blue);}
		
			


				
			
				.realisations .my-demos h2 {display: block; font-size: 16px; padding: 0 1rem; margin-top: 1rem; font-style: italic; }
				
				.my-demos a { }
				
			

/* ---------------------------------------------------- */	
/* ASIDE                                                */
/* ---------------------------------------------------- */


	body > aside{
		width: 100%; 
		padding: 1rem 1.5rem 3rem 1.5rem; 
		box-shadow: 0 3px 3px rgba(0,0,0,0.15);
	}


	body > aside .close{
		width: 100%; border: none; height: 3rem; line-height: 3rem; text-align: center; font-size: 1.1rem; font-weight: bold; color: var(--ff-lightest-sand); background: var(--ff-dark-grey); border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); cursor: pointer; }

		body > aside .close:hover, body > aside .close:focus{ background: var(--ff-blue); }

	body > aside section{padding: 0 1rem ;}
		
	body > aside h1{
			font-size: 1.5em;
			font-weight: bold;
			color: var(--ff-turquoise);
			margin: 1.5rem 0 0.5rem 0;}

	body > aside h2{
		font-weight: bold;
		font-style: normal;
		padding-bottom: 0.5rem;}	
	body > aside .wrap > h2{padding: 1rem 0 0 0;}
	body > aside p em{font-style: italic;}
	body > aside .wrap > h3 a{font-style: normal;}
	
	aside hr{margin: 1rem 0; border: solid 2px var(--ff-dark-grey);}

	aside .contact-form-wrap, aside .send-email-wrap { border: solid 4px var(--ff-green); border-radius: 4px; padding: 1em; margin: 1rem 0; text-align: center; }

	aside label{display: block; margin-top: 1em; font-size: 0.9em;}

	aside label em{font-style: italic;}

	aside input[type="text"], aside input[type="email"], aside input[type="tel"]{height: 30px; line-height: 30px;}

	aside input[type="text"], aside input[type="email"], aside input[type="tel"], aside textarea{width: 300px; max-width: 90%; border: solid 3px var(--ff-middle-grey); border-radius: 4px; font-size: 1rem}

	aside input[type="text"]:focus, aside input[type="email"]:focus,aside input[type="tel"]:focus, aside textarea:focus{border: solid 3px var(--ff-blue);}

		aside :where(.error-active) input:not([type="submit"]), aside :where(.error-active) textarea { border-color: var(--ff-orange); }
		aside .field-ok input:not([type="submit"]), aside .field-ok textarea { border-color: var(--ff-green); }


	aside input[type="submit"]{ font-family: 'ubuntu', helvetica, sans-serif; }

	aside .error-message { font-size: 2em; color: var(--ff-orange); display: none; }

		aside .error-active .error-message { display: block; }

	@media all and (min-width: 1000px) {
		
		body > aside.closed{
			max-width: 600px;
			top: 0;}
		
	}

	.rep-message-erreur { padding-top: 1rem; color: var(--ff-orange); }
	  












/* ---------------------------------------------------- */
/* FOOTER                                               */
/* ---------------------------------------------------- */


	.site-footer{
		position: relative;
		text-align: center;
		padding: 2rem 0 0.25rem 0;
		font-size: 0.8rem;
	}

		
		@media all and (min-width: 1000px) {
	
			.site-footer { margin-bottom: 0; }
	
			.site-footer p a:after{ content: " -"; }

		}		
	
		
		@media all and (max-width: 999px) {
			
			.site-footer p a{
				display: block; margin: 1px 0.5rem; height: 3rem; line-height: 3rem; text-align: center; font-size: 1rem; font-weight: bold; color: var(--ff-lightest-sand); background: var(--ff-dark-grey); border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);}
	
		}		
				

	







/***************************************************/
/***************************************************/
/*                                                 */
/*  THÈMES                                         */
/*                                                 */
/***************************************************/
/***************************************************/


/*

Frédéric Demelle - 2012
-----------------------

Gestion des couleurs des thèmes uniquement

*/



body { background: var(--ff-darker-grey); color: var(--ff-lightest-sand); }
	.clair { background-color: var(--ff-lightest-sand); color: var(--ff-dark-grey); }


.site_header { background-color: var(--ff-darkest-grey); }
    
	.clair > header{ background-color: var(--ff-lightest-sand); }


.site_header .wrap, .menu-principal-responsive { box-shadow: 0 2px 4px rgba(0,0,0,0.1); }


@media all and (min-width: 1000px) {

	.site_header { box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
	.site_header .wrap { box-shadow: none; }	

	.clair > header li a, .clair > header li a:hover, .clair > header li a:focus,
	.clair > header li button, .clair > header li button:hover, .clair > header li button:focus { color: var(--ff-dark-grey); }
	
}

.non-clic {color: var(--ff-lightest-sand);}

	.clair .non-clic {color: var(--ff-dark-grey);}



.menu-theme button {background-image: url(images/jour.png);}
.clair .menu-theme button {background-image: url(images/nuit.png);}


.principal blockquote:after, .principal blockquote:before{color: white;}

.principal blockquote{color: var(--ff-lightest-sand);}
.clair .principal blockquote{color: var(--ff-middle-grey);}


.principal li{background-color: var(--ff-lightest-sand);}
.clair .principal li{background-color: white;}
			


.additionnel {background: var(--ff-darker-grey); color: var(--ff-lightest-sand);}
.clair .additionnel {background: var(--ff-lightest-sand); color: var(--ff-dark-grey);}


.raccourci-realisations{
	background-color: var(--ff-darkest-grey);
    box-shadow: 0 3px 7px rgba(0,0,0,0.2);}
.raccourci-realisations .wrap{
	background-color: rgba(19,19,19,0.8);}
.clair .raccourci-realisations{background-color: var(--ff-turquoise);}
.clair .raccourci-realisations .wrap{
	background-color: rgba(7,144,151,0.7);}

.raccourci-realisations a { color: var(--ff-blue); }
.raccourci-realisations a:hover, .raccourci-realisations a:focus { color: var(--ff-turquoise); }
.clair .raccourci-realisations a { color: var(--ff-lightest-sand); }
.clair .raccourci-realisations a:hover, clair .raccourci-realisations a:focus { color: white; }


.additionnel li { background-color: var(--ff-darkest-grey); }
.clair .additionnel li { background-color: white; }




.team > article {background: var(--ff-darker-grey); color: var(--ff-lightest-sand);}
.team.clair > article {background: var(--ff-lightest-sand); color: var(--ff-dark-grey);}

.team .cartes li{background: var(--ff-lightest-sand);}
.team.clair .cartes li{background: white;}




.realisations .grid-item div { background-color: var(--ff-dark-grey); color: white; }
.realisations.clair .grid-item div { background-color: white; color: var(--ff-darkest-grey); }


.realisations .grid .yours div { background-color: var(--ff-lightest-sand); }

	
	.realisations .grid .my-demos div { border: solid 2px;
	border-image: linear-gradient(30deg, var(--ff-green), var(--ff-turquoise)) 2 / 1 / 0 stretch;
	}



.realisations .grid-item figure img { background-color: var(--ff-lighter-sand); }
.realisations.clair .grid-item figure img { background-color: white; }





body > aside{background: var(--ff-darkest-grey); color: var(--ff-lightest-sand);}
.clair > aside{background-color: var(--ff-lightest-sand); color: var(--ff-dark-grey);}




.site-footer{
	background-color: var(--ff-darker-grey); 
	color: var(--ff-dark-grey);}

.clair > footer{background: var(--ff-lightest-sand);}