/* réglages généraux de la page */

html {scroll-behavior: smooth;}

/*html.sr .popup {visibility: hidden;}*/

body {
	font-family: 'neue-haas-grotesk-display', sans-serif;
	/*font-family: 'Courier New',Courier,monospace;*/
	font-size: 12px; /* unité de base du rem */
	font-style: normal;
	background-color:#fafafa;
	color: black;
	margin: 0; padding: 0;
    width:100%; height:100%;
    position : relative;

    font-family: 'Tusker Grotesk';
    src: url('TuskerGrotesk-5700Bold.woff2') format('woff2'),
        url('TuskerGrotesk-5700Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'Tusker Grotesk 5700';
    src: url('TuskerGrotesk-5700Bold.woff2') format('woff2'),
        url('TuskerGrotesk-5700Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}


/**/


/* les liens */
a { color: inherit; text-decoration: none; }
/* les liens au survol */
a:hover { text-decoration: underline; }

a {display: block;
position: relative;
padding: 0.2em 0}

a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
widows: 100%;
height: 1px;
background-color: blue;
opacity: 0;
transition: opacity 300ms, transform 300ms;
}

/* Fade in */

a::after {
  opacity: 1;
  transform: scale(0);
  transform-origin: center;
}


*, *:before, *:after {/* TOUS les éléments de la page... */
    box-sizing: border-box; /* règle les ennuis de padding */
    outline:none; /* pas de cadre de sélection */
}
.clear { clear:both; } /* pour nettoyer après une série de float */

/* css reset */

ul { padding:0; } /* listes à puce */
li { padding:0; list-style: none; }


/* votre style */
/*la suite est juste une aide, vous pouvez tout virer si vous voulez */

/* 
pour une mise en page fluide :
1. un conteneur global fluide (width en % + max-width en px par exemple)
2. des images fluides càd width:100%;
*/
main {
	width:100%; 
	max-width: 100wh;
	margin: 0 auto; /* pour centrer le bloc principal */
}

.section_campagne img {width:100%;
     height:auto; 
object-fit: cover;}


/* Barre de navigation */

header nav {position: fixed; z-index: 12;}

nav {display: flex;
	 justify-content: space-between;
	 align-items: center;
height: 50px;
background: #fafafa;
padding-left: 30px;
padding-right: 30px;
width: 100%;
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;



}

nav img { width: 20%; }


nav ul {display: flex;
	   flex-wrap: wrap;
		width:  300px;
		justify-content: space-between;
		align-items: baseline;}

nav li {font-weight: 400;
	font-size: 16px;
}


#title { 
font-weight: 800;
font-size: 24px;
}

#menu {font-weight:  400;
       font-size: 14px;}





/* intro */




.intro {display: flex;
	    flex-direction: column;
	    justify-content: center;
	     align-items:center;
		height: 100vh;
		background-color:#0000ff;
		padding-top: 20px;
	    font-size: 30px;
	    font-weight: 800;
		padding-bottom: 40px;
	    font-family : 'neue-haas-grotesk-display';
color: white;
text-align: center;

position:relative;
}

.img_intersection {position: absolute;
                   height: auto;
                   top: 50px;
                   left: -100px;

               }



#intro {background: #ff7bac ;}

.intro div { width:90%;

			}



.intro div img {max-width:70%;
height: auto;}


#loading {width: 50%;}
#fleches {width: 100%;}


#titre1 {width: 100%;}







/* Rubrique */

.rubrique {display: flex;
		   flex-wrap:wrap;
		    background:#6bd2fc;
		    padding-top: 20px;
		    width: 100%;
		    justify-content: space-between;
		    padding-left: 2%;
		    padding-right: 2%;
		    

		    }


.article_rubrique {display: flex;
         flex-wrap:wrap;
         align-items :center;
         justify-content: space-around;
     }

#article3 {align-items: flex-start;}

#article4 {align-items: flex-start;}

 article div {width:45%;}


.rubrique div img { width: 100%;
				   }

.rubrique p {font-family : 'neue-haas-grotesk-display';font-size: 40px;
color: white;
line-height:;
}

.rubrique  strong { font-family: 'Tusker Grotesk'; 
              		font-size: 40px;
              		color : #FF7BAC;
 					color : #fcf118;
  					text-outline : #000000;
  					text-outline : rgb(0, 0, 0);
 					text-shadow : 0px 4px 0px rgba(0, 0, 0, 1);}


