@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Oswald&display=swap');

*, body, p, h1, h2, h3,h4, h5, blockquote, span, div, i, strong, em, div, a, ul, li, ol, label, b, td
{
	font-family: 'Open Sans';
	font-weight: 400;
	color:#000;
}

h1, h2, h3, h4, h5,
h1 a, h2 a, h3 a, h4 a, h5 a
{
	font-family: 'Oswald';
}

p, li
{
	font-size: 14px;
}

sup
{
	font-size: .5em;
	font-weight: normal!important;
}

body
{
	background-color: #fff;
}

#branding
{
	background: #fff;
	padding: 20px 0;
	height: 100px;
}


.logo
{
	left: 50%;
  transform: translateX(-50%);
  top: 0;
  width: 150px;
  position: absolute;
  height: 106px;
  padding: 20px;
  background: #fff;
 
  float: left;
  position: relative;
  transform: none;
  left: auto;
  top: auto;

}

.logo .sabotage
{
	position: absolute;
	right: 20px;
	top:20px;
	width: 100%;
}

.glitch
{
	position: absolute;
	right:0;
	top:0;
}

.glitch img
{
	height: 106px;

}

@keyframes noise-anim {
  0% {
    clip: rect(26px, 9999px, 89px, 0);
  }
  5% {
    clip: rect(15px, 9999px, 23px, 0);
  }
  10% {
    clip: rect(51px, 9999px, 61px, 0);
  }
  15% {
    clip: rect(61px, 9999px, 48px, 0);
  }
  20% {
    clip: rect(10px, 9999px, 93px, 0);
  }
  25% {
    clip: rect(31px, 9999px, 64px, 0);
  }
  30% {
    clip: rect(45px, 9999px, 42px, 0);
  }
  35% {
    clip: rect(6px, 9999px, 71px, 0);
  }
  40% {
    clip: rect(81px, 9999px, 65px, 0);
  }
  45% {
    clip: rect(69px, 9999px, 71px, 0);
  }
  50% {
    clip: rect(93px, 9999px, 100px, 0);
  }
  55% {
    clip: rect(12px, 9999px, 87px, 0);
  }
  60% {
    clip: rect(45px, 9999px, 14px, 0);
  }
  65% {
    clip: rect(54px, 9999px, 80px, 0);
  }
  70% {
    clip: rect(8px, 9999px, 81px, 0);
  }
  75% {
    clip: rect(62px, 9999px, 6px, 0);
  }
  80% {
    clip: rect(86px, 9999px, 89px, 0);
  }
  85% {
    clip: rect(8px, 9999px, 56px, 0);
  }
  90% {
    clip: rect(21px, 9999px, 77px, 0);
  }
  95% {
    clip: rect(63px, 9999px, 36px, 0);
  }
  100% {
    clip: rect(97px, 9999px, 87px, 0);
  }
}
@keyframes noise-anim-2 {
  0% {
    clip: rect(3px, 9999px, 98px, 0);
  }
  5% {
    clip: rect(19px, 9999px, 44px, 0);
  }
  10% {
    clip: rect(96px, 9999px, 28px, 0);
  }
  15% {
    clip: rect(9px, 9999px, 42px, 0);
  }
  20% {
    clip: rect(33px, 9999px, 62px, 0);
  }
  25% {
    clip: rect(45px, 9999px, 19px, 0);
  }
  30% {
    clip: rect(27px, 9999px, 66px, 0);
  }
  35% {
    clip: rect(24px, 9999px, 93px, 0);
  }
  40% {
    clip: rect(99px, 9999px, 3px, 0);
  }
  45% {
    clip: rect(33px, 9999px, 21px, 0);
  }
  50% {
    clip: rect(90px, 9999px, 78px, 0);
  }
  55% {
    clip: rect(53px, 9999px, 42px, 0);
  }
  60% {
    clip: rect(21px, 9999px, 58px, 0);
  }
  65% {
    clip: rect(53px, 9999px, 16px, 0);
  }
  70% {
    clip: rect(77px, 9999px, 76px, 0);
  }
  75% {
    clip: rect(99px, 9999px, 63px, 0);
  }
  80% {
    clip: rect(1px, 9999px, 82px, 0);
  }
  85% {
    clip: rect(56px, 9999px, 21px, 0);
  }
  90% {
    clip: rect(56px, 9999px, 26px, 0);
  }
  95% {
    clip: rect(56px, 9999px, 74px, 0);
  }
  100% {
    clip: rect(76px, 9999px, 28px, 0);
  }
}

