* {
	font-family: "Lucida Grande", Tahoma, Geneva, Arial, Verdana;
}

#body_wrapper {
	background-color: white;
	margin:auto;
	padding:auto;
	max-width:1110px;
}

.alert-error {
    background-color: #f2dede;
    border-color: #ebccd1;
    color: #a94442;
}


.red_title {
	color: #c3442b;
}

.orange_title {
	color: #FF8100;
}

.blue_title {
	color: #0079B7;
}

.deep_well {
	background-color: #DDDDDD;
}

.compact_well {
	padding: 10px 5px;
	margin-bottom: 10px;
}

.btn-high {
	padding-top:30px;
	padding-bottom:30px;
}

.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger {
	padding: 10px;
}

.form-fix .form-group {
	padding-left:15px;
}

/* Base */

#header {
	margin-top:5px;
}

#header a {
	padding-left:10px;
	padding-right:10px;
}

.responsive_title {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

@media screen and (min-width: 768px) and (max-width: 1110px){
	.img_star { width: 13px; }
}

#logo_xs {
	height: 60px;
}

#logo_sm {
	margin-top:-20px;
	height: 80px;
	margin-right:5px;
}

.navbar-default {
	background-color: initial;
    border-color: transparent;
}

#footer_bottom {
	background-color: #6699CC;
}

#footer .row{
	color:white;
	background-color: #6699CC;
}

#footer_image {
	background-image: url("image/paris.5e4c87ee5548.png");
	background-repeat: repeat-x;
	height:51px;
}

#footer_tabs {
	padding-top: 20px;
}

#footer a:hover  {
	background-color: initial;
}
	
#footer_tabs ul li {
	list-style: none;
}

#footer a:link, #footer a:visited, #footer a {
	text-decoration: none;
	border: none;
	color:white
}

#partners_logo img{
	margin-left: 10px;
}

#separation_bar {
	background-image: url("image/slice_small_banner.dc11a1c63a64.png");
	background-repeat: repeat-x;
	height:15px;
	margin-top: 10px;
	margin-bottom: 20px;
}

/* Home page */

.helpbar_wrapper {
	background-image:linear-gradient(rgb(36,101,191), rgb(174,210,251));
	padding-bottom: 5px;
}

#helpbar_left {
	margin-top: -6px;
	margin-bottom: -6px;
}


#helpbar_right img {
	margin-top: 12px;
}
#play_button {
	position:absolute;
	margin-top: -80px;
	margin-left: 5px;
}

.helpbar_center {
	text-align: center;
	color:white;
}
#helpbar_center_high h4{
	margin-left: -60px;
	margin-right: -10px;
}

.helpbar_center_low {
	text-align: center;
}

.helpbar_bubble {
	width:20%;
	float:left;
	position: relative;
    min-height: 1px;
    padding-right: 5px;
    padding-left: 5px;
}

.helpbar_text  {
	margin-left:-5px;
	margin-right:-5x;
	line-height: 100%;
}

.helpbar_icon img{
	margin-left: auto;
    margin-right: auto;
	height:60px;
}

#content_wrapper{
	margin-top:15px;
}

.main_block{
	padding-left:5px;
	padding-right:5px;
}

/*
En portrait, les blocs occupent toute la largeur : les 5 px prévus comme
gouttière entre colonnes deviennent la seule marge avec le bord de l'écran, et
les panneaux paraissent collés. On desserre uniquement sous le point de
rupture, la disposition en colonnes n'étant pas concernée.
*/
@media screen and (max-width: 767.98px) {
	.main_block{
		padding-left:12px;
		padding-right:12px;
	}
}

@media screen and (min-width: 1110px){
	#top_row .panel {
		height: 348px;
	}
}

@media screen and (min-width: 768px) and (max-width: 1110px){
	#top_row #searchField { width: 160px; }
}

#top_row #datepicker {
	width: 100px;
}

#carousel {
	padding:0px;
}

.carousel-caption {
	font-weight: bolder;
	text-shadow: 2px 2px 4px #000000;
}

.lead-image {
	height:auto;
	width:auto;
	/*
	Sans borne, une image de carrousel plus large que l'écran sort du cadre en
	portrait mobile : `width:auto` suit la largeur intrinsèque du fichier. Le
	défaut restait invisible tant qu'aucune visite n'avait d'image.
	*/
	max-width: 100%;
}


