@media (max-width: 50cm) { 

.accordion {
  margin: auto;
  padding: 0;
  border: 2px solid hsl(0deg 0% 52%);
  border-radius: 7px;
  max-width: 60em;
  background-color: #ffe;
}

.accordion h3 {
  margin: 0;
  padding: 0;
}

.accordion:focus-within {
/*  border-color: hsl(216deg 94% 43%);*/
}

.accordion:focus-within h3 {
/*  background-color: hsl(0deg 0% 97%);*/
}

.accordion > * + * {
  border-top: 1px solid hsl(0deg 0% 52%);
}

.accordion-trigger {
  background: hsla(56.8, 74.5%, 80%, 0.48);
  color: hsla(0, 0%, 0%, 0.65);
  display: block;
  font-size: 1rem;
  font-weight: normal;
  margin: 0;
  padding: 1em 1.5em;
  position: relative;
  text-align: left;
  width: 100%;
  outline: none;
}

.accordion-trigger:focus {
/*  background: hsla(0, 0%, 75.7%, 0.41);*/
}

.accordion-trigger:focus {
/*  outline: 4px solid transparent;*/
}

.accordion > *:first-child .accordion-trigger,
.accordion > *:first-child {
  border-radius: 5px 5px 0 0;
}

.accordion > *:last-child .accordion-trigger,
.accordion > *:last-child {
  border-radius: 0 0 5px 5px;
}

button {
  border-style: none;
}

.accordion button::-moz-focus-inner {
  border: 0;
}

.accordion-title {
  display: block;
  pointer-events: none;
  border: transparent 2px solid;
  border-radius: 5px;
  padding: 0.25em;
  outline: none;
}

.accordion-trigger:focus .accordion-title {
/*  border-color: hsl(216deg 94% 43%);*/
}

.accordion-icon {
  border: solid currentcolor;
  border-width: 0 2px 2px 0;
  height: 0.5rem;
  pointer-events: none;
  position: absolute;
  right: 2em;
  top: 50%;
  transform: translateY(-60%) rotate(45deg);
  width: 0.5rem;
}

.accordion-trigger:focus .accordion-icon,
.accordion-trigger:hover .accordion-icon {
/*  border-color: hsl(216deg 94% 43%);*/
}

.accordion-trigger[aria-expanded="true"] .accordion-icon {
  transform: translateY(-50%) rotate(-135deg);
}

.accordion-panel {
  margin: 0;
  padding: 1em 1.5em;
}

/* For Edge bug https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/4806035/ */
.accordion-panel[hidden] {
  display: none;
}

/* boutons mode CE / Individuels */
body {
	background-color: beige;
	font-family: "Open Sans", sans-serif;
	padding: 0em 0em 0em 0em;
	margin-top: 0em;
}

header {
	padding: 0em 0em 1em 0em;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: row;
	flex-flow: row wrap;
}

.accordion-add {
	border-radius: 10px;
	padding: 0.5em 1.5em;
	font-weight: bold;
	background-color: #8fa8e3;
	color: #f4f6fb;
	/* border: 2px #242a39 solid; */
	margin: 0em auto;
	min-width: 25%;
	max-width: 30%;
	display: flex;
	flex-direction: row;
	justify-content: center;
}

.accordion-add span {
	border: none;
	flex: 1 90%;
}

.accordion-add img {
	border: none;
	flex: 2 10%;
	width: 1.5em;
	height: 1.5em;
	padding: 0em;
}

#button_mode_insc {
}

#button_mode_insc span {
	width: fit-content;
}

.button-mode-ce {
	border-radius: 0px 10px 10px 0px;
	background-color: #fe4430;
	color: #ffffffe0;
}

.button-mode-ind {
	border-radius: 10px 0px 0px 10px;
	background-color: #56b521;
	color: #ffffffe0;
}

