.block {
  padding: 10px;
}
.button.big_button {
  display: inline-block;
  padding: 10px;
  margin-top: 30px;
  text-align: center;
  font-size: 20px;
}
.news .article {
  background-color: #eee;
}
.image {
  border-radius: 20px;
  box-shadow: 3px 3px 3px #666;
}
.lien {
  cursor: pointer;
}
.more {
  display: none;
}
img {
  max-width: 100%;
}
.logo img {
	max-width: none;
}
/*
h1,h2,h3,h4,h5,h6,
body {
  font-family: 'Exo2', 'Varela Round', verdana, arial;
}
*/
.p20 { padding: 20px; }
.w30 { width: 30%; }
.w35 { width: 35%; }
.w50 { width: 50%; }
.w65 { width: 65%; }
.w70 { width: 70%; }
.w100 { width: 100%; }
.mobile_only { display: none; }
@media screen and (max-width: 840px) {
  .mobile_no { display: none; }
  .mobile_only { display: block; }
  .w30,
  .w35,
  .w65,
  .w50,
  .w70,
  .w100 { width: 100%; }
}

.w100 input[type=email],
.w100 input[type=text],
.w100 input[type=password]
{ width: 100%; }

.spaced > div {
  margin: 10px;
}

.msg {
  margin: 10px 0px;
  padding: 20px;
  font-weight: 100;
  display: inline-flex;
  align-items: center;
}
.msg.ko:before {
  content: url('/img/tenebreux-rockhopper-small.png');
  margin-right: 20px;
}
.msg.ko {
  background-color: #D0E8EC;
  color: #284866;
}
.msg.ok:before {
  content: url('/img/tenebreux-gentoo-small.png');
  margin-right: 20px;
}
.msg.ok {
  background-color: #D0E8EC;
  color: #284866;
}

.padded {
  padding: 10px;
}
.round {
  border-radius: 20px;
}
.bgcol1 {
  background-color: #CEE7EB;
}
.marged {
  margin-width: 120px;
}
div {
    box-sizing: border-box;
}
.article {
  /*border-top: solid 5px #aaa;*/
  border-bottom: solid 5px #aaa;
	padding-bottom: 10px;
}
.article_autor_img {
	height: 50px;
	vertical-align: middle;
}
.article_outer {
  padding: 0px;
}
.article_outer h2 {
	cursor: pointer;
}
.article_outer h2 .date {
	font-size: 14px;
	padding-left: 10px;
}
.article p {
	font-size: 15px;
}
.article_outer h2 .flag {
	vertical-align: middle;
	height: 25px;
}
.article img.illustration {
  padding: 5px;
  float: right;
  width: 33%;
  border: solid 1px #aaa;
  /*margin-left: 10px;*/
}
@media screen and (max-width: 600px) {
  .article img.illustration {
    width: 100%;
    float: none;
  }
  .article img {
    max-width: 100%;
    float: none;
  }
}
.article .signature {
  color: #666;
}
.article .date {
  color: #666;
  font-style: italic;
}

.res0 .temps {
  color: red;
}
.res1 .temps {
  color: darkgreen;
}
.res2 .temps {
  color: orange;
}
.tab div div {
  display: inline-block;
  width: 70px;
  text-align:right;
}
.tab div div.header {
  width: 300px;
  text-align:left;
}
.bold {
  font-weight: bold;
}
.tab div.last_line {
  margin-top: 10px;
}
/*
.button {
  padding: 5px 15px;
  border-radius: 5px;
  margin: 10px;
}
.button.bleu_clair {
  background-color: #63BEC6;
  color: white;
}
a.button:hover {
  text-decoration: none;
  box-shadow: 3px 3px 3px #666;
}
*/

/* colors */
body { color: #404041; /*gris mat */ }
.a,
a { color: #07547E; /*bleu steph */ }
.a,
a:hover { color: #284866; /* bleu bubu */ }

a, div, input, button, textarea
{
  box-sizing: border-box;
}
.ombre {
  box-shadow: 3px 3px 3px #000;
}
#border {
  border: solid 1px black;
}
.w100p {
  width: 100%;
}
body {
  padding: 0px;
  margin: 0px;
}
#content {
  padding: 10px;
  padding-top: 20px;
  position: relative;
  width: 100%;
  max-width: 1280px;
  margin: auto;
  min-height: 600px;
}
#logo {
  position: absolute;
  right: 60px;
  top: 20px;
  z-index: 20;
}
#logo img {
  width: 200px;
}
.togglable {
  display: none;
}
.liste_photos {
  max-width: 95%;
}
.photo_pingouins {
	width: 670px;
  max-width: 100%;
  /*
	overflow: scroll;
  */
}
.photo_pingouins {
	width: 640px; 
	border: solid 5px black;
	margin: 0px;
}
.piece img {
	border: solid 1px #666;
	box-shadow: 3px 3px 3px #999;
}

