/* mise en forme commune à toutes les résolutions avec version TELEPHONE POSITION PORTRAIT EN PREMIER, sans media query  (PARTIE 1) */



/* DEFINITION DES ZONES POUR LA MISE EN PAGE EN GRID AREAS */

#blocduhaut {
	grid-area: zoneduhaut;
}
#logo {
	grid-area: logoinsitu;
}
nav {
	grid-area: liensnavigation;
}
#slogan {
	grid-area: sloganinsitu
}
header {
	grid-area: phototeaseravectitre;
}
#probleme {
	grid-area: exposeprobleme;
}
#solution {
	grid-area: exposesolution;
}
#renvoivideo {
    grid-area: infovideo; /* section generale incluant txt et ico.  Utile ou pas ? */
}
#renvoivideotxt {
    grid-area: infovideoTXT;
}
#renvoivideoico {
    grid-area: infovideoICO;
}
#avantleprojet {
	grid-area: photosavant;
}
#commentaireavantleprojet {
	grid-area: commentavant;
}
#avantleprojet2 {
	grid-area: photosavant2;
}
#commentaireavantleprojet2 {
	grid-area: commentavant2;
}
#apresleprojet {
	grid-area: photosapres;
}
#commentaireapresleprojet {
	grid-area: commentapres;
}
#apresleprojet2 {
	grid-area: photosapres2;
}
#detailsprojet {
	grid-area: photosdetails;
}
#detailsprojet2 {
	grid-area: photosdetails2;
} 
#detailsprojet2B {
	grid-area: photosdetails2B;
} 
#detailsprojet3 {
    grid-area: photosdetails3;
}
#commentairedetailsprojet {
	grid-area: commentdetails;
}
#commentairedetailsprojet2 {
	grid-area: commentdetails2;
}
#commentairedetailsprojet2B {
	grid-area: commentdetails2B;
}
#commentairedetailsprojet3 {
    grid-area: commentdetails3;
}
#suiteapresprojet {
	grid-area: suitephotosapres;
}
#suiteapresprojet2 {
	grid-area: suitephotosapres2;
}
#suiteapresprojet3 {
	grid-area: suitephotosapres3;
}
#suiteapresprojet4 {
	grid-area: suitephotosapres4;
}
#suiteapresprojet5 {
	grid-area: suitephotosapres5;
}
#suiteapresprojet6 {
	grid-area: suitephotosapres6;
}
#suiteapresprojet7 {
	grid-area: suitephotosapres7;
}
#commentairesuiteprojet {
	grid-area: commentsuite;
}
#commentairesuiteprojet2 {
	grid-area: commentsuite2;
}
#commentairesuiteprojet3 {
	grid-area: commentsuite3;
}
#commentairesuiteprojet4 {
	grid-area: commentsuite4;
}
#commentairesuiteprojet5 {
	grid-area: commentsuite5;
}
#commentairesuiteprojet6 {
	grid-area: commentsuite6;
}
#commentairesuiteprojet7 {
	grid-area: commentsuite7;
}
#videorealisationTXT {
	grid-area: videoapresTXT;
}
#videorealisationVID {
	grid-area: videoapresVID;
}
footer {
	grid-area: piedpage;
}
/* FIN DES NOMS ATTRIBUES POUR LES GRIDS AREAS */




/* MISE EN PAGE GENERALE AVEC PRIORITE TELEPHONE */

body {
	margin: 0;
	padding: 0px;
	background-image: url("../images/CUIR-fond-neutre.jpg");
	background-color: #D5D5D5;
	background-repeat: repeat;
	background-attachment: fixed;
/* on utilise le motif cuir, version gris neutre, avec répétition du motif*/
}
#blocduhaut {
/* rappel : le #blocduhaut sert uniquement à intégrer la photo teaser sur la zone logo+nav+titres */
/* tout est dans un CSS séparé - Un CSS par page de réalisation */
width: 90vw;
margin-left: auto;
margin-right: auto;
 }
