*,
::before,
::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

@font-face {
    font-family: TenorSans-Regular;
    src: url(./fonts/TenorSans-Regular.ttf);
}

@font-face {
    font-family: DancingScript;
    src: url(./fonts/DancingScript-VariableFont_wght.ttf);
}

@font-face {
    font-family: roboto-Regular;
    src: url("./fonts/Roboto-Regular.ttf");
}    

@font-face {
    font-family: roboto-bold;
    src: url("./fonts/Roboto-Bold.ttf");
}  

@font-face {
    font-family: Parisienne;
    src: url(./fonts/Parisienne-Regular.ttf);
}

html {
    font-family:roboto-Regular;
    scroll-behavior: smooth;
}
.navigation-burger-menu {
    position: fixed;
    height: 100vh;
    width: 100%;
    background-color: white;
    transition: all 0.3s ease;
    transform: translateY(-100vh);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.navigation-burger-menu.active {
    transform: translateY(0);
}

.laptop-burger-menu  {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: initial !important;
}

.laptop-burger-menu a {
    color: black !important;
}

.close-burger {
    margin-right: auto;
    font-size: 30px;
    padding: 15px;
    color: red;
}

header {
    background-color:rgb(243, 237, 222);      /* rgb(240, 201, 4);  */
    position: fixed;
    z-index: 5000; 
    width: 100vw; 
    top: 0;
    display: flex; 
    padding: 5px;      
}

header.active {
    background-color:black;                   
}
/* pour que quand la nav descend: Comité Mirareine change de couleur en blanc */
header.active span {
    color: rgb(231, 192, 53) !important;
}
/* Quand la nav descend : présentation, nos actios et contact change de couleur en blanc */
header.active nav a {
    color:rgb(231, 192, 53) !important;
}

nav {
    background-color: transparent; 
    margin-left: auto;
    display: flex;
    align-items: center; 
    justify-content: center;
}

/* colore présentation, nos actions et contact dans la nav */
nav a {
    color:black;                                   
    margin: 30px;
    font-family:'Roboto', sans-serif ; 
    font-size: 25px;
}

nav a:hover {                      
    color:rgb(240, 201, 4);
    transition: 1s;
}

.burger-menu {
    display: none;                  /* pour qu'on ne le voit pas en mode ordi*/
    align-items: center;
    justify-content: center;
    margin-left: auto;     
}

.burger-menu img {
    height: 60px;
}

.logo-lettre-mobile  {       
    display: none;
}

/*logo écrit Comité Mirareine dans nav*/
header span {                                        
   font-family: DancingScript;   /*"Roboto",sans-serif ; */
   color:black;
   font-size: 40px;
   font-weight:bolder;
   padding: 45px;   
}

.logo-lettre img {
    height: 120px;
     
}

section .film {
    display: flex;
    width: 100%;
    height: auto;

}

.film video {
    
    width: 100%;
    height: 100%;
    padding-top: 0%;
}

main {
    background-color: rgb(243, 237, 222);
    
}

h1 {
                                                
    font-size: 40px;
    text-decoration: underline;
    color:black;
    font-family: Parisienne !important;
    font-weight: bolder;
    padding-left: 20px;
    padding-top: 136px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px -50px 36px -28px inset;                                           
     /*box-shadow: rgba(0, 0, 0, 0.35) 0px -50px 36px -28px inset;  */
   /* background-color: rgb(243, 237, 223);*/
}

#article {
    
    width: 100%;
    height:auto;
    flex-direction: column; /* permet de placer le texte  en dessous du titre présentation */
}

/* l'intérieur du grand bloc de présentation = tout le texte*/
.texte-presentation  {
    display: flex;
    width: 100%;
    background-color: rgb(243, 237, 223);                          
}

.texte-presentation p {
    font-family: TenorSans-Regular bold;
}
    
/*texte situé dans Presentation en 1er    pour donner la même taille de l'intérieur du bloc*/
#article span {
    padding: 30px;          
    flex-direction:column;
    text-align:justify;
    color:black;
    font-size: 17px;        
}

span p {
    margin-bottom: 1em;
}

.texte-presentation span { 
    font-weight: bold;   
}

.texte-presentation strong {   
    font-weight: bold;
    margin: right 10px;                                 
   
}

.texte-presentation em {
    background-color: black;
    padding-left:600px;
    color: goldenrod;
    box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
    
}

.confiance {
    padding: 10px;   /* dimenssionne le carré qui défile */
}

/* le block conteneur */
.marquee-rtl  {
    width: 100%;                                                 
    margin-bottom: 50px;
    border: 10px solid #F0F0FF;
    overflow: hidden;                                                    /* masque tout ce qui dépasse */
    box-shadow: 0 .25em .5em #CCC,inset 0 0 1em .25em #CCC;
    background-color: rgb(240, 201, 4);                                /* background-color:rgb(243, 237, 222); */
}


  /* le bloc défilant */
  .marquee-rtl > :first-child {
    display: inline-block;                /* modèle de boîte en ligne */
    padding-right: 2em;                   /* un peu d'espace pour la transition */
    padding-left: 30%;                   /* placement à droite du conteneur */
    white-space: nowrap;                  /* pas de passage à la ligne */
    animation: defilement-rtl 30s infinite linear;
}

.marquee-rtl img {
    margin-right: 200px;
}


@keyframes defilement-rtl {
    0% {
      transform: translateX(0);      /* position initiale à droite */
    }
    100% {
      transform: translateX(-100%);  /* position finale à gauche */
    }
}

