/* bleu1 (Shirley Gilbert ) 7295a6  */
/* rouge logo new E80515 */
/* fond gris f9f9f9 */

/* autres couleurs moins utilisées */


/* rouge logo  ancien : FB2A0A */ 
/* bleu globe 464E73 */
/* gris foncé 640196 */
/* marron 8f000b */
/* bleu clair C3ECF1 */

/* ancien bleu fonce 73513c */
/* nouveau bleu fonce - marron  73513c */
/* vert un peu bleuté 2fad87 */
/* nouveau violet*/
/* gray - HTML : #808080   */

/* --------------------------------------------------------------------------------------------------------------------------------------------- */
/*                                                          Pour le responsive : taille des écrans                                               */
/* --------------------------------------------------------------------------------------------------------------------------------------------- */
/* Jusqu’à 479px : smartphone en portrait */
/* De 480px à 959px : smartphone en paysage, tablette en portrait et petite tablette en paysage */
/* De 960px à 1280px : tablette en paysage, écran d’ordinateur de taille petite et moyenne */
/* 1281px et au delà : grand écran d’ordinateur (21″ et + en plein écran ) */


/* 1280 < taille                                        par défaut */
/* 960 < taille < 1279 px                               @media only screen and (max-width: 1279px) and (min-width: 960px)                        */
/* 480 < taille < 959 px                                @media only screen and (max-width: 959px) and (min-width: 480px)                         */
/* taille < 479px                                       @media only screen and (max-width: 959px) and (min-width: 480px)                         */

/* --------------------------------------------------------------------------------------------------------------------------------------------- */


/* FONT GOOGLE MONTSERRAT */
/* @import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap'); */


body {
  margin:0;
  font-size:1.1em;
  line-height:1.5em;
  color:#7295a6;
  font-family: helvetica, sans-serif;
  /* font-family: 'Montserrat', sans-serif; */
  background-color:white;
}
@media only screen and (max-width: 959px)
{body {font-size:1em; line-height:1.4em;}}    /* un peu plus petit sur smartphone  */

/* ------------------------------------------------------ */
/* pour être visible sur écran >959px et masqué sur smartphone */
/* ------------------------------------------------------ */
.invisible_smartphone  {display:inline;}
@media only screen and (max-width: 959px)
{.invisible_smartphone {display:none;}}
/* ------------------------------------------------------ */
/* pour être visible sur smartphone <959px et masqué sur écran*/
/* ------------------------------------------------------ */
.invisible_ecran  {display:none;}
@media only screen and (max-width: 959px) 
{.invisible_ecran {display:inline;}}

/*  tout l'écran */
.tout {
    width: 100%;
}

/* largeur max de la page sur grand écran  : 1300 px */
.page {
	max-width: 1300px;
	margin:auto;
	padding-top:20px;
	padding-right:10px;
	padding-bottom:20px;
	padding-left:10px;
	overflow: auto;
}

/* ------------------ */
/* Banner             */
/* ------------------ */

/* Bannière */
.top-banner {
  background-color: #55a9b6; /* couleur turquoise */
}

.top-banner .top-banner-content {
	max-width: 1300px;
	margin: auto;
	padding-top: 20px;
	padding-right: 10px;
	padding-bottom: 20px;
	padding-left: 10px;
	overflow: auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #fff;
	padding: 10px 20px;
	font-size: 16px;
}

/* Partie gauche */
.top-banner .top-banner-content .banner-left {
	display: flex;
	align-items: center;
	gap: 10px;
}

.top-banner .top-banner-content .banner-left .icon-check {
	display: inline-block;
	background: #fff;
	color: #55a9b6;
	font-weight: bold;
	border-radius: 50%;
	width: 28px;
	height: 28px;
	line-height: 28px;
	text-align: center;
	font-size: 16px;
}

.top-banner .top-banner-content .banner-left .text {
	font-weight: bold;
}

.top-banner .top-banner-content .separator {
	width: 1px;
	height: 20px;
	background: #fff;
	margin: 0 10px;
}

.top-banner .top-banner-content .rating strong {
	font-weight: bold;
}

