@import url(https://fonts.googleapis.com/css?family=Ropa+Sans&subset=latin,latin-ext);
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css);



* {
   box-sizing: border-box;
 }

 ::-webkit-scrollbar {
  width: 1px;
}


img,
object,
embed,
canvas,
video,

picture {
    max-width: 100%;
    height: auto;
}

a{
  color: #fff;
}
.reference {
  font-size: .7rem;
  line-height: .7rem;
}

 body {
   background-color: #000;
   font-family: 'Ropa Sans', sans-serif;
   
 }

.invisible{
  display:none;
}

.parent-section {
    height: 100vh;
    overflow: hidden;
    position: relative;
    /* margin: 5px;  */
    scroll-snap-align: start;
    scroll-snap-stop: always;
    background-size: cover;
    background-repeat: no-repeat;

}


.scrollable-div {

    overflow-y: auto;
    height: 100%;
    scroll-snap-type: y mandatory;
    /* max-width: 400px; */
    padding-top:20%; 
  
    /* Pour activer le défilement par section */
}

.scrollable-divdroite {

  overflow-y: auto;
  height: 100%;
  scroll-snap-type: y mandatory;
  /* max-width: 400px; */
  padding-top:20%;

  /* Pour activer le défilement par section */
}


.colonneemilie{

  background-color:rgba(0, 0, 0, 0.5);
   padding: 10px; 
   overflow-x: none;
   max-width: 400px;
   margin: 20px 0 0 5%; 
   text-align: left;
   color:white;
}



.colonneemilievideo{
  height:auto;
  /* background-color: rgba(227, 22, 22, 0.8); */
  /* padding: 10px;  */
  overflow-x: none;
  width: 100%;
  margin: 20px 0 0 5%;  
  text-align: left;
  color:white;

}

.colonnearintrodroite{

  background-color:rgba(0, 0, 0, 0.5);
   padding: 10px; 
   overflow-x: none;
   max-width:300px;  
    margin: 20px 0 0 5%; 
   position: absolute;  
   top: 25px; 
   right: 16px;
  font-size: 18px;
   text-align: left;
   color:white;
}

.colonnefestival{

  background-color:rgba(0, 0, 0, 0.8);
   padding: 10px; 
   overflow-x: none;
   max-width: 400px;
   margin: 20px 0 0 5%; 
   text-align: left;
   color:white;
}



.colonneemilieflex{

  background-color:rgba(0, 0, 0, 0.2);
  padding: 10px; 
  margin: 20px 0 0 5%; 
  display: flex; 
  overflow-x: none;
  max-width: 400px;
  color:white;
  margin-top:20%;
  padding-bottom:20px
}

.colonneemilieflex2{

  background-color:rgba(0, 0, 0, 0.2);
  /* padding: 10px;  */
  margin: 20px 0 0 5%; 
  display: flex; 
  overflow-x: none;
  max-width: 400px;
  color:white;
  margin-top:20%;
  /* padding-bottom:20px */
}

.colonneemiliegauche{

  background-color:rgba(0, 0, 0, 0.5);
   padding: 10px; 
   overflow-x: none;
   max-width: 400px;
   margin: 20px 35px 0 5%; 
   text-align: left;
   color:white;
}

.colonnetitre{

  /* background-color:rgba(0, 0, 0, 0.5); */
   padding: 10px; 
   overflow-x: none;
   max-width: 400px;
   margin: 20px 35px 0 5%; 
   text-align: left;
   color:rgb(0, 3, 8);
}



.colonneemiliedroite{

  background-color:rgba(0, 0, 0, 0.5);
   padding: 10px; 
   overflow-x: none;
   /* max-width: 400px;  */
   margin: 10px 35px 0 61%; 
   text-align: left;
   color:white;
}

.colonnedastous{

  background-color:rgba(0, 0, 0, 0.5);
   padding: 10px; 
   overflow-x: none;
   width: 70%;
   margin: auto; 
   text-align: left;
   color:white;
}

#divmaison {
  padding-left: 40px; 
  width: 550px; 
  color:#010007; 
  text-align: left;
   padding-top:40px;
}

