/*
Theme Name: POC 2025

*/

:root {
  --orange: #fe8850;
  --purple: #7a2f7d;
  --yellow: #e9ffa1;
}


@font-face {
    font-family: "poc_simple";
    src: url("fonts/made_tommy/MADE TOMMY Bold_PERSONAL USE.otf");
}


@font-face {
    font-family: "poc_custom";
    src: url("fonts/basteleur/Basteleur-Bold.otf");
}


html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

html {
  scroll-behavior: smooth;
}

body {
    font-family:helvetica;
    overflow-x: hidden;
    background-color: var(--yellow);
    background-image: url("https://www.poc2025.fr/wp-content/uploads/2026/03/poc_carte_monstre_2500-2048x1518-1.png");
    background-size: contain;
}

.home {
    overflow:hidden !important;
}

a {
    transition: all ease 200ms;
}

a:hover {
    text-decoration: none;
    color: var(--purple);
    cursor: pointer;
}

a:not([href]):not([tabindex]):hover {
    text-decoration: none;
    color: var(--purple);
    cursor: pointer;
}

ul {
     margin: 0;
     list-style-type: none;
     padding-inline-start: 0px;
}

li {
    list-style-type: none;
}

h1 {
    font-size: 4em;
    margin:0;
    padding:0;
    color: var(--purple);
    /* text-transform: uppercase; */
    font-family: poc_custom;
}

section h1 {
	font-size:4em;
	font-weight: bold;
}

h2 {
    font-size: 1em;
    color:var(--orange);
    text-transform: uppercase;
    font-family:poc_custom;
}

h3 {
    padding-top:1em;
    padding-bottom:0.3em;
}

h4 {
    font-size: 1.05em;
    margin-bottom: 0;
    color: var(--purple);
    text-align: center;
}

h5 {
	margin:0;
	padding:0;
}

p {
  text-align: justify;
  font-size: 1.05em;
}

a {
    color: #070046;
}

strong {
    color: var(--orange);
}

.page strong {
    color: var(--purple);
}











/* MAINTENANCE */ 

.maintenance_body {
    overflow: hidden !important;
    background-image: none !important;
    background-color: var(--orange) !important;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#maintenance_bloc_img {
    display:flex;
    justify-content:center;
    align-items:center;
    width: 31vw;
    margin-bottom:1em;
}

#maintenance_bloc_img img {
    width:100%;
}

#maintenance_bloc {
    background-color:var(--yellow);
    width:35vw;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    padding: 1.5em 2em;
    border: 7px solid var(--purple);
    box-shadow: 20px 20px var(--purple);
}

#maintenance_bloc .header-logo {
    width: 45%;
    padding: 1em 1em;
}

#maintenance_bloc_text h1, 
#maintenance_bloc_text h2, 
#maintenance_bloc_text p {
    text-align:center;
}

#maintenance_bloc_text {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin-bottom:1em;
}

#maintenance_bloc_text h1 {
    font-size:5em;
    font-family:'poc_simple';
    color:var(--purple);
}

#maintenance_bloc_text h2 {
    font-size:1.1em;
    font-family:'poc_custom';
    color:var(--orange);
    margin-bottom:1em;
}

#maintenance_bloc_text p {
    font-size:1.1em;
    color:var(--purple);
    font-weight:bold;
    margin:0;
}




/* HEADER */


header {
    position: fixed;
    z-index: 250;
    width: 100vw;
    padding: 0 0 0.4vw 0;
    top: 0;
    display: flex;
    justify-content: center;
}

.home header {
    width: 100vw;
}

#header {
    width: 45vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /*! border-top-left-radius: 50px; */
    
    /*! border-bottom-right-radius: 50px; */
    flex-direction: column;
    position: absolute;
    z-index: 250;
}


.header-logo {
    width:40%;
    padding: 1em 1em;
}


#header-title {
    display:none;
    padding: 16px 100px;
    background-color: var(--yellow);
    border-bottom: 7px solid var(--purple);
    border-right: 7px solid var(--purple);
    border-left: 7px solid var(--purple);
    border-top: 7px solid var(--purple);
    text-align: center;
}

#header-title h1 {
    font-family:poc_simple;
}

#header-title h2 {
    font-size: .95em;
    font-family:poc_custom;
    text-align: center;
}

#header-title h4 {
    font-size: .95em;
    font-family:poc_simple;
    text-align: center;
    color:var(--purple);
}

#menu {
    display: flex;
    justify-content: center;
    flex-direction: row;
    font-size: 1em;
    width: 100%;
    margin-bottom: -20px;
    flex-wrap: wrap;
}


header nav ul a {
     color: var(--orange);
     padding: 11px 0px;
     display: flex;
     justify-content: center;
     width: 100%;
    text-transform: uppercase;
    font-family: 'poc_simple';
}

header nav ul {
	transition:all ease 300ms;
	width: 20%;
	background-color: var(--purple);
	display: flex;
	justify-content: center;
	align-items: center;
}

header nav ul:hover {
	background-color: var(--orange);
	cursor: pointer;
}

header nav ul:hover a {
	color: var(--purple);
}

header nav #menu-actif {
    background-color:var(--orange);
}

header nav #menu-actif:hover {
     background-color: var(--yellow);
}

header nav #menu-actif .menu-a {
    color:var(--purple);
}

header nav #actif {
     color: #fff;
}


header nav #actif:hover {
     color: var(--purple);
}















/* MENU SCROLL */

.header_scroll {
    flex-direction: row !important;
    width: 100% !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: flex-start !important;
}

.header-title_scroll {
    flex-direction: row !important;
    padding: 0 !important;
    width:20%;
    box-shadow: 10px 10px var(--purple);
}

.header-title-a_scroll .header-logo {
    width:90%;
}

.header-slogan_scroll {
    margin-left: 60px !important;
    width: 17vw !important;
    display: none !important;
}

.menu_scroll {
    margin:0 !important;
    margin-left: 10px !important;
}

.menu-a_scroll {
    padding:17px 0px !important;
}













/* MAIN */


