@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300&display=swap');

body {
  width: 412px; /* essai limitation largeur*/
  background-color: #0A2344;
  font-family: 'rubik', sans-serif;
}
@media screen and (orientation:portrait)  { body { width: 412px;} }
@media screen and (orientation:landscape) { body { width: 824px;} }

h1, .title, .sub-title {
	text-align: left;
	margin: 0 0 5px 0;
	color: white;
}
.accordion .container .content .tableau {
	width: fit;
	border-width: 5px;
	border-collapse: collapse;
	border: 1px solid #ddd;
	font-weight: normal;
	
	  padding: 0.3em;
  background: gold;
  border: groove 2px gold;
  column-rule: inset 2px gold;
  column-count: 3;
  text-align: center;
}
.accordion .container .content .tableau .tr {
	width: fit;
	font-weight: normal;
	border: 1px solid #ddd;
	column-rule: inherit;
}
.accordion .container .content .tableau .th {
	width: fit;
	border-width: 5px;
	border: 1px solid #ddd;
/* 	text-align: right;*/
 	font-weight: normal;
	column-rule: inherit;
	
}
.title  {
	font-size: 30px;
}
.sub-title {
	padding: 0px 0px 5px 0px;	
	font-size: 20px;
}
.ref {
	vertical-align : super;
	font-size: 10px;
 }
 .comment {
	font-size: 10px;
 }
.accordion .container .content .normal {
	padding: 0 0 0 0;
}
.accordion .container .content .texte {
	padding: 0 0 0 0;
}
.accordion .container .content .retraitli {
	margin: 0 0 0 10px;
	padding: 0 0 0 +2.5ch;
	text-indent: -2.5ch;/*  each-line; */
}
.accordion .container .content .retraitstep {
	padding: 0 0 0 +5.5ch;
	text-indent: -5.5ch;/*  each-line; */
}
hr {
  width: 100%;
}
.accordion, .accordionf, .sub-title {
  margin: 0px 0 0 10px;
}
 .accordion, .accordionf {
  color: black;
  background-color: white;
  padding: 5px 10px 10px 10px;
}
.accordion, .accordionf, .sub-title {
  width: 90%;
}
.rowf {
	display: flex;
	flex-direction: row;
}
.accordion .container .label , .accordionf .containerf .labelf {
	font-size: 20px;
	font-weight: bold;
	background-color: white;
	color: black;
	cursor: pointer;
	display: block;
	margin: 5px 0 10px 0;
	text-align: left; /* top */
}
.accordion .label::before {
  content: '-';
  color: red;
  position: absolute;
  top: 50%; /* texte ? */
  right: -5px;
  font-size: 30px;
  transform: translateY(-50%);
}
.accordion .content , .accordionf .contentf , .contentf {
	position:		 relative;
	box-sizing: border-box;
	transition:	 0.4s;
  	display: inline-block;
	font-weight: normal;
 }
.accordion .container .content {
	display: inline-block;
 }
.accordion .container.active .content {
	display: none;
}
.accordion .container.active .label::before {
	content: '+';
	font-size: 30px;
}
.accordionf, .columnf {
	display: inline-block;
}
.row:after {/* Clear floats after the columns */
	content: "";
	clear: both;
}
.row, .containerf {
	display: inline-block;
	font-size:	 10px;
	width: 100%;
}
.column , .columnf { /* Create equal columns that floats next to each other */
	background:    white;
	font-size:	 15px;
	text-align:  left; /* justify; */
	float: left;
	margin: 0 10px 0 10px;
	padding: 0 10px 0 10px;
}
.accordion .containerf .labelf .contentf .rowf .column2 {
	/* margin: 10px 10px 10px 10px; */
	padding: 0px 0px 0px 5px;
}
/*images*/
img.un, img.deux, img.trois, img.quatre, img.small , .column img.small {
		display: block;

	max-height: 20%;
	text-align: center;
	margin: auto; /* ne marche qu'avec block */
	/* display:flex; */
	padding: 10px 0px 10px 0px;
	vertical-align: top;
	horizontal-align: center; /*essai*/
	object-fit: fill;
}
img.essai.active {
	max-width: 100%;
}
img.ungros {
	max-width: 100%;
	max-height: 40%;
}
img.un {
	max-width: 80%;
}	
img.deux {
	max-width: 48%;
}
img.trois, img.essai {
	max-width: 27%;
}
img.quatre {
	max-width: 20%;
}
img.partners {
	max-height: 20px;
	max-width: 100%;
}
img.small , .column span img.small {
	max-height: 20px;
}
/*couleurs*/
a.textevert {
	/* color: green; */
	color: #0A2344
}
a.textebleu {
	color: bleu
	}
a.texterouge {
	color: red
	}
a.textejaune {
color: yellow
}