/**
 * Styles du theme Eziom Vitrine.
 *
 * Toutes les couleurs passent par les tokens : aucune valeur de marque en dur,
 * pour qu'un changement de couleur dans la page Options suffise a rehabiller
 * le site.
 */

/* Integration GeneratePress ------------------------------------------------
 *
 * Nos gabarits gerent eux-memes leurs fonds pleine largeur et leur largeur de
 * lecture. On neutralise donc le conteneur et la gouttiere de GeneratePress,
 * qui sinon enferment les sections dans une colonne etroite.
 * Filet de securite du filtre generate_content_layout, au cas ou une version
 * de GeneratePress ne l'exposerait pas.
 * ------------------------------------------------------------------------- */

.eziom-gabarit .site-content {
	display: block;
	padding: 0;
}

.eziom-gabarit .content-area,
.eziom-gabarit #primary {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	float: none;
}

.eziom-gabarit .site-content > .container,
.eziom-gabarit .inside-article {
	max-width: none;
	padding: 0;
	margin: 0;
	border: 0;
	box-shadow: none;
	background: transparent;
}

.eziom-gabarit .widget-area,
.eziom-gabarit .sidebar {
	display: none;
}

/* La barre de coordonnees et le pre-pied de page sont hors gabarit : ils
   s'affichent sur toutes les pages, y compris celles qui gardent GeneratePress
   tel quel. */
.eziom-barre,
.eziom-prefooter {
	width: 100%;
}

/* Ossature ---------------------------------------------------------------- */

.eziom-section {
	padding-block: var( --eziom-espace-l );
}

.eziom-section--alt {
	background: var( --eziom-surface );
}

.eziom-section--accent {
	background: var( --eziom-primaire );
	color: var( --eziom-primaire-contraste );
}

.eziom-section--accent a {
	color: inherit;
}

.eziom-contenu {
	width: min( 100% - 2.5rem, var( --eziom-largeur ) );
	margin-inline: auto;
}

.eziom-mesure {
	max-width: var( --eziom-largeur-texte );
}

.eziom-titre-section {
	font-size: var( --eziom-titre-l );
	margin-bottom: var( --eziom-espace-s );
}

.eziom-surtitre {
	display: block;
	margin-bottom: var( --eziom-espace-xs );
	font-size: 0.85rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --eziom-texte-doux );
}

.eziom-section--accent .eziom-surtitre {
	color: inherit;
	opacity: 0.85;
}

/* Boutons ----------------------------------------------------------------- */

.eziom-bouton,
.eziom-bouton--primaire {
	display: inline-block;
	padding: 0.85rem 1.75rem;
	border: 2px solid var( --eziom-primaire );
	border-radius: var( --eziom-rayon );
	background: var( --eziom-primaire );
	color: var( --eziom-primaire-contraste );
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
}

.eziom-bouton:hover,
.eziom-bouton:focus {
	background: var( --eziom-primaire-sombre );
	border-color: var( --eziom-primaire-sombre );
	color: var( --eziom-primaire-contraste );
}

.eziom-bouton--secondaire {
	background: transparent;
	color: var( --eziom-primaire );
}

.eziom-bouton--secondaire:hover,
.eziom-bouton--secondaire:focus {
	background: var( --eziom-primaire );
	color: var( --eziom-primaire-contraste );
}

.eziom-section--accent .eziom-bouton {
	background: var( --eziom-primaire-contraste );
	border-color: var( --eziom-primaire-contraste );
	color: var( --eziom-primaire );
}

.eziom-section--accent .eziom-bouton:hover,
.eziom-section--accent .eziom-bouton:focus {
	opacity: 0.9;
	color: var( --eziom-primaire );
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 3px solid var( --eziom-secondaire );
	outline-offset: 2px;
}

/* Sur les fonds de marque, la couleur secondaire peut etre trop proche du fond
   pour que le contour de focus se voie : on bascule sur la couleur de
   contraste, qui est par construction lisible sur ce fond. */
.eziom-barre a:focus-visible,
.eziom-section--accent a:focus-visible,
.eziom-section--accent button:focus-visible,
.eziom-prefooter a:focus-visible,
.eziom-prefooter button:focus-visible {
	outline-color: var( --eziom-primaire-contraste );
}

/* Barre de coordonnees ---------------------------------------------------- */

.eziom-barre {
	background: var( --eziom-primaire );
	color: var( --eziom-primaire-contraste );
	font-size: 0.9rem;
}

.eziom-barre__contenu {
	width: min( 100% - 2.5rem, var( --eziom-largeur ) );
	margin-inline: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var( --eziom-espace-xs ) var( --eziom-espace-s );
	padding-block: 0.5rem;
}

.eziom-barre__infos {
	display: flex;
	flex-wrap: wrap;
	gap: var( --eziom-espace-s );
	margin: 0;
	padding: 0;
	list-style: none;
}