@keyframes noise-anim-3 {
  0% {
    clip: rect(21px, 9999px, 35px, 0);
  }
  5% {
    clip: rect(34px, 9999px, 9px, 0);
  }
  10% {
    clip: rect(6px, 9999px, 46px, 0);
  }
  15% {
    clip: rect(81px, 9999px, 72px, 0);
  }
  20% {
    clip: rect(29px, 9999px, 30px, 0);
  }
  25% {
    clip: rect(77px, 9999px, 9px, 0);
  }
  30% {
    clip: rect(51px, 9999px, 22px, 0);
  }
  35% {
    clip: rect(63px, 9999px, 49px, 0);
  }
  40% {
    clip: rect(59px, 9999px, 83px, 0);
  }
  45% {
    clip: rect(3px, 9999px, 34px, 0);
  }
  50% {
    clip: rect(43px, 9999px, 70px, 0);
  }
  55% {
    clip: rect(88px, 9999px, 20px, 0);
  }
  60% {
    clip: rect(71px, 9999px, 66px, 0);
  }
  65% {
    clip: rect(90px, 9999px, 25px, 0);
  }
  70% {
    clip: rect(22px, 9999px, 38px, 0);
  }
  75% {
    clip: rect(83px, 9999px, 99px, 0);
  }
  80% {
    clip: rect(83px, 9999px, 42px, 0);
  }
  85% {
    clip: rect(53px, 9999px, 59px, 0);
  }
  90% {
    clip: rect(63px, 9999px, 34px, 0);
  }
  95% {
    clip: rect(71px, 9999px, 28px, 0);
  }
  100% {
    clip: rect(1px, 9999px, 9px, 0);
  }
}


.glitch-before {
  
  position: absolute;
  right: 2px;
  
	background: #fff;
  top: 0;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  animation: noise-anim 3s infinite linear alternate-reverse;
}

.glitch-before img
{
	filter: drop-shadow(1px 0px 0px #F00);
	height: 106px;

}

.glitch-after {
  position: absolute;
  right: -2px;
	background: #fff;

  top: 0;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  animation: noise-anim-3 2s infinite linear alternate-reverse;

}

.glitch-after img
{
  filter: drop-shadow(1px 0px 0px #00F);
	height: 106px;
}



#access
{
	float: right;
	margin-top: 35px;
}

#access ul > li
{
	list-style: none;
	padding: 0;
  	text-align: right;

}

#access ul > li > a
{
	text-transform: uppercase;
  font-family: "Oswald";
  font-size: 15px;
  display: inline-block;
  line-height: 30px;
  color: #555;
  margin: 20px;
    margin-right: 0;
  margin-left: 27px;
}

#access ul > li > a
{
	position: relative;
}

#access ul > li > a:hover
{
	
}

#access ul > li.studio > a
{
	font-weight: bold;

}

/* 1. Le conteneur : le lien <a> */
#access ul > li > a {
  position: relative;
  color: #000; 
  text-decoration: none;
}

/* 2. Préparation des pseudo-éléments (les fantômes) */
#access ul > li > a::before,
#access ul > li > a::after {
  /* Récupère le texte (via le JS que nous avons fait) */
  content: attr(data-text); 
  
  /* Positionnement absolu par-dessus l'original */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  /* Fond blanc (comme votre code .glitch) pour masquer le texte noir en dessous */
  background: #fff; 

  /* Important : cacher par le clipping */
  overflow: hidden;
  
  /* Etat initial : "caché" (comme votre code .glitch) */
  /* On ne les verra pas tant que le hover n'active pas l'animation */
  clip: rect(0, 900px, 0, 0);
}

