@media only screen and (max-width: 767px) {
  .centrage {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }

  .contenu {
    margin: 0 !important;
    padding: 10px !important;
    width: 100% !important;
  }

  #cadre1 {
    width: 100% !important;
  }

  #article > div {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
  }

  #article > div:first-of-type {
    text-align: center !important;
  }

  #article > div:first-of-type img {
    height: auto !important;
    max-width: 100% !important;
  }

  #article p {
    font-size: 1em !important;
  }
  
 figure {
    max-width: 80vw!important;
    /* display: block!important; */
  }  
}


 figure {
    max-width: 80vw!important;
  display: flex!important;
  flex-flow: column!important;
  align-items: center!important;
  border: thin #c0c0c0 solid!important;
  padding: 5px!important;
  margin: auto!important;
  background: #222!important;
    /* display: block!important; */
  }

figure img {
  max-width: 100%!important;
  height: auto!important;
  /* margin-right: 10px!important; */
  margin: auto!important;
}

.retour-accueil {
  background-color: #ECF0F1;
  padding: 10px;
  margin-bottom: 20px;
}

.bouton-retour {
  background-color: #7dd0f4;
  color: black;
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 1em;
  transition: background-color 0.3s ease-in-out;
}

.bouton-retour:hover {
  background-color: #519be2;
}

figure figcaption {
  background-color: #222!important;
  color: #fff!important;
  font: italic smaller sans-serif!important;
  padding: 3px!important;
  text-align: center!important;
  width: 100%!important;
}

.contenu li{
	list-style : outside;
	margin-bottom:1em;
	line-height:1.5em;
	float:none;
	width:100%;
	height: max-content;
}
h3{font-weight:bold;font-size:1em;font-family:Arial,Calibri;max-width: max-content;float:left;color:#1771b9;margin-left:30px;margin-bottom:1em;}
h3 a{color:#1771b9}
h3 a:visited{color:#1771b9}

@media only screen and (max-width: 320px){
	#cadre1{width:90vw;}
	#cadretitre{width:90vw;}
	#article{width:90%;margin:auto;}
	.suiteimage{}
	.photoboites{width:100%;}
	#leslogos{width:90vw;margin:auto;}		
	.imagelogo{width:35vw;}	
	#titre{font-size:2em;}
	.contenu h2{font-size:1.2em;}
	#contenanttitre{width:95vw;}		
	.imageampoule{height:10vw;left:6.6vw;position:absolute;}
	.zoneampoule{height:13vw;;width:33%;float:left;position:relative;}
	.quellefigure{max-width: 112px;}
	.quellevideo{width:100px;}	
	.quellefig{width:100px;}
	.videodimension{width:112px;height:63px;padding-right:2px;}	
}
@media only screen and (min-width: 321px) and (max-width: 799px){
	#cadre1{width:90vw;}
	#cadretitre{width:90vw;}
	#article{width:90%;margin:auto;}
	.suiteimage{}
	.photoboites{width:100%;}
	#leslogos{width:90vw;margin:auto;}	
	.imagelogo{width:35vw;}	
	#titre{font-size:2em;}
	.contenu h2{font-size:1.2em;}
	#contenanttitre{width:95vw;}		
	.imageampoule{height:10vw;left:6.6vw;position:absolute;}	
	.zoneampoule{height:13vw;;width:33%;float:left;position:relative;}	
	.quellefigure{max-width: 280px;}	
	.quellevideo{width:250px;}
	.quellefig{width:200px;}
	.videodimension{width:280px;height:157.5px;padding-right:2px;}
}
@media only screen and (min-width: 800px)  and (max-width: 1300px){
	#cadre1{width:60vw;}
	#cadretitre{width:60vw;}
	#article{width:90%;margin:auto;}
	.suiteimage{}
	.photoboites{width:100%;}
	#leslogos{width:60vw;margin:auto;}	
	.imagelogo{width:25vw;}
	#titre{font-size:2em;}
	.contenu h2{font-size:1.2em;}
	#contenanttitre{width:80vw;}		
	.imageampoule{height:6vw;left:5vw;position:absolute;}	
	.zoneampoule{height:9vw;width:33%;float:left;position:relative;}	
	.quellefigure{max-width: 336px;}
	.quellevideo{width: 500px; height: 300px;}
	.quellefig{width:200px;}
	.videodimension{width:336px;height:189px;padding-right:2px;}	
}
@media only screen and (min-width: 1301px)  and (max-width: 1600px){
	#cadre1{width:50vw;}
	#cadretitre{width:50vw;}
	#article{width:90%;margin:auto;}
	.suiteimage{}	
	.photoboites{width:100%;}
	#leslogos{width:50vw;margin:auto;}
	.imagelogo{width:231px;}
	#titre{font-size:2em;}
	.contenu h2{font-size:1.2em;}
	#contenanttitre{width:80vw;}	
	.imageampoule{height:5vw;left:3.3vw;position:absolute;}
	.zoneampoule{height:8vw;width:33%;float:left;position:relative;}	
	.quellefigure{max-width: 560px;}
	.quellevideo{width:650px;height:390px}	
	.quellefig{width:350px;}
	.videodimension{width:560px;height:315px;padding-right:2px;}	
}
@media only screen and (min-width: 1601px){
	#cadre1{width:40vw;}
	#cadretitre{width:40vw;}
	#article{width:90%;margin:auto;}
	.suiteimage{}
	.photoboites{width:100%;}
	#leslogos{width:40vw;margin:auto;}
	.imagelogo{width:231px;}
	#titre{font-size:2em;}
	.contenu h2{font-size:1.2em;}
	#contenanttitre{width:50vw;}
	.imageampoule{height:5vw;left:3.3vw;position:absolute;}	
	.zoneampoule{height:8vw;width:33%;float:left;position:relative;}
	.quellefigure{max-width: 560px;}
	.quellevideo{width:350px;}
	.quellefig{width:350px;}
	.videodimension{width:560px;height:315px;padding-right:2px;}
}