#sectionintro {
    /* Ajoutez le style d'arrière-plan pour la section 2 */
    background-image: url('../ressources/images/dossier146/chantier/chantier4.jpg');
     background-size: cover;         /* Étire l'image pour couvrir toute la section */
    background-position: center;    /* Centre l'image */
    background-repeat: no-repeat;   /* Évite que l'image se répète */
    
  }

#sectionintro2 {
      /* Ajoutez le style d'arrière-plan pour la section 2 */
      background-image: url('../ressources/images/dossier146/PhotosEmilieT/emillieExt2023T/146IP2021b.jpg'); background-size: cover;         /* Étire l'image pour couvrir toute la section */
    background-position: center;    /* Centre l'image */
    background-repeat: no-repeat;   /* Évite que l'image se répète */
      }
#sectionintrodemenage {
        /* Ajoutez le style d'arrière-plan pour la section 2 */
        background-image: url('../ressources/images/expropriation/JacquesBourdon/ExpropParenteau/ExpropParenteau4.jpg');
        background-size: cover;         /* Étire l'image pour couvrir toute la section */
    background-position: center;    /* Centre l'image */
    background-repeat: no-repeat;   /* Évite que l'image se répète */
        }

 #sectionintrodemenage2 {
        /* Ajoutez le style d'arrière-plan pour la section 2 */
        background-image: url('../ressources/images/expropriation/Cicot/Cicot:DuPuits/lapresse.jpg'); background-size: cover;         /* Étire l'image pour couvrir toute la section */
    background-position: center;    /* Centre l'image */
    background-repeat: no-repeat;   /* Évite que l'image se répète */
        }
  
  
#sectionintro > p {
  background-color:rgba(0, 0, 0, 0.7);
   padding: 20px; 
   max-width: 300px; 
   margin: 8% 0 0 8%; 
   text-align: left; 
   color:white;
}

#sectionintro2 > p {
  background-color:rgba(0, 0, 0, 0.7);
   padding: 20px; 
   max-width: 300px; 
   margin: 8% 0 0 8%; 
   text-align: left; 
   color:white;
}

#sectionemilie {
/* Ajoutez le style d'arrière-plan pour la section 2 */
background-image: url('../ressources/images/dossier146/PhotosEmilieT/Emilie3.jpg');
background-size: cover;
  background-repeat: no-repeat;
  overflow-y: auto;
/* Autres styles nécessaires */
}

#sectionejosee {
/* Ajoutez le style d'arrière-plan pour la section josee */
background-image: url('../ressources/images/expropriation/JacquesBourdon/ExpropParenteau/ExpropParenteau6.jpg');
background-size: cover;
  background-repeat: no-repeat;
  overflow-y: auto;
/* Autres styles nécessaires */
}

#sectioneintrodemenage {
/* Ajoutez le style d'arrière-plan pour la section josee */
background-image: url('../ressources/images/expropriation/ArticlesJournaux/maisonsbougentintro.jpg');
background-size: cover;
  background-repeat: no-repeat;
   overflow-y: auto;
  
/* Autres styles nécessaires */
}



#sectionjaime {
  /* Ajoutez le style d'arrière-plan pour la section 2 */
  background-image: url('../ressources/images/dossier146/PhotosEmilieT/emillieExt2023T/IMG_4791.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  /* Autres styles nécessaires */
  }

 

  #sectionplaque {
    /* Ajoutez le style d'arrière-plan pour la section 2 */
    background-image: url('../ressources/images/dossier146/PhotosEmilieT/plaque76.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    /* Autres styles nécessaires */
    }

#sectiongenerique {
    height: auto;
    /* Ajoutez le style d'arrière-plan pour la section 2 */
    color: white;
    overflow-y: auto;
    width: 75%;
    margin: 20px auto;
    
    background-image: url("");
    /* Autres styles nécessaires */
}

#sectiongeneriqueP {
    height: auto;
    /* Ajoutez le style d'arrière-plan pour la section 2 */
    color: white;
    overflow-y: auto;
    width: 100%;
    margin: 20px auto;
    
    background-image: url("");
    /* Autres styles nécessaires */
}

#sectionconclusion {
  height: 100vh;
  /* Ajoutez le style d'arrière-plan pour la section 2 */
  color: white;
  background-color: black;
  overflow-y: auto;
  width: 100%;
  /* margin: 20px auto; */

  background-image: url("");
  /* Autres styles nécessaires */
}