/* 3. Fantôme ROUGE (::before) */
#access ul > li > a::before {
  /* On adapte le "right: 2px" de votre code avec un transform */
  transform: translateX(2px);
  
  /* Au lieu du filter (qui marche mal sur le texte), on colore le texte */
  color: #000;
}

/* 4. Fantôme BLEU (::after) */
#access ul > li > a::after {
  /* On adapte le "right: -2px" de votre code */
  transform: translateX(-2px);
  
  /* On colore le texte en bleu */
  color: #fff;
}

/* 5. L'ACTION AU SURVOL : On lance les animations */
#access ul > li > a:hover::before {
  /* On applique la 1ère animation de votre logo */
  animation: noise-anim 3s infinite linear alternate-reverse;
}

#access ul > li > a:hover::after {
  /* On applique la 2nde animation de votre logo */
  animation: noise-anim-3 2s infinite linear alternate-reverse;
}




#access ul > li > a:hover::after,
#access ul > li.current-menu-item a::after,
#access ul > li.current_page_parent a::after
{
	
	opacity: 1;

}


#colophon, .credits
{
	background: #fff;
	margin-top: 50px;
	padding: 0 10px;
}

.gris-clair
{
	background: #F5F5F5;
	background: #fff;
}

.blanc
{
	background: #fff;
}

.gris-fonce
{
	background: #333;
}

.section
{
	padding: 0;
	padding-top: 50px;
	clear: both;
}

.section .col
{
	padding: 10px;
	box-sizing: border-box;
	margin: 0 10px;
}


.section .centrer,
.section .full,
.section .full-4
{
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	align-items: center;
}

.section .centrer.colonne-haut
{
	align-items: normal;
}

.section .col-100
{
  grid-column: span 12;	
}

.section .col-66
{
	grid-column: span 8;
}

.section .col-50
{
	grid-column: span 6;
}

.section .col-33
{
	grid-column: span 4;
}

.section .col-25
{
	grid-column: span 3;
}

.section ul 
{
	list-style: disc;
}

.section ul li::before 
{
	/*content: "\25AA"; 
	color: #fff;
	display: inline-block; 
	width: 1em;
	margin-left: -1em;
	font-size: 20px;*/
}

.section ol {
list-style: none; 
counter-reset: li;
}


.section ol li::before {content: counter(li); 
	color: #fe5400;
    display: inline-block; 
    width: 1em; 
    margin-left: -1.5em;
    margin-right: 0.5em; 
    text-align: right; 
    direction: rtl;
}

.section ol li {counter-increment: li}

.section a
{
	color:#000;
	font-weight: bold;
}

.section b,
.section strong
{
	font-weight: 600;
}

.katex-eq
{
	
}

.katex-eq *
{
	font-family: KaTeX_Main, "Times New Roman", serif;
}

blockquote
{
	padding-left: 20px;
	opacity: .8;
	border-left: 5px dotted rgba(0,0,0,.3);
}

blockquote p
{
	font-size: 16px;
}

.credits p,
.credits p a
{
	font-size: 10px;
	text-transform: uppercase;
}

.excerpt_more
{
	display: none;
}

.article .vignette
{
	float: left;
}

.date
{
	color:#999;
	font-size: 12px;
	text-transform: uppercase;
}

.article .vignette a img
{
	margin-right: 20px;
}