/* Partie droite */
.top-banner .top-banner-content .banner-right {
	display: flex;
	align-items: center;
	gap: 12px;
}

.top-banner .top-banner-content .banner-right .follow {
	font-weight: bold;
}

.top-banner .top-banner-content .banner-right .social-icon {
	color: #fff;
	font-size: 18px;
	text-decoration: none;
	transition: opacity 0.3s;
}

.top-banner .top-banner-content .banner-right .social-icon:hover {
	opacity: 0.8;
}

.cta-button {
	display: inline-block;
	background-color: #55a9b6; /* turquoise */
	color: #fff;
	font-weight: bold;
	font-size: 20px;
	padding: 7px 28px;
	border-radius: 8px;
	text-decoration: none;
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	font-family: Arial, sans-serif;
}

.center-btn {
	text-align: center;
	margin: 20px 0; /* espace autour du bouton, optionnel */
}

/* Effet hover */
.cta-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
	color: #ffffff;
	text-decoration: none;
}

/* Effet clic */
.cta-button:active {
	transform: translateY(1px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}




/* ------------------ */
/* menu du haut écran */
/* ------------------ */

.menu_du_haut_ecran {
	overflow: visible;
	margin:auto;
	font-size: 1.5em;
	color:#7295a6;
	padding-left:0px;
	padding-right:0px;
	padding-top:3px;
	padding-bottom:3px;
	background-color: white;
	border-bottom : 1px solid #7295a6;
	text-align:left;
	z-index: 1;  /* sinon, les images s'affichent au dessus du menu  */
}

.menu_du_haut_ecran .page {
	padding-top: 5px;
}

/* le menu devient centré et moins gros si l'écran est <1200px */
@media only screen and (max-width: 1200px)
{.menu_du_haut_ecran {text-align:center; font-size: 1.3em;}}

.menu_du_haut_ecran a {
	margin:auto;
	color: #7295a6;
	text-decoration: none;
	line-height:50px;
}
.menu_du_haut_ecran a:hover {color: #0fb1c0;}
.menu_du_haut_ecran a.actif {color: #0fb1c0;}


/* ================================================== */
.menu_deroulant, .menu_deroulant ul {
	padding: 0;
	margin: 0;
}
.menu_deroulant li {
/* on place les liens du menu horizontalement */
    display: inline-block;
}
.menu_deroulant ul li {
/* on enlève ce comportement pour les liens du sous menu */
    display: inherit;
		/* list-style-image: url(img/icones/fleche_rouge.png); */

}
.menu_deroulant ul li a {
/* on enlève ce comportement pour les liens du sous menu */
    display: inherit;
	background-color:#f9f9f9;
	padding-left:10px;
	padding-right:10px;
	font-size:.8em;
	/* border-top : 1px dotted #7295a6; */
	border-radius:6px;
	/* line-height:1em; */
}

.menu_deroulant a {
    text-decoration: none;
    display: block;
	/* color:#000; */
}
.menu_deroulant ul {
    position: absolute;
/* on cache les sous menus complètement sur la gauche */
    left: -999em;
    text-align: left;
 	z-index:200;
}
.menu_deroulant li:hover ul {
/* Au survol des li du menu on replace les sous menus */
    left: auto;
}

/* --------------------------------- */
/* fin menu du haut écran            */
/* --------------------------------- */




/*----------------------------*/     
/* MENU SMARTPHONE  HAMBURGER */
/*----------------------------*/
.logo_smartphone
{float:right; max-width:18%; padding-right:10px; padding-top:0px;}
@media only screen and (max-width: 959px) {
		.logo_smartphone {
			max-width:35%;
			max-height: 40px;
	}
}

#menu_du_haut_smartphone {
  display: block;
  height:50px;
  /* line-height:100px; */
  background-color:white;
  position: relative;
  top: 1px;
  left: 1px;
  width:99%;
  z-index: 5;
  /* border-bottom : 1px solid #7295a6; */
  /* -webkit-user-select: none; */
  /* user-select: none; */
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 5px;
  box-sizing: border-box;
}
#menu_du_haut_smartphone input {
  display: block;
  width: 40px;
  height: 40px;
  position: absolute;
  /* padding-top:80px; */
  /* top: -7px; */
  /* left: -5px; */
  cursor: pointer;
  opacity: 0; /* pour cacher la case à cocher */
  z-index: 10; /* et la mettre au dessus du hamburger */
  -webkit-touch-callout: none;
}
/*
 * Just a quick hamburger
 */
#menu_du_haut_smartphone span {
  display: block;
  width: 30px;
  height: 2px;
  margin-bottom:7px; 
  margin-top: 7px;
  position: relative;
  background: #7295a6;
  border-radius: 3px;
  z-index: 15;
  transform-origin: 2px 0px;
  transition:	transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
				background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
				opacity 0.55s ease;
}
#menu_du_haut_smartphone span:first-child {transform-origin: 0% 0%;}
#menu_du_haut_smartphone span:nth-last-child(2) {transform-origin: 0% 100%;}