#logo {
	background-color: transparent;
}
#imagelogo {
	margin-left: 2vw;
	width: 40vw;
	height: auto;
}
header {
}
#probleme {
	margin: 1vw;
	margin-top: 40vw;/* grand margin uniquement pour téléphone */
	text-align: justify;
	border: 0.2vw solid black;
	padding: 1vw;
}
#solution {
	margin: 1vw;
	text-align: justify;
	border: 0.2vw solid black;
	padding: 1vw;
}
#renvoivideo {
    border: 0.2vw solid black;
	padding: 1vw;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    text-align: justify;
}
#renvoivideoico img {
    box-shadow: 15px 5px 15px rgba(0, 0, 0, 0.7); 
}
#renvoivideoico {
	width: 90vw;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    text-align: justify;
}
.icone1videodispo {
    width: 60vw;
    height: 35vw;
    margin: auto;
}
.icone2videodispo {
    width: 30vw;
    height: 17vw;
    margin-left: 6vw;
}
.icone3videodispo {
    width: 24vw;
    height: 14vw;
    margin-left: 2vw;
}
.icone4videodispo {
    width: 35vw;
    height: 20vw;
    margin-left: 0vw;
    margin-top: 4vw;
}
#avantleprojet, #avantleprojet2 {
	background-color: transparent;
	margin-top: 2vw;
	display: flex;
	flex-wrap: nowrap; /*pas de passage à la ligne avec les images */
	justify-content: space-between;
	width: 90vw;
	overflow: hidden;
}
#avantleprojet img, #avantleprojet2 img {
	width: 28vw;
                                border: 2px solid white;  /* test pour encadrement noir - A SURVEILLER ....................... */
}
#commentaireavantleprojet, #commentaireavantleprojet2 {
	text-align: justify;
}
#apresleprojet, #apresleprojet2, #suiteapresprojet, #suiteapresprojet2, #suiteapresprojet3, #suiteapresprojet4, #suiteapresprojet5, #suiteapresprojet6, #suiteapresprojet7 {
	background-color: transparent;
	margin-top: 2vw;
	display: flex;
	flex-wrap: wrap; /*passage à la ligne pour téléphone */
	justify-content: space-between;
	width: 90vw;
}
#apresleprojet img, #apresleprojet2 img, #suiteapresprojet img, #suiteapresprojet2 img, #suiteapresprojet3 img, #suiteapresprojet4 img, #suiteapresprojet5 img, #suiteapresprojet6 img, #suiteapresprojet7 img {
	width: 90vw; /* images large pour le format téléphone */
                            margin-top: 4vw; /* test pour espacement - A SURVEILLER ......................   */
                            border: 4px solid black;  /* test pour encadrement noir - A SURVEILLER ....................... */
}
#commentaireapresleprojet, #commentairesuiteprojet, #commentairesuiteprojet2, #commentairesuiteprojet3, #commentairesuiteprojet4, #commentairesuiteprojet5, #commentairesuiteprojet6, #commentairesuiteprojet7 {
	font-family: lato;
	text-align: justify;
}
#detailsprojet, #detailsprojet2, #detailsprojet2B, #detailsprojet3 { 
	background-color: transparent;
	margin-top: 2vw;
	display: flex;
	flex-wrap:wrap; /*passage à la ligne avec les images sur téléphone (<768px)*/
	justify-content: space-between;
	width: 80vw;
}
#detailsprojet img, #detailsprojet2 img, #detailsprojet2B img, #detailsprojet3 img {
	width: 30vw;
	margin: 2vw;
                                border: 4px solid black;  /* test pour encadrement noir - A SURVEILLER ....................... */
}
#commentairedetailsprojet, #commentairedetailsprojet2, #commentairedetailsprojet3 {
	text-align: justify;
}
#videorealisationTXT {
	width: 90vw;
}
#videorealisationVID video {
	width: 90vw;
	margin:auto;
    margin-bottom: 4vw;
}
footer {
    margin: auto;
}
#retour-realisations {
	width: 32vw;
	background-color: white;
	border-radius: 2vw;
	font-family: lato;
	margin: auto;
	margin-top: 2vw;
	margin-bottom: 4vw;
}
#retour-realisations a {
	padding: 2vw;
	text-decoration: none;
	display: block; /* pour zone cliquable */
	width:100%;/* pour zone cliquable */
	height:100%;/* pour zone cliquable */
	text-align: center;
    margin: auto;
	padding-left: 0vw; /* ajout étrange que j'ai dû faire -----------------------------------------------------  */
}
#retour-realisations:hover {
	background-color: rgba(0,0,0,0.2);
	transition: 0.5s;
}
h2, h3, p {
	padding : 10px;
}