.wpcf7-form label
{
	font-family: "Oswald";
	font-size: 14px;
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
input[type="number"],
select
{
	background: #fff;
	height: 40px;
	border-radius: 5px;
	border:1px solid #DDD;
	outline: none;
	padding-left: 10px;
	font-family: "Oswald";
	font-size: 16px;
	width: 400px;
	max-width: 100%;
	color:#000;
}

.wpcf7 .wpcf7-stripe .wpcf7-form-control
{
	height: 40px;
	border-radius: 5px;
	border: 1px solid #DDD;
	background: #fff;
	max-width: 410px;
	padding: 12px 10px;
	box-sizing: border-box;
}

.wpcf7 .euro
{
	transform: translate(-40px, 10px);
	position: absolute;
	font-size: 20px;
	opacity: .2;
}

textarea
{
	height: 150px;
	resize: none;
}

.wpcf7-form input[type="submit"],
.wpcf7-stripe button
{
	background: #fff;
	color:#999;
	height: 40px;
	padding: 0 20px;
	text-transform: uppercase;
	font-size: 14px;
	box-shadow: none;
	border: none;

	color: #000;
	border: 1px solid #000;
	font-family: "Oswald";
	font-size: 14Px;
	text-transform: uppercase;
	letter-spacing: .1em;

	transition: .3s ease all;
}

.wpcf7-form input[type="submit"]:hover,
.wpcf7-stripe button:hover
{
	background: #fff;
	letter-spacing: .2em;
	cursor: pointer;
}


#cookie-notice span
{
	color:#fff;
}

#cookie-notice .cn-button
{
	background: #fe5400;
}

.bouton
{
	background: #fff;
	color:#000;
	border: 1px solid #000;
	font-family: "Oswald";
	font-size: 14Px;
	text-transform: uppercase;
	transition: .3s ease all;
	  letter-spacing: 0;
}

.bouton+.bouton,
a+a .bouton
{
	margin-left: 20px;
}

.bouton a
{
	color:#000;
}

.bouton:hover
{
	background: #000;
	color:#fff;
}

.vignette-single
{
	display: block;
	text-align: center;
	margin: 0 auto;
}


.sociaux
{
	float: right;
}

.sociaux a
{
	width: 30px;
	height: 70px;
	float: left;
	margin-left: 10px;
	background-size: auto 15px !important;
}

.sociaux a:hover
{
	transform: scale(1.2);
}

.sociaux a.fb
{
	background: url('images/fb-noir.svg') no-repeat center;
}

.sociaux a.ig
{
	background: url('images/ig-noir.svg') no-repeat center;
}

.leaflet-popup-content p
{
	margin: 0!important;
}

.leaflet-control-attribution
{
	display: none!important;
}

.grid
{
	-webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -webkit-column-gap: 20px;
  -moz-column-gap: 20px;
  column-gap: 20px;
}

.full-4 .grid
{
	-webkit-column-count: 4;
  -moz-column-count: 4;
  column-count: 4;
  -webkit-column-gap: 20px;
  -moz-column-gap: 20px;
  column-gap: 20px;
}

.grille-petite
{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	column-gap: 20px;
	row-gap: 20px;
}


.grid-item,
	.grid-item-presta
{ 
/*	  width: 33.33%;*/
  display: block;
/*  float: left;*/
  box-sizing: border-box;
/*  padding: 10px;*/
  cursor: pointer;

  break-inside: avoid;
  cursor: pointer;
  display: grid;
  grid-template-rows: 1fr auto;
  margin: 0 0 20px;
}

.item-petit
{
	cursor: pointer;
}

.grid-item .titre.active
{
	display: block;
}

.grid-item .titre
{
	display: none;
	position: absolute;
	bottom:10px;
	left: 10px;
	background: rgba(255,255,255,.5);
	padding: 5px;
	font-size: 12px;
}

.popin.active
{
	display: block;
}

.popin
{
	display: none;
}

.popin .fond-noir
{
	position: fixed;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.8);
	z-index: 99;
	cursor: pointer;
}

.popin .contenu
{
	position: fixed;
	top:50%;
	left: 50%;
	transform: translate(-50%, -50%);
	
	background: #000;
	z-index: 999;
	padding: 10px;
	box-sizing: border-box;
}

.popin .croix
{
	position: absolute;
	right: -15px;
	cursor: pointer;
	top: -15px;
	text-transform: uppercase;
	font-size: 30px;
	background: #000 url('images/x.svg') no-repeat left 10px top 12px;
	background-size: 20px auto;
	
	width: 40px;
	height: 40px;
	border-radius: 50%;
	text-align: center;
	line-height: 30px;
	font-weight: normal;
	overflow: hidden;
}