.main-homepage {
  	width:100% !important;
  	overflow: hidden;
  	background-color: var(--yellow) !important;
  	margin: 0 !important;
  	margin-top: 0 !important;
  	border: none !important;
}



.main-single {
    width: 92%;
    overflow: hidden;
    background-color: var(--yellow);
    margin: auto;
    margin-top: 2em;
    border: 14px solid var(--purple);
}







/* NAVETTE */

#poc_navette {
    
}


#navette_anim {
    position: fixed;
    width: 365px;
    -webkit-animation: train_animation 23s linear infinite;
    animation: train_animation 23s linear infinite;
    z-index: 90;
    cursor: pointer;
}

.navette_bulle {
    opacity: 0;
    background: var(--yellow);
    padding: 2em;
    position: fixed;
    z-index: 1000;
    width: 300px;
    color: var(--purple);
    text-align: center;
    border: 5px solid var(--purple);
    font-weight: bold;
    transform: scale(0);
    transform-origin: right;
    transition: transform ease 250ms, opacity ease 250ms;
    border-radius: 50%;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'poc_custom';
    font-size: 0.9em;
}

#poc_navette:hover .navette_bulle {
    opacity: 1;
    transform: scale(1);
}













/* BERGERE */

#poc_bergere {
    width: 10vw;
    position: absolute;
    left: 24vw;
    bottom: 1em;
    z-index: 80;
    display: flex;
}

#poc_bergere img {
    width:10vw;
}

.bergere_bulle {
    opacity: 0;
    background: var(--yellow);
    padding: 2em;
    position: fixed;
    z-index: 1000;
    width: 16%;
    color: var(--purple);
    text-align: center;
    border: 5px solid var(--purple);
    font-weight: bold;
    transform: scale(0);
    transform-origin: right;
    transition: transform ease 250ms, opacity ease 250ms;
    /* box-shadow: 10px 10px; */
    border-radius: 50%;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'poc_custom';
    font-size: 0.9em;
}


#poc_bergere:hover .bergere_bulle {
    opacity: 1;
    transform: scale(1);
}

#poc_bergere:hover img {
    animation: rotate-vibrate 0.3s;
}

@keyframes rotate-vibrate {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(2deg); }
  50% { transform: rotate(-2deg); }
  75% { transform: rotate(2deg); }
  100% { transform: rotate(0deg); }
}






.bergere_page_bulle {
    opacity: 0;
    background: var(--yellow);
    padding: 2em;
    position: absolute;
    z-index: 1000;
    width: 50%;
    color: var(--purple);
    text-align: center;
    border: 5px solid var(--purple);
    font-weight: bold;
    transform: scale(0);
    transform-origin: right;
    transition: transform ease 250ms, opacity ease 250ms;
    border-radius: 50%;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'poc_custom';
    font-size: 0.9em;
}

#bergere_anim_chara:hover {
    cursor: help;
}

#bergere_anim_chara:hover .bergere_page_bulle {
    opacity: 1;
    transform: scale(1);
}








/* BERGERE PAGE */


#la-bergere .page_content {
    display:flex;
    flex-direction: row;
    justify-content: space-between;
}

#bergere_content {
    width:40%;
}

#bergere_illu {
    width:50%;
    position:relative;
}

#bergere_barrier {
    width:135%;
}

#bergere_chara {
    position:absolute;
    bottom:0;
    left: -90px;
    width: 60%;
    z-index: 10;
}

#sceaux {
    position:absolute;
    top:0;
    width:120%;
    height:44%;
}

.sceau_empty {
    width:12%;
    aspect-ratio: 1 / 1;
    background-color:var(--orange);
    border-radius:10px;
    transition: transform 0.5s;
    position:absolute;
    display:flex;
    justify-content:center;
    align-items:center;
}

.sceau_empty span {
    font-size:2em;
    font-family:'poc_custom';
    color:var(--orange);
    transition: all ease 0.5s;
}

.sceau_empty:hover {
    transform:scale(1.1) !important;
    cursor:pointer;
}


.sceau_empty:hover span {
    color:var(--yellow);
}












/* PROGRAMMATION */

#prog {
    display: flex;
    width: 100%;
    background-color: var(--orange);
    align-items: flex-start;
}

#prog #prog_content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 69%;
    padding: 2em 2em 0 2em;
}

#prog_title {
    padding:0.5em 1em;
    margin-bottom: 1em;
    border:5px solid var(--purple);
    box-shadow:5px 5px var(--purple);
    background-color:var(--yellow);
}

.prog_bloc {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    margin:1em 0;
}

.prog_line {
    text-align: center;
}

#prog h2 {
    font-family:'poc_custom';
    color:var(--purple);
    padding:0;
    margin:0;
    font-style: normal;
    font-size: 1.3em;
}

#prog h3 {
    font-family:'poc_custom';
    font-size: 1.7em;
    color: var(--purple);
    margin:0;
    padding:0;
}

#prog strong {
    color:var(--yellow);
    font-size: 1.1em;
}

#prog span {
    color:#fff;
    font-size: 1.1em;
    text-align:center;
}

.prog_bloc span {
    margin-left:.5em;
}


#prog .fresque {
    display:block;
    width:13%;
    height:100%;
    overflow: hidden;
}

#prog .fresque img {
    width:100%;
}

#prog .fresque_left {
    margin-left:5%;
}

#prog .fresque_right {
    margin-right:5%;
}




#prog_presentation {
    display: flex;
    width: 40%;
    align-items: flex-start;
    background-color: var(--orange);
    /* border-radius: 40px; */
    position:relative;
    overflow:hidden;
}

#prog_presentation #prog_content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 2em 2em;
}

#prog_presentation h2 {
    font-family:'poc_custom';
    color:var(--purple);
    padding:0;
    margin:0;
    font-style: normal;
    font-size: 1.7em;
}

#prog_presentation h3 {
    font-family:'poc_custom';
    font-size: 1.5em;
    color: var(--purple);
    margin:0;
    padding:0;
}

#prog_presentation strong {
    color:var(--yellow);
    font-size: 1.1em;
}

#prog_presentation span {
    color:#fff;
    font-size: 1.1em;
}


#prog_presentation .fresque {
    display:block;
    width:10%;
    height:100%;
    position:absolute;
}