h1{
    font-family: 'Tusker Grotesk';
    font-weight: bold;
    font-style: normal;
    color : #FF7BAC;
    letter-spacing: 1px;
 					color : #fcf118;
  					text-outline : #000000;
  					text-outline : rgb(0, 0, 0);
 					text-shadow : 0px 4px 0px rgba(0, 0, 0, 1);
}

#t1 {font-family: 'Tusker Grotesk'; 
              		font-size: 60px;
  
              		 }

h2 { font-size : 25px; }


#section3 {background: black;
	                 }



/* Conclusion */


.conclusion{display: flex;
		   flex-wrap:wrap;
		   align-content:center;
		    height:auto;
		    justify-content: center;
		    background: #ff7bac;
		    padding-top: 20px;
		    font-family : 'neue-haas-grotesk-display'; }


.conclusion div {max-width: 60%;
                 margin: 0;}

.conclusion div img {max-width:100%;
height: auto;}

.conclusion p {font-size: 30px;
color: white;
line-height: 30px;
text-align: center;
}


.conclusion p strong {
              		font-size: 80px;
              		 color : #FF7BAC;
 					 color : #fcf118;
  					text-outline : #000000;
  					text-outline : rgb(0, 0, 0);
 					text-shadow : 0px 4px 0px rgba(0, 0, 0, 1);}

.icon { z-index:10; 
        width: 10px;
         position: absolute;
         }


.icon img {width:100%;}

.info {width: 25%;}

.icon {width: 10%;}

#icon1 {width: 40%; bottom: -600px; left: 450px;}

#icon2 {width: 15%; bottom: -80px; left: 50px;}
#icon4 {width: 20%; top:-100px; left: 80px;}

#icon3 {width: 15%; bottom: 1500px; right: 50px;}

#icon6 {width: 50%; bottom: -2400px; left: 300px;}


#icon5 {width: 800px; top: 100px; left: 100px;}



#icon7 {width: 30%; bottom: 2800px; right: 100px;}


#icon8 {width: 30%; bottom: 2100px; left: 40px;}

#icon9 {width: 30%; bottom: 2800px; left: 50px;}
#icon10 {width: 25%; bottom: 1300px; left: 50px;}

#icon11 {width: 10%; bottom: 7880px; right: 700px;}

#icon14 {width: 35%; top: 3500px; left: 50px;}
#icon15 {width: 40%; top: 5900px; left: 50px;}
#icon16 {width: 30%; bottom: 9150px; left: 150px;}
#icon17 {width: 10%; top: 7200px; right: 250px;}



.rubrique2040 {display: flex;
	    flex-direction: column;
	    justify-content: center;
	     
		height: 100vh;
		background-color:black;
		padding-top: 20px;
		    padding-left: 2%;
		    padding-right: 2%;}

.rubrique2040 article  {
	width:40%;
    }


#fin {width: 60%;}

#dernier {justify-content:center;
		  align-items: center;}



/* pour rogner une image dans un format fixe */
/*.truc img { object-fit:cover; width:200px; height:150px; }*/

/* pour contenir une image dans un format fixe, sans la couper, avec des marges */
/*.truc img { object-fit:contain; width:200px; height:150px; background:black; }*/

/* POPUP*/

.popup {
    height: 212.5px;
    width: 346.5px;
    z-index: 13;
    position: fixed;
    display: flex;
    flex-direction: column;
	border-radius: 6px;
	background: white;
}

.popup-header {
    background: #0000ff ;
	border-radius: 6px 6px 0 0;
    height: 30px;
    width: 100%;
    text-decoration: none;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.closeBtn {
    height: 25px;
    width: 50px;
    border-radius:10px;
    background: red;
    text-decoration: none;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 45%;
}

.displayNone {
    display: none !important;
}
.popup-body {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.imgPopup {
    width: 100%;
	z-index: 100;
	padding: 5%;
}



/* media-queries : altérer le style sous certaines conditions seulement */
@media screen and (max-width: 600px){ 

	#t1 {font-size:40px;
		 line-height: 45px;
	     }
	section {width: 400px;
		     display: flex;
	         flex-direction: column;

	        }
	strong {line-height: 40px;}

	.rubrique div { width: 90%; }

	.rubrique p {font-size: 20px; line-height:;}


	.popup{ width: 50%; }

	*, *:before, *:after {/* TOUS les éléments de la page... */
    box-sizing: border-box; /* règle les ennuis de padding */
    outline:none; /* pas de cadre de sélection */
}
.clear { clear:both; } /* pour nettoyer après une série de float */





	
	
	
}