/*-----------------------------------------------------------------------------------------------------------
	Feuille de style CSS pour le site "Ses@m Informatique"
----------------------------------------------------------------------------------------------------------- */

* { /* Définition des polices utilisées (les suivantes sont définies en cas d'incompatibilité avec un navigateur) */
	font-family: Helvetica, Verdana, Arial, sans-serif;
}

:root { /* Définition de variables pour les couleurs du site (il suffit de changer une couleur ici pour la changer partout) */
	--gris: #AAAAA7;		/* ou rgb(170,170,167)	*/
	--bleu: #25a9e7;		/* ou rgb(37,169,231)	*/
	--orange: #e98d1d;		/* ou rgb(233,141,29)	*/
}

/* Pour trouver d'autres codes de couleur :  https://www.w3schools.com/colors/colors_picker.asp */

/*-----------------------------------------------------------------------------------------------------------
	OPTIONS GENERALES
------------------------------------------------------------------------------------------------------------- */

html { /* Organisation de l'image de background (images rectangulaires de préférence) */
	margin: 0;
	padding: 0;
	background: url("images/background-2.jpg") no-repeat center fixed; 
	/* Changer le numéro de background-x pour tester les 3 images différentes */
	/* Pour retirer  complétement l'image, supprimer la ligne background et backgroun-size ou mettre les lignes entre /**/
	/* Pour mettre seulement une couleur de fond, utiliser cette ligne -> background-color: #cfe7f2; */
	background-size: cover;
}

body { /* Orientation verticale et centrage des éléments de la page */
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	text-shadow: /* Un petit contour blanc pour faire ressortir le texte de la page sur le fond */
		1px 0 1px white,
		0 1px 1px white,
		0 -1px 1px white,
		-1px 0 1px white,
		1px 1px 1px white,
		1px -1px 1px white,
		-1px 1px 1px white,
		-1px -1px 1px white;
}

section { /* Définition de la largeur du corps de page */
	width: 60%;
	margin-bottom: 2em;
}

@media all and (max-width: 1024px) { /* Condition pour s'adapter aux petits écrans (inférieur à 1024px) */
	section { /* Agrandissement du corps de page si petits écrans */
		width: 90%;
	}
}

.page_up { /* Positionnement du bouton pour retourner en haut de page */
	text-align: right;
	width: 100%;
}

.page_up a { /* Formattage du bouton pour retourner en haut de page */
	font-size: 3em;
	font-weight: bold;
	text-decoration: none;
	color: var(--bleu);
}

.page_up a:hover { /* Effet au survol : change de couleur */
	color: var(--orange);
}

/*-----------------------------------------------------------------------------------------------------------
	BANNIERE & SOUS-TITRE
------------------------------------------------------------------------------------------------------------- */

h1 { /* Suppression de l'espace sous la bannière*/
	margin-bottom: 0;
}

h2 { /* Mise en forme du sous-titre */
	color: var(--gris);
	font-size: 1.5em; /* em est une taille basée sur la police de caractère (1em = 1 caractère) */
	font-weight: normal; /* Ne pas mettre en gras */
	opacity: 0.8; /* Légère opacité pour que le titre reste discret */
	margin-top: 0;
}

@media all and (max-width: 1024px) { /* Condition pour s'adapter aux petits écrans (inférieur à 1024px) */
	h2 { /* Augmentation de la taille de police */
		font-size: 2.5em;
	}
}

/*-----------------------------------------------------------------------------------------------------------
	BOUTONS COORDONNES
------------------------------------------------------------------------------------------------------------- */

h3 { /* Ajout d'espaces entre les boutons */
	margin: 2em 1em;
}

h3 a { /* Mise en forme des coordonnées (les liens des titres h3)*/
	padding: 0.3em 1em; /* Ajout d'espace dans les boutons */
	font-size: 2em; /* Grande taille de police */
	text-decoration: none; /* Retrait du soulignement */
	color: var(--orange); /* Couleur du texte */
	border: solid; /* Ajout d'une bordure */
	border-radius: 0.5em; /* Arrondissement des coins */
	transition: 0.3s ease; /* Ralentissement et adoucissement de l'effet appliqué par la suite */
}

@media all and (max-width: 1024px) { /* Condition pour s'adapter aux petits écrans (inférieur à 1024px) */
	h3 { /* Augmentation de la taille des boutons */
		font-size: 1.5em;
	}
}

h3 a:hover { /* Application d'un effet sur les liens au survol de la souris */
	color: var(--bleu); /* Change de couleur */
}

.coordonnées {
	display: flex;
	align-items: center;
	justify-content: center;
}

@media all and (max-width: 1024px) { /* Condition pour s'adapter aux petits écrans (inférieur à 1024px) */
	.coordonnées { /* Augmentation de la taille de police */
		flex-direction: column;
		width: 100%;
	}
}