/* Et maintenant, la mise en page téléphone mobile position verticale AVEC MENU BURGER */


#conteneurgeneral {
	/* grille de mise en page pour toute la page, depuis header jusqu'à footer inclus */
	display: grid;
	grid-template-columns: 45vw 45vw; /* on prévoit deux colonnes d'égale longueur */
	grid-template-areas:
			"zoneduhaut zoneduhaut"	
			"logoinsitu liensnavigation"
			"phototeaseravectitre phototeaseravectitre"
			"exposeprobleme exposeprobleme"
			"exposesolution exposesolution"
            "infovideo infovideo"
			"photosavant photosavant"
			"commentavant commentavant"
			"photosavant2 photosavant2"
			"commentavant2 commentavant2"
			"photosapres photoapres"
			"commentapres commentapres"
            "photosapres2 photosapres2"
			"photosdetails photosdetails"
			"commentdetails commentdetails"
			"suitephotosapres suitephotosapres"
			"commentsuite commentsuite"
        
			"suitephotosapres2 suitephotosapres2"
			"commentsuite2 commentsuite2"
		
            "photosdetails2 photosdetails2"
			"commentdetails2 commentdetails2"


			"suitephotosapres3 suitephotosapres3"
			"commentsuite3 commentsuite3"
			"suitephotosapres4 suitephotosapres4"
			"commentsuite4 commentsuite4"
			"suitephotosapres5 suitephotosapres5"
			"commentsuite5 commentsuite5"
 			"suitephotosapres6 suitephotosapres6"
			"commentsuite6 commentsuite6"

        
            "photosdetails3 photosdetails3"
			"commentdetails3 commentdetails3"
        

            "suitephotosapres7 suitephotosapres7"
			"commentsuite7 commentsuite7"        
        
        
			"videoapresTXT videoapresTXT"
			"videoapresVID videoapresVID"
			"piedpage piedpage";
	gap: 1vw; /*espace entre les zones */
	/* mise en forme */
	width: 95%;
	margin: auto;
}
/* fin de la partie conteneurgeneral pour les mobiles*/






/*  -- Ajout d"un menu de navigation "burger" pour les téléphone mobiles --- */

.menu {
  /* on garde le menu fixe même quand on scrolle */
  position: fixed; /* il faudra passer en relative quand on veut supprimer le menu burger */
}
#hamburger {
  /* on n'affiche pas la checkbox (avec liste des liens) au départ*/
  display: none;
}
#hamburger-logo {
  	font-size: 1em;
	cursor: pointer;  /* le curseur devient un pointeur */
  	background: rgba(255, 255, 255, 0.95);
  	width: 44vw;  
  	display: block;
 	 color: black; /* le rendre transparent "none" quand on veut supprimer menu burger */
  /* on affiche l'icone bien à droite pour toujours la voir */
  	text-align: right;
  	transform: translateX(-40vw); /* on réduit au maximum la zone du burger quand elle est en position "fermée"  */
 	 padding: 3vw; /*  1vw pour les formats autres que téléphone portrait */
}
nav {  /* attention il faut changer la partie nav pour supprimer le menu burger et faire réapparaître les liens de navigation de façon normale */
 	list-style: none;
	display: flex;  /* display à mettre en inline quand on veut supprimer menu burger */
 	flex-direction: column;
 	background: rgba(255, 255, 255, 0.95);
 	overflow: hidden; /* on peut garder ça dans tous les cas */
 	width: 46vw;
	padding-bottom: 5vw; /* à mettre à 0 pour supprimer menu burger */
  /* Pour que les liens soient "rangés" par défaut */
  	transform: translateX(-55vw); /* translation à mettre à 0 quand on veut supprimer menu burger */
}
#hamburger-logo,nav {
  /* Pour qu'il y ait une animation */
  transition: 1s;
}
/* Lorsque #hamburger est coché, le #hamburger-logo et le nav qui sont dans le même parent changent de propriété */
#hamburger:checked ~ #hamburger-logo,
#hamburger:checked ~ nav {
  /* Changement de la position pour afficher les menus */
  transform: translate(3vw);
}
nav a {
 	text-decoration: none;
 	padding: 2vw; /* à mettre à zéro pour supprimer menu burger */
}
nav ul li {
    list-style: none;
    text-align: left;
	padding-top: 12vw;  /* 6vw pour formats autres que téléphone portrait */
}
/*  -- Fin de l'ajout du "burger" pour les téléphone mobiles --- */

