/** Varialbes used for mixins */
/*** Media Queries : http://breakpoint-sass.com/ ***/
/** breakpojtns values : http://breakpoint-sass.com/ ***/
.layout--component--card {
  --readmore-size: 3rem;
  --media-radius: var(--teaser-radius);
  --headings-text-transform: none;
  --heading-link-decoration: none;
  --teaser-padding-inline: var(--spacing-auto-sm);
  --teaser-padding-block: var(--spacing-auto-sm);
  position: relative;
  margin-bottom: calc(3rem / 2);
  margin-bottom: calc(var(--readmore-size) / 2);
  background-color: var(--clr-white);
  border: var(--teaser-border);
  border-radius: var(--teaser-radius);
  padding-left: var(--spacing-auto-sm);
  padding-right: var(--spacing-auto-sm);
  padding-left: var(--teaser-padding-inline);
  padding-right: var(--teaser-padding-inline);
  padding-top: var(--spacing-auto-sm);
  padding-bottom: var(--spacing-auto-sm);
  padding-top: var(--teaser-padding-block);
  padding-bottom: var(--teaser-padding-block);
  box-shadow: var(--teaser-shadow);
  display: grid;
  grid-gap: var(--teaser-gap);
  gap: var(--teaser-gap);
}
.layout--component--card .card--image {
  display: grid;
  align-content: start;
  justify-content: start;
  place-content: start;
}
.layout--component--card .card-title {
  font-size: var(--font-size-base);
}
.layout--component--card .readmore-extrafield-link {
  --link-color: #fff;
  --link-color--hover: #fff;
  background-color: var(--clr-gray-200);
  transition: background-color 350ms ease;
  display: grid;
  align-content: center;
  justify-content: center;
  place-content: center;
  width: var(--readmore-size);
  height: var(--readmore-size);
  border-radius: calc(var(--readmore-size) / 2);
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translate(0%, 33%);
}
@media (min-width: 768px) {
  .layout--component--card .readmore-extrafield-link {
    transform: translate(50%, 50%);
  }
}
.layout--component--card .readmore-extrafield-link:hover {
  background-color: var(--clr-gray-300);
}

.layout-terrae-hero {
  --thro--top-space: calc( 3 * var(--font-size-xxl));
  --thro--grid-tpl-col: 1fr;
  --thro--grid-gap: var( --spacing-auto ) var( --spacing-auto-lg ) ;
  --thro--col-2pos: initial;
  --thro--justify: end;
  position: relative;
  isolation: isolate;
  padding-top: calc( 3 * var(--font-size-xxl));
  padding-top: var(--thro--top-space);
}
@media (min-width: 768px) {
  .layout-terrae-hero {
    --thro--grid-tpl-col: repeat( 2, minmax(280px,500px));
  }
}
@media (min-width: 1024px) {
  .layout-terrae-hero {
    --thro--col-2pos: reset;
  }
}
.layout-terrae-hero::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  aspect-ratio: 119010/8744;
  background-image: url(../../images/svg/wave-top-narrow.svg);
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.layout-terrae-hero .layout-wrapper {
  --layout-container-max-width: var( --size-xxl );
  z-index: 1;
  display: grid;
  justify-content: var(--thro--justify);
  grid-template-columns: var(--thro--grid-tpl-col);
  grid-gap: var(--thro--grid-gap);
}
.layout-terrae-hero .layout-wrapper .icon {
  position: absolute;
  top: 10px;
  left: 10px;
}
.layout-terrae-hero .layout-wrapper .col2 {
  order: var(--thro--col-2pos);
}
.layout-terrae-hero .layout-wrapper .field__label {
  font-weight: 700;
  color: var(--color-primary);
}
@media (min-width: 768px) {
  .layout-terrae-hero.layout-terrae-hero--base {
    --thro--grid-tpl-col: 1fr;
  }
}

:root {
  --layout-hero--content-width: minmax(300px,var(--max-site-width));
  --layout-here-before-h: max(50px, min(12vw, 200px));
}

