/* ANGES.PRO */

@media (min-width:459px) and (max-width:499px), (min-width:992px) and (max-width:1199px) { .hide001 { display: none }}
@media (min-width:459px) and (max-width:560px), (min-width:576px) and (max-width:767px), (min-width:992px) and (max-width:1199px) { .hide002 { display: none }}

BODY {
	margin:0 0 80px;
	background-color: #f9f5ff;
	
	background-repeat: no-repeat;
	background-position: left 35%;
	background-size: contain;

	user-select: none;
}
.select { user-select: text }
#contenu { overflow: hidden; max-width:max-content }

.alert {
	padding:.5em 40px; margin:-20px 0 20px;
	box-shadow: 0 3px 5px #6e2d7e66;
}

.basPage {
	text-align: center;
	border-top: 1px solid #888;
	width: 100%; max-width: 100%;
	background-color: black; box-shadow: 0 0 10px black;
	color: #eee;
	position: fixed; bottom: 0
}
.basPage A {
	margin: auto 10px;
	color: #ff0;
	text-decoration: none;
	text-wrap: nowrap;
}
@media (max-width:374px) {
	.basPage A { font-size:0.8em }
}
@media (max-width:599px) {
	.basPage { padding-bottom: 5px }
}

H1 { font-size: 1.5rem; font-weight: 700; }
H2 { font-size: 1.3rem }
H3 { font-size: 1.1rem }
H4 { font-size: 1rem }

P, BLOCKQUOTE, LI { margin-bottom: 10px; margin-top:10px }

FIELDSET {
	border: 1px solid #8e2d9e; border-radius: 4px;
	padding: 3px 5px 2px 5px;
}
LEGEND {
	color:#8e2d9e;
	border: 1px solid #8e2d9e;
	border-radius: 4px;
	float: none;
	width: auto;
	padding:0 5px;
	margin-left: 10px;
	font-size: larger;
	box-shadow: 4px 3px 5px #6e2d7e66;
	background-color: #fdfaff;
}

