:root {
	--fond-ecran: #f2f2f2;
	--fond-autre: #efefe8;
	--rouge1: #e11b06;
	--rouge2: #e73e2d;
	--texte: #000;
	--texte-hover: #554f50;
}
@media (prefers-color-scheme: dark) {
	:root {
	--fond-ecran: #211c1c;
	--fond-autre: #312c2c;
	--rouge1: #e73e2d;
	--rouge2: #e75445;
	--texte: #f2f2f2;
	--texte-hover: #d2b9a9;
	}
}
/**********************************************************************************************************/
/*****************************************   F O N T S  ***************************************************/
/**********************************************************************************************************/
@media all {
	/* fontello icon font */
	@font-face {	/*  */
	  font-family: 'fontello';
	  font-style: normal;
	  font-weight: normal;
	  src: url('fonts/fontello/fontello.eot?36671848');
	  src: url('fonts/fontello/fontello.eot?36671848#iefix') format('embedded-opentype'),
		   url('fonts/fontello/fontello.woff2?36671848') format('woff2'),
		   url('fonts/fontello/fontello.woff?36671848') format('woff'),
		   url('fonts/fontello/fontello.ttf?36671848') format('truetype'),
		   url('fonts/fontello/fontello.svg?36671848#fontello') format('svg');
	}
	/* fontello icon font - HELP */
	@font-face {
		font-family: 'fontello-help';
		src: url('fonts/fontello-help/fontello-help.eot?6829247');
		src: url('fonts/fontello-help/fontello-help.eot?6829247#iefix') format('embedded-opentype'),
			 url('fonts/fontello-help/fontello-help.woff?6829247') format('woff'),
			 url('fonts/fontello-help/fontello-help.ttf?6829247') format('truetype'),
			 url('fonts/fontello-help/fontello-help.svg?6829247#fontello-help') format('svg');
		font-weight: normal;
		font-style: normal;
	}
}

body {
	background: #f2f2f2;
	color:#211c1c;
	font-family: Exo, sans-serif;
}
html,
body {
  scroll-behavior: smooth;
}
*{box-sizing:border-box;}
#top {width:100%;}
header, header img, section *{
		/*max-width:1400px;*/
		margin:0 auto;
}
header {
	background-image: url("../images/2iStore-LogoN.svg"), url("../images/pay3.svg"), url("../images/BIM.png"), url("../images/computer-table-keyboard.webp");/* , url("../images/banner.webp");*/
	overflow:hidden;
	background-size: 7vw, 11vw, 20vw, cover;
	background-position: 8% 10%, 8% 70%, 85% 10%, center center;
	background-repeat:no-repeat;
	height: 17vw;
}