.layout--component--hero:not(.layout-builder__layout) {
  --icon-color: var(--color-on-dark);
  isolation: isolate;
  position: relative;
  display: grid;
  overflow: hidden;
  grid-auto-columns: 1fr;
  grid-template-columns: auto calc(minmax(300px,var(--max-site-width)) * 0.333) calc(minmax(300px,var(--max-site-width)) * 0.667) auto;
  grid-template-columns: auto calc(var(--layout-hero--content-width) * 0.333) calc(var(--layout-hero--content-width) * 0.667) auto;
  grid-template-rows: calc(max(50px, min(12vw, 200px)) / 2) 1fr;
  grid-template-rows: calc(var(--layout-here-before-h) / 2) 1fr;
  grid-gap: 0px 0px;
  gap: 0px 0px;
  height: auto;
  min-height: max(50px, min(12vw, 200px));
  min-height: var(--layout-here-before-h);
}
.layout--component--hero:not(.layout-builder__layout) .hero--content {
  grid-area: 2/1/3/4;
  text-align: center;
}
.layout--component--hero:not(.layout-builder__layout)::before {
  content: "";
  display: block;
  position: absolute;
  top: -6%;
  left: 0;
  z-index: 1;
  width: 100%;
  height: max(50px, min(12vw, 200px));
  height: var(--layout-here-before-h);
  background-image: url(../../images/svg/wave-top.svg);
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.layout--component--hero:not(.layout-builder__layout).hasImage {
  --layout-here-before-h: max(120px, min(26vw, 300px));
  height: max(300px, min(56vw, 720px));
  grid-template-columns: auto minmax(300px,var(--max-site-width)) auto;
  grid-template-columns: auto var(--layout-hero--content-width) auto;
  grid-template-rows: max(50px, min(11vw, 260px)) 1fr 75px;
  gap: 0px 0px;
}
.layout--component--hero:not(.layout-builder__layout).hasImage::after {
  display: block;
  z-index: 2;
  content: "";
  width: 100vw;
  height: calc(0.6 * var(--divider-simple-h));
  background-color: #fff;
  position: absolute;
  bottom: -1px;
  left: 0;
  clip-path: url("#simple-wave-top");
}
.layout--component--hero.hasImage:not(.layout-builder__layout) .hero--image img, .layout--component--hero.hasImage:not(.layout-builder__layout) .hero--image picture {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 0;
}
.layout--component--hero:not(.layout-builder__layout).hasImage .hero--image {
  z-index: 0;
  grid-area: 1/1/4/4;
  height: calc(100% - 1px);
}
.layout--component--hero:not(.layout-builder__layout).hasImage .hero--image article, .layout--component--hero:not(.layout-builder__layout).hasImage .hero--image div {
  display: contents;
}
.layout--component--hero:not(.layout-builder__layout).hasImage .hero--icon {
  z-index: 1;
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: calc(2 * var(--font-size-xxl));
}
.layout--component--hero:not(.layout-builder__layout).hasImage .hero--content {
  grid-area: 2/2/3/3;
  z-index: 2;
  --headings-color: #fff;
  --font-size-h1: var(--font-size-xxxl);
  color: #fff;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  display: grid;
  grid-template-rows: 1fr -webkit-max-content;
  grid-template-rows: 1fr max-content;
  grid-gap: 1rem;
  gap: 1rem;
}
.layout--component--hero:not(.layout-builder__layout).hasImage .hero--content h1, .layout--component--hero:not(.layout-builder__layout).hasImage .hero--content .h1, .layout--component--hero:not(.layout-builder__layout).hasImage .hero--content h2, .layout--component--hero:not(.layout-builder__layout).hasImage .hero--content .h2, .layout--component--hero:not(.layout-builder__layout).hasImage .hero--content h3, .layout--component--hero:not(.layout-builder__layout).hasImage .hero--content .h3, .layout--component--hero:not(.layout-builder__layout).hasImage .hero--content h4, .layout--component--hero:not(.layout-builder__layout).hasImage .hero--content .h4, .layout--component--hero:not(.layout-builder__layout).hasImage .hero--content h5, .layout--component--hero:not(.layout-builder__layout).hasImage .hero--content .h5, .layout--component--hero:not(.layout-builder__layout).hasImage .hero--content h6, .layout--component--hero:not(.layout-builder__layout).hasImage .hero--content .h6, .layout--component--hero:not(.layout-builder__layout).hasImage .hero--content .block-title, .layout--component--hero:not(.layout-builder__layout).hasImage .hero--content .paragraph-title {
  margin: 1rem 0;
}
.layout--component--hero:not(.layout-builder__layout).hasImage .hero--content .hero--body {
  text-align: center;
  display: grid;
  align-content: center;
  justify-content: center;
  place-content: center;
  padding: 0 1rem;
}
.layout--component--hero:not(.layout-builder__layout).hasImage .hero--content .field--name-field-pratiques,
.layout--component--hero:not(.layout-builder__layout).hasImage .hero--content .field--name-field-pratique {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1rem;
  filter: drop-shadow(2px 4px 4px black);
}
/*# sourceMappingURL=layouts.css.map */