/* Correction écran inactif sous la zone du menu */
/* on retire l'interaction */
.menu {
  pointer-events: none;
}
/* on rend l'interaction au label et à la liste */
#hamburger-logo,#listeliens {
  pointer-events: auto;
}
/* fin correction */







/*  ****************************************************************************************

FIN DE LA PARTIE COMMUNE AVEC MISE EN PAGE POUR TELEPHONE EN MODE PORTRAIT  (PARTIE 1)

****************************************************************************************   */


/*  ****************************************************************************************

DEBUT DE LA PARTIE POUR TABLETTES EN MODE PORTRAIT (PARTIE 2)

On conserve le menu burger 

****************************************************************************************   */

@media screen and (min-width : 481px) {	

#blocduhaut {
/* rappel : le #blocduhaut sert uniquement à intégrer la photo teaser sur la zone logo+nav+titres */
/* tout est dans un CSS séparé - Un CSS par page de réalisation */
    margin-left: auto;
    margin-right: auto;
    width: 90vw;
 }
#imagelogo {
	margin-left: 2vw;
	width: 20vw;
	height: auto;
}	
#hamburger-logo {
  	font-size: 1.5em;
}
#probleme {
	margin-top: 4vw;/* on réduit le margin 40vw du téléphone */
}
}
/*  ****************************************************************************************

FIN DE LA PARTIE POUR TABLETTES EN MODE PORTRAIT (PARTIE 2)

****************************************************************************************   */
	

/*  ****************************************************************************************

DEBUT DE LA PARTIE POUR ECRANS EN MODE PAYSAGE 750-1920 px
c'est le modèle de base pour une orientation paysage (PARTIE 3)

On supprime le menu burger


****************************************************************************************   */

@media screen and (orientation: landscape) and (min-width: 750px) {


#blocduhaut {
/* rappel : le #blocduhaut sert uniquement à intégrer la photo teaser sur la zone logo+nav+titres */
    width: 96vw;
    margin-left:2vw;
}
#imagelogo {
	margin-top: 3rem;  /* on a une navigation sur toute la largeur en haut de page, donc un décale le logo légèrement vers le bas */
    margin-left: 2vw;
	width: 12vw;
	min-width: 180px;
	height: auto;
}
#conteneurgeneral {
		grid-template-columns: 50vw 50vw; 
		grid-template-areas:
			"zoneduhaut zoneduhaut"
			"logoinsitu liensnavigation"
			"phototeaseravectitre phototeaseravectitre"
			"exposeprobleme exposesolution"
            "infovideo infovideo"
			"photosavant photosavant"
			"commentavant commentavant"
			"photosavant2 photosavant2"
			"commentavant2 commentavant2"
			"photosapres photosapres"
			"commentapres commentapres"
            "photosapres2 photosapres2"
			"photosdetails photosdetails"
			"commentdetails commentdetails"
			"suitephotosapres suitephotosapres"

            "suitephotosapres2 suitephotosapres2"
			"commentsuite2 commentsuite2"
            
            "commentsuite commentsuite"
			"photosdetails2 photosdetails2"
			"commentdetails2 commentdetails2"


			"suitephotosapres3 suitephotosapres3"
			"commentsuite3 commentsuite3"
			"suitephotosapres4 suitephotosapres4"
			"commentsuite4 commentsuite4"
			"suitephotosapres5 suitephotosapres5"
			"commentsuite5 commentsuite5"
			"suitephotosapres6 suitephotosapres6"
			"commentsuite6 commentsuite6"
        
            
            "photosdetails3 photosdetails3"
			"commentdetails3 commentdetails3"
            

            "suitephotosapres7 suitephotosapres7"
			"commentsuite7 commentsuite7"             
            
            
			"videoapresTXT videoapresTXT"
			"videoapresVID videoapresVID"
			"piedpage piedpage";
		width: 100%;	
}