.quote {
  white-space: pre-line;
  font-size: 0.9em;
  padding: 5px;
  border: solid 1px #999;
  border-radius: 5px;
  margin: 10px;
  background-color: #fff;
  font-style: italic;
}
.quote:before {
  content: "«";
}
.quote:after {
  content: "»";
}
h1 { color: #284866; }
h2 { color: #07547E; }
h1,h2,h3 {
  font-weight: 400;
}
body {
  font-size: 14px;
}
.echec {
  color: red;
  text-decoration: line-through;
}
.cool {
	color: orange;
	font-weight: bold;
}
.sarace {
	color: red;
	font-weight: bold;
}
img.facebook {
	height: 16px;
}
.feedback  {
	color: #999;
}
.rooms {
	width: 640px;
}
.room.transparent {
	opacity: 0.5;
}
.room {
	width: 100%;
	margin: 10px;
	padding: 10px;
	border-radius: 10px;
	border: solid 1px #666;
	background-color: #eee;
}
a {
	text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
.feedback img {
	width: 100px;
}
.adresse,
.prix,
.pieces,
.piece, 
.jours, 
.salle_commentaire,
.commentaires {
	padding-left: 20px;
}
.salle_image {
  float: left;
  display: block;
  width: 200px;
}
.salle_commentaire {
  float: left;
  display: block;
  padding-left: 20px;
  width: 400px;
}
.piece img {	
	float: left;
	margin: 3px;
}
.pieces, 
.piece {
	clear: both;
}
.piece {
	padding: 10px;
}
.piece.todo {
	background: #afa;
	border-radius: 10px;
}
.ville {
	display: inline-block;
	border: solid 1px #666;
	padding: 2px;
	border-radius: 5px;
}
.ville.lausanne { background: #dfd; color: #090; border-color: #090; }
.ville.proche { background: #fea; color: #960; border-color: #960; }
.ville.loin { background: #fdd; color: #900; border-color: #900; }
.counter {
	color: red;
	font-weight: bold;
}
body {
  position: relative;
}
#footer_content a {
  color: #acf;
}
#footer_content {
  width: 100%;
  max-width: 980px;
  margin: auto;
  text-align: right;
}
#footer {
  /*position: absolute;*/
  bottom: 0px;
  z-index: 10;
  width: 100%;
  margin: 0px;
  padding: 10px;
  background-color: #07547e;
  color: white;
  padding-left: 40px;
}


.liste_visites {
  border-collapse: collapse;
  font-size: 0.8em;
}
.liste_visites tr th {
	font-weight: 400;
	text-align: left;
	font-size: 110%;
}
.liste_visites tr th,
.liste_visites tr td {
  border-bottom: solid 1px #999;
  padding: 3px;
}
@media (min-width: 800px) {
	.liste_visites tr th,
	.liste_visites tr td {
		border-bottom: solid 1px #999;
		padding: 8px 6px;
		font-size: 120%;
	}
}

select.size_xs ,
input.size_xs { width: 50px; max-width: 100%; }
select.size_s ,
input.size_s { width: 80px; max-width: 100%; }
select.size_l ,
input.size_l { width: 200px; max-width: 100%; }
select.size_xl ,
input.size_xl { width: 500px; max-width: 100%; }
textarea.size_l { width: 500px; height: 250px; max-width: 100%; }

.en_construction { color: orange; }
.faite { color: darkgreen; }
.escapegamepass_championnat { font-weight: bold; }
.ferme { text-decoration: line-through; }
.temps { font-size: 0.9em; opacity: 0.9; font-weight: normal; }


.visite_content { display: none; }
.visite .img1 img,
.visite .img2 img {
  width: 100%;
  box-shadow: 3px 3px 3px #666;
  margin: 4px;
  border: solid 1px #666;
}
.visite .commentaires.w_0_img { width: 100%; }
.visite .commentaires.w_1_img { width: 80%; }
.visite .commentaires.w_2_img { width: 60%; }
.visite .img1 ,
.visite .img2  {
  width: 20%;
}
.visite .img1 ,
.visite .img2 ,
.visite .commentaires {
  float: left;
}
.visite .editlink { float: right; }
.visite .nom { font-weight: bold; }
.visite .date:before { content: 'date:'; }
.visite .note:before { content: 'note:'; }
.visite .temps { text-decoration: underline; }
.visite .temps_commentaire:before { content: 'info:'; }
.visite .num { font-weight: bold; }

#visite_popup {
  display: none;
  position: absolute;
  left: 20px;
  top: 20px;
  z-index: 20;
}
#visite_popup .commentaires{
}

.historique .visite, 
#visite_popup {
  width: 90%;
  background-color: #D0E8EC;
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0px 0px 3px #666;
}