#sectionconclusionjosee {
  height: 50%;
  /* Ajoutez le style d'arrière-plan pour la section 2 */
  color: white;
  background-color: rgb(101, 96, 96);
  overflow-y: auto;
  width: 100%;
  /* margin: 20px auto; */

  background-image: url("");
  /* Autres styles nécessaires */
}

#sectionconclusion2 {
  height: 100vh;
  /* Ajoutez le style d'arrière-plan pour la section 2 */
  color: white;
  /* background-color: rgb(132, 130, 141); */
  overflow-y: auto;
  padding-top:100px; 
  padding-bottom:100px
  width: 100%;
  margin: 20px auto;

  background-image: url("");
  /* Autres styles nécessaires */
}

#sectionSPB {
  height: 100vh;
  /* Ajoutez le style d'arrière-plan pour la section 2 */
  color: white;
  background-color: black;
  overflow-y: auto;
  width: 100%;
  /* margin: 20px auto; */

  background-image: url("");
  /* Autres styles nécessaires */
}



   #sectioncomparaison {
    /* Ajoutez le style d'arrière-plan pour la section 2 */
    color: white;
    height: 100%;
    width: 100%;
    margin-top: 30px;
    /* overflow-y: scroll; */

    background-image: url("");
    /* background-color: black; */
    /* Autres styles nécessaires */
}

#sectionmaisondemain {
  /* Ajoutez le style d'arrière-plan pour la section 1 */
  background-image: url('../ressources/images/DAstous/maison2022.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  /* Autres styles nécessaires */
  }

  #sectionparade {
    /* Ajoutez le style d'arrière-plan pour la section 2 */
    background-image: url('../ressources/images/DAstous/CatalogueParade 1961/Parade 1961, La Presse, 4 octobre 1961.png');
    background-size: cover;
    background-repeat: no-repeat;
    /* Autres styles nécessaires */
    }

    #sectionparade2 {
      /* Ajoutez le style d'arrière-plan pour la section 2 */
      /* background-position: center; */
      background-image: url('../ressources/images/DAstous/CatalogueParade 1961/Dimanchematinsept1961.jpg');
      background-size: contain;
      background-repeat: no-repeat;
      background-position-y: 50px;
      /* Autres styles nécessaires */
      }

      #sectionparade3 {
        /* Ajoutez le style d'arrière-plan pour la section 2 */
        /* background-position: center; */
        background-image: url('../ressources/images/DAstous/CatalogueParade 1961/Parade Daoust3.jpg');
        background-size: contain;
        background-repeat: no-repeat;
        /* background-position-y: 100px; */
        /* Autres styles nécessaires */
        }

  #sectiondastous2 {
    /* Ajoutez le style d'arrière-plan pour la section 2 */
    background-image: url('../ressources/images/DAstous/PortraitsDAstous/004-RD-CCA-clean.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    /* Autres styles nécessaires */
    }


 .menufooterparenteau {
  position: fixed;
  bottom: 0;
  width: 100%;
  

}

/* .menufooterparenteau a {
  float: left;
  padding: 12px;
  color: white;
  text-decoration: none;
  font-size: 17px;
  width: 25%;
  border-style: solid;
  border-width: 2px;
  border-color: #fff;
  
  text-align: center;
  background-color: #7291dc;
}

.menufooterparenteau a:hover {
  background-color: #3a4b73;
}

.menufooterparenteau a.active {
  background-color: #3a4b73;
}

.contenu {
  display: none;
}

.contenu.active {
  display: block;
} */


/* 
 .intro {

	color: #000;
	padding-top: 90px;
	margin-left: 8%;
	margin-right: auto;
	
	display: block;
	text-align: left;
	font-size: 1.0em;
	line-height: 1.0em;
} */

 .cadreprincipal {
  color:white;
    max-width:75%; 
    margin:20px auto;
    margin-bottom: 10px;
 }

 h1 {color:white;  font-family: 'Ropa Sans', sans-serif; }

 .reference {
  color:white;
  margin-left: 50px;
  padding-bottom: 50px;
 }

 .citation{
  width:60%;
  margin: auto;
  color:  #69ACF4 ;
  font-size: 1.3em;
  text-align: center;
  font-style: italic;
 }