#prog_presentation .fresque img {
    width:100%;
}

#prog_presentation .fresque_left {
    right:5%;
}

#prog_presentation .fresque_right {
    left:5%;
}







/* POC PRESENTATION */ 


#poc_encart {
    background-color:var(--purple);
    width:22vw;
    height:100vh;
    position: absolute;
    top:0;
    left:0;
    z-index: 100;
    display:flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: column;
    transition: transform 0.4s ease;
}

.hide-aside {
    transform: translateX(-95%);
}

.hide-toggle {
    transform: translateX(-85%);
    left:55px !important;
}

#toggle-aside {
    position: absolute;
    z-index: 150;
    margin: auto;
    height: fit-content;
    left: 22vw;
    top: 0;
    bottom: 0;
    border:0;
    background-color: var(--orange);
    padding: .2em;
    cursor:pointer;
    width: 55px;
    transition: left 0.4s ease;
}

#toggle-aside:hover {
    background-color: var(--purple);
}

#toggle_arrow_left {
    width:100%;
    filter: brightness(0.4) hue-rotate(255deg);
}

#toggle_arrow_right {
    width:100%;
    filter: brightness(0.4) hue-rotate(255deg);
    display:none;
}

#toggle-aside:hover #toggle_arrow_right,
#toggle-aside:hover #toggle_arrow_left {
    filter: none;
}

.toggle_arrow_hide {
    display:none !important;
}

#poc_presentation {
    display:flex;
    flex-direction:column;
    align-items:center;
    padding: 3em 4em 2em;
    width: 100%;
}

#poc_presentation h1 {
    text-align:center;
    color: var(--yellow);
    font-size: 1.2em;
    margin-bottom:.6em;
}

#poc_presentation h2 {
    text-align:center;
    font-family:'poc_simple';
    color: var(--orange);
}

#poc_presentation p {
    text-align: justify;
    color:#fff;
    font-size:1em;
}


#poc_trefle {
    display:flex;
    justify-content:center;
    width:100%;
    margin-bottom:.6em;
}

#poc_trefle img {
    width: 100%;
}

#poc_logo {
    display:flex;
    justify-content:center;
    width:100%;
    margin-bottom:.6em;
}

#poc_logo img {
    width: 100%;
}

#poc_logo_mobile {
    display:none;
    background-color:var(--purple);
    padding:2em 3em;
}

#poc_logo_mobile h1 {
    font-size:1.3em;
    color:var(--yellow);
    text-align:center;
}

#poc_logo_mobile h2 {
    font-size:1.2em;
    text-align:center;
}







/* PAGE PRESENTATION */

#presentation .page_content {
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    position:relative;
    overflow: hidden;
    padding: 5vh 13vw 36vh 13vw;
}

#presentation_section {
    width:45%;
}

#poc_castle {
    position: absolute;
    z-index:1;
    bottom: 0;
    right: 62px;
    width: 45%;
}

#poc_wave {
    position: absolute;
    z-index:0;
    bottom: -28px;
    right: 0;
    width: 100%;
}

#poc_eyes {
    position: absolute;
    z-index:2;
    bottom: 145px;
    right: 295px;
    width: 17%;
}












/* FILTRE */ 



#map_filter {
    width:100%;
}

#map_filter_container {
    /* background-color: #ffffff; */
    padding: 2vh 2.5vw;
    /* border-top-right-radius: 40px; */
    /* border-bottom-left-radius: 40px; */
}

#map_filter ul li {
    padding:0.3em 0;
}


#filter-title {
	background-color: var(--orange);
	text-align:center;
    padding: .6em 2em;
	cursor:pointer;
	transition:all ease 300ms;
	border: 6px solid var(--purple);
	width: 80%;
    margin: auto;
}

#filter-title h5 {
	font-size:1.05em;
	color: var(--purple);
	font-family:'poc_custom';
	font-weight: bold;
	text-transform:uppercase;
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Old versions of Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

#filter {
    flex-direction:column;
    transform-origin: top;
    transition: all ease 250ms;
    display: flex;
    align-items: flex-start;
    padding: 1em 3em 2em 3em;
    width: 100%;
}

#filter label {
    width:auto;
    padding: 5px 0px 6px 30px;
    cursor: pointer;
    color:var(--orange);
}

#filter label:hover {
    color:var(--yellow);
}

#filter button {
	margin-top:15px;
	background: var(--orange);
	cursor:pointer;
	padding: .5em 2em;
	color: var(--purple);
	transition: all ease 300ms;
	border: none;
	font-family:'poc_simple';
}

#filter button:hover {
	background: var(--yellow);
	cursor:pointer;
	border: none;
	color: var(--purple);
	transition: all ease 300ms;
}

#filter button:focus {
	outline:none;
}


/* Hide the browser's default radio button */
#filter input {
  /* position: absolute; */
  opacity: 0;
  /* cursor: pointer; */
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  /* top: 0; */
  left: 45px;
  height: 24px;
  width: 24px;
  background-color: var(--yellow);
  border-radius: 50%;
  transition: all ease 250ms;
}

/* On mouse-over, add a grey background color */
label:hover input ~ .checkmark {
  background-color: var(--yellow);
}

/* When the radio button is checked, add a blue background */
input:checked ~ .checkmark {
  background-color: var(--yellow);
}

input:checked ~ label {
  color: var(--purple);
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.checkmark:after {
 	top: 8px;
 	left: 8px;
 	width: 8px;
 	height: 8px;
 	border-radius: 50%;
 	background: white;
}











/* MAP */


#zoom_poc {
    position: absolute;
    font-family: 'poc_simple';
    font-size: 5em;
    width: 505%;
    margin: 0;
    padding: 0;
    color: var(--purple);
    white-space: unset;
    height: 120%;
    z-index: -1;
    top: -294%;
    left: -196%;
    line-height: 1.3em;
}

#zoom {
  width: 100%;
  height: 100%;
  transform-origin: 0px 0px;
  transform: scale(1) translate(0px, 0px);
  cursor: grab;
}

div#zoom > img {
  /* width: 100%; */
  height: auto;
}
    