/*-----------------------------------------------------------------------------------------------------------
	INFORMATIONS SUR LES PRESTATIONS
------------------------------------------------------------------------------------------------------------- */

hr { /* Configuration du séparateur (ligne bleu) */
    border: none; /* Ne pas faire toutes les bordures du bloc */
    border-top: 0.2em solid; /* Seulement la bordure du bas */
    color: var(--bleu);
    overflow: visible;
    text-align: center;
	margin: 2em 3em;
	opacity: 0.5;
}

.cadre_blocs { /* Gestion du cadre contenant les 3 blocs d'information */
	display: flex;
	justify-content: space-between; /* Organise les blocs avec de l'espace entre eux */
	align-items: center; /* Centre les blocs dans le cadre */
	margin-bottom: 3em;
}

@media all and (max-width: 1024px) { /* Condition pour s'adapter aux petits écrans (inférieur à 1024px) */
	.cadre_blocs { /* Alignement vertical des blocs info */
		flex-direction: column;
	}
}

.bloc_info {
	padding: 0 2em; /* Espaces sur les côtés */
}

@media all and (max-width: 1024px) { /* Condition pour s'adapter aux petits écrans (inférieur à 1024px) */
	.bloc_info { 
		width: 80%; /*Prend plus de largeur sur l'écran */
		font-size: 2em; /*Agrandissement du texte */
		margin-bottom: 1em;
	}
	.bloc_info h4 { /* Diminution de l'espace autour des titres */
		font-size: 3em;
		margin: 0.5em 0;
	}
	.bloc_info h5 { /* Diminution de l'espace autour des prix */
		margin-bottom: 0.5em;
	}
}

h4 { /* Formattage des titres des prestations */
	font-size: 2.5em;
	color: var(--bleu);
}

h5 { /* Formattage des prix */
	font-size: 3em;
	color: var(--orange);
	margin: 0 0 1em 0;
}

.bloc_info ul, .services ul { /* Organisation des listes des deux pages */
	font-size: 1.2em;
	display : inline-block;
	margin :auto;
	text-align:left;
}

.bloc_info li, .services li {
	padding-bottom: 0.5em;
	list-style-type : circle; /* Change le style de la puce. Autres attributs : disc, circle, square, decimal... */
	opacity: 0.8;
}

/*-----------------------------------------------------------------------------------------------------------
	BAS DE PAGE
------------------------------------------------------------------------------------------------------------- */

footer { /* Organisation du bas de page */
	display: flex;
	flex-direction: column; /* Alignement vertical pour mettre le bouton Haut de page en dessous */
	justify-content: center;
	align-items: center;
	margin-bottom: 5em;
	width: 60%;
}

@media all and (max-width: 1024px) { /* Condition pour s'adapter aux petits écrans (inférieur à 1024px) */
	footer { /* Agrandissement du corps de page */
		width: 90%;
	}
}

.bas_de_page { /* Active l'organisation des blocs */
	display: flex;
}

.infos_supp { /* Alignement des liens en bas de page */
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.infos_supp a { /* Formattage des liens */
	font-size: 1.5em;
	text-decoration: none;
	color: var(--bleu);
	margin: 1em 0.3em;
	transition: 0.3s ease;
}

.infos_supp span {
	margin-bottom: 1em;
}

.infos_supp span a {
	font-size: 3em;
}


.infos_supp a:hover { /* Effet au survol : changement de couleur */
	color: var(--orange);
}

.carte iframe { /* Arrondissement des bors de la carte (agrandir pour arrondir) */
	border-radius: 1em;
	margin-left: 3em;
}

/*-----------------------------------------------------------------------------------------------------------
	PAGE A PROPOS
------------------------------------------------------------------------------------------------------------- */

.cadre_a_propos { /* Organisation du cadre contenant les deux blocs de texte */
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 3em 0;
}

@media all and (max-width: 1024px) { /* Condition pour s'adapter aux petits écrans (inférieur à 1024px) */
	.cadre_a_propos {
		flex-direction: column-reverse; /* Affichage vertical et inversement des blocs */
		padding: 3em;
	}
	.services { /* Ajout d'espace entre les deux blocs */
		margin-top: 5em;
	}
}	

.services { /* Etend le bloc sur tout sa place disponible */
	flex: 1;
}

.services img { /* Formattage de l'image d'illustration */
	width: 50%;
	height: auto;
	border-radius: 50%; /* Transforme l'image en rond (ne fonctionne que sur les images carrées, ratio 1:1)*/
}

h6 { /* Formattage du titre */
	font-size: 2em;
	color: var(--bleu);
	margin: 1em;
}

.infos_legales { /* Etend le bloc sur le double de place que l'autre bloc */
	flex: 2;
	padding-left: 3em;
}

.infos_legales p { /* Formattage des paragraphe */
	font-size: 1.2em;
	text-align: left;
	margin: 2em 0;
	opacity: 0.8;
}

.identifiants { /* Mise en gras des infos sur la société */
	font-weight: bold;
}