section{width:100%; margin:0px auto; padding:0 10px ;}
section.impaire{ background:#efe7e8;}

h1, h2, h3, h4{color:#e73e2d;}
h1 { font-size: 1.8rem; letter-spacing: 0rem; text-align: center; margin:0 auto;
	text-shadow:1px 1px 5px rgba(40, 1, 1, 0.8) ;color:#fff;
	}
header h1{
	margin:0;
	padding:0;
	width:100%;
	margin-bottom: 0.5vw;
	font-size: calc(0.3rem + 2vw);
	text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
}
header h1 span{
	color: #e73e2d;
	text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff, 1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff, 1px 1px 5px rgba(40, 1, 1, 0.8);
}
header h5{
	margin:0;
	margin-bottom: 0.5vw;
}
header a {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}
h2 { font-size: 1.6rem; text-align: center; margin:0 auto;}
h3 { font-size: 1.2rem;}
h4 { font-size: 1.0rem;}
p  { color:#211c1c;font-size: 1.0rem; margin:0.5rem auto;}

a  {
	color:#8A1A0F;
	text-decoration:none;
	transition: all 0.3s ease;
}
a[target="_blank"]::after {
	content: " \e813";
	font-family: Fontello;
	font-size: 0.8em;
}
a:hover{
	color: #e11b06;
}
footer{
	/*padding:10px;
	text-align:center;
	background:#e73e2d;*/
}
footer a {/*color:#211c1c; margin:0 10px;*/}


ul {
	list-style-image: url("../images/2iStore-Puce1011.png");	
}
ul ul {
	list-style-image: url("../images/2iStore-Puce810.png");	
}
li {
	margin-top: 0.8em;
	margin-bottom: 0.8em;
	line-height: 1.4em;
}
/*li::before {
	content: '';
	display: inline-block;
	height: 14px;
	width: 15px;
	background-image: url("../images/2iStore-LogoN-.svg");
	background-repeat: no-repeat;
	margin-right: 7px;
}*/
img {
	border-radius: 10px;
	width: auto;
	max-width: 100%;
}
nav {
}
nav ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	list-style-type: none;
	list-style-image: none;
	padding: 0;
	margin: 0;
	gap: 1px;
}
nav ul li {
	padding: 0;
	margin: 0;
	flex-grow: 1;
	text-align: center;
}
nav ul li a {
	display: block;
	font-size: calc(11px + 0.6vw);
	padding: 5px 20px;
	background-color: #e73e2d;
	color: #ffffff;
	transition: all 0.3s ease;
}
nav ul li a:hover {
	background-color: #f6c6c6;
	color: #e73e2d;
}

button {
	background-color: #e73e2d;
	border-radius: 10px;
	color: #ffffff;
	font-size: 1.3em;
}

.cols2 {
	column-count: 2;
}

.navigation {
	padding: 30px 10vw;
	background: linear-gradient(180deg,rgba(252, 179, 179, 1) 0%, rgba(242, 242, 242, 0) 18%);
}
.navigation.bim {
	background: linear-gradient(180deg,rgba(252, 179, 179, 1) 0%, rgba(242, 242, 242, 0) 18%), url("../images/1080x1080-MAJ-background.jpg");
	background-repeat: no-repeat;
	background-size: cover;
}
.navigation h2 {
	text-align: left;
	margin-bottom: 20px;
	text-shadow: white 0px 0px 2px, white 0px 0px 5px, white 0px 0px 8px;
	position: relative;
}
.navigation h2 a.top {
	background: url("../images/2iStore-LogoN.svg");
	background-position: center;
	background-repeat: no-repeat;
	width: 30px;
	text-align: center;
	position: absolute;
	left: -40px;
	transition: all 0.3s ease;
}
.navigation h2 a.top:hover {
	transform: scale(110%);
}
.navigation h2 a.prec, .navigation h2 a.suiv {
	/*background: url("../images/prec.svg");
	background-position: center;
	background-repeat: no-repeat;*/
	width: 30px;
	/*text-align: center;*/
	position: absolute;
	left: -40px;
	top: 40px;
	transition: all 0.3s ease;
	line-height: 0;
}
.navigation h2 a.suiv {
	/*background: url("../images/suiv.svg");
	background-repeat: no-repeat;*/
	top: 59px;
}
.navigation h2 a.prec:hover, .navigation h2 a.suiv:hover {
	transform: scale(110%);
}
.navigation h2 a.prec:hover svg polygon, .navigation h2 a.suiv:hover svg polygon {
	fill: #ff0000;
}


.clear{clear:both;}
.invisible{ width:0px;height:0px;overflow:hidden; }
.telephone{
	display: block;
	margin: 10px auto 10px;
	padding: 10px;
	text-align:center;
	/*max-width:500px;*/
	border:1px solid #e73e2d;
	border-radius:15px;
	background:#e3e3e3;
	/*line-height:1rem;*/
}
a.telephone {
	font-weight: bold;
}
a.telephone:hover {
	background:#FEC8C8;
}
.colonnes{
	display:flex;
	flex-flow:row;
	flex-wrap: wrap;
	justify-content: stretch;
	column-gap: 5vw;
}
.colonnes>*{
	/*border:0;*/
	flex-grow: 1;
	width:45%;
	min-width: 400px;
}
.colonnes>*:last-child{/*margin-left:10px;*/}
.colonnes>*:first-child{/*margin-right:10px;*/}

.logoFloatR {
	float: right;
	max-width: 300px;
	border-radius: 0px;
	margin-left: 10px;
}
.chapeau {
	font-weight: 600;
	font-style: italic;
}
.zoom img {
	transition: all 0.3s ease;
}
.zoom:hover img {
	transform: scale(102%);
}
.qr {
	max-width: 300px;
}

@media (max-width: 420px){
	/*header{background-image:url(../images/entete.jpg);}*/
	}
@media (min-width:421px) and (max-width: 768px){ 
	/*header{background-image:url(../images/entete.jpg);}*/
	}
@media (max-width:1095px) {
	/*header{background-image:url(../images/entete.jpg);}*/
	.cols2 {column-count: 1;}
	}
@media (max-width : 450px){
	.telephone{line-height:2rem;width:280px;}
	footer{line-height:3rem;}
	section{width:100%;margin:10px 0px; padding:0 3px;}
	.colonnes{display:flex;flex-flow:column;}
	.colonnes>*:last-child{border:0; margin-left:0;}
	.colonnes>*:first-child{border:0; margin-right:0;}
	.colonnes>* {
		min-width: 100%;
	}
	.navigation {padding: 30px 2vw;}
	header {
		height: 38vw;
		background-size: 18vw, 30vw, 39vw, cover;
		background-position: 2% 10%, 2% 75%, 97% 10%, center center;
	}
}

/*  ANIMATION DES IMAGES.  */
.img_defil{ overflow:hidden; max-height:400px;}
@keyframes image_defil {
	0% {left:-100%;}
	100% {left:0%;}
}
@keyframes image_defil_reverse {
	0% {left:0%;}
	100% {left:-100%;}
}
.img_defil>*{
	position:relative;top:-20%;
	width:200%;
	height:auto;
	animation-duration:12s; 
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-direction: alternate-reverse;
	animation-delay:4s;
	animation-name: image_defil;
}
.reverse>*{animation-name: image_defil_reverse;left:-100%;animation-delay: 1.5s;}


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

  .img_defil2{ overflow:hidden; }
  @keyframes image_defil2 {
  0% {left:-100%;}
  45%{left:-100%}
  55%{left: 0%}
  100% {left:0%;}
  }

  .img_defil2>*{
  height:100px !important; width:500px !important;
  position:relative;top:5%;
  animation-duration:7s; 
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
  animation-delay:1s;
  animation-name: image_defil2;
  }


/* Responsive Navigation */

div>input{display:none;}
.nav-inner {
	/*position: absolute;*/
	/*width: 99vw;*/  
	/*max-height:1000px;*/  /* ++++++++++++++++++++++++++++++++++++++ */
	overflow:hidden;
	transition: max-height 1s;
	transition-timing-function: ease-in;
	/*background:rgba(128,128,128,0.05);*/
}
/* here's goes the slide effect */
input:checked ~ .nav-inner {
	max-height:0px;       /* ++++++++++++++++++++++++++++++++++++++ */
	background:rgba(0,0,0,0);
}
.fleche{
	display:none;
	position:relative;
	top:5px;
}
input:checked ~ label>h2>.fleche{
	display:inline;}

.nav-button {
	display: block;
  	padding-top:30px; /*background:rgba(222,222,222,0.2);*/
  	cursor: pointer;
  	-webkit-tap-highlight-color:rgba(0,0,0,0.5);
}

/* Styles page contact - - - - - - - -*/
textarea{width:100%;/*color:#000;  background:#f2f2f2;*/}  
label{color:#000;display:block; font-weight:bold; }
input, button{width:50%;/*color:#000; background:#f2f2f2;*/ }
button{}  
input[disabled], textarea[disabled] { color: #686868; }
button[disabled] { background-color: #686868; }


/* Style pour mode SOMBRE */
@media (prefers-color-scheme: dark) {
	body { background: #d6d6d6;}
	img {
		filter: brightness(75%);
	}
}