.zoom_outer {
    background-color: var(--yellow);
	top: 50%;
    left: 50%;
    transform: translate(-47%,-47%) scale(0.85);
    position: absolute;
}

.zoom_animate {
    -webkit-animation: map_anim 4s ease forwards;
    animation: map_anim 4s ease forwards;
}

@-webkit-keyframes map_anim {
  0% {
    transform: translate(-47%,-47%) scale(0.85);
  }
  100% {
    transform: translate(-50%,-50%) scale(1);
  }
}

@keyframes map_anim {
  0% {
    transform: translate(-47%,-47%) scale(0.85);
  }
  100% {
    transform: translate(-50%,-50%) scale(1);
  }
}



#map_trajet_train {
    position: absolute;
    z-index: 100;
    left: 0;
    top: -55px;
    opacity: 0;
    transition:all ease 300ms;
}




#myViewport {
    cursor: grab;
    display: flex;
    align-items: center;
    justify-content: center;
}

#myContent {
    position: relative;
    display: flex;
    align-items: center;
}

#myContent img {
    display: block;
    width: auto;
    height: auto;
    margin: auto;
    align-self: center;
    flex-shrink: 0;
}

#myContent div {
    position: absolute;
    font-size: 80px;
}





#map_interactive {
	height: 100vh;
	overflow: hidden;
}










.wp-block-media-text {
  display:flex;
}

.wp-block-media-text__content {
	width: 100%;
    margin: 0 5% 0 0;
}

.wp-block-media-text__media img {
    width: 100%;
    height: auto;
}









#map_details {
    position: absolute;
    z-index:10;
    background-color: #fff;
    top: 15%;
    right: 0;
    width: 25%;
    padding: 4%;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
    border: 10px solid #e3bd4b;
    border-right-width: 0;
}



section {
    width: 100%;
}


#button_reserv {
    display:flex;
    justify-content: center;
}

#button_reserv a {
    background: linear-gradient(0.75turn, #ff5e4d, #c52c6d) !important;
    cursor:pointer;
    border: none;
    padding: .7em 1.8em;
    border-radius: 12px;
    color: #fff;
    transition: all ease 200ms;
}

#button_reserv a:hover {
    background: linear-gradient(0.75turn, #ff9286, #f23c89) !important;
}


#myContent div {
    font-size: 16px !important;
    color: #fff;
}

.btn {
    font-size:1.25rem;
}

.btn-info {
  color: #fff !important;
  background-color: var(--purple); !important;
  border-color: var(--purple); !important;
}

.btn-info:hover {
  color: #fff !important;
  background-color: #e8ca2c !important;
  border-color: #e3c93a !important;
}




#more_infos {
      position: absolute;
      z-index: 10;
      bottom: 5vh;
      left: calc(50vw - 5vw);
      padding: .9em 2.3em;
      font-size: 1.1em;
}



















/* GALERIE D'IMAGES */


#gal_section {
    display:flex;
    align-items: center;
    flex-direction: column;
    padding: 15vh 22vw;
}

#gal_section h2 {
    margin-bottom:1em;
}

#gal_section p {
    text-align: center;
}


.gal {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 15px;
    padding: 0.4% 0%;
}

.gal a {
	display:flex;
	justify-content: center;
	align-items:center;
    width: calc((100% - (0.8% * 8)) / 4);
    margin: .8%;
	background: #ef7a42;
	position: relative;
    overflow: hidden;
    border:3px solid var(--purple);
}

.gal img {
  width:100%;
}


.gal_img {
    /* filter:grayscale(0) brightness(1)  sepia(0) hue-rotate(0deg); */
    /* filter:grayscale(1) sepia(1) hue-rotate(322deg) saturate(5.5); */
    transition:all ease 250ms;
}

.no_hover {
    filter:grayscale(0) brightness(1)  sepia(0) hue-rotate(0deg);
    transition:all ease 250ms;
}

.hover {
    filter:grayscale(0%) brightness(1)  sepia(0) hue-rotate(0deg);
    transition:all ease 250ms;
}

.gal_img_hover {
    position:absolute;
    z-index:15;
    width:100%;
    background-color:var(--purple);
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10%;
    opacity: 0;
}

.gal_img_hover h3 {
    color:#fff;
    font-size:1.4em;
    text-align:center;
    font-weight: bold;
    font-family: 'poc_custom';
}

.gal_img_hover img {
    position:absolute;
    z-index:10;
    width:100%;
    height: 100%;
    opacity: 0.05;
    padding:10%;
    background-color:white;
}

#gal_night {
    display:none;
}

#buttons_gal {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-bottom:.5em;
    flex-wrap: wrap;
}

.button_gal {
    background-color: var(--yellow);
    color: var(--purple);
    padding: .5em 3em;
    font-family: 'poc_custom';
    font-size: 1.5em;
    cursor: pointer;
    margin: 0em 1em 1em;
    box-shadow: var(--yellow) 15px 15px;
    border: 5px solid var(--purple);
    opacity:0.6;
    transition:all ease 200ms;
}

.button_gal:hover, 
.button_gal_actif {
    background-color: var(--orange);
    color: var(--purple);
    padding: .5em 3em;
    font-family: 'poc_custom';
    font-size: 1.5em;
    cursor: pointer;
    margin: 0em 1em 1em;
    box-shadow: var(--purple) 12px 12px;
    border: 5px solid var(--purple);
    opacity:1;
}

button:focus {
    outline: none;
}



/* POC ANIMATION */


#poc_anim {
    position: absolute;
    margin-top:1em;
    background-color:yellow;
    animation: 7s linear 0s infinite sun-rise;
}

#poc_anim h5 {
    color:blue;
    font-family: 'Press Start 2P', cursive;
    font-size:1.4em;
    margin:0.15em 0;
    font-style: italic;
}

@keyframes sun-rise {
  from {
    transform: translateX(0vw);
  }
  to {
    transform: translateX(-70vw);
  }
}











/* PAGES */



.page_content {
    display:flex;
    flex-direction: column;
    padding: 5vh 13vw 10vh 13vw;
    min-height: 68vh;
}