.popin .contenu img
{
	max-width: calc(90vw - 40px) ;
	max-height: calc(90vh - 40px);
}


.grid-home
{
	-webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -webkit-column-gap: 20px;
  -moz-column-gap: 20px;
  column-gap: 20px;
}

.full-4 .grid-home
{
		-webkit-column-count: 4;
  -moz-column-count: 4;
  column-count: 4;
}

.grid-item-home
{ 
/*	  width: 33.33%;*/
  display: block;
/*  float: left;*/
  box-sizing: border-box;
/*  padding: 10px;*/
  cursor: pointer;

  break-inside: avoid;
  cursor: pointer;
  display: grid;
  grid-template-rows: 1fr auto;
  margin: 0 0 20px;
}

.grid-item-home img
{
	display: block;
}

.grid-item-home .type,
.grid-item-home .type a
{
	text-transform: uppercase;
	padding-top: 20px;
	display: block;
	font-family: "Oswald";
	font-weight: 300;
	font-size: 12px;
	letter-spacing: 0.11em;
	text-align: left;
	color: #222;
}

.grid-item-home .type a
{
	padding-top: 0;
}

.grid-item-home h2
{
	text-transform: uppercase;
	font-family: "Oswald";
	font-weight: bold;
	font-size: 18px;
	letter-spacing: 0.11em;
	line-height: 22px;
	text-align: left;
	color: #000;

}

.menu-categories ul
{
	list-style: none;
	margin: 0;
}


.menu-categories ul li 
{
	float: left;
	padding: 0;
}

.menu-categories ul li a
{
	padding: 10px;
	margin-right: 20px;
	text-transform: uppercase;
	display: block;
	margin-bottom: 10px;
}


.menu-categories ul li a.actif,
.menu-categories ul li a:hover
{
	background: #000;
	color:#fff;
}

.grid-item-home h2
{
	right: auto;
	left: 10px;
}


p,
p a,
li,
li a
{
	/*font-family: "Oswald";*/
	font-weight: 300;
	font-size: 14px;
	letter-spacing: 0.05em;
	text-align: inherit;

	color: #333;

}

h1
{
	/*font-family: "Silver";*/
	font-weight: normal;
	font-size: 46px;
	text-align: inherit;
	color: #000;
	padding-top: 40px;
}

h2, h2 a
{

	/*font-family: "Oswald";*/
	font-weight: 500!important;
	transition: none;
	font-size: 30px;
	text-align: inherit;
	color: #000;
}


h3
{

	/*font-family: "Oswald";*/
	font-weight: 500;

	font-size: 20px;
	text-align: inherit;
	color: #000;
}

img[title="Verified by MonsterInsights"]
{
	display: none!important;
}

.grecaptcha-badge
{
	visibility: hidden;
	opacity: 0;
}

.grid-prestation {
    -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -webkit-column-gap: 20px;
  -moz-column-gap: 20px;
  column-gap: 20px;
}

.grid-prestation .grid-item-presta {
	position: relative;
	overflow: hidden;
	border-radius: 10px;
}


.grid-prestation .grid-item img,
.grid-prestation .grid-item-presta img
 {
    width: 100%; /* Prend toute la largeur de l'élément */
    display: block; /* Enlève l'espace sous l'image */
}

.grid-prestation label
{
	display: inline-block;
	position: relative;

	cursor: pointer;
}

.grid-prestation label::after
{
	content: "Cliquez pour ajouter à la sélection";
	position: absolute;
	bottom: -30px;
	color:#fff;
	left: 0%;
	width: 100%;
	background: ;
	transition: .3s ease all;
	opacity: 0;

	line-height: 20px;
	padding: 10px;
	padding-bottom: 20px;
	z-index: 1;
	text-align: center;

	background: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
}

.grid-prestation label:hover::after,
.grid-prestation input[type="checkbox"]:checked+label::after
{
	bottom: 0px;
	opacity: 1;

}