/* ---------------  SUPPRESSION DU MENU BURGER ---------------------- */
.menu {
position: relative; /* on remplace la position fixed par relative */
	}
#hamburger {
 display: none;
}
#hamburger-logo {
  	
	background: rgba(255, 255, 255, 0);
  	width: 0; /* remplace le 34vw en 0 */
	color: transparent; /* on remplace le black par transparent */
	transform: translateX(-10vw); /*on le planque à gauche si besoin */
  	padding: 0; /* on remplace 1vw par 0 */
}
nav {
	display: inline; /* on remplace flex du mode menu burger par inline*/
	padding-bottom: 0; /*on supprime le padding bottom 5 vw */
	transform: translateX(0); /* annule le translateX négatif vers la gauche */
}
nav a {
 	text-decoration: none;
 	padding: 0; /* 2vw modifié à 0 */
}
nav a:hover {
  background: orange; /* on garde le orange sur le hover */
}
nav ul li {
    list-style: none;
    text-align: center; /* on modifie le left en right - sans résultat visible, mais par précaution */
	padding-left: 0; /* on annule le 1vw */
	padding-top: 0; /* on annule le 10vw */
}
/* ------------   FIN SUPPRESSION DU MENU BURGER pour liens de navigation plus larges  --------  */


nav {
	background-color: rgba(255,255,255, 0.0);
	text-align: right;
}
nav ul li {
    list-style: none;
    text-align: right;
	padding-right: 1em;
	display: inline-block;
}
#probleme {
	margin: auto;
	border: 2px solid white;
	padding: 1em;
	text-align: justify;
    width: 39.5vw;
}
#solution {
	margin: auto;
	border: 2px solid white;
	padding: 1em;
	text-align: justify;
    width: 39.5vw;
}
#renvoivideo {
	width: 80vw;
    margin: auto;
    border: 0px solid white;
}
#renvoivideoico {
    display: flex;
    flex-wrap: nowrap;
    justify-content:space-around; 
}
#renvoivideoico img {
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0); 
}
.icone1videodispo {
    width: 0;
    height: 0;
    margin: 0;
}
.icone2videodispo {
    width: 0;
    height: 0;
    margin: 0;
}
.icone3videodispo {
    width: 0;
    height: 0;
    margin: 0;
}  
.icone4videodispo {
    width: 16vw;
    height: 9vw;
    margin-left: 2vw;
    margin-top: 0;
} 
#avantleprojet {
	background-color: transparent;
	margin: auto;
    margin-top: 2vw;
	display: flex;
	flex-wrap: nowrap; /*pas de passage à la ligne avec les images */
	justify-content: space-between;
	width: 90vw;
	overflow: hidden;
}
#avantleprojet img {
	width: 28vw;
    border: solid 0.3vw black;
}
#commentaireavantleprojet {
	width: 90vw;
    margin: auto;
    text-align: justify;
}
#avantleprojet2 {
	background-color: transparent;
	margin: auto;
	margin-top: 2vw;
	display: flex;
	flex-wrap: nowrap; /*pas de passage à la ligne avec les images */
	justify-content: space-between;
	width: 90vw;
	overflow: hidden;
}
#avantleprojet2 img {
	width: 28vw;
    border: solid 0.3vw black;
}
#commentaireavantleprojet2 {
	width: 90vw;
    margin: auto;
    text-align: justify;
}
#apresleprojet, #apresleprojet2, #suiteapresprojet, #suiteapresprojet2, #suiteapresprojet3, #suiteapresprojet4, #suiteapresprojet5, #suiteapresprojet6, #suiteapresprojet7 {
	margin: auto;
    display: flex;
    flex-wrap: nowrap; /*sortie du format téléphone - pas de passage à la ligne avec les images */
    justify-content:space-between;
	width: 92vw; /* sortie du format téléphone */
}
#apresleprojet img, #apresleprojet2 img, #suiteapresprojet img, #suiteapresprojet2 img, #suiteapresprojet3 img, #suiteapresprojet4 img, #suiteapresprojet5 img, #suiteapresprojet6 img, #suiteapresprojet7 img {
	width: 43vw; /* sortie du format téléphone avec maintenant 2 images côte à côte */
	margin:auto; 
    border: solid 0.3vw black;
}
#commentaireavantleprojet, #commentaireapresleprojet, #commentairesuiteprojet, #commentairesuiteprojet2, #commentairesuiteprojet3, #commentairesuiteprojet4, #commentairesuiteprojet5, #commentairesuiteprojet6, #commentairesuiteprojet7 {
	margin: auto;
    text-align:justify;
    width: 88vw;
}
#detailsprojet, #detailsprojet2, #detailsprojet2B, #detailsprojet3 {
	background-color: transparent;
	margin: auto;
    margin-top: 2vw;
	display: flex;
	flex-wrap:nowrap; /*pas de passage à la ligne avec les images à partir de 768 pixels - alors qu'on le faisait pour les mobiles */
	justify-content: space-between;
	width: 94.5vw;
}
#detailsprojet img, #detailsprojet2 img, #detailsprojet2B img, #detailsprojet3 img {
	width: 18vw; /* modification car on n'est plus en mode téléphone */
	margin: auto;
    border: solid 0.3vw black;
}
#commentairedetailsprojet, #commentairedetailsprojet2, #commentairedetailsprojet3 {
	text-align:justify;
    margin: auto;
    width: 88vw;
}
#videorealisationTXT{
    width: 90vw;
    margin: auto;
}
#videorealisationVID{
    width: 90vw;
    margin: auto;
}
#videorealisationVID video {
	width: 75vw; /* on réduit la largeur de 90 à 75vw car l'image est trop haute pour la majorité des écrans en 90vw */
    margin-left: 6vw;
    margin-bottom: 4vw;
    border: solid 0.5vw black;
}
    footer {
    width: 80vw;
    margin: auto;
    }
}