.page h2 {
    font-size: 1.3em;
    font-family: poc_simple;
    color: var(--purple);
    margin-top: 0em;
    margin-bottom:0em;
    text-transform: none;
    font-style: italic;
}

.home h2 {
    font-style: normal;
}

.page p {
    /* text-align: center; */
}


label {
    margin:0;
}

#page_title {
    background-color: var(--orange);
    height: 24vh;
    padding: 0 13vw 2em;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
}








/* ARTICLES */



.article {
    display:flex;
    align-items: center;
    flex-direction: column;
}

#article-head {
    display:flex;
    justify-content: center;
    width: 100%;
    padding: 5vh 12vw;
    background-color:var(--orange);
}


#article-title {
	display:flex;
	flex-direction:column;
	justify-content: flex-end;
    align-items: flex-start;
    width: 50%;
    padding-bottom: 10px;
}

#article-title h1 {
	font-family:'poc_custom';
	text-transform: uppercase;
	font-size: 4em;
}

.article h2 {
    margin-top: 1em;
    margin-bottom:0em;
}

.article-tags {
	background-color: var(--yellow);
    padding: 1em 2.5em;
    text-align: center;
    border: 5px solid var(--purple);
    box-shadow: 10px 10px var(--purple);
}

.article-tags h3 {
	padding:0;
	margin:0;
	font-size: 1.1em;
	color: var(--purple);
	font-weight: bold;
	font-family: 'poc_custom';
}

.article-container {
    display:flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 5vh;
    background-color: var(--yellow);
    width:100%;
}

.article-contain {
    display: flex;
    align-items: center;
    padding: 7vh 0vw 4vh 0vw;
    justify-content: space-between;
    width: calc(100% - (10% * 2));
    flex-direction: column;
}

.article-img {
    height: 100%;
}

#article-logo {
    width: 50%;
    aspect-ratio: 1.4 / 1;
    overflow: hidden;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 5em;
}

.article-text {
    display: flex;
    flex-direction: column;
    width: 55%;
}

.article p {
    text-align: justify;
    /* hyphens: auto; */
}

.article-adress {
	padding:0 1.7em;
}

.article-adress h4 {
	color: var(--yellow);
    font-family: 'poc_simple';
    font-size: 1.3em;
    text-align:left;
    margin-bottom: .5em;
}

.article-icon {
    width: 25px;
    margin-right: 15px;
    margin-top: -3px;
    filter: hue-rotate(46deg) brightness(5.5) saturate(0.4);
}


.article button {
	padding: .9em 2em;
	border:none;
	background-color:#2b4367;
	color:#eee;
	transition:all ease 250ms;
	cursor:pointer;
}


.article button:hover {
	padding: .9em 2em;
	border:none;
	background-color:var(--purple);
	color:#eee;
}


.article-nav {
    width: 10%;
    display: flex;
    justify-content: center;
}

.article-nav img {
    width: 60%;
    margin: 20%;
    transition: all ease 70ms;
    filter: hue-rotate(-15deg) saturate(0.9);
}

.article-nav img:hover {
    width: 70%;
    margin: 15%;
    filter: hue-rotate(262deg) saturate(0.9) brightness(0.5);
    transform: translate(15px, 0);
}

.article-nav-prev img:hover {
    transform: translate(-15px, 0);
}

.article-nav-next img:hover {
    transform: translate(15px, 0);
}


.article-contact {
    padding: 2em 2em;
    background-color: var(--orange);
    width: 65%;
    margin:auto;
    margin-top: 1.5em;
}


.article-rs {
    display:flex;
    justify-content: space-around;
    margin-top: 20px;
    width: 50%;
    margin-left: auto;
}

.article-icon-rs {
    width: 35px;
    transition: all ease 50ms;
	filter: hue-rotate(45deg) brightness(5.5) saturate(0.35)
}

.article-icon-rs:hover {
	transform: scale(1.2);
	filter: hue-rotate(288deg) brightness(2.5) saturate(0.35)
}

.article-icon-rs-none {
    width: 35px;
    filter: grayscale(0%) brightness(.1) hue-rotate(232deg);
    opacity: 0.1;
}








/* POP-UP */


#popup_details {
    display: flex;
    align-items: center;
    position: absolute;
    z-index: 150;
    right: 400px;
    top: 50px;
}

.popup {
    display:flex;
    align-items: center;
    flex-direction: column;
    background-color: #ffffff;
    width: 380px;
    position: absolute;
    top: 10%;
    border-radius:20px;
}

#popup_a {
    transition: transform 0.4s ease;
}

.hide-popup {
    transform: translateX(100%) !important;
}

.hide-toggle-popup {
    transform: translateX(-100%);
    left:55px !important;
}

/*

#toggle-aside {
    position: absolute;
    z-index: 150;
    margin: auto;
    height: fit-content;
    left: 22vw;
    top: 0;
    bottom: 0;
    border:0;
    background-color: var(--orange);
    padding: .2em;
    cursor:pointer;
    width: 55px;
    transition: left 0.4s ease;
}

#toggle-aside:hover {
    background-color: var(--purple);
}

#toggle_arrow_left {
    width:100%;
    filter: brightness(0.4) hue-rotate(255deg);
}

#toggle_arrow_right {
    width:100%;
    filter: brightness(0.4) hue-rotate(255deg);
    display:none;
}

#toggle-aside:hover #toggle_arrow_right,
#toggle-aside:hover #toggle_arrow_left {
    filter: none;
}

.toggle_arrow_hide {
    display:none !important;
}

*/

.hide_filter {
    visibility: hidden;
    z-index:10;
}


.show_filter {
    visibility: visible;
    -webkit-animation: fadeIn .25s;
    animation: fadeIn .25s;
      z-index:10;
}


.popup_hide {
    display:flex !important;
    opacity:0;
    transform:scale(0);
    transition:all ease 250ms;
    transform-origin: top right;
}

.popup_show {
    display:flex !important;
    opacity:1;
    transform:scale(1);
    transition:all ease 250ms;
    transform-origin: right;
}

.popup_transition {
    transform:translateX(100%);
}


.filter_show {
    opacity: 1 !important;
    transform: scale(1) !important;
    transform-origin: top left !important;
    transition: all ease 250ms;
}



