* {
box-sizing: border-box;
font-size:1em;

}


body{
  font-family: "Lucida Sans", sans-serif;
text-align:justify;
word-wrap: break-word;
font-size:22px;
line-height:1.6;

}

.cocoon{
display:none;
}

.grid-container {
  display: grid;
  grid-template-columns: 0fr 1fr 0fr;
  gap: 10px;
  background-color: white;
}

.gridT {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 10px;
  background-color: white;
} 

.flex-container {
  display: flex;
  flex-flow: row wrap;
  outline: solid 1px DodgerBlue;
  gap:40px;
}

img {
  width: 100%;
  /*width: 60%; display: block; margin: auto;*/
}


@media (min-width: 768px) {
.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}
}

.rose{
font-family:monospace;
}

.bip{
color:orange;
}

.blue  {
  font-style: italic;
}

.tiers1{
margin-top:20px;
}

.tiers2{
margin-bottom:10px;
background:#fbeaee;
padding:10px;
font-size:20px;
}

.middle{
isplay:none;
  text-align:center;
  color:range;
}



#footer{
	
margin-top:20px;
text-align:center;
color:white;
background:#375493;
padding: 10px 0;
width:100%;
clear:both;
osition: fixed;
bottom:0;
}
	

#header{

background:#F9F9F9;
padding:5px;
width:100%;
osition: fixed;

}	



.name{
font-weight:900;
font-size:1.4em;
}

.eu{
color:#ff7b25;

}

.motto{
text-transform: uppercase;
	}

table {
  border-collapse: collapse;
  border-spacing: 0;
  idth: 100%;
  border: 1px solid #ddd;
}

th, td {
  border: 1px solid #ddd;
  text-align: center;
  padding: 16px;
}

tr:nth-child(even) {
  ackground-color: #f2f2f2;
}

.rien th, .rien td{
border:  none;
order-style:dotted;
}

.rien{
width:100%;
}

.turtle{
color:purple;
}

table.zut{
table-layout:fixed;
white-space: nowrap;
min-width:260px;
text-align:left;
}


.zuta td, .zuta th{
adding:10px;
vertical-align:top;
border:1px solid #ccc;
padding:5px;
color:red;
}



.milieu{
text-align:center;
vertical-align:top;
}

.zuta span{
  verflow: auto;
isplay:inline-block;
order:1px solid lime;

}

/*accordéon*/

.accordion {
background-color:#f1eff5;/*#eee;*/
olor: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
ont-size: 15px;
transition: 0.4s;
border: 1px solid white;
border-width:1px 0;
}

.activ, .accordion:hover {
background-color:#e3dfec;#b9b0cf; /*#ccc;*/
}

.accordion:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}

.activ:after {
content: "\2212";
}

.panel {
padding: 0 0px;
background-color:white;#fff0e6;#fff5e6;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;

}



/*fin accordéon*/