.grid-prestation input[type="checkbox"]:checked+label::after
{
	content: "Image sélectionnée";
}


.grid-prestation label img
{
	display: block;
	margin: 0 auto;
}

.grid-prestation input[type="checkbox"]
{
	display: none;
}

.grid-prestation input[type="checkbox"]:checked+label::before
{
	content: "";
	position: absolute;
	left: 0;
	top:0;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	border: 10px solid #3A3;
	z-index: 2;
	background: rgba(255,255,255, 0);
}

.grid-prestation .loupe
{
	background: url('images/loupe.svg') #000 no-repeat center;
	background-size: 20px auto;
	border-radius: 20px;
	cursor: pointer;
	position: absolute;
	right: 20px;
	top:20px;
	width: 40px;
	height: 40px;
	z-index: 3;
	transition: .3s ease all;
}

.grid-prestation .loupe:hover
{
	background-size: 25px auto;

}

.panier-photo
{
	position: fixed;
	right: 0;
	bottom:0;
	padding: 20px;
	background: #111;
	text-align: right;
	z-index: 999999;
	font-weight: bold;
}

.panier-photo .decompte-image
{
	font-weight: bold;
	text-align: center;
	  font-size: 35px;

}

.panier-photo .decompte-image span
{
	font-weight: normal;
	font-size: 35px;
}

.panier-photo input,
.panier-photo .enregistrement
{
	background: #fff;
	color:#000;
	text-transform: uppercase;
	font-weight: bold;
	padding: 10px;
	border: none;
	font-size: 12px;
	cursor: pointer;
	  width: 110px;
  text-align: center;
  box-sizing: border-box;
}

.panier-photo input
{
	margin-top: 10px;
}

.panier-photo input.nope
{
	cursor: not-allowed;
	opacity: .5;
}

.panier-photo input:hover
{
	background-color: #EEE;
}

.post-password-form
{
	text-align: center;
}

.post-password-form p
{
/*	font-size: 20px;*/
}

.post-password-form label input
{
	display: block;
  margin: 10px auto;
  color: #000;
  border: none;
  height: 30px;
  font-size: 20px;
}

.post-password-form input[type="submit"]
{
	background: #fff;
	color:#000;
	text-transform: uppercase;
	font-weight: bold;
	padding: 10px 20px;
	border: none;
	cursor: pointer;
}

#access .burger
{
	float: right;
	position: relative;
	height: 25px;
	width: 30px;
	cursor: pointer;

	display: none;
}

#access .burger span
{
	width: 30px;
	height: 2px;
	background: #fff;
	position: absolute;
	left: 0;
	transition:.3s ease all;
	opacity: 1;
 
}	

#access .burger span.ligne-1
{
	top:0;
}

#access .burger span.ligne-2
{
	top:calc(50% - 2px);
}


#access .burger span.ligne-3
{
	bottom:0;
}

#access .burger:hover span.ligne-2
{
	width: 20px;
}


#access .burger:hover span.ligne-3
{
	width: 25px;
}

#access .burger.active span.ligne-1
{
	transform: rotate(45deg);
	top:11.5px;
}


#access .burger.active span.ligne-2
{
	opacity: 0
}


#access .burger.active span.ligne-3
{
	transform: rotate(-45deg);
	width: 30px;
	bottom:11.5px;
}

#access .burger+div
{
/*	display: none;*/
	position: absolute;
	background: #000;
	width: 200px;
	right: 0;
	height: 100vh;
	top:60px;
	transform: translateX(100%);
	transition: .3s ease all;
	z-index: 99;
	opacity: 0;
	visibility: hidden;

	opacity: 1;
	visibility: visible;
	position: static;
	width: auto;
	height: auto;
	transform: none;
	  background: none;
}

#access .burger.active+div
{
	visibility: visible;
	opacity: 1;

	transform: translateX(0%);
}

#access > div > ul > li
{
	float: left;
}

#access
{
	position: relative;
}