#category-list{
	padding-left:10px;
	padding-right:10px;
}


#search_panel .list-group{
	padding-left:5px;
	padding-right:5px;
}

#search_panel .list-group-item{
	padding-left:5px;
	padding-right:5px;
	padding-top:3px;
	padding-bottom:3px;
	border:0px;
}

.list-group {
    margin-bottom: 0px;
}

.list-compact {
	padding: 5px; 
}

/*
Le sélecteur visait aussi les `div` internes, c'est-à-dire les colonnes
Bootstrap — or leur padding horizontal est exactement ce qui absorbe les marges
négatives de `.row` (-12 px de chaque côté). En l'annulant, la ligne devenait
24 px plus large que le panneau et débordait visiblement en portrait mobile.
Les gouttières sont retirées côté `.row`, par la classe `g-0` posée dans le
gabarit : Bootstrap met alors la marge négative *et* le padding à zéro, de façon
cohérente.

Reste à écarter le contenu de la bordure de l'item. Ce padding-là ne peut pas
créer de débordement puisque `g-0` a supprimé les marges négatives — c'était
tout le problème de la version précédente, qui mettait ces deux valeurs à zéro
et collait donc les vignettes au filet.
*/
#bottom_row .list-group-item{
	padding-left:10px;
	padding-right:10px;
}

.small-image {
	text-align: center;
}

.small-image  img{
	max-height: 54px;
}


#popular_guides .col-xs-2 {
	padding-right:5px !important;
}

/* Tour page */

.tour #carousel-guideapolis img {
  width: auto;
  height: 350px;
  max-height: 350px;
}

.tour #carousel-guideapolis {
	margin-bottom:19px;
}

.tour h5, .massive_title, .tour_title, .tour_subtitle {
	font-weight: bold;
	color: #6A2617;
}

/*
Le titre de la fiche est passé de h4/h5 à h1/h2 pour que la hiérarchie du
document désigne la visite et non le prix. Les tailles reprennent celles de
Bootstrap pour h4 et h5, l'apparence est donc inchangée — seule la sémantique
bouge.
*/
.tour_title {
	font-size: 1.5rem;
	margin-bottom: .5rem;
}

.tour_subtitle {
	font-size: 1.25rem;
	margin-bottom: .5rem;
}

/* Même bascule sur la page guide : le nom passe de h2 à h1, la taille de h2 est
   conservée pour que la mise en page ne bouge pas. */
.guide_title {
	font-size: 2rem;
	margin-bottom: .5rem;
}

/* Pages de liste (ville, thème, nouveautés) : le titre passe de h3 à h1, à
   taille de h3 constante. Ces pages ressortent en position 13-15 sur des
   requêtes comme « visite guidée lyon » sans qu'aucun h1 ne dise de quoi
   elles parlent. */
.list_title {
	font-size: 1.75rem;
	margin-bottom: .5rem;
}

/* Fil d'Ariane visible. Il double le BreadcrumbList en JSON-LD, et surtout il
   crée le lien qui manquait entre les 2 000 fiches de visite et leur page
   ville — laquelle est justement celle qui plafonne en deuxième page. */
.breadcrumb_trail {
	font-size: .9rem;
	margin-bottom: .5rem;
}

.breadcrumb_trail a {
	color: #0079B7;
}

#share {
	max-height: 80px;
	overflow:hidden;
}

#share >.row>div {
	padding-left:15px;
	padding-right:0px;
}

.massive_title {
	font-size:42px;
	margin-top:5px;
	margin-bottom:5px;
}


#guide_photo {
	padding-right:5px;
}

#guide_titles {
	padding-left:5px;
}

/* Map page */
#map_canvas {
		width:100%;
		height:500px;
}

#map_page >div{
	height:560px;
	overflow-y:scroll;
}

/* Press page */
#visuals img {
	margin: 0 auto;
}

/* Login page */
#terms_link {
	padding-top: 7px;
}

#registration .panel {
	background-color: initial;
    border: initial;
	margin-bottom: 0px;
    border-radius: initial;
    -webkit-box-shadow: initial;
    box-shadow: initial;
}