/* Transform all the slices of hamburger into a crossmark */
#menu_du_haut_smartphone input:checked ~ span {opacity: 1; transform: rotate(45deg) translate(-2px, -1px); background: #7295a6;}
/* But let's hide the middle one. */
#menu_du_haut_smartphone input:checked ~ span:nth-last-child(3) {opacity: 0; transform: rotate(0deg) scale(0.2, 0.2);}
/* Oh yeah and the last one should go the other direction */
#menu_du_haut_smartphone input:checked ~ span:nth-last-child(2) {transform: rotate(-45deg) translate(0, -1px);}



.social-container {
  text-align: center; /* centre le bloc */
  margin: 20px 0;
}

.social-links {
  list-style: none;
  display: inline-flex; /* permet de centrer la liste */
  gap: 15px;
  padding: 0;
  margin: 0;
}

.social-links li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: #fff; /* fond blanc */
  color: #558a9d; /* couleur bleu/gris des icônes */
  font-size: 20px;
  border-radius: 6px;
  transition: all 0.3s ease;
  text-decoration: none;
}

/* Facebook rond */
.social-links li:first-child a {
  border-radius: 50%;
}

/* Effet hover */
.social-links li a:hover {
  background-color: #558a9d;
  color: #fff;
}




/* #menu_du_haut_smartphone-sticky-wrapper {background-color:red; width:100%; z-index:15;} */

/* ici le menu HAMBURGER */


/* Make this absolute positioned at the top left of the screen  */
#menu_hamburger { 
  position: absolute;
  width: 70%;
  margin: -50px 0 0 -30px;
  padding-top: 50px;
  background: #f9f9f9;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  border:1px dotted #7295a6;
}

#menu_hamburger li {padding: 10px 0px 20px 0px; font-size: 1.1em;}

/* And let's slide it in from the left */
#menu_du_haut_smartphone input:checked ~ ul {transform: none;}

/* liens du menu hamburger */
#menu_hamburger a {color: #7295a6; text-decoration:none;}
#menu_hamburger a:hover {color: #0fb1c0;}
#menu_hamburger a.actif {color: #0fb1c0;}


/*----------------------------*/     
/* FIN MENU HAMBURGER        */
/*----------------------------*/




/* ------------------------------------------- */
/* Tailles des colonnes - écran et smartphones */
/* ------------------------------------------- */


/* Deux colonnes sur écran, 50% de large, 1 colonne sur smartphone */
.deux_colonnes {width:48%; float:left;}
@media screen and (max-width: 479px)
{.deux_colonnes {width:100%; text-align:center;}}

/*   un quart  devient 2 colonnes si <959 px et 1 colonne si <480px */ 
.un_quart
{width:24%; display:block; float:left; padding-top:10px; padding-bottom:10px; font-size:.8em;}
@media screen and (max-width: 959px){.un_quart  {width:50%;}}
@media screen and (max-width: 480px){.un_quart  {width:100%;}}

/*   un cinquième  devient 3 colonnes si <1000 px, 2 collones si <700px  et 1 colonne si <500px */ 
.un_cinquieme
{width:20%; display:block; float:left; padding-top:10px; padding-bottom:10px; font-size:.8em;}
@media screen and (max-width: 1000px){.un_cinquieme  {width:33%;}}
@media screen and (max-width: 700px){.un_cinquieme  {width:50%;}}
@media screen and (max-width: 500px){.un_cinquieme  {width:100%;}}




