/* Cette feuille de style est utilisée pour les fichiers index.html  et contact.html */


.container {  /* pour espacer les blocs container avec des marges de propreté */
  margin-top: 60px;
  margin-bottom: 1%;
}


.carousel-inner > .item > img { /* agrandie les images du carrousel sur la largeur du conteneur */
    line-height: 1;
    width: 100%;  
    height: auto;
}


#formulairecontact {     /* propriétés du formulaire de contact */
  margin-top: 50px;      /* pour espacer du bloc précédent */
 
  
}
.adressblock {           /* propriétés du texte d'adresse dans le footer du index.html */
    color: white;        /* l'image de fond étant foncée, nous avons choisi du blanc pour le texte */
    text-align: center;
}


.diviframe {             /* propriétés de la iframe du index.html */
    width: auto;
    height: 90%;
    margin-bottom: 10px;
}


.degrade-simple {        /* propriétés de barre de dégradé dans le footer */
  background: linear-gradient(#878080, #565353);
  color: white;
}
.background-div {
            width: 100%;
            height: 600px; /* Ajustez la hauteur selon vos besoins */
            background-image: url('https://leviernumerique.xyz/mini_app/img/fond.jpg'); /* Remplacez par l'URL de votre image */
            background-size: cover; /* L'image couvre tout le div */
            background-position: center; /* Centre l'image */
            background-repeat: no-repeat; /* Ne répète pas l'image */
            color: white; /* Couleur du texte pour qu'il soit lisible sur l'image */
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
        }
.card1 {
    width: 266px;
    height: 259px;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-image: url('https://leviernumerique.xyz/mini_app/img/lamp.png'); /* Remplacez par le chemin de votre image */
    background-size: cover; /* Ajuste l'image pour couvrir tout l'élément */
    background-position: center; /* Centre l'image */
    color: black
	; /* Texte blanc pour contraster avec l'image de fond */
}
.card2 {
    width: 266px;
    height: 259px;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-image: url('https://leviernumerique.xyz/mini_app/img/sablier.png'); /* Remplacez par le chemin de votre image */
    background-size: cover; /* Ajuste l'image pour couvrir tout l'élément */
    background-position: center; /* Centre l'image */
    color: black /* Texte blanc pour contraster avec l'image de fond */
}
.card3 {
    width: 266px;
    height: 259px;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-image: url('https://leviernumerique.xyz/mini_app/img/regle.png'); /* Remplacez par le chemin de votre image */
    background-size: cover; /* Ajuste l'image pour couvrir tout l'élément */
    background-position: center; /* Centre l'image */
    color: black; /* Texte blanc pour contraster avec l'image de fond */
}

body {
            background-image: url('https://via.placeholder.com/1920x1080'); /* Remplacez par l'URL de votre image */
            background-size: cover; /* L'image couvre tout le body */
            background-position: center; /* Centre l'image */
            background-repeat: no-repeat; /* Ne répète pas l'image */
            background-attachment: fixed; /* L'image reste fixe lors du défilement */
        }
.button-position {
      position: absolute;
      bottom: 50px; /* Ajustez cette valeur selon vos besoins */
      left: 35%;
	  transform: translateX(-50%);
        }
.btn-violet {
            background-color: #8a40de; /* Couleur violette */
            border-color: #8A2BE2; /* Bordure violette */
			color: white;
        }
.btn-violet:hover {
            background-color: #7B1FA2; /* Couleur violette plus foncée au survol */
            border-color: #7B1FA2; /* Bordure violette plus foncée au survol */
			color : grey;
			}
			/* Cette feuille de style est utilisée pour les fichiers index.html  et contact.html */


.container {  /* pour espacer les blocs container avec des marges de propreté */
  margin-top: 60px;
  margin-bottom: 1%;
}


.carousel-inner > .item > img { /* agrandie les images du carrousel sur la largeur du conteneur */
    line-height: 1;
    width: 100%;  
    height: auto;
}


#formulairecontact {     /* propriétés du formulaire de contact */
  margin-top: 50px;      /* pour espacer du bloc précédent */
 
  
}
.adressblock {           /* propriétés du texte d'adresse dans le footer du index.html */
    color: white;        /* l'image de fond étant foncée, nous avons choisi du blanc pour le texte */
    text-align: center;
}


.diviframe {             /* propriétés de la iframe du index.html */
    width: auto;
    height: 90%;
    margin-bottom: 10px;
}


.degrade-simple {        /* propriétés de barre de dégradé dans le footer */
  background: linear-gradient(#878080, #565353);
  color: white;
}