/*
 * Composition
 */

.logos {
  display: flex;
  gap: 1em;
  flex-wrap: wrap;
}

.logos img {
  height: 75px;
}

:root {
  font-family: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
  font-weight: normal;

  --bg-primary: white;
  --bg-secondary: #ffd699;
}

h1 {

}

main.wrapper {
  padding-block: 0;
}

a {
  text-decoration: none;
  color: var(--primary-color);

  &:hover {
    text-decoration: underline;
  }
}

/*
 * Utilities
 */

.wrapper {
  margin-inline: auto;
  padding-inline: 1rem;
  max-width: 50rem;
}

.full-bleed {
	width: 100vw;
	margin-left: calc(50% - 50vw);
}

.flow > * + * {
  margin-top: var(--flow-space, 1rem);
}

.active, nav a:hover {
  /*
  background-image: url("/static/haches.png");
  background-size: 50px;
  background-position: center;
  */
  text-decoration: underline;
}

.pw-2 {
  padding-left: calc(2*var(--pico-spacing));
  padding-right: calc(2*var(--pico-spacing));
}

.pf {
  padding: var(--pico-spacing);
}

.sticky {
  position: sticky;
	top: 0px;
	z-index: 500;
}

.bg-primary {
  background-color: var(--bg-primary);
}

.bg-secondary {
  background-color: var(--bg-secondary);
}

.background-red {
  background-color: red;
}

.center {
  margin-left: auto;
  margin-right: auto;
}

.button {
	padding: var(--pico-spacing);
	border-radius: 10px;
	background-color: white;
	color: black;
	transition: 500ms;
	&:hover {
		text-decoration: underline;
		background-color: var(--bg-secondary);
		color: white;
	}
}

.dropdown {
  position: relative;
  display: inline-block;

  &:hover .dropdown__content {
    display: block;
  }

  .dropdown__content {
    display: none;
    position: absolute;
    min-width: max-content;
    z-index: 10;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;

    a {
      display: block;
    }
  }
}

.mw-10 {
  max-width: 15ch;
}

.mw-25{
  max-width: 25px;
}

.pl {
  padding-left: var(--pico-block-spacing-horizontal);
}

/*
 * Blocks
 */

.info {
	display: none;
	font-size: 0.775em;
	margin-top: var(--pico-spacing);

  @media only screen and (min-width: 768px) {
    display: flex;

    .info__block {
  		display: flex;
  		flex: 1;
  		align-items: center;
    }
  }
}


.tiny {
  max-height: 50px;
}
.logomenu__menu {
  display: flex;
  justify-content: space-between;
  height: 100%;
	padding-top: var(--pico-spacing);
	padding-bottom: var(--pico-spacing);

	.menu__links {
		display: flex;
		gap: var(--pico-block-spacing-horizontal);
		align-items: center;
	}
}

.hero {
	position: relative;

	.hero__img {
		img {
  		max-height: 500px;
  		width: 100%;
		}
	}

	.hero__grid{
  	position: absolute;
  	top: 0;
  	left: 0;
  	width: 100%;
  	height: 100%;

  	display: grid;
  	align-items: center;

  	.grid__text {
    	text-align: center;
    	img {
      	width: 50%;
    	}
    	p {
      	color: white;
      	font-size: 1.5rem;
    	}
  	}
	}
}

.filiaire {
	.filiaire__block {
  	text-align: center;
  	img {
  		height: 50px;
  	}
  	p {
    	line-height: 1.1rem;
  	}
	}

  &[data-state='rounded'] img {
		height: 80px;
		border-radius: 100%;
		padding: var(--pico-spacing);
		background-color: white;
  }

  @media only screen and (min-width: 768px) {
  	& .filiaire__block:hover {
    	img {
      	transform: scale(1.5);
      	transition: 500ms;
    	}
  	}
  }
}

.gallery {
	display: flex;
	height: 50vmin;
	align-items: center;
	justify-content: center;
	gap: var(--pico-spacing);

	img {
    --brightness: 0.75;
    --grayscale: 1;
    --transition: 500ms;
    transition: flex var(--transition), filter var(--transition);
    height: 100%;
    filter: grayscale(var(--grayscale)) brightness(var(--brightness));
    object-fit: cover;
    overflow: hidden;
    flex: 1;

    &:hover {
			--brightness: 1.15;
      --grayscale: 0;
      flex: 4;
    }
	}
}

.stock {
  font-size: 0.675em;
	.stock__head {
		position: sticky;
		top: calc(50px + 2*var(--pico-spacing));
	}
}

.title {
  position: relative;

	.title__img {
  	height: 20vh;
  	width: 100%;
  	background-size: cover;
  	background-position: center;
	}

	.title__text {
  	position: absolute;
  	top: 0;
  	left: 0;
  	width: 100%;
  	height: 100%;

		display: grid;
		justify-content: center;
		align-items: center;

		color: white;
		font-size: 2.5rem;
	}
}

/*
* Exceptions
*/