.eziom-barre a {
	color: inherit;
	text-decoration: none;
}

.eziom-barre a:hover,
.eziom-barre a:focus {
	text-decoration: underline;
}

.eziom-langues ul {
	display: flex;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.eziom-langues a {
	padding: 0.15rem 0.5rem;
	border: 1px solid currentColor;
	border-radius: var( --eziom-rayon );
	font-size: 0.8rem;
	line-height: 1.6;
	opacity: 0.75;
}

.eziom-langues a.is-active {
	opacity: 1;
	font-weight: 700;
}

/* Logo -------------------------------------------------------------------- */

.eziom-logo__image {
	max-height: 72px;
	width: auto;
}

.eziom-logo__texte {
	font-size: var( --eziom-titre-m );
	font-weight: 700;
}

/* Hero -------------------------------------------------------------------- */

.eziom-hero {
	padding-block: var( --eziom-espace-xl );
	background: var( --eziom-primaire-clair );
}

.eziom-hero__grille {
	display: grid;
	gap: var( --eziom-espace-l );
	align-items: center;
}

/* Deux colonnes seulement lorsqu'une image d'ambiance est definie. */
@media ( min-width: 900px ) {
	.eziom-hero--illustre .eziom-hero__grille {
		grid-template-columns: 1fr 1fr;
	}
}

.eziom-hero__titre {
	font-size: var( --eziom-titre-xl );
	margin-bottom: var( --eziom-espace-s );
	max-width: 20ch;
}

.eziom-hero__intro {
	max-width: var( --eziom-largeur-texte );
	font-size: 1.1rem;
	color: var( --eziom-texte-doux );
}

.eziom-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var( --eziom-espace-s );
	margin-top: var( --eziom-espace-m );
}

.eziom-hero__photo {
	display: block;
	width: 100%;
	height: auto;
	max-height: 30rem;
	object-fit: cover;
	border-radius: var( --eziom-rayon-l );
	box-shadow: var( --eziom-ombre );
}

/* Galerie ----------------------------------------------------------------- */

/* Les photos de salon sont souvent verticales : la mise en colonnes respecte
   leurs proportions au lieu de les recadrer de force. */
.eziom-galerie-front__liste {
	margin: 0;
	padding: 0;
	list-style: none;
	columns: 3 16rem;
	column-gap: var( --eziom-espace-s );
}

.eziom-galerie-front__item {
	break-inside: avoid;
	margin-bottom: var( --eziom-espace-s );
}

.eziom-galerie-front__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var( --eziom-rayon-l );
}

/* L'apercu d'accueil, lui, aligne trois vignettes de meme hauteur : c'est un
   rappel visuel, pas la galerie complete. */
.eziom-galerie-front--compacte .eziom-galerie-front__liste {
	display: grid;
	columns: auto;
	gap: var( --eziom-espace-s );
	grid-template-columns: repeat( auto-fit, minmax( 14rem, 1fr ) );
}

.eziom-galerie-front--compacte .eziom-galerie-front__item {
	margin: 0;
}