/* Account pages */
.nav-center > li {
	float:none;
	display:inline-block;
	*display:inline; /* ie7 fix */
	zoom:1; /* hasLayout ie7 trigger */
}

.nav-center {
    text-align:center;
}

/* Images pages — zoom géré par modal Bootstrap (voir images.html) */

/* Search page */

.title_compact {
	margin-top:0px;	
}

.compact_col_in_well>.row>div {
	padding-left: 5px;
	padding-right: 5px;
}

.compact_form>div {
	margin-bottom: 0px;
}


/* Categories pages */
.categories img{
	width: 30px;
	-webkit-border-radius:2px;
	-moz-border-radius:2px;
	margin-left: 1px;
	-moz-box-shadow: 1px 1px 8px #999;  
 	-webkit-box-shadow: 1px 1px 8px #999;  
 	box-shadow: 1px 1px 8px #999; 
	opacity:0.4;
	filter:alpha(opacity=40);
}


#selected {
	margin-left: 4px;
}

#selected img{
	opacity:1;
	filter:alpha(opacity=100);
} 
 
.categories img:hover{
	opacity:1;
	filter:alpha(opacity=100);
}

/* ===================================================================
   Compatibilité Bootstrap 3 → Bootstrap 5
   Les templates utilisent des classes BS3 ; le CSS servi est BS5.
   Ces règles fournissent les équivalents manquants.
   =================================================================== */

/* Well (supprimé en BS5) */
.well {
	padding: 19px;
	margin-bottom: 20px;
	background-color: #f5f5f5;
	border: 1px solid #e3e3e3;
	border-radius: 4px;
	box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
}

/* Panel (supprimé en BS5, remplacé par card) */
.panel {
	padding: 0;
	border: 1px solid #ddd;
	border-radius: 4px;
	background-color: #fff;
	box-shadow: 0 1px 1px rgba(0,0,0,.05);
	margin-bottom: 20px;
}
.panel-default { border-color: #ddd; }
.panel-heading {
	padding: 10px 15px;
	border-bottom: 1px solid transparent;
	border-radius: 3px 3px 0 0;
	background-color: #f5f5f5;
	border-color: #ddd;
}
.panel-body { padding: 15px; }
.panel-title { margin: 0; font-size: 16px; font-weight: bold; }

/* btn-default (renommé btn-secondary en BS5) */
.btn-default {
	color: #333;
	background-color: #fff;
	border-color: #ccc;
}
.btn-default:hover, .btn-default:focus {
	color: #333;
	background-color: #e6e6e6;
	border-color: #adadad;
}

/* Alignement texte (renommé text-start/text-end en BS5) */
.text-right { text-align: right !important; }
.text-left  { text-align: left  !important; }

/* Float helpers (renommés float-end/float-start en BS5) */
.pull-right { float: right !important; }
.pull-left  { float: left  !important; }

/* img-responsive (renommé img-fluid en BS5) */
.img-responsive { max-width: 100%; height: auto; }

/* center-block (remplacé par d-block mx-auto en BS5) */
.center-block { display: block; margin-left: auto; margin-right: auto; }

/* img-circle (renommé rounded-circle en BS5) */
.img-circle { border-radius: 50%; }

/* Navbar mobile — menu déployé */
@media (max-width: 575.98px) {
	#guideapolis-menu {
		background-color: #f8f9fa;
		border-top: 1px solid #dee2e6;
		padding: 8px 0;
		border-radius: 0 0 4px 4px;
	}
	#guideapolis-menu .nav-link {
		padding: 8px 16px;
	}
	#guideapolis-menu .dropdown-menu {
		position: static;
		float: none;
		box-shadow: none;
		border: none;
		background-color: #eef0f2;
		padding-left: 16px;
	}
}