#etiquette_popup {
    color:#fff;
    /* writing-mode: vertical-lr; */
    text-orientation: mixed;
    /* border-top-right-radius: 40px; */
    /* border-bottom-left-radius: 40px; */
    cursor:pointer;
    position: absolute;
    top: -27px;
    width: 200px;
    display: flex;
    justify-content: center;
    background-color: var(--orange);
    transition: all ease 300ms;
    border: 6px solid var(--purple);
    /* box-shadow: 0 0 2em var(--purple); */
    z-index: 20;
    left: 180px;
}

#etiquette_popup p {
    padding: .7em 2em .7em 2em;
    margin: 0;
    font-weight: bold;
    color: var(--purple);
    text-transform: uppercase;
.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
};
.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
};
.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
};
.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
};
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}


.popup-logo-title {
	display:flex;
	justify-content:center;
	width:100%;
	flex-wrap: wrap;
	flex-direction: column;
	align-items: center;
	background-color: #481920;
	background-color: var(--orange);
    border-radius: 20px;
}

.popup-img {
	margin-top:10%;
	/* width: fit-content; */
	max-height: 160px;
	max-width: 270px;
}

.popup-title {
	margin: 0% 0% 10% 0%;
}

.popup-title h3 {
	font-family:poc_simple;
	text-transform: uppercase;
	font-size: 1.5em;
	color:var(--purple);
	text-align: center;
}

.popup h2 {
    margin-top: 1em;
    margin-bottom:0em;
}

.popup-tags {
	background-color: var(--yellow);
    padding: .7em 1.5em;
    text-align: center;
    margin-top: -40px;
    border: 5px solid var(--purple);
    box-shadow: 8px 8px var(--purple);
}

.popup-tags h3 {
	padding:0;
	margin:0;
	font-size: 1em;
	color: var(--purple);
	font-family:'poc_custom';
}

.popup-container {
    display:flex;
    justify-content: center;
    align-items: center;
}

.popup-contain {
    display:flex;
    align-items: center;
    padding: 7vh 15vw 4vh 15vw;
    justify-content: space-between;
    width: 75%;
}

.popup-text {
    width: 100%;
    padding: 11% 15%;
    display: flex;
    align-items: end;
    flex-direction: column;
}

.popup-text p {
    text-align: justify;
    font-size:.96em;
    margin-bottom: 7px;
    letter-spacing: -0.03em;
}

.popup-text a {
    color:var(--purple);
	font-weight:bold;
}

.popup_explain {
	background-color: var(--yellow);
	border: 3px solid var(--purple);
}

.popup_explain strong {
	color: var(--purple);
}

.popup-text_explain p {
	font-size: .97em;
	letter-spacing: -0.01em;
}

.popup-contact {
	width: 100%;
	margin-top: 14px;
}

.popup-adress {
	padding: .9em 1.3em;
    width: 100%;
    background-color: var(--orange);
}

.popup-adress h4 {
	color: var(--yellow);
    /* font-weight: bold; */
    font-size: .95em;
    letter-spacing: -0.02em;
    font-family: 'poc_simple';
}

.popup-icon {
    width:1em;
    margin-right:8px;
    margin-top:-3px;
	filter: hue-rotate(45deg) brightness(7.5) saturate(0.4);
}


.popup button {
	padding: .9em 2em;
	border:none;
	background-color:#2b4367;
	color:#eee;
	transition:all ease 250ms;
	cursor:pointer;
}


.popup button:hover {
	padding: .9em 2em;
	border:none;
	background-color:var(--purple);
	color:#eee;
}


.button_redirect button {
    padding: .5em 2em;
    border: none;
    background-color: var(--purple);
    color: var(--yellow);
    transition: all ease 250ms;
    cursor: pointer;
    font-size: 1.2em;
}

.button_redirect button:hover {
    padding: .5em 2em;
    border: none;
    background-color: var(--yellow);
    color: var(--purple);
    cursor: pointer;
}

.popup-nav {
    width: 12.5%;
    display: flex;
    justify-content: center;
}

.popup-nav img {
    width: 33%;
    margin: 33%;
    transition:all ease 300ms;
    filter: grayscale(0%) brightness(.3) hue-rotate(196deg);
}

.popup-nav img:hover {
    width: 33%;
    margin: 33%;
    filter:grayscale(0%) brightness(1) hue-rotate(0deg);
}

.popup-rs {
    display:flex;
    justify-content: space-around;
    margin-top: 12px;
}

.popup-icon-rs {
    width: 2em;
    transition: all ease 50ms;
    filter: hue-rotate(40deg) brightness(7.5) saturate(0.4);
}

.popup-icon-rs:hover {
	transform: scale(1.2);
	filter: hue-rotate(300deg) brightness(0.8) saturate(0.7);
}

.popup-icon-rs-none {
    width: 2em;
    filter: grayscale(0%) brightness(.1) hue-rotate(232deg);
    opacity: 0.1;
}


.popup-reserv {
    margin: auto;
    margin-top: 20px;
}

.popup-reserv button {
  	background-color:var(--purple);
  	font-weight: bold;
  	transition: all ease 300ms;
}

.popup-reserv button:hover {
  	background-color: #ff4343; 
}




/* PINGS */


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

.ping_position {
    position: absolute;
    color:var(--purple);
    z-index: 200;
	background-color: var(--yellow) !important;
  	border-color: var(--purple) !important;
}

.ping_position:hover {
    color:var(--yellow);
	background-color: var(--purple) !important;
  	border-color: var(--purple) !important;
}

.ping_marker {
    position: absolute;
    z-index: 200;
    width: 40px;
    transition:all ease 50ms;
    transform: translate(-7px, -18px);
}

.ping:hover .ping_marker {
    filter: hue-rotate(295deg) brightness(0.6);
}

.ping_hover_title {
    /* display:none; */
    position:absolute;
    z-index:100000;
    opacity:0;
    background-color: var(--yellow);
    padding: .3em 1em;
    color: var(--purple) !important;
    transition:all ease 300ms;
    transform: scale(0);
    transform-origin: left;
    border:5px solid var(--purple);
}