td.salle_refaite {
  color: red;
}
tr.pas_compte td {
  opacity: 0.7;
}

img.icon_24 {
  height: 24px !important;
  width: 24px !important;
  border: none !important;
  vertical-align: middle;
}
img.icon_mini {
  height: 16px !important;
  width: 16px !important;
  border: none !important;
}
img.icon {
  height: 18px !important;
  width: 18px !important;
  border: none !important;
  vertical-align: middle;
}

.clickable {
  cursor: pointer;
}

/* selecteur de la homepage **********************************************/

.search_room_menu {
  display: flex;
  flex-wrap: wrap;
}
.flex {
  display: flex;
  flex-wrap: wrap;
}
.search_room_menu>div>div img {
  width: 100%;
  border: solid 1px #666;
  border-radius: 20px;
}
.search_room_menu>div>div {
/*
  width: 50%;
  background-size: contain;
  border-radius: 20px;
  background-position: center center;
  */
}
div.desc {
  padding: 10px;
  text-align: center;
  font-size: 16px;
  color: #07547E;
  padding-top: 20px;
}

/* index **********************************************/
.pieces_img {
  display: flex;
  flex-wrap: wrap;
}
.pieces_img .piece:hover {
  margin: 5px;
  opacity: 1.0;
  box-shadow: 3px 3px 3px #333;
}
.pieces_img .piece {
  opacity: 0.85;
  margin: 10px;
  background-size: cover;
  background-position: center center;
  height: 200px;
  border-radius: 20px;
  color: white;
  text-shadow: 0px 0px 4px black;
  font-size: 1.6em;
  font-weight: 100;
  padding: 20px;
  padding-top: 40px;
  background-color: #07547E;
}
.size25 { width: 25%; }
.size33 { width: 33.333%; }
.size50 { width: 50%; }
.size100 { width: 100%; }
@media screen and (max-width: 640px) {
  .size25 { width: 50%; }
  .size33 ,
  .size50 ,
  .size100 { width: 100%; }
}
.nom_piece a {
  color: white;
}

.nom_salle a {
  font-size: 0.8em;
  color: #ddd;
}
/* fin index **********************************************/



/* formulaires  **********************************************/

form.default {
  width: 100%;
  padding: 20px;
}
form.default .form_input,
form.default .form_label,
form.default .form_line {
  padding: 5px;
}
form.default .form_input,
form.default .form_input .form_line,
form.default .form_input .label,
form.default .form_input .inputdiv,
form.default .form_input input[type='email'],
form.default .form_input input[type='text'],
form.default .form_input input[type='password'],
form.default .form_line button {
  width: 100%;
}
@media screen and (min-width: 400px) {
  form.default {
    width: 320px;
  }
}



/* recherche ***** ***** */
#searchform {
  font-size: 18px;
}
.resultats {
  padding: 10px;
}
.resultats>div {
  margin-bottom:20px;
}
.resultats .salle {
  font-weight: bold;
  color: #07547E;
}
.hl {
  color: #20B8D4;
}


/* edit visite **********************************************/


@media screen and (max-width: 720px) {
  .edit_visite ,
  .edit_visite tbody,
  .edit_visite tr,
  .edit_visite tr td  {
    display: block;
  }
  input,
  textarea ,
  .token-input-list {
    max-width: 100%;
  }
  form {
    max-width: 95%;
  }
}


/**  formulaire **********************************************/

.button,
button {
  border: none;
  background-color: var(--bg);
  color: white;
  padding: 10px 30px;
  box-shadow: 3px 3px 3px #666;
  display: inline-block;
  margin: 4px;
}
.button:hover,
button:hover {
  box-shadow: none;
  text-decoration: none;
  color: white;
}

/**  foundation  **********************************************/
#main-menu a:hover {
  text-decoration: none;
  background-color: #29769F;
}
.top-bar a,
.top-bar ul a, 
#main-menu a,
.top-bar,
.top-bar ul, 
#main-menu {
  color: white;
}
.top-bar,
.top-bar ul, 
#main-menu {
  background-color: #07547E;
}
#main-menu .menu {
  z-index: 10;
}



.accordion-menu .is-accordion-submenu-parent:not(.has-submenu-toggle) > a::after,
.dropdown.menu.medium-horizontal > li.is-dropdown-submenu-parent > a::after {
  border-color: white transparent transparent;
}
h1 { font-size: 2.1rem;  margin: 10px 0px; }
h2 { font-size: 1.7rem; }
h3 { font-size: 1.4rem; }
h4 { font-size: 1.2rem; }
.news .article h2 {
  font-size: 1.4rem;
}
.piece_list_elem {
  margin: 5px;
}

img.deco {
  box-shadow: 3px 3px 3px #999;
}

/* changements marge 2025 */
@media screen and (max-width: 640px) {
	#content{
		padding: 1px;
	}
}