/*____________________h2 = Nos ACTIONS_____________________________________________________________________________________*/
h2 {
/*   background-color:rgb(240, 201, 4);     */      
    font-size: 40px;
    text-decoration:underline;
    color:black;
    margin-bottom: 30px;
    padding-left: 5px;
    padding-top: 136px;         /* on met une marge pour laisser la hauteur du header */
    font-family: Parisienne !important;
    font-weight: bolder;
    box-shadow: rgba(0, 0, 0, 0.35) 0px -50px 36px -28px inset; 
}

#proposition {
    flex-direction: column;
}

.spec {
    display:flex;
    flex-direction: row;
    flex-wrap: wrap; /* va à la ligne */
    justify-content: center;
    padding: 30px;
    font-size: 17px;
  /*  background-color:rgb(243, 237, 223);    ce qui englobe tout le texte cad, c'est la balise article*/
}

.vignette {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 20px;
    margin: 20px;
    width: 500px;                              
    height: 300px;                               
    border-radius: 10px;
    background-color:  rgb(243, 235, 216); 
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;   
}

.vignette img {
    display: flex;
    width: 80%;
    height: 80%;
    margin: auto;
}

.vignette h3 {
    padding-bottom: 10px;
    font-size: 20px;
}

 /* ___________________________________________ Contact____________________________________________________________________________*/
h4 {
    padding-top: 136px;
    padding-left: 5px;                                               
    font-size: 40px;
    margin-bottom: 30px;
    text-decoration: underline;
    color:black;
    font-family: Parisienne !important;
    font-weight: bolder;                                                                  
    box-shadow: rgba(0, 0, 0, 0.35) 0px -50px 36px -28px inset; 
}

/* le 1er big bloc en dessous de contact */
.contact {
    display: flex;
    justify-content:center;
    gap: 10%;
    padding-top: 50px;
    padding-bottom: 50px;
    background-color:rgb(243, 237, 222);       
}

/*  Moyen (2eme) bloc contenant mail et tél situé  à côté de l'image notre équipe, direction*/
.link-contact {
    width: 220px;   /* = pour éviter que le contenu de l'image notre équipe, direction se pousse au survol de la souris sur mail & tel, pour responsiv : l'enlever*/
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;     
}

/* petit(3eme)  bloc contenant mail et tél situé à côté de l'image notre équipe, direction + va cibler les a( ancrage) situés dans contact,*/ 
.link-contact a {
    margin: 15px;  /* extérieur, pour pousser ,pour espacer mail de téléphone*/
    font-size: 20px;
    color:black;     /* colore les lettres de mail  à côté de l'image notre équipe, direction + dans footer*/
    font-weight: bold;      
}

.link-contact a:hover {           
    font-family: roboto-bold;     
}

.contact .link-contact a {               /* cible email  situé à côté de l'image notre équipe , direction ??????????????*/
    color:rgb(222, 159, 42);
    font-weight: bold;
}

.pointeur {
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact .pointeur img {
    display: flex;
    width: 40px;
    height: 30px;
    position: absolute; left: 180px;  
    border: none;
    box-shadow: none;  /*pour enlever les couleurs qui apparaissaient sur la flèche, comme celle utilisée pour la photo de direction */
}

.pointeur img {
    animation-duration: 3s;
    animation-name: clignoter;
    animation-iteration-count: infinite;
    transition: none;
    
}

@keyframes clignoter {
    0% {opacity: 1;}
    50% {opacity: 0;}
    100% {opacity: 1;}
}


.direction {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color:rgb(243, 237, 222);
}

/* photo les membres de la  direction dans footer*/
 .contact img {
    width: 500px;
    height: 450px;
    display: flex;
   /* position: absolute; left: 660px; */
    margin-top: 0;
    border-radius: 9px;     
}  

/*_________________________________________footer_____________________________________________________________________________________*/
footer {
    padding: 10px;
    background-color:black;                          /* colore  bloc de footer*/
}

.footer-content {    /* le contenu du footer centre présentation, nos actions, mentions légales + aligne horizontalement logo fn,instag,tiktok horizontalement*/
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px;
}

.footer-logo img  {      /* = Comité Mirareine situé dans footer*/
   /* width: 100%;*/
   padding: 6px;       /* déplace vers la droite  comité Mirareine */
   font-size: 22px;
   font-family: DancingScript;
   font-weight: bolder;
   color: rgb(231, 192, 53);
   
}



 /*= le bloc invisible  où il y a Présentetion, Nos actions et contact, dans footer */    
.footer-menu {
    width: 100%; 
    margin-right: 270px;          
}
 /*      déplace vers la gauche (sens inverse, car il était à gauche)  */

.footer-menu nav {
    display: flex;
    justify-content: center;
    align-items: center;                   /* on cible la nav se trouvant dans le footer*/
    flex-direction: column;   
}

.footer-menu nav a { 
    margin: 5px;     /* on cible les liens de la nav du footer et on réduit l'espace entre les liens*/
    font-size: 20px;
    color:white;     /* colore en blanc Présentation,Galerie,Nos Services et Contact dans footer*/
}

.footer-logo a {
    text-align: center;

}

.footer-menu nav a:hover {     /* pour annuler l'effet du changement de couleur*/  
    color:inherit;
}

.copyright p {
    color:white;       /* colore les lettres de ......tous droits réservés, tout en bas du footer*/
    padding: 40px;
    text-align:right;        /* se met tout à droite, en bas du footer*/
}