.questionP {
    padding-top:25px;
    font-style: italic;
   
  }

 .italique {
  font-style: italic;
}

.souligne {
	text-decoration:underline;
}

.fleche {
  position: absolute;
  bottom: 40px;
  margin-left: 48%;
  text-align: center;
}



/* agrandir------------------------------------------ */
.agrandir{
  background-color: darkgrey; 
  width: max-content; 
  height:auto;
}

.agrandirtime{
  /* background-color: darkgrey;  */
  width: max-content; 
  height:auto;
}

.agrandirson{
  background-color: darkgrey; 
  width: max-content; 
  height:auto;
  margin:10px 0; padding: 3px 3px; color:black
}
/* agrandir------------------------------------------ */

/* boite de son ------------------------------------ */
            

.boiteson {
  position: relative;
  width: 400px;
  display: flex; 
  align-items: center;
  padding-bottom: 20px ;

}

.element1 {
  display: inline-block;
  width: auto;
  /* ou une valeur appropriée pour l'espace que vous souhaitez */
  box-sizing: border-box;
  margin-right: 10px;

  /* Ajoutez un remplissage pour l'espace intérieur si nécessaire */
}

.element2 {
  display: inline-block;
  width: 70%;
  /* ou une valeur appropriée pour l'espace que vous souhaitez */
  box-sizing: border-box;

}
/* boite de son ------------------------------------ */

/* colonnes ------------------------------------ */


.rangee {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

/* 2 colonnes */
.colonne {

  padding: 0 20px;
}

.gauche {
  padding: 0 0 20px 0;
}

.untiers {
  flex: 33%;
}
.trente {
  flex: 35%;
}

.deuxtiers {
  flex: 66%;
}

.flex25 {
  flex: 25%;
}

.flex75 {
  flex: 75%;
}

.demie {
  flex: 50%;
}

.quart {
  flex: 25%;
}

.troisquart {
  flex: 75%;
}


.boite {
  position: relative;
  
}

/* colonnes ------------------------------------ */



/* TIMELINE -------------------------------------------------------------------*/
.timeline {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.event {
  flex: 0 0 calc(32% - 10px);
  /* Ajustez la largeur selon vos besoins */
  margin: 10px;
  padding: 10px 10px 2px 10px;
  border: 1px solid #ccc;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  text-align: left;
  overflow:hidden;
}

.event img {
  max-width: 100%;
  height: auto;
  margin-bottom: 10px;
}

@media (max-width: 768px) {
  .event {
      flex: 0 0 calc(50% - 20px);
      /* Ajustez la largeur pour les écrans plus petits */
  }
}

 /* TIMELINE -------------------------------------------------------------------*/

 .cd-main-contenu {
  /* you need to assign a min-height to the main content so that the children can inherit it*/
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  position: relative;
  z-index: 1;
}

 .cd-fixed-bg {
  position: relative;
  min-height: 100%;
  background-size:cover;
  background-repeat: no-repeat;
  background-position: center center;
  z-index: 1;

}

.cd-fixed-bg.cd-bg-renovation {
  background-image: url(../ressources/images/dossier146/chantier/chantier4.jpg);
  min-height: 100%;
  width: 100vw;
}



.cd-fixed-bg.cd-bg-146ext2023 {
  background-image: url(../ressources/images/dossier146/evolution/146IP2021b.jpg);
  min-height: 100%;
  width: 100vw;
}



.imagedanscadre {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  max-height: 100%;
}

.imagedanscadre2 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 80%;
  max-height: 80%;
  padding-top: 20px;
  padding-bottom: 20px;
}

.imagedanscadre3 {

  max-height: 80%;
}

.imagedanscadre4 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 50%;
  max-height: 50%;
}

.imagedanscadre125 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 125%;
  max-height: 125%;
}

.imagedanscadrebig {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 130%;
  max-height: 130%;
}

.imagedanscadre30 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 30%;
  max-height: 30%;
}

.imagedanscadre60 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 60%;
  max-height: 60%;
}

.imagedanscadre70 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 70%;
  max-height: 70%;
}