.ping:hover .ping_hover_title {
    display:block;
    opacity:1;
    transform: scale(1);
}

.p-5 {
    width: 25px;
    height: 25px;
    padding: 0rem!important;
  	text-align:center;
}

.p-5:hover {
    transform: scale(1,1);
}

.bg-primary {
    background-color: var(--purple); !important;
    transition:all ease 250ms;
}

.border-primary {
    border-color: var(--purple); !important;
    transition:all ease 250ms;
}





#ping_loc_1010 { /* ATELIER DU MARQUIS */
    top: 684px;
    left: 1189px;
}

#ping_loc_1020 { /* LE GRATIN */
    top: 661px;
    left: 1229px;
}

#ping_loc_1031 { /* LES HIBOUX */
    top: 634px;
    left: 1229px;
}

#ping_loc_1042 { /* CAFE CREED */
    top: 608px;
    left: 1229px;
}

#ping_loc_1050 { /* PLAN B */
    top: 670px;
    left: 1268px;
}

#ping_loc_1060 { /* BOULE DE FEU */
    top: 923px;
    left: 1234px;
}

#ping_loc_1070 { /* MAISON DES AUTEURS */
    top: 746px;
    left: 1373px;
}

#ping_loc_1080 { /* LE GROS CORBEAU */
    top: 775px;
    left: 1409px;
}

#ping_loc_1090 { /* FICHTRE DIANTE */
    top: 903px;
    left: 1455px;
}

#ping_loc_1100 { /* LA PETITE BOUTIQUE */
    top: 954px;
    left: 1437px;
}

#ping_loc_1110 { /* PIMAA */
    top: 937px;
    left: 1468px;
}

#ping_loc_1120 { /* OFF OF OFF */
    top: 936px;
    left: 1566px;
}

#ping_loc_1130 { /* BAR DES ARCEAUX */
    top: 986px;
    left: 1579px;
}

#ping_loc_1140 { /* MAKISAPA */
    top: 957px;
    left: 1622px;
}

#ping_loc_1150 { /* LA BARAKA */
    top: 920px;
    left: 1648px;
}

#ping_loc_1160 { /* ETATS D'ARTS */
    top: 892px;
    left: 1648px;
}

#ping_loc_1172 { /* COLLECTIFS DES Ö */
    top: 864px;
    left: 1648px;
}

#ping_loc_1180 { /* POTERIE SOUMAGNAC */
    top: 1330px;
    left: 1515px;
}

#ping_loc_1190 { /* BEAU BROUILLON */
    top: 974px;
    left: 1785px;
}



















#ping_hover_title_1010 { /* ATELIER DU MARQUIS */
    top: 684px;
    left: calc(1189px + 40px);
}

#ping_hover_title_1020 { /* LE GRATIN */
    top: 661px;
    left: calc(1229px + 40px);
}

#ping_hover_title_1031 { /* LES HIBOUX */
    top: 634px;
    left: calc(1229px + 40px);
}

#ping_hover_title_1042 { /* CAFE CREED */
    top: 608px;
    left: calc(1229px + 40px);
}

#ping_hover_title_1050 { /* PLAN B */
    top: 670px;
    left: calc(1268px + 40px);
}

#ping_hover_title_1060 { /* BOULE DE FEU */
    top: 923px;
    left: calc(1234px + 40px);
}

#ping_hover_title_1070 { /* MAISON DES AUTEURS */
    top: 746px;
    left: calc(1373px + 40px);
}

#ping_hover_title_1080 { /* LE GROS CORBEAU */
    top: 775px;
    left: calc(1409px + 40px);
}

#ping_hover_title_1090 { /* FICHTRE DIANTE */
    top: 903px;
    left: calc(1455px + 40px);
}

#ping_hover_title_1100 { /* LA PETITE BOUTIQUE */
    top: 954px;
    left: calc(1437px + 40px);
}

#ping_hover_title_1110 { /* PIMAA */
    top: 937px;
    left: calc(1468px + 40px);
}

#ping_hover_title_1120 { /* OFF OF OFF */
    top: 936px;
    left: calc(1566px + 40px);
}

#ping_hover_title_1130 { /* BAR DES ARCEAUX */
    top: 986px;
    left: calc(1579px + 40px);
}

#ping_hover_title_1140 { /* MAKISAPA */
    top: 957px;
    left: calc(1622px + 40px);
}

#ping_hover_title_1150 { /* LA BARAKA */
    top: 920px;
    left: calc(1648px + 40px);
}

#ping_hover_title_1160 { /* ETATS D'ARTS */
    top: 892px;
    left: calc(1648px + 40px);
}

#ping_hover_title_1172 { /* COLLECTIFS DES Ö */
    top: 864px;
    left: calc(1648px + 40px);
}

#ping_hover_title_1180 { /* POTERIE SOUMAGNAC */
    top: 1330px;
    left: calc(1515px + 40px);
}

#ping_hover_title_1190 { /* BEAU BROUILLON */
    top: 974px;
    left: calc(1785px + 40px);
}











/* PETIT TRAIN */


#petit-train-infos-container {
    display: flex;
    justify-content: space-between;
}

#petit-train-infos {
    display:flex;
    justify-content: flex-start;
    width: 32%;
    flex-wrap: wrap;
    flex-direction: column;
}


.petit-train-vignette {
    padding: 12px 26px;
    background-color: var(--yellow);
    color: var(--purple);
    font-size: 1.1em;
    width: 100%;
    border: 3px solid var(--purple);
    font-weight: bold;
    text-align: center;
    margin-bottom: 1em;
    box-shadow: 8px 8px;
    text-transform: uppercase;
    font-family: 'poc_simple';
}


#petit-train-trajet {
    width: 100%;
    height: fit-content;
    border: 3px solid var(--purple);
}






/* NAVETTES */


#navettes_trajets {
    display:flex;
    width:50%;
}

.navette_trajet_column {
    width:45%;
    display:flex;
    flex-direction:column;
}

#navette_N1 .navette_title h4{
    color:var(--purple);
}

#navette_N2 .navette_title h4{
    color:var(--orange);
}