/*  ****************************************************************************************

FIN DE LA PARTIE POUR ECRANS 750 1920 EN MODE PAYSAGE - modèle de base pour paysage (PARTIE 3)

****************************************************************************************   */


/*  ****************************************************************************************

DEBUT DE LA PARTIE POUR TABLETTE EN MODE PAYSAGE - évolution de la partie 3 (PARTIE 4)


****************************************************************************************   */

@media screen and (orientation: landscape) and (max-resolution: 229dpi) and (max-width: 1279px), screen and (orientation: landscape) and (max-aspect-ratio: 10/7) and (min-width: 1921px) {

}

/*  ****************************************************************************************

FIN DE LA PARTIE POUR TABLETTES EN MODE PAYSAGE - évolution de la partie 3 (PARTIE 4)

****************************************************************************************   */


/*  ****************************************************************************************

DEBUT DE LA PARTIE TRES GRANDS ECRANS > 1921px EN PAYSAGE - évolution de la partie 3 (PARTIE 5)

Inutile de supprimer le menu burger car il est déjà supprimé dans la base paysage (partie 3)
Police plus petite en proportion
Marge réduites sur les côtés  (on bloque même à 1920 px la largeur max des images et textes)
Toujours sur 2 colonnes comme en partie 3

Le media query utilise comme critère efficace la résolution, sachant que même les tous nouveaux écrans APPLE RETINA 6K n'ont que 218 DPI, tandis que les téléphones ont strict mini 250 dpi (plutôt 300 ou 400 en général).

@media screen and (orientation: landscape) and (min-width: 1921px) and (max-resolution: 229 dpi)

****************************************************************************************   */