/* Panel colorés BS3 */
.panel-primary { border-color: #337ab7; }
.panel-primary > .panel-heading { background-color: #337ab7; color: #fff; border-color: #337ab7; }
.panel-info    { border-color: #46b8da; }
.panel-info    > .panel-heading { background-color: #5bc0de; color: #fff; border-color: #46b8da; }
.panel-success { border-color: #4cae4c; }
.panel-success > .panel-heading { background-color: #5cb85c; color: #fff; border-color: #4cae4c; }
.panel-warning { border-color: #eea236; }
.panel-warning > .panel-heading { background-color: #f0ad4e; color: #fff; border-color: #eea236; }
.panel-danger  { border-color: #d43f3a; }
.panel-danger  > .panel-heading { background-color: #d9534f; color: #fff; border-color: #d43f3a; }

/* Thumbnail (supprimé en BS5) */
.thumbnail {
	display: block;
	padding: 4px;
	margin-bottom: 20px;
	line-height: 1.42857143;
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 4px;
}
.thumbnail > img { display: block; max-width: 100%; }
.thumbnail .caption { padding: 9px; color: #333; }

/* Carousel BS3 controls (left/right carousel-control) */
.carousel-control.left,
.carousel-control.right {
	position: absolute;
	top: 0; bottom: 0;
	left: 0;
	width: 15%;
	opacity: .5;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	text-shadow: none;
	background: rgba(0,0,0,.3);
	z-index: 1;
}
.carousel-control.right { left: auto; right: 0; }
.carousel-control.left:hover, .carousel-control.right:hover { opacity: .9; }

/* Nav-tabs BS3 (li sans nav-item/nav-link) */
.nav-tabs > li { float: left; margin-bottom: -1px; }
.nav-tabs > li > a {
	display: block;
	padding: 10px 15px;
	border: 1px solid transparent;
	border-radius: 4px 4px 0 0;
	color: #337ab7;
	text-decoration: none;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
	border: 1px solid #ddd;
	border-bottom-color: transparent;
	color: #555;
	background-color: #fff;
	cursor: default;
}
.nav-pills > li > a {
	display: block;
	padding: 10px 15px;
	border-radius: 4px;
	color: #337ab7;
	text-decoration: none;
}
.nav-pills > li.active > a { background-color: #337ab7; color: #fff; }

/* Dropdown BS3 (li > a sans dropdown-item) */
.dropdown-menu > li > a {
	display: block;
	padding: 3px 20px;
	clear: both;
	font-weight: 400;
	line-height: 1.42857143;
	color: #333;
	white-space: nowrap;
	text-decoration: none;
}
.dropdown-menu > li > a:hover { background-color: #f5f5f5; }

/* === Navbar moderne === */

/* Ombre subtile sous la navbar */
.navbar {
	border-bottom: 1px solid #e9ecef;
	box-shadow: 0 1px 6px rgba(0,0,0,.06);
}

/* Liens standards */
.navbar-nav .nav-link {
	font-size: .875rem;
	font-weight: 500;
	color: #555;
	padding: .35rem .75rem;
	border-radius: 6px;
	transition: color .15s ease, background-color .15s ease;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
	color: #0079B7;
	background-color: rgba(0,121,183,.07);
}

/* Bouton déconnexion — visuellement identique aux nav-link */
.nav-logout {
	font-size: .875rem;
	font-weight: 500;
	color: #555;
	padding: .35rem .75rem;
	border-radius: 6px;
	transition: color .15s ease, background-color .15s ease;
	background: none;
	border: none;
	cursor: pointer;
	line-height: 1.5;
	display: block;
}
.nav-logout:hover,
.nav-logout:focus {
	color: #0079B7;
	background-color: rgba(0,121,183,.07);
	outline: none;
	box-shadow: none;
}

/* Mon compte — contour bleu */
.nav-link-account {
	border: 1.5px solid #0079B7 !important;
	color: #0079B7 !important;
	margin-left: .25rem;
}
.nav-link-account:hover,
.nav-link-account:focus {
	background-color: #0079B7 !important;
	color: #fff !important;
}

/* CTA Inscription/Connexion — bouton plein */
.nav-link-cta {
	background-color: #0079B7;
	color: #fff !important;
	margin-left: .25rem;
}
.nav-link-cta:hover,
.nav-link-cta:focus {
	background-color: #005d8f !important;
	color: #fff !important;
}

/* Mobile : boutons pleine largeur sans pill */
@media (max-width: 575.98px) {
	.nav-link-account,
	.nav-link-cta {
		margin-left: 0;
		border-radius: 6px;
	}
}