#branding .centrer
{
	overflow: visible;
}

#page
{
	  overflow-x: hidden;
}

.slider-expo
{

}


.slider-expo > div 
{
	display: none;
}

.slider-expo > div.actif
{
	display: block;
}


.slider-expo .pagination
{
	overflow: hidden;
}

.slider-expo .pagination button
{
	background: #fff;
  color: #000;
  border: 1px solid #000;
  font-family: "Oswald";
  font-size: 14Px;
  text-transform: uppercase;
  letter-spacing: .1em;
  transition: .3s ease all;
  border: none;
  cursor: pointer;
    padding: 10px;
    float: left;
}

.slider-expo .pagination button+button
{
	float: right;
}

.slider-expo .form-type
{
	overflow: hidden;
  padding: 20px;
  background: #333;
  padding-top: 0;
  margin-bottom: 20px;
}

.slider-expo .form-type p
{
	text-align: center;
}


.slider-expo .form-type input
{
	display: none;
}

.slider-expo .form-type label
{
	background: #fff;
  color: #000;
  border: 1px solid #000;
  font-family: "Oswald";
  font-size: 14Px;
  text-transform: uppercase;
  letter-spacing: .1em;
  transition: .3s ease all;
  border: none;
  cursor: pointer;
    padding: 10px;
    float: left;
}

.slider-expo .form-type input:checked+label
{
	  background: #393;
  	color: #FFF;
}

.slider-expo .form-type label~label
{
	float: right;
}

.slider-expo img
{
	display: block;
	margin: 0 auto;
}

.formulaire-simulateur
{
	margin: 0 auto;
	margin-top: 30px;
	max-width: 500px;
}

.formulaire-simulateur label
{
	display: block;
	padding-bottom: 10px;
}

.formulaire-simulateur input[type="number"]
{
	box-sizing: border-box;
}


.formulaire-simulateur select,
.formulaire-simulateur input[type="number"],
#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form input[type="tel"],
#contact-form textarea

{
	width: 100%;
}

.formulaire-simulateur #duree-section
{
	padding-top: 20px;
}

.formulaire-simulateur .prix-style
{
	font-size: 20px;
}

#contact-form label
{
	padding-top: 20px;
}

table
{
	padding: 20px 0;
}


table tr+tr
{
	border-top: 1px solid #111;
}

table td
{
	padding: 10px 0 ;
}

.slider-base .slide
{
	padding: 0 10px;
}

.slider-base .slick-arrow
{
	text-indent: -10000px;
	position: absolute;
	top:50%;
	transform: translateY(-50%);
	border: none;
	z-index: 99;
	background:rgba(255, 255, 255, 0) no-repeat center;
	width: 120px;
	height: 30px;
	transition: .3s ease all;
	cursor: pointer;

	  opacity: .7;
}

.slider-base .slick-arrow.slick-prev
{
	background-image: url('images/left-slider.svg');
	background-position: left 10px center;
	left: 20px;
}

.slider-base .slick-arrow.slick-prev:hover
{
	  opacity: 1;
	background-position: left 0 center;
}

.slider-base .slick-arrow.slick-next
{
	background-image: url('images/right-slider.svg');
	background-position: right 10px center;
	right: 20px;
}
.slider-base .slick-arrow.slick-next:hover
{
	  opacity: 1;
	background-position: right 0 center;
}

.liste-accordeon
{

}

.element-accordeon .titre-accordeon
{
  	border: none;
	font-weight: bold;
	font-size: 18px;
	text-align: left;
	color: #060623;
	padding: 15px 0;
	display: block;
	background: #FFF;
	width: 100%;
	cursor: pointer;
	padding-right: 30px;
	background: url('images/faq-bas.svg') no-repeat right center;
}

.element-accordeon 
{
	border-bottom: 1Px solid #EEE;
}


.element-accordeon.active .titre-accordeon
{
	border-color:#fff;
	background: url('images/faq-haut.svg') no-repeat right center;

}