.eziom-galerie-front--compacte .eziom-galerie-front__image {
	height: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

/* Grilles ----------------------------------------------------------------- */

.eziom-grille {
	display: grid;
	gap: var( --eziom-espace-m );
	grid-template-columns: repeat( auto-fit, minmax( 16rem, 1fr ) );
}

.eziom-carte {
	padding: var( --eziom-espace-m );
	background: var( --eziom-surface-alt );
	border: 1px solid var( --eziom-bordure );
	border-radius: var( --eziom-rayon-l );
	box-shadow: var( --eziom-ombre );
}

.eziom-carte__titre {
	font-size: var( --eziom-titre-m );
	margin-bottom: var( --eziom-espace-xs );
	color: var( --eziom-primaire );
}

/* Coordonnees et horaires ------------------------------------------------- */

.eziom-coordonnees {
	display: grid;
	gap: var( --eziom-espace-m );
	grid-template-columns: repeat( auto-fit, minmax( 15rem, 1fr ) );
}

.eziom-coordonnees address {
	font-style: normal;
	line-height: 1.7;
}

.eziom-horaires {
	width: 100%;
	border-collapse: collapse;
}

.eziom-horaires th,
.eziom-horaires td {
	padding: 0.35rem 0;
	text-align: left;
	font-weight: 400;
}

.eziom-horaires td {
	text-align: right;
}

.eziom-horaires tr.is-aujourdhui th,
.eziom-horaires tr.is-aujourdhui td {
	font-weight: 700;
}

.eziom-horaires__ferme {
	color: var( --eziom-texte-doux );
}

/* Tarifs ------------------------------------------------------------------ */

.eziom-tarifs__table thead th {
	color: var( --eziom-texte-doux );
}

.eziom-tarifs__table th[scope="row"] {
	font-weight: 600;
}

.eziom-tarifs__prestation {
	display: block;
	font-size: 1.05rem;
}

.eziom-tarifs__formules {
	display: flex;
	flex-wrap: wrap;
	gap: var( --eziom-espace-xs ) var( --eziom-espace-m );
	margin: 0;
	padding: 0;
	list-style: none;
	justify-content: flex-end;
}

.eziom-tarifs__formule {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	white-space: nowrap;
}

.eziom-tarifs__duree {
	color: var( --eziom-texte-doux );
	font-size: 0.9rem;
}

.eziom-tarifs__prix {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.eziom-tarifs__lien {
	display: inline-block;
	margin-top: var( --eziom-espace-s );
}

@media ( max-width: 600px ) {
	.eziom-tarifs__formules {
		justify-content: flex-start;
	}
}

/* Pied de page ------------------------------------------------------------ */

.eziom-prefooter {
	padding-block: var( --eziom-espace-l );
	background: var( --eziom-primaire );
	color: var( --eziom-primaire-contraste );
}

.eziom-prefooter a {
	color: inherit;
}

.eziom-prefooter__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var( --eziom-espace-m );
	margin-bottom: var( --eziom-espace-m );
	padding-bottom: var( --eziom-espace-m );
	border-bottom: 1px solid rgba( 255, 255, 255, 0.25 );
}

.eziom-prefooter__titre {
	font-size: var( --eziom-titre-l );
	margin: 0;
	flex: 1 1 22rem;
	/* Sans balance, le point d'interrogation se retrouve seul sur sa ligne. */
	text-wrap: balance;
}

/* Le pre-pied de page est sur fond primaire : le bouton doit s'inverser,
   sinon il disparait (vert sur vert). */
.eziom-prefooter .eziom-bouton {
	background: var( --eziom-primaire-contraste );
	border-color: var( --eziom-primaire-contraste );
	color: var( --eziom-primaire );
}

.eziom-prefooter .eziom-bouton:hover,
.eziom-prefooter .eziom-bouton:focus {
	background: var( --eziom-primaire-clair );
	border-color: var( --eziom-primaire-clair );
	color: var( --eziom-primaire );
}

.eziom-reseaux {
	display: flex;
	flex-wrap: wrap;
	gap: var( --eziom-espace-s );
	margin: var( --eziom-espace-s ) 0 0;
	padding: 0;
	list-style: none;
}

/* Liens legaux : discrets, en bas du pied de page, jamais dans la navigation. */
.eziom-legal-bar {
	margin-top: var( --eziom-espace-m );
	padding-top: var( --eziom-espace-s );
	border-top: 1px solid rgba( 255, 255, 255, 0.25 );
	font-size: 0.875rem;
}

.eziom-legal-bar__liste {
	display: flex;
	flex-wrap: wrap;
	gap: var( --eziom-espace-xs ) var( --eziom-espace-m );
	margin: 0;
	padding: 0;
	list-style: none;
}

.eziom-legal-bar a {
	color: inherit;
	opacity: 0.85;
	text-decoration: underline;
}

.eziom-legal-bar a:hover,
.eziom-legal-bar a:focus {
	opacity: 1;
}

/* Pages editoriales ------------------------------------------------------- */

.eziom-legal h2 {
	margin-top: var( --eziom-espace-m );
	font-size: var( --eziom-titre-m );
}

.eziom-legal dl {
	margin-bottom: var( --eziom-espace-m );
}

.eziom-legal dt {
	font-weight: 600;
}

.eziom-legal dd {
	margin: 0 0 var( --eziom-espace-xs );
}

.eziom-sommaire ul {
	margin: 0 0 var( --eziom-espace-m ) 1.25rem;
}

/* Utilitaires ------------------------------------------------------------- */

.eziom-liste-nue {
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: 1.9;
}

.eziom-vide {
	padding: var( --eziom-espace-s );
	background: var( --eziom-surface );
	border-left: 4px solid var( --eziom-bordure );
}

.eziom-acces,
.eziom-horaires__note {
	font-size: 0.9rem;
	color: var( --eziom-texte-doux );
}

.eziom-section--accent .eziom-acces,
.eziom-prefooter .eziom-acces,
.eziom-prefooter .eziom-horaires__note {
	color: inherit;
	opacity: 0.85;
}

.eziom-prefooter .eziom-horaires__ferme {
	color: inherit;
	opacity: 0.7;
}

.eziom-presentation + .eziom-presentation {
	margin-top: var( --eziom-espace-m );
}

.eziom-lien-saut {
	position: absolute;
	left: -9999px;
}

.eziom-lien-saut:focus {
	left: 1rem;
	top: 1rem;
	z-index: 100;
	padding: 0.75rem 1rem;
	background: var( --eziom-surface-alt );
}

img {
	max-width: 100%;
	height: auto;
}