.button-mode-ce, .button-mode-ind {
	padding: 0.5em 1.5em;
	font-weight: bold;
	border: 2px #9b9b9b solid;s
	margin: 0em 0em;
	min-width: fit-content;
	max-width: 11%;
}
.button-mode-off {
	background-color: #9b9b9b;
	color: #e0e0e0;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

input {
  border: 1px solid hsl(0deg 0% 42%);
  border-radius: 0.3em;
  display: block;
  font-size: inherit;
  padding: 0.3em 0.5em;
}

.accordion-num {
	float: right;
	margin: 0 2em 0 0;
	font-size: 0.7em;
	color: #00000060;
}

.accordion-id {
	display: none;
}

/* ================  Inscriptions formulaire ================ */ 
.mode_ce {
	background-color: #ffdede;			
}

.hide {
	display: none;
}
/* ================  Inscriptions formulaire ================ */ 
fieldset div {
	clear: both;
	width: 95%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: baseline;
	margin: 0.5em;
}

dt {
	flex: 0.4;
	/*width: 28%;*/
	text-align: right;
	vertical-align: middle;
	padding-right: 1em;
	/*border: 1px red solid;*/
	display: table-cell;
	/* font-size: 1.2em; */
}

dd {
	flex: 0.6;
	/*width: 45%;*/
	display: table-cell;
	vertical-align: middle;
}

dd * {
	display: inline-block;
	vertical-align: middle;
	margin-right: 0.5em;
}

.list_file {
	display: grid;
	grid-template-columns: min-content 1fr;
	/*border-top: #0202025e 1px solid;*/
	/*border-bottom: #0202025e 1px solid;*/
	padding: 0.3em 0em;
}

.list_file_info {
	grid-column: 1 / 3;
	grid-row: 1;
}

.list_file_input {
	grid-column: 1;
	grid-row: 2;
	width: max-content;
}

.list_file_list {
	grid-column: 2;
	grid-row: 2;
}

.usercomment,
.orgcomment {
	flex-direction: column;
}

.usercomment textarea,
.orgcomment textarea {
	width: 90%;
	height: 3em;
	margin: 0em auto;
}

.coureur_action_btn {
	width: 80%;
	vertical-align: middle;
	display: inline;
	background-color: #7ad77a;
	color: #71717A;
	font-weight: bold;
	padding: 0.3em 1em;
	border-radius: 0.6em;
	font-size: 1em;
	max-width: 90%;
	min-width: min-content;
}

.coureur_action:hover,
.accordion-add:hover {
	box-shadow: 2px 2px 3px #0000006b;
	cursor: pointer;
}

.coureur_action {
	width: 1.5em;
	height: 1.5em;
	float: right;
	cursor: pointer;
	padding: 0.1em;
}

.coureur_action > img {
	flex: 2 10%;
	box-shadow: none;
}

.coureur_action > span {
	flex: 1 90%;
}

.panier_del_div {
	width: min-content;
	min-width: min-content;
	display: block;
	position: absolute;
}

.panier_del {
	width: 1.5em;
	height: 1.5em;
	float: right;
	cursor: pointer;
	padding: 0.1em;
}

.panier_del > img {
	flex: 2 10%;
	box-shadow: none;
}

#div_facture .facture_div span {
	padding-right: 1em;
}

#div_facture .facture_div textarea {
	width : 25em;
	height : 5em;
}

#div_facture input[type="checkbox"] {
	margin-right : 0.6em;
}

.flex_column {
	flex-direction: column;
}

.flex_row {
	flex-direction: row;
}

/* ================  Enregistrement ================ */ 
.div_save_pay {
	flex-direction: row;
}

.div_save_pay .ou {
	width: fit-content;
	font-size: 1.3em;
	margin: 10px 0px 0px 0px;
}

.div_save_pay .popup {
	color: #090808bf;
}

#div_save_insc,
#div_pay_insc {
	width: 100%;
}

#div_save_insc > button,
#div_pay_insc > button {
	width: 90%;
	font-size: 1.1em;
	color: #fffe;
	padding: 0em;
	border-radius: 5em;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

#div_save_insc > button {
	background-color: #40bb13;
}

#div_pay_insc > button {
	background-color: #136cbb;
}

#div_save_insc span,
#div_pay_insc span {
	display: block;
	padding: 0em 1em;
	text-align: center;
}

#div_save_insc span span,
#div_pay_insc span span{
	color: #ffffffb5;
	font-size: 0.8em;
}

#div_save_insc img,
#div_pay_insc img {
	width: 2.3em;
	height: 2.3em;
	padding: 0.1em;
	display: inline;
	float: none;
	vertical-align: middle;
}