/* ------------------------ */
/* pour la page contact  */
/* ------------------------ */

fieldset{
padding: 5px 5px 5px 15px;
border: 1px dotted #7295a6;
border-radius : 3px;
background-color:white;
font-size: .8em;
}
textarea{
padding: 5px 5px 5px 0px;
border: 1px dotted #7295a6;
border-radius : 3px;
background-color:#f9f9f9;
font-size: 1.2em;
color:gray;
/* font-family: 'Titillium Web', sans-serif; */
}
.rounded {background-color:#7295a6; border-radius:3px; border:1px solid #7295a6; color:white; 
padding:2px 2px 2px 2px; font-family: calibri, sans-serif;
font-size:.9em;}
.rounded:hover{background-color:white; border:1px solid #7295a6; color:#7295a6;}

.message_erreur {background-color:#ffeefd; border-radius:3px; border:1px solid #0fb1c0; color:#0fb1c0; padding:5px; font-size:.8em; text-align:center;}

.message_succes {background-color:#dbfcde; border-radius:3px; border:1px solid #2fad87; color:#2fad87; padding:5px; font-size:.8em; text-align:center;}

/* ------------------------ */
/* pour la page références  */
/* ------------------------ */

/*   hauteur de ligne fixée */ 
.un_quart_ref
{width:24%; display:block; height:125px; float:left; padding-top:10px; padding-bottom:10px; font-size:.8em;}
@media screen and (max-width: 900px){.un_quart_ref  {width:49%;}}
@media screen and (max-width: 600px){.un_quart_ref  {width:99%;}}

/* LOGO CENTRé */
.logo_client {margin:auto; display:block;}
/* LOGO CENTRé */
.logo_client_projet {float:right; display:block;}
/* IMAGES GRISéES pour les logos de la page de référence */
.image_grisee {
	filter: grayscale(0);
	-webkit-filter: grayscale(0);
	-moz-filter: grayscale(0);
	-o-filter: grayscale(0);
	-ms-filter: grayscale(0);
}
.image_grisee:hover {
	filter: grayscale(1);
	-webkit-filter: grayscale(1);
	-moz-filter: grayscale(1);
	-o-filter: grayscale(1);
	-ms-filter: grayscale(1);

}
/* ZOOM sur logos de la page références */
.zoom {transition: transform .2s; }/* Animation */
.zoom:hover {transform: scale(1.15);} /* (zoom 115%) */



.fleche_haut_de_page {float:right;max-width:25px;background-image:url(img/icones/haut-de-page-noir.png);padding-right:25px;background-repeat:no-repeat; background-position:center center;}
.fleche_haut_de_page:hover {background-image:url(img/icones/haut-de-page-rouge.png);}
   
/* ------------------------ */
/* icone contact      */
/* ------------------------ */

.icone_contact {
	/* float:left;max-width:27px; */
	background-image:url(img/icones/contact_27x25_blanc.png);
	/* padding-right:25px; */
	background-repeat:no-repeat; 
	background-position:left center;}
.icone_contact:hover {background-image:url(img/icones/contact_27x25_bleu1.png);}



/*   trois quarts droite */ 
.trois_quarts_droite
{width:73%; display:block; float:right; padding-top:10px; padding-bottom:10px; font-size:.8em;}
@media screen and (max-width: 900px){.trois_quarts_droite  {width:48%;}}
@media screen and (max-width: 600px){.trois_quarts_droite  {margin:auto; width:100%;}}

/*   trois quarts gauche */ 
.trois_quarts_gauche
{width:73%; display:block; float:left; padding-top:10px; padding-bottom:10px; font-size:.8em;}
@media screen and (max-width: 900px){.trois_quarts_gauche  {width:48%;}}
@media screen and (max-width: 600px){.trois_quarts_gauche  {margin:auto; width:100%;}}

/*   un quart_picto  */ 
.un_quart_picto
{width:50%; display:block; float:left; padding-top:10px; padding-bottom:10px; font-size:.8em;}
/* @media screen and (max-width: 900px){.un_quart_picto  {width:50%;}} */
/* @media screen and (max-width: 600px){.un_quart-picto  {width:50%;}} */


/*taille des pictos fixée à 150 px de  côté  au lieu de 200 px */
.picto {display:block; max-width:150px; max-height:150px; margin:auto;}

/* pictos droite et picto gauche plus petit sur smartphone  */
.picto_droite {display:block; max-width:150px; max-height:150px; float:right;}
  @media screen and (max-width: 600px){.picto_droite  {max-width:100px; max-height:100px;}} 
.picto_gauche {display:block; max-width:150px; max-height:150px; float:left;}
  @media screen and (max-width: 600px){.picto_gauche  {max-width:100px; max-height:100px;}} 

  #website_logo {
	float: left; 
	width: 100%; 
	max-width: 410px; 
	padding-top: 30px;
  }
  
.login span {
	font-family: courier;
	font-size: .8em;
	color: #0fb1c0;
	text-transform: uppercase;
	font-weight: bold;
}

.login_pwd {
	/* width: 43%; */
	float:right;
	padding:0;
	text-align:right;
	color: #7295a6;
}
#login_hid {margin-top:0px;}   
/* le champ PWD est masqué sur smartphone et n'apparait que sur clic dans le champ login */
	@media screen and (max-width:600px) {#login_hid {display:none;}}

input{
	border: 1px dotted #7295a6;
	border-radius : 3px;
	background-color:#f9f9f9;
	font-size:1em;
	color:gray;
	/* font-family: 'Titillium Web', sans-serif; */
}



/* pour la page mentions légales et RGPD */
.pave_texte_colonne {margin-left:10px; margin-right:10px; padding:10px; border-radius:5px; text-align:left;}

/* input[size="60"]{ */
	/* width: 200px; */
/* } */

/* ====================== */
/* Titres H1 H2 et H3 */
/* ====================== */
h1 {
font-size:1.4em;
padding-top:10px;
font-weight: normal;
line-height:1.8em;
color:#0fb1c0;
}
@media screen and (max-width: 600px) {h1 {text-align:center;}}

h1 a {
color:#0fb1c0;
text-decoration : underline;
}



h2 {
font-size:1.2em;
font-weight: normal;
color:#7295a6;
}

h3 {
font-size:1.1em;
font-weight: normal;
color:#7295a6;
}
@media screen and (max-width: 600px) {h2 {text-align:center;}}
/* ======================= */
/* Liens normaux */
/* ======================= */
a {
color:#0fb1c0;
text-decoration:none;
}

a:hover {
text-decoration:underline; 
color:#111111;
}
/* BOUTONS BLEUS  */

.bouton {background-color:#7295a6; border-radius:3px; border:1px solid #7295a6; color:white; 
padding:2px 2px 2px 2px; 
font-size:.7em;}
.bouton:hover{background-color:white; border:1px solid #7295a6; color:#7295a6;}

 /* BOUTONS SUIVANT PRECEDENT */
.bouton_suivant {margin:auto; max-width:25px;background-image:url(img/icones/suivant_blanc.png);padding-right:25px;background-repeat:no-repeat; background-position:center center;}
.bouton_suivant:hover {background-image:url(img/icones/suivant_noir.png);}
.bouton_precedent {margin:auto; max-width:25px;background-image:url(img/icones/precedent_blanc.png);padding-right:25px;background-repeat:no-repeat; background-position:center center;}
.bouton_precedent:hover {background-image:url(img/icones/precedent_noir.png);}

/* BOUTON TARIF */
.bouton_tarif {
	display:block;
	background-color:#55a9b6; 
	border-radius:5px;
	border:1px solid #55a9b6; 
	color:white; 
	padding:0;
	list-style-image: url(img/icones/fleche_blanche.png);
	}
.bouton_tarif:hover {
	background-color:white; 
	text-decoration:none;
	color:#55a9b6;
	list-style-image: url(img/icones/fleche_bleu1.png);
	}
.bouton_tarif a {
	background-color:#55a9b6; 
	color:white; 
	list-style-image: url(img/icones/fleche_blanche.png);
	text-decoration:none;
	}
.bouton_tarif a:hover {
	background-color:white; 
	color:#55a9b6; 
	list-style-image: url(img/icones/fleche_bleu1.png);
	text-decoration:none;
	}
.bouton_tarif h1 {
	background-color:#55a9b6; 
	color:white; 
	list-style-image: url(img/icones/fleche_blanche.png);
	text-decoration:none;
	}
.bouton_tarif h1:hover {
	background-color:white; 
	color:#55a9b6; 
	list-style-image: url(img/icones/fleche_bleu1.png);
	text-decoration:none;
	}





/* COMPTEUR PAGE D'ACCUEIL  associé au fichier compteur.js  */
.compteur-contenant {
	background-image : url(img/pictos/anneau_bleu1_150.png);
	background-repeat:no-repeat; 
	background-position:center center;
	position: relative;
}
.compteur {
	color:#7295a6;
	font-size: 40px;
	line-height: 4.5;
	position: relative; top:0px; 
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: -0.02em;
}
/* balise HR pour la page projets */
.hr_bleu1 {
height: 1px;
margin: -0.5em 0;
padding: 0;
color: #7295a6;
background-color: #7295a6;
border: 1px;
}

.hr_blanc {
height: 1px;
margin: -0.5em 0;
padding: 0;
color: white;
background-color: white;
border: 1px;
}



/* flèches pour <ul> */
.fleche_rouge	{list-style-image: url(img/icones/fleche_bleu1.png);}
.fleche_blanche	{list-style-image: url(img/icones/fleche_blanche.png);}
.fleche_bleu1	{list-style-image: url(img/icones/fleche_bleu1.png);}


/* alignement de texte */
.gras {font-weight: bold;}
.centree {text-align: center;}
.justifie {text-align: justify;}
.aligne_a_droite {text-align: right;}
.petite_majuscule{font-variant: small-caps;}
.aligne_a_gauche {text-align: left;}

/* couleurs de texte */
.texte_rouge {color:#0fb1c0;}
.texte_blanc {color:white;}
.texte_noir {color:black;}
.texte_violet {color:#640196;}
.texte_vert {color:green;}
.texte_bleu_fonce {color:#73513c;}
.texte_bleu1 {color:#7295a6;}

h1.texte_bleu1 {
	color: #000000;
}


/* Couleurs de fond */
.fond_rouge {background-color:#0fb1c0;}
.fond_gris {background-color:#f2f2f2;}
.fond_bleu1 {background-color:#7295a6;}
.fond_blanc {background-color:white;}
.fond_bleu_clair {background-color:#C3ECF1;}
.fond_bleu_fonce {background-color:#73513c;}

/* couleurs liens bas de page */
.bas_de_page a{
color:white;
text-decoration:underline;
}
.bas_de_page a:hover {
color:black;
}


/* -------------------- */
/* pour la page de test */
/* -------------------- */
.col_test {width: 51%; vertical-align:top; padding-left:2px; padding-right:2px; padding-top:0px; background-color:white; border-bottom-width:1px; border-bottom-style:dotted; border-bottom-color:#7295a6;}
.col_oui-non {width: 48%; text-align:center; padding-left:2px; padding-right:2px; background-color:white;}

/*  style des boutons radios page test */
	input[type=radio]{-webkit-appearance:none; -moz-appearance:none; appearance:none; border-radius:50%; width:20px; height:20px; border:2px solid #7295a6;
	  transition: 0.2s all linear; outline:none; margin-right:0px; position:relative; top:6px;}
	input[type=radio]:checked {border:8px solid #7295a6;}
	
/* -------------------------------------------------------------------------- */
/* pour la page tableau prix - pour le calage de la ligne de titre du tableau */
/* -------------------------------------------------------------------------- */
#tableau_prix {margin-top:0px;}
@media screen and (max-width: 600px) 
{#tableau_prix {margin-top:35px;}}	

	



/* COULEURS DE SELECTION : fond gris et texte bleu1  */
::selection{
    background-color:#dddddd;
    color:#7295a6;
}