/*
 * Point d'entrée permanent vers le parcours de réservation, dans l'en-tête.
 *
 * Le bouton reprend le dessin de celui que le menu porte sur ordinateur, relevé
 * dans les feuilles réellement servies : fond et bordure jaunes #e5c80c, texte
 * blanc, bordure de 2 pixels, rayon de 2 pixels, remplissage de 11 px en haut et
 * 10 px ailleurs, corps de 13 px en open sans, et un léger voile au survol. Les
 * deux points d'entrée du site ont ainsi le même dessin, à la même place dans
 * l'oeil, que l'écran soit large ou replié.
 *
 * L'écriture part du plus étroit : le libellé compact est l'état de base, le
 * libellé long n'apparaît qu'à partir de la tablette.
 */

/* ------------------------------------------------------------------ */
/* Rangée du logo, tant que le thème sert son menu replié.            */
/* ------------------------------------------------------------------ */

.montastruc-entete-reservation {
	display: none;
}

/*
 * Le thème déclare « display: block » sur toute image de logo depuis un
 * sélecteur qui comprend une balise : l'identifiant du corps de page est le
 * moyen de passer devant sans déclaration impérative.
 */
#top .logo .montastruc-entete-logo-compact {
	display: none;
}

.montastruc-entete-reservation__libelle--large {
	display: none;
}

.montastruc-entete-reservation__libelle--compact {
	display: inline;
}

@media screen and (max-width: 989px) {

	/*
	 * La rangée du logo devient une vraie ligne. Le thème y pose le logo en
	 * cellule de tableau et le menu en position absolue, ce qui ne laisse aucune
	 * place à un troisième élément : les deux sont ramenés dans le flux.
	 *
	 * L'ordre est imposé explicitement et non laissé à l'ordre du document : le
	 * script du thème déplace le menu replié dans cette rangée, et il ne le pose
	 * pas au même rang selon la largeur. Le logo ouvre la ligne, le bouton de menu
	 * la ferme, et le bouton de réservation se tient entre les deux.
	 */
	#top.montastruc-entete-compacte #header_main .inner-container {
		display: flex;
		align-items: center;
		gap: 12px;
	}

	/*
	 * Le thème donne au bloc du logo une hauteur fixe, celle de la barre, et
	 * centre l'image dedans en traitant le lien comme une cellule de tableau.
	 * Ramener le logo dans le flux annule ce mécanisme, et l'image se cale alors
	 * en haut de la barre pendant que le bouton et le bouton de menu restent au
	 * milieu. Le centrage est donc redonné explicitement, au bloc comme au lien,
	 * plutôt que laissé à un mécanisme de tableau que le thème n'applique pas de
	 * la même façon à toutes les largeurs.
	 */
	#top.montastruc-entete-compacte #header_main .inner-container .logo {
		position: static;
		display: flex;
		align-items: center;
		left: auto;
		width: auto;
		order: 1;
		flex: 0 0 auto;
	}

	#top.montastruc-entete-compacte #header_main .inner-container .logo > a {
		display: flex;
		align-items: center;
		width: auto;
		height: auto;
	}

	#top.montastruc-entete-compacte #header_main .inner-container .main_menu {
		position: static;
		order: 3;
		flex: 0 0 auto;
		margin-left: 0;
	}

	/*
	 * Le logo du thème porte le nom du château écrit à côté du dessin : il tient
	 * toute la rangée et ne laisse la place à rien. La version courte n'en garde
	 * que la silhouette.
	 */
	#top.montastruc-entete-compacte .logo .montastruc-entete-logo-standard {
		display: none;
	}

	/*
	 * La hauteur est donnée par la largeur et non directement : le thème impose
	 * « height: auto » de façon impérative sur toute image de logo, et son script
	 * écrit une hauteur maximale dans la balise. Fixer la largeur contourne les
	 * deux sans qu'une déclaration impérative soit ajoutée ici. 96 px de large
	 * donnent 44 px de haut, le rapport de l'image étant de 485 sur 221.
	 */
	#top.montastruc-entete-compacte .logo .montastruc-entete-logo-compact {
		display: block;
		width: 96px;
		max-width: 100%;
	}

	#top.montastruc-entete-compacte .montastruc-entete-reservation {
		display: block;
		order: 2;
		flex: 0 1 auto;
		min-width: 0;
		margin-left: auto;
	}

	/*
	 * La chaîne de deux classes n'est pas décorative : le thème peint tous les
	 * liens dans sa couleur primaire par une règle à deux classes, et une règle à
	 * une seule classe perdrait la couleur du libellé.
	 */
	.montastruc-entete-reservation .montastruc-entete-reservation__lien {
		box-sizing: border-box;
		display: inline-block;
		max-width: 100%;
		padding: 11px 10px 10px;
		border: 2px solid #e5c80c;
		border-radius: 2px;
		background-color: #e5c80c;
		color: #ffffff;
		font-family: 'open sans', Helvetica, Arial, sans-serif;
		font-size: 13px;
		font-weight: 400;
		line-height: 1.2;
		text-align: center;
		text-decoration: none;
		/*
		 * Le bouton du menu sur ordinateur est en capitales parce que l'entrée de
		 * menu est écrite ainsi, et tous les boutons du site le sont aussi. La
		 * casse est donc posée par la feuille, ce qui laisse le libellé intact
		 * pour les lecteurs d'écran et pour les moteurs.
		 */
		text-transform: uppercase;
		white-space: nowrap;
		transition: opacity 0.4s ease-in-out;
	}

	#top.montastruc-entete-compacte .montastruc-entete-reservation .montastruc-entete-reservation__lien:hover,
	#top.montastruc-entete-compacte .montastruc-entete-reservation .montastruc-entete-reservation__lien:focus {
		color: #ffffff;
		opacity: 0.9;
		text-decoration: none;
	}
}

/*
 * Sous 480 pixels, le libellé long du menu déplié et le bouton ne tiennent plus
 * côte à côte avec la silhouette : celle-ci se réduit, le bouton garde sa taille
 * de doigt.
 */
@media screen and (max-width: 479px) {

	#top.montastruc-entete-compacte .logo .montastruc-entete-logo-compact {
		width: 78px;
	}

	#top.montastruc-entete-compacte #header_main .inner-container {
		gap: 8px;
	}
}

/*
 * La bascule du libellé se fait à la même largeur que celle du composant d'appel
 * à l'action, et non à celle du menu replié : deux points d'entrée visibles en
 * même temps sur la même page ne doivent pas s'appeler différemment.
 */
@media screen and (min-width: 768px) {

	.montastruc-entete-reservation__libelle--large {
		display: inline;
	}

	.montastruc-entete-reservation__libelle--compact {
		display: none;
	}
}