TH.FONDviolet { background-color: #8e2d9e18!important }

.gestion { z-index:1000;position:absolute;right:20px;top:16px }
.gestion IMG {
	filter: invert(1);
	vertical-align: top;
	height: 21px;
}
@media (max-width:430px) {
	.gestion { right:0;top:0 }
}

.shadow { box-shadow: .3rem .3rem .5rem rgba(0,0,0,.5)!important; }
.shadow2 { box-shadow: 0 0 20px #8e2d9e; }
.shadow1 {
	box-shadow: 0 0 .25em #f9f5ff, 0 0 .3em #f9f5ff, 0 0 .4em #f9f5ff, 0 0 .5em #f9f5ff;
	background-color: #f9f5ff;
	border-radius: 4px;
	padding: 2px 3px;
}

.rouge { color:red }

.remplir { display: inline-block; border-bottom: 1px dashed #888 }

IFRAME { box-shadow: 0 0px 20px white, 0 -5px 10px white; }

IFRAME#voirImg {
	display: none;
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	z-index: 2001;
	/*backdrop-filter: contrast(0.5) blur(8px) brightness(1.2);*/
	/*background-color: black;*/
	box-shadow: none!important;
}

.bandeau0 {
	z-index: 130;
	position: fixed;
	top: 0;
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
}
.bandeau1, .bandeau2 {
	z-index: 120;
	width: 100%;
	overflow-x: hidden;
	opacity:1;
}
.bandeau1 {
	margin-bottom: -45px;
	text-align: center;
}
.bandeau1 IMG, .bandeau2 IMG {
	width: 100%; min-width: 780px;
	box-shadow: 0 0 20px #8e2d9e;
}
.bandeau1 IMG {
	position: relative; top: -50px;
	max-width: 1320px;
}
.bandeau2 IMG {
	margin-bottom: 20px;
}
.sous-bandeau2 {
	height: auto; top: 38px;
	z-index: 115;
}
.bandeau2-noclic, .bandeau2G-noclic {
	z-index:120;
	position:fixed;
	top:0; width:100%; height: 100px
}
.bandeau2G-noclic {
	height: 51px
}
.bandeau3 {
	z-index:129;
	position:fixed;
	top:51px; left: 0; width: 100%;
}

.index-demo {
	overflow-y: hidden;
	overflow-x: auto;
	height: 225px;
	text-wrap: nowrap;
	padding:0
}

IFRAME { max-width:100% }

.col1, .col2 {
	display: inline-block;
	min-width: 240px; max-width: calc(100% - 20px);
	padding: 10px;
	overflow-x: auto;
	vertical-align: top;
}
.col1 {
	width: calc(33% - 35px);
}
.col2 {
	width: calc(66% - 35px);
}

.imgStudio {
	width: 500px;
	max-width: 90%;
}

@media (min-width:360px) and (max-width:575px), (min-width:1200px) {
	.legende .titre1 { display:none }
}
@media (min-width:576px) and (max-width:1199px), (max-width:359px) {
	.legende .titre2 { display:none }
}
@media (min-width:576px) and (max-width:991px), (max-width:359px) {
	.legende .libre { width:1% }
	.legende .jour { width:4% }
	.legende { font-size: .8em }
}

.legende .titre1 TH { text-align: left; padding-bottom: 5px; }
.legende TD { width:5%; }
.calend { width:100%; max-width: 400px; }
.calend, .calend TD, .calend TH, .legende TD.jour { border:1px solid #8e2d9e; }
.calend TD { height:40px; }
.vide { background-color: #e8e0ef }
.mois, .sem { padding-left: 10px; }
.mois TH, TH.mois, .sem TH, TH.sem { border-bottom: hidden; background-color: #ebf }
.sem, .jour { border-top: hidden; text-align: center; }
.sem TH { font-weight: normal; font-size: .8em }
.jour { width:14.29%; background-color: white }
.now { outline: solid 6px #8e2d9e99 }
#vu {
	outline: solid 6px #0088ff88;

	animation-duration: 1s;
	animation-name: vuFrames;
	animation-iteration-count: infinite;
	transition: none;
}
@keyframes vuFrames {
	0%		{ outline:solid 6px #0088ff11 }
	40%		{ outline:solid 6px #0088ff88 }
	100%	{ outline:solid 6px #0088ff11 }
}

@media (max-width:400px) {
	.sem TH { font-size: .70em }
}

/*.oqp00 { font-weight: bold }*/
.nego { text-shadow: 0 0 0.3em #FF0, 0 0 1em #FB0, 0 0 2em #FF0; }

.oqp01, .oqp02, .oqp10, .oqp20, .oqp12, .oqp21 { background-size: 106% 100%; background-position: -2px 0; background-repeat: no-repeat;}
.oqp01 { background-image: url("/img/oqp01.png"); }
.oqp10 { background-image: url("/img/oqp10.png"); }
.oqp11 { background-color: #fea }
.oqp02 { background-image: url("/img/oqp02.png"); }
.oqp20 { background-image: url("/img/oqp20.png"); }
.oqp22 { background-color: #f99 }
.oqp12 { background-image: url("/img/oqp12.png"); }
.oqp21 { background-image: url("/img/oqp21.png"); }

.oqp00.zone, .oqp01.zone,  .oqp10.zone, .oqp02.zone, .oqp20.zone { background-color:#dff }

.oqp00:hover, .oqp01:hover,  .oqp10:hover, .oqp02:hover, .oqp20:hover { background-color:#0f0; }
.jour:hover { font-weight:bold; cursor: cell; }

.polaroid {
	background-color: white;
	border:1px solid #8e2d9e;
	box-shadow: .3rem .3rem .5rem rgba(0,0,0,.5);
	max-width: 520px;
}
@media (max-width:575px) {
	.polaroid {
		margin-right:10px;
		margin-left:10px;
	}
}

.clicInfo, .clicAnim {
	position:absolute;
	width: auto!important;
	pointer-events: none;
	opacity: 0.2;
}
.clicInfo, .clicAnim, .clicAnim0 {
	z-index: 20000
}
.clicAnim, .clicAnim0 {
	animation-duration: 1s;
	animation-name: clicAnimer;
	animation-iteration-count: 10;
	transition: none;
}
@keyframes clicAnimer {
	0%   { opacity:0   }
	40%  { opacity:.5 }
	100% { opacity:0   }
}
.epingle {
	position:relative;
}
.epingle IMG {
	position: absolute;
	top: -1em; left: .8em; width: 30px; height: 30px;
}
.epingle SPAN {
	position:absolute;
	display: none;
	/*opacity: 0.7;*/
	top: -0.6em; left: -2em;
	padding: 0.35em 0.65em;
	box-shadow: 0.2em 0.2em 0.5em rgb(0 0 0 / 50%);
	line-height: 1; font-size: .75em;
	font-weight: 700;
	text-align: center;
	/* white-space: nowrap; */
	/* vertical-align: baseline; */
	border-radius: 0.25rem;
	background-color: #8f8;
	color: black!important;
	text-shadow:none!important;
	z-index: 10;
}
@media print {
	.epingle SPAN {
		display: block;
		width: max-content;
		
	}
}
.piqueG, .piqueD {
	width:30%;
	margin-top: 20px; margin-bottom: 10px;
	box-shadow: .3rem .3rem .5rem rgba(0,0,0,.5);
	border:1px solid #8e2d9e;
}
.piqueG {
	margin-right: 20px;
	float:left;
	transform: rotate(5deg);
}
.piqueD {
	margin-left: 20px;
	float:right;
	transform: rotate(-5deg);
}
.piqueG IMG, .piqueD IMG { width:100% }
.piqueG:before, .piqueD:before{ 
	content:url("/img/epingle2.png");
	position:absolute; 	z-index: 1;
	left: 40%; top: -42px;
 }
 
 .selCal {
	text-shadow:0 0 0.2em #FFF;
	font-weight:bold;
	font-size:1.2em;
	/*color:#0AF;*/

	animation-duration: 1s;
	animation-name: selCalFrames;
	animation-iteration-count: infinite;
	transition: none;
}
@keyframes selCalFrames {
	0%		{ color:#000 }
	40%		{ color:#0AF }
	100%	{ color:#000 }
}

/* test debut/fin que le calendrier */
.calDebut, .calFin {
	border:3px solid red!important;
	color:red!important;
	font-weight:bold!important
}
.calDebut::before {
	content:url("/img/arrivee.png");
	position:absolute;
	margin-top: -26px;
	margin-left: -30px;
}
.calFin::before {
	content:url("/img/depart.png");
	position:absolute;
	margin-top: 23px;
	margin-left: -27px;
}


.separation {
	z-index: -1;
	/*position: absolute; left: 0;*/
	width: 100%;
}

#dateDeb, #dateFin {
	flex-direction: row-reverse;
	max-width: 150px;
	/*padding-left: 0;*/
}

/* colonne d'images avec date */
.images-dates SPAN {
	transform: rotate(270deg);
	display: block;
	position: relative;
	left: -48%;
	font-size: 12px;
	color: darkgray;
}
.images-dates IMG {
	position: relative;
	left: 16px;
	margin-top: 3px;
	margin-bottom: 3px;
	max-width: calc(100% - 16px);
}

/* Formulaires */
.btn { margin:3px }
.btn-outline-secondary {
	background-color: white;
}
.btn-check:active+.btn-outline-secondary, .btn-check:checked+.btn-outline-secondary, .btn-outline-secondary.active, .btn-outline-secondary.dropdown-toggle.show, .btn-outline-secondary:active {
	background-color:#8f8;
	color:black;
}
.btn-outline-secondary:hover {
	color: #fff!important;
	background-color: #6c757d!important;
}
.btn-outline-secondary:hover IMG {
	filter: invert(1);
}

#facturation.noDetails .detail { display:none }
#facturation.Details .noDetail { display:none }
/*#facturation TD, #facturation TR.gras TD { font-weight: bold }*/
#facturation TR.gras TD { font-weight: bold }
#facturation.noDetails TD, #facturation TR.nogras TD  { font-weight: normal }
#facturation TR.detail TD, #recapclient TR.detail TD { color:#304; font-weight: normal; border-bottom: hidden; /*padding-left:20px*/ }
#facturation TD, #tableCalcul TD { vertical-align: bottom }
.btnGear {
	margin: 3px 3px 3px 10px;
	width: 38px;
	background-image: url(/icon/gear.svg);
	background-size: 77%;
	background-repeat: no-repeat;
	background-position: center;
	background-color: #ff8;
}
.btnTel, .btnSms, .btnMail {
	width:38px; margin:3px;
	background-image:url(/img/btn-tel.png);
	background-size:cover
}
.btnTel { background-image:url(/img/btn-tel.png) }
.btnMail { background-image:url(/img/btn-mail.png) }
.btnSms { background-image:url(/img/btn-sms.png) }

/* pages pour impression (cf print.css) */

.page { background-position: center center; background-repeat: no-repeat }
.page ~ .page { border-top: 1px dashed #a8f }
.pageBas { position:absolute; right:0; display:none; text-align: right }
.pageBas IMG { width:193px; position:relative; top:10px }
.pageBas NOBR { position: absolute; top: -10px; right: 200%; color: red; font-size: .9em }
.pageBas NOBR>DIV { position: absolute; top: -40px; right: 0; }

.tSepar { border-bottom:4px solid #9e3dae!important }

.page { pointer-events: none; margin:10px }

@media (max-width:639px) {
	.annexes TD { display:table; margin:5px; width:auto }
}
.annexe-txt1, .annexe-txt2  { display: inline-block }
.annexe-txt1:nth-child(2), .annexe-txt2:nth-child(2)  { position:relative; top:20px }