/* --------------------------------------------------------------

   layout.css
   Disposition des blocs principaux
   cf.: http://romy.tetue.net/structure-html-de-base

-------------------------------------------------------------- */

	:root {

		--primary-50 : #e6e7e7;

		--primary-200 : #979a9a;

		--primary-400 : #4e5253;

		--primary-700 : #232728;
		--primary-700-rgba : 35, 39, 40;

		--primary-900 : #121516;



		--accent-200 : #29b9ff;

		--accent-700 : #0093dc;
		--accent-700-rgba : 0, 147, 220;
		--accent-700-shady : #0284c4;



		--disabled-button : #e2e3e3;
		--disabled-text : #c2c2c3;



		--black-600 : rgba(18, 21, 22, 0.6);

		--white-700 : rgba(255, 255, 255, 0.7);



		--umbra-8 : 0 8px 10px 1px rgba(18, 21, 22, 0.14);

		--penubra-24 : 0 9px 46px 8px rgba(18, 21, 22, 0.12);

		--ambient-2 : 0 1px 5px 0 rgba(18, 21, 22, 0.2);
		--ambient-4 : 0 1px 10px 0 rgba(18, 21, 22, 0.2);
		--ambient-8 : 0 4px 15px 0 rgba(18, 21, 22, 0.2);



		--regular : 400;
		--medium : 500;
		--bold : 700;



		--standard-curve : cubic-bezier(0.4, 0.0, 0.2, 1);
		--deceleration-curve : cubic-bezier(0, 0.0, 0.2, 1);
		--acceleration-curve : cubic-bezier(0.4, 0.0, 1, 1);
		--sharp-curve : cubic-bezier(0.4, 0.0, 0.6, 1);

		/* PA v. 4 */
		--rouge : 235, 60,39;
		--orange : 252, 138, 23;
		--vert : 154, 151, 56;

	}

/* Elements principaux
------------------------------------------ */

	body {

		min-height : 100vh;

		background : white;

		text-align : center;

	}

		.page {

			display : flex;
			flex-direction : column;

			width : 100%;

			position : relative;

			text-align : left;

		}



			.banner-bg {

				width : 100%;

				background : var(--accent-700);
				box-shadow : 0 24px 38px 3px rgba(18, 21, 22, 0.14), 0 9px 46px 8px rgba(18, 21, 22, 0.12), 0 11px 15px -7px rgba(18, 21, 22, 0.20);

			}

				.banner {

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

					width : 100%;
					max-width : 1272px;
					margin : 0 auto;
					position : relative;

					line-height : 3rem;

					color : white;

				}

					.banner .statut {

						padding : 12px 0;
						margin : 0 8px;

						white-space : normal;

					}

						.banner .statut span {

							font-family : "Roboto Mono", "Lucida Console", Monaco, monospace;
							font-size : 1rem;

							line-height : 3rem;

						}




						.banner .boutons a,
						.banner .boutons a:visited {

							border : 1px solid white;
							border-radius : 0;
							box-shadow : none;

							background : var(--accent-700);

							color : white;

						}

							.banner .boutons a:hover,
							.banner .boutons a:focus { border : 1px solid white !important; }

				.banner-bg.commande_modifier {

					background : rgba(220, 52, 59, 1);

				}

					.banner-bg.commande_modifier .banner .boutons a,
					.banner-bg.commande_modifier .banner .boutons a:visited { background : rgba(220, 52, 59, 1); }

						.banner-bg.commande_modifier .banner .boutons a:hover,
						.banner-bg.commande_modifier .banner .boutons a:focus { background : rgba(196, 48, 55, 1) !important; }



			header {

				width : 100%;
				position : relative;
				z-index : 40;

				background : var(--primary-700);

			}

				.header {

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

					height : 56px;

					position : relative;

				}

					@media (orientation:landscape) {

						.header { height : 48px; }

					} /* @media (orientation:landscape) */



			.main {

				display : flex;
				flex-wrap : wrap;
				align-items : flex-start;

				min-width : 272px;
				padding : 16px 16px 0 0;

				position : relative;

				/* vertical-align : top; */

			}

				.wrapper {

					width : 100%;

					position : relative;

				}

					.content {

						display : flex;
						flex-direction : column;

						width : 100%;
						padding-left : 16px;

						position : relative;

					}

				.aside {

					width : 100%;
					padding-left : 16px;

					position : relative;

				}

					.wrapper .aside {  }



			footer {

				width : 100%;

				position : relative;

				background : var(--primary-700);

			}

				.footer {

					display : flex;
					flex-wrap : wrap;

					padding-right : 16px;

					position : relative;

					color : white;

				}



/* Entete et barre de navigation
------------------------------------------ */

		.formulaire_menu_lang { display : none; }



		.header .spip_logo_site {  }

			 a.spip_logo_site,
			 h1.spip_logo_site {

				display : inline-block;

				padding : 12px;
				margin : 0 4px;

				font-size : 1.25rem; /* 20px */
				line-height : 1.5rem; /* 24px */

				color : white;
				opacity : 1;

			}

				a.spip_logo_site,
				a.spip_logo_site:visited { color : white; }

				a.spip_logo_site:hover,
				a.spip_logo_site:focus,
				a.spip_logo_site:active { color :  white !important; }

				.spip_logo_site span,
				.spip_logo_site span { display : inline-block; }

					.spip_logo_site span::first-letter,
					.spip_logo_site span::first-letter { color : var(--accent-200) !important; }



		.menu_service { display : none; }



		nav { display : none; }



	.footer .colophon {

		width : 100%;
		padding : 4px 0 0 16px;

		text-align : center;

	}

		.footer .colophon .spip_logo_site {  }

			 .footer .colophon a.spip_logo_site,
			 .footer .colophon h1.spip_logo_site { margin-bottom : 4px; }

		.footer .colophon p { color : white; }



.footer .generator { float: right; }
.footer .generator a { padding: 0; background: none; }


/* Gabarit d'impression
------------------------------------------ */
@media print {
.page,
.wrapper,
.content { width: auto; }
.nav,
.arbo,
.aside,
.footer { display: none; }
}

/* end */