@media screen and (orientation: landscape) and (min-width: 1921px) and (max-resolution: 229dpi) {

	
#blocduhaut {  /* voir le fichier spécial HAUT DE PAGE DE CHAQUE REALISATION- Ici, c'est Chicago */
    width: 1920px;
    margin: auto;
    
}
#imagelogo {
	margin-top: 60px;
    margin-left: 20px;
	width: 220px;
	height: auto;
}	
#conteneurgeneral {
	grid-template-columns: 960px 960px; /* on prévoit deux colonnes à partir de 768 pixels */
	justify-content: center;
	width: 100%;
}
#probleme {
	margin: auto;
    margin-top: 20px;
	text-align: left;
	border: 2px solid white;
	padding: 0;
    width: 810px;
}
#solution {
	margin: auto;
    margin-top: 20px;
	text-align: left;
	border: 2px solid white;
	padding: 0;
    width: 810px;
}
#renvoivideo {
	width: 1800px;
    margin: auto;
    margin-top: 20px;
    border: 2px solid white;
	padding: 0;
}
#avantleprojet {
    margin: auto;
    margin-top: 20px;
	display: flex;
	flex-wrap: nowrap; /*pas de passage à la ligne avec les images */
	width: 1800px;
}
#avantleprojet img {
	width: 550px;
    border: solid 5px black;
}
#commentaireavantleprojet {
	width: 1200px;
	border: 1px solid white; 
	margin: auto;
}
#avantleprojet2 {
    margin: auto;
	display: flex;
	flex-wrap: nowrap; /*pas de passage à la ligne avec les images */
    justify-content: space-between;
	width: 1800px;
}
#avantleprojet2 img {
	width: 550px;
    border: solid 5px black;
}
#commentaireavantleprojet2 {
	width: 1200px;
	border: 1px solid white; 
	margin: auto;
}
#apresleprojet, #suiteapresprojet, #suiteapresprojet2, #suiteapresprojet3, #suiteapresprojet4, #suiteapresprojet5, #suiteapresprojet6, #suiteapresprojet7 {
	margin: auto;
    width: 1840px;
    display: flex;
    justify-content: space-between;
    }
#apresleprojet img, #apresleprojet2 img, #suiteapresprojet img, #suiteapresprojet2 img, #suiteapresprojet3 img, #suiteapresprojet4 img, #suiteapresprojet5 img, #suiteapresprojet6 img, #suiteapresprojet7 img {
	width: 870px; 
    border: solid 5px black;
}
#commentaireapresleprojet, #commentairesuiteprojet, #commentairesuiteprojet2, #commentairesuiteprojet3, #commentairesuiteprojet4, #commentairesuiteprojet5, #commentairesuiteprojet6, #commentairesuiteprojet7 {
	width: 1200px;
	border: 1px solid white; 
	margin: auto;
}
#detailsprojet, #detailsprojet2, #detailsprojet2B, #detailsprojet3 {
	margin: auto;
	width: 1850px;
    display: flex;
    justify-content: space-between;
}
#detailsprojet img, #detailsprojet2 img, #detailsprojet2B img, #detailsprojet3 img {
	width: 400px;
    border: solid 5px black;
}
#commentairedetailsprojet, #commentairedetailsprojet2, #commentairedetailsprojet2B, #commentairedetailsprojet3 {
	width: 1200px;
	border: 1px solid white; 
	margin: auto;
}
#videorealisation {
	width: 1800px;
    margin: auto;
}
#videorealisationTXT {
    width: 1800px;
    margin: auto;
}
#videorealisationVID {
    width: 1800px;
    margin: auto;
}
#videorealisationVID video {
	width: 1400px; /* laisser à 1400px sinon la taille est trop importante sur l'écran */
    margin-left: 200px;
    border: solid 10px black;
}
#retour-realisations {
	width: 400px;
	background-color: white;
	border-radius: 20px;
	margin: auto;
    margin-top: 2em;
	margin-bottom: 4em;
}
#retour-realisations a {
	padding: 20px;
    margin: auto;
    width: 200px;
}
footer{
    width: 600px;
}
}

/*  ****************************************************************************************

FIN DE LA PARTIE POUR TRES GRANDS ECRANS >1921px PAYSAGE - évolution de la partie 3 (PARTIE 5)

****************************************************************************************   */



/* Page CSS écrite par Alexandre KITTEL pour son propre site IN SITU, mars 2024 */