@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;
   margin:0;
   padding:0;
 }

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


img,
object,
embed,
canvas,
video,

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

a{
  color: #fff;
}

a {
  color: #FFF;
  text-decoration: none;
}

.reference {
  font-size: .7rem;
  line-height: .7rem;
}

.fondbleu {
  background-color: rgba(180, 197, 255, 0.4);

}

.paragraphe{
  padding-top:20px;
  padding-botton:20px
}

.invisible {
	display:none
}

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

 /* footer------------------------------------------------- */
 .menufooter {
  position: fixed;
  bottom: 0;
  width: 100%;
  /* background-color: #555; */

}




.menufooter {
  position: fixed;
  bottom: 0;
  width: 100%;
}

.menufooter 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: #555;
}

.menufooter a:hover {
  background-color: #000;
}

.menufooter a.active {
  background-color: #000;
}



 /* footer------------------------------------------------- */

/* video responsive------------------------------------ */
.containervideo {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 56.25%;
  /* 16:9 Aspect Ratio */
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}
/* video responsive------------------------------------ */

.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 */
}
/* D'AStous------------------------------------- */

#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 */
  }

  .introDAstous{
    position:absolute; 
    bottom:9.5%;  
    background-color:rgba(0, 0, 0, 0.3);
    display: block;  
    padding: 10px; 
    overflow-x: none;  
    /* max-width: 85%; */
    text-align: justify;
    color:white;

  }
  #sectionintrodastous {
    /* Ajoutez le style d'arrière-plan pour la section 2 */
    background-image: url('../ressources/images/DAstous/maison2022.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    /* 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 */
  }



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

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

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

.video-container {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  z-index: -1;
  overflow: hidden;
}

#video-background {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
}


/* fin D'AStous------------------------------------- */

.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;
}

.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;
}

.colonnefestivalflex2{

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





.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: 100%;
  color:white;
  margin-top:50px;
  /* padding-bottom:20px */
}





.colonneemiliedroite{

  background-color:rgba(0, 0, 0, 0.5);
   padding: 10px; 
   overflow-x: none;
   /* max-width: 400px;  */
   margin: 20px 35px 0 61%; 
   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');
    /* Autres styles nécessaires */
    }

 #sectionintro2 {
      /* Ajoutez le style d'arrière-plan pour la section 2 */
      background-image: url('../ressources/images/dossier146/PhotosEmilieT/emillieExt2023T/146IP2021b.jpg');
     
      /* Autres styles nécessaires */
      }
  
  
#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 */
}



#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 */
}

#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 */
}

#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 */
    }

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


 



/* 
 .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;
 }

 .citationtexte{
  width:85%;
  margin: auto; 
  padding:0 30px;
  text-align: justify; 
 }


.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%;
}

.deuxtiers {
  flex: 66%;
}

.demie {
  flex: 50%;
}

.quart {
  flex: 25%;
}

.troisquart {
  flex: 75%;
}

.uncinq {
  flex: 20%;
}


.boite {
  position: relative;
  
}

.indent30{
  text-indent: 30px;
}

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

.text-block {
    position: absolute;
    bottom: 10px;
    right: 0px;
    /* background-color: rgba(0, 0, 0, 0.3); */
    color: white;
    padding-left: 20px;
    padding-right: 20px;
}

/* 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%;
}





.cd-fixed-bg.cd-bg-dastous {
    background-image: url(../ressources/images/DAstous/PortraitsDAstous/004-RD-CCA-clean.jpg);
    min-height: 100vh;
    width: 100vw; 
}


.cd-fixed-bg.cd-bg-dastous2 {
  background-image: url(../ressources/images/DAstous/PortraitsDAstous/dastoussignature.jpg);
  min-height: 100vh;
  width: 100vw; 
}





.cd-scrolling-bg.cd-color-noir {
    background-color: #000;
    color: #fff;
    font-size: 1.0em;
}