#div_save_insc > button:hover,
#div_pay_insc > button:hover {
	box-shadow: 2px 2px 3px #0000006b;
	cursor: pointer;
}

/* ================  paiement  ================ */ 
#div_pay_insc .prix_panier {
	display: inline-block;
	font-size: 1em;
	color: #fffe;
}

.div_pay_tpe {
	width: 0em;
	height: 0em;
	left: 0px;
	position: fixed;
	top: 0px;
	border: none;
	color: #fff0;
}

.div_pay_tpe_mobile {
	width: 100%;
	height: 100%;
	left: 0px;
	position: fixed;
	top: 0px;
	border: none;
	color: #f00;
	display: block;
	text-align: center;
	background-color: #0000007a;
}

.div_pay_tpe_mobile input[type="submit"] {
	margin: 3em auto;
}
 
/* ================  formulaire fetch  ================ */ 
.fetchpanier {
	display: flex;
	flex-direction: row;
	justify-content: center;
	margin: 0em 1em 1em 1em;
	width: 100%;
	background-color: #64caa7aa;
	border-radius: 0em 0em 0.6em 0.6em;
}

.fetchpanier > span,
.fetchpanier > h2 {
	display: block;
	margin: 0em 0.5em 0em 1em;
}

.fetchpanier > * {
	font-size: 1em;
	display: block;
	padding: 0.1em;
}

.fetchaction {
    margin-left: 1em;
    font-weight: initial;
    font-size: 0.9em;
    padding: 0em 0.6em;
    background-color: #00ae73ed;
    color: #fffffff5;
	border-radius: 0em;
	border: #00ae73ed;
	cursor: pointer;
}

.fetchaction:hover {
	box-shadow: 2px 2px 3px #0000006b;
}

#msgBox, #mailBox {
    top: 2em;
    border: 3px solid #b78347;
    background-color: #ffe2c0;
    box-shadow: 2px 2px 3px #0000006b;
    padding: 1.5em 0.6em 0.4em 0.6em;
  }

#mailBox {
	width: 50%;
	height: auto;
}

#msgBox button {
	background-color: #deb887b8;
	color: black;
	padding: 0.2em 0.6em;
	margin: 0em 1em 0em 0em;
	border-radius: 0em 0em 0.6em 0.0em;
	top: 0em;
	left: 0em;
	position: absolute;
}

#mailBox button {
	background-color: #deb887b8;
	color: black;
	padding: 0.2em 0.6em;
	margin: 0em 1em 0em 0em;
	border-radius: 0.6em;
}

#msgBox p, #mailBox p {
	padding: 0.2em 0.6em;
	margin: 0em;
}

/* ================  bandeau  ================ */ 
#bandeau {
  margin: 0em;
  padding: 0em;
  text-align: center;
  flex: 100%;
}

#bandeau h1 {
  margin: 0em;
  padding: 0em;
  text-align: center;
  letter-spacing: 0.4ch;
  font-size: 4vw;
}

/* ================  Panier vide  ================ */ 
.msgPanierVide {
	text-align: center;
	font-size: 1.3em;
	box-shadow: -1px 10px 12px #000000cf;
	padding: 0.3em;
}

.xpublic {
/*	display: none;*/
}

} /* media 20 cm */

@media (max-width: 7cm) { 
.accordion-trigger {
	font-size: 2vw;
}

} /* media 3cm */

@media (min-width:3cm)  { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:6.5cm)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:14cm)  { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:20cm)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }

@media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px)  { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

/*
@media (min-width: 320px) { 
  body::before {
    content: "media query (320px) fired";
    font-weight: bold;
    display: block;
    text-align: center;
    background: rgba(255, 255, 0, 0.9);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99;
  }
} 
@media (min-width: 5cm) { 
  body::before {
    content: "media query (5cm) fired";
  }
} 
@media (min-width: 10cm) { 
  body::before {
    content: "media query (10cm) fired";
  }
} 
@media (min-width: 15cm) { 
  body::before {
    content: "media query (15cm) fired";
  }
} 
@media (min-width: 20cm) { 
  body::before {
    content: "media query (20cm) fired";
  }
} 
/**/