.element-accordeon.active .texte-accordeon
{
	border-bottom: 1px solid rgba(6, 6, 35, 0.2);
	background: #F5F5F5;
	padding: 20px
}


@media (max-width: 1500px)
{


	.full-4 .grid
	{
		-webkit-column-count: 3;
	  -moz-column-count: 3;
	  column-count: 3;
	  -webkit-column-gap: 20px;
	  -moz-column-gap: 20px;
	  column-gap: 20px;
	}

	.full-4 .grid-home
	{
			-webkit-column-count: 3;
	  -moz-column-count: 3;
	  column-count: 3;
	}

}


@media (min-width: 740px)
{

	


.section .col-33,
	.section .col-50,
	.section .col-66,
	.section .col-100
	{
		order:1!important;
	}
}

@media (max-width: 1300px)
{

	


}

@media (max-width: 1000px)
{
	.logo
	{
		width: 150px;
	}

	#access
	{
		margin-top: 35px;
	}

	#access .burger
	{
		display: block;
	}

	#access .burger span
	{
		background: #000;
	}

	#access .burger + div
	{
		visibility: hidden;
	  opacity: 0;
	  transform: translateX(100%);
	    width: 250px;
	  text-align: left;
	  right: -20px;
	      position: absolute;
	          background: #fff;
	              z-index: 9999;
	}

	.slider-base .slick-arrow
	{
		top: auto;
		bottom:20px;
	}

	#access > div > ul > li {
	  float: none;
	}

	.logo
	{
		padding: 0;
		    top: -30px;
	}

	#branding
	{
		height: 80px;
	}
	 #access {
    margin-top: 25px;
  }

  #access .burger.active + div

}

@media (max-width: 740px)
{
	.section
	{
		padding-top: 0px;
	}
	
	.section .col-33,
	.section .col-50,
	.section .col-66,
	.section .col-100
	{
	    	  grid-column: span 12;	

	    margin-bottom: 0px;
	    margin-top: 30px;
	}



	input[type="text"], input[type="email"], textarea, select, input[type="number"]
	{
		max-width: 100%;
		width: 100%;
		box-sizing: border-box;
	}

	

	.logo
	{
		left: 50px;
		transform: none;
	}

	.form-news p
	{
		float: none;
	}

	.form-news p+p
	{
		margin-left: 0;
	}

	.form-news input[type="submit"]
	{
		margin-top: 0px;
	}

	.credits .left,
	.credits .right
	{
		float: none;
		text-align: center;
	}

	.frise .liste-etape > div
	{
		font-size: 8px;
	}

	.frise .liste-etape > div span
	{
		font-size: 8px;
	}

	.grid-item,
	.grid-item-home,
	.grid-item-presta
	{ 
			width: 100%;
	  	padding-bottom: 20px;
	  	padding: 5px;
	}

	.grid,
	.grid-home,
	.full-4 .grid-home,
		.full-4 .grid
	{

    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
	}


	.panier-photo
	{
		bottom: 0;
		top:auto;
		width: 100%;
		transform: none;
    box-sizing: border-box;
	}

	.panier-photo
	{
		padding: 20px;
		text-align: center;
	}

	.panier-photo .center-mobile
	{
		display: inline-block;
	}

	.panier-photo input, .panier-photo .enregistrement
	{
		padding: 10px;
		display: inline-block;
		font-size: 12px;
		float: left;
		margin: 0 5px;
		width: 100px;
		  height: 56px;
		    margin-top: 0;
	}

	.grille-petite
	{
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		column-gap: 20px;
		row-gap: 20px;
	}

	.bouton
	{
		margin: 20px;
	}

	.bouton + .bouton, 
	a + a .bouton {
	  margin: 20px;
	}


}


@media (max-width: 420px)
{

	.centrer, .container
	{
		padding: 0;
	}

	.grid-item,
	.grid-item-home,
	.grid-item-presta
	{ 
		width: 100%;
	  	padding: 0px;
	  	padding-bottom: 20px;
	}

	#access
	{
		margin-right: 20px;
	}

	 .logo {
    width: 100px;
  }


}