.navette_title {
    display: flex;
    margin-bottom: .7em;
}

.navette_title h4 {
    font-family:'poc_custom';
    font-size:2.5em;
}

.navette_arrets {
    display:flex;
    flex-direction:column;
}

.navettes_arrets_row {
    display:flex;
    margin-bottom:.3em;
    position: relative;
}

.navette_arrets_ronds {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-right:.6em;
}

#navette_N1 .navette_arrets_ronds {
    background-color:var(--purple);
}

#navette_N2 .navette_arrets_ronds {
    background-color:var(--orange);
}

.navettes_arrets_noms {
    font-family:'poc_custom';
    font-size:1.2em;
}

#navette_N1 .navettes_arrets_noms{
    color:var(--purple);
}

#navette_N2 .navettes_arrets_noms{
    color:var(--orange);
}

.navettes_arrets_ligne {
    display: block;
    width: 6px;
    height: 50px;
    position: absolute;
    bottom: -8px;
    left: 7px;
}

.navettes_arrets_ligne_start {
    display: block;
    width: 6px;
    height: 20px;
    position: absolute;
    bottom: -8px;
    left: 7px;
}

#navette_N1 .navettes_arrets_ligne{
    background-color: var(--purple);
}

#navette_N2 .navettes_arrets_ligne{
    background-color: var(--orange);
}









/* FOOTER */


footer {
    display: flex;
    justify-content: space-around;
    background-color: var(--purple);
    padding: 15px 5%;
    margin-top: 20px;
    position: relative;
    bottom: 0px;
    width: 100%;
    align-items: center;
    flex-wrap: wrap;
}

#footer_single {
    /* position:fixed !important; */
}

.footer_homepage {
    position:fixed !important;
    z-index:100;
}

.home footer strong,
.page footer strong {
	color:var(--yellow);
}

footer p {
    margin:0;
    color: var(--orange);
}

#footer_link a {
    color:var(--orange);
}

#footer_link a:hover {
    color:var(--yellow);
}

#footer_credits a {
    color: var(--orange);
    font-weight: bold;
}

#footer_credits a:hover {
    color: var(--yellow);
}











.meta-arrow {
    position: absolute;
    z-index: 15;
    left: 0;
    right: 0;
    bottom: 50px;
    width: 50px;
    margin: 0 auto;
    text-align: center;
    font-size: 2.2em;
    font-weight: 300;
    color: #eacb4d !important;
}

.icon-arrow {
	-webkit-transform: translateY(0);
	transform: translateY(0);
	-webkit-animation: meta-arrow 1s ease-out infinite;
	animation: meta-arrow 1s ease-out infinite;
	background-color: var(--purple);
	padding: 10px 7px 5px 7px;
	border-radius: 10px;
}

@keyframes meta-arrow {
	90% {
		opacity: 0.7;
		-webkit-transform: translateY(20px);
		transform: translateY(20px);
	}
	100% {
		opacity: 0.1;
		-webkit-transform: translateY(20px);
		transform: translateY(20px);
	}
}

@-webkit-keyframes meta-arrow {
	90% {
		opacity: 0.7;
		-webkit-transform: translateY(20px);
		transform: translateY(20px);
	}
	100% {
		opacity: 0.1;
		-webkit-transform: translateY(20px);
		transform: translateY(20px);
	}
}









/* FORMULAIRE */

form {
    width: 75%;
    margin: auto;
}


.wpforms-container {
  width:65%;
  margin: auto;
  margin-top: 20px;
}

input[type=text], textarea, input[type=email] {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  margin-right: 0px;
  margin-left: 0px;
  resize: vertical;
}
label{margin-right: 0px;
  margin-left: 0px;
  width: 100%;}

input[type=submit] {
  background-color: #1255a2;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #1872D9;
}

.container {
  /* Ajouter box-sizing */
  box-sizing : border-box;
  border-radius:5px;
  background-color:#fff;
  padding:20px;
  width: 100%;
  max-width: 440px;
  margin:0 auto;
}

select {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    margin-bottom: 20px;
}

#wpforms-2123-field_2 {
  height:175px;
}


#wpforms-error-noscript, .wpforms-error-noscript {
  display:none;
}

.wpforms-container button {
  	background-color: #2b4367;
    font-weight: bold;
    transition: all ease 300ms;
    padding: 0.9em 2em;
    border: none;
    color: #eee;
    cursor: pointer;
}

.wpforms-container button:hover {
  	background-color: var(--purple);
}


#wpforms-form-2123 {
	display: flex;
    flex-direction: column;
    align-items: end;
}

.wpforms-field-container {
 	width:100% 
}

.screen-reader-response {
    display:none;
}

.wpcf7-response-output {
    /* background-color: var(--orange); */
    color: var(--purple);
    padding: 1em 2em;
    /* border: 3px solid var(--purple); */
    text-align: center;
}

.wpcf7-not-valid-tip {
    color:var(--purple);
}




/* MAINTENANCE */

#maintenance {
  background-image:none;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;
  height:100vh;
}


#pres_temp {
    background-color: #ffffff;
    padding: 9em;
    margin-top: 15em;
    position: absolute;
    border: 1.5em solid #a5d7d3;
}

#pres_temp_text {
    margin-bottom: 6em;
}

#pres_temp a {
    background-color:var(--purple);
    color:#fff;
    font-weight:bold;
    padding: 1em 0;
    font-size: 2.5em;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#pres_temp p {
    letter-spacing: -.03em;
}



/* AUTRES */

.page-politique-de-cookies h4,
.page-mentions-legales h4 {
    text-align: left;
    margin-top: 1em;
    margin-bottom:.3em;
    font-weight: bold;
}

.page-politique-de-cookies ul li,
.page-mentions-legales ul li {
    list-style: disc;
    margin-left: 2em;
}

.page-politique-de-cookies ul li::marker,
.page-mentions-legales ul li::marker {
  color: var(--purple);
}

.wp-block-separator {
    border-top: 2px solid var(--purple);
    width: 100%;
}

.cookieadmin_consent_inside {
    padding: 2em 2em !important;
}

.cookieadmin-poweredby {
    display:none;
}