*.::before,::after{
	box-sizing: border-box;
}

html {
--text-color: #000;
--entete-color: #74FEDB;
--section-color: #E6FFF8;
--field-color: #75ffd9;
--pied-color : #ADD1FF;
--menutexte-color: #FFDDA6;
--titre_rub_color:#0b2686;
--background-bouton: linear-gradient(to bottom, #57b, #148);
box-sizing: border-box;
color: var(--text-color);
font-size:1.2rem;
}
body{
	width:98%;
	margin : auto;
	background : var(--section-color);
}
header{
	background :var(--pied-color);
	border-radius:1em 1em 0 0;
}

.entete{width:95%;margin:auto; display:flex;flex-direction:row;align-items: center;
  justify-content: center;margin-bottom: 1rem}
.case1{width:10%;}
.case2{width:80%;}
.case3{width:10%;}
.case3 img.logo_email{
	width:80%;display:block;margin:auto;
}
 .logo_mag{width:80%}
.cas3 .btn_infos{
	width:80%;border:1px solid #aaa;margin:auto;background:#0b2686;
}
.btn_infos a{text-decoration:none;color:#fff;display:block;text-align:center}
img.logo_mag{
	width: 80%;display:block;
	margin:auto;
}
.im_caddy{width:70%;display:block;margin:auto;}
.menugammes{
	display : flex ; 
	flex-flow : row wrap;
	justify-content : flex-start;
	gap:.5em;
	align-items:flex-start;
}
.menugammes > div{
	border:1px solid #000;
	border-radius:.5rem;
	padding:.5rem;
	box-shadow:.1rem .1rem .5rem 0 #124;
	background-image:var(--background-bouton);
}
.menugammes a,.gamme{
	text-decoration: none; color:black;
	color : var(--menutexte-color);
}
.liste_svg{width:1.5rem;background-color:var(--menutexte-color)}
button.lien_sous_rub,.bouton2{
	display:block;
	text-align:center;
	margin:.3rem;
	margin-left:2em;
	padding:.2rem;
	background :#BFF4FF;
	border-radius:.2rem;
	color : var(--text-color);
} 

button.lien_sous_rub a,.bouton2 a{
	color : var(--text-color);
}
.sous_rub{display:none;}
.rub{display :none;margin-top:1rem;border:1px solid #aaa;padding:.2rem;border-radius:.1rem}