::selection {
  color: #000;
  background-color: #FF999A
}

::-moz-selection {
  color: #000;
  background-color: #FF999A
}


html, body {
  font-optical-sizing: auto;
  font-family: "Inter", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html.lenis, html.lenis body { height: 100% !important; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden;}
.lenis.lenis-scrolling iframe { pointer-events: none; }



.h2, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 { font-family: "Work Sans", sans-serif; font-weight: 700 !important; }
.container, .container-fluid, .container-xxl, .container-xl, .container-lg, .container-md, .container-sm { transition: all 0.66s; }

.region-sidebar-first, .region-sidebar-second, .region-footer, .region-content { padding: 0; }

h1 .field--name-title { max-width: 330px; line-height: 0.9; display: inline-block; font-weight: 900; }


@media screen and (min-width: 1024px) {
  h1 { text-align: right; font-size: 32px; position: absolute; right: 0; top: 12px; }
}


img, iframe { border-radius: 8px; }

.field__label {
  font-size: 12px;
  line-height: 24px;
  background: #FFF;
  display: inline-block;
  margin-right: 12px;
  border-radius: 12px;
  padding: 0px 12px !important;
}


.btn-primary { --bs-btn-color: #000; --bs-btn-bg: #ff999a; --bs-btn-border-color: #ff999a; --bs-btn-hover-color: #000; --bs-btn-hover-bg: #ff999a; --bs-btn-hover-border-color: #ff999a; --bs-btn-focus-shadow-rgb: 49, 132, 253; --bs-btn-active-color: #000; --bs-btn-active-bg: #ff999a; --bs-btn-active-border-color: #ff999a; --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: #000; --bs-btn-disabled-bg: #ff999a; --bs-btn-disabled-border-color: #ff999a; font-weight: 900; border-radius: 24px; }



/*
* Header
*/

header .region-nav-branding { margin: 0; padding: 24px; }
header .navbar { padding: 24px 0; }
header .navbar-brand a.site-title { font-family: "Work Sans", sans-serif; font-weight: 700; letter-spacing: 0; font-size: 16px; }
header .nav-item { }
header .nav-item .nav-link { transition: all 0.3s; color: #333; font-size: max(1.5vw, 32px); font-weight: 900; line-height: 1; padding: 0; }
header .nav-item .nav-link:hover { font-weight: 700; color: #000; }
header .nav-item .nav-link.active { font-weight: 900; font-size: max(3.5vw, 52px); color: #000; line-height: 1; }
header .navbar-brand img { height: auto; width: calc(100vw - 48px); margin: 0; border-radius: 0 !important; }
header #block-otentiik-main-navigation, header #block-otentiik-selecteurdelangue { display: inline-block; }

@media screen and (max-width: 768px) {
  header .nav-item .nav-link.active { font-size: 40px; }
}



#block-otentiik-selecteurdelangue {}
#block-otentiik-selecteurdelangue ul { margin: 8px 0 0 0; border-top: solid 3px #111; padding-top: 8px; }
#block-otentiik-selecteurdelangue ul li:first-child { margin-right: 6px;  }
#block-otentiik-selecteurdelangue ul li { display: inline-block; }


#block-otentiik-content {  }



#block-otentiik-blockderoulantsouslelogo {
  overflow: hidden;
  position: relative;
  transition: all 0.3s;
}

#block-otentiik-blockderoulantsouslelogo .container-deroulant {
  display: flex;
  position: relative;
  padding: 8px 0;
  border-top: solid 2px #000;
  border-bottom: solid 2px #000;
  margin: 0 24px;
}

#block-otentiik-blockderoulantsouslelogo .container-deroulant .field--name-field-titre-deroulant {
  display: flex;
  animation: marquee linear infinite; /* Défilement continu */
}

#block-otentiik-blockderoulantsouslelogo .container-deroulant .field--name-field-titre-deroulant .field__items {
  display: flex;
  white-space: nowrap;
}

#block-otentiik-blockderoulantsouslelogo .container-deroulant .field--name-field-titre-deroulant .field__items .field__item {
  display: inline-block;
  margin: 0 8px; /* Espacement entre les éléments */
  font-weight: 700;
}

/* Animation continue */
@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}




.splide__arrow { opacity: 1; background: #FFF; height: 68px; width: 68px; transition: all 0.3s; }
.splide__arrow:hover { opacity: 1 !important; height: 72px; width: 72px; margin-left: -2px; }






/* nav */

.ot-nav { position: fixed; z-index: 1001; bottom: 24px; left: 50%; transform: translateX(-50%); margin: auto; background-color: #000; color: #fff; border-radius: 24px; padding: 2px; border: solid 3px #333; cursor: pointer; transition: all 0.6s; -webkit-transition: all 0.6s; box-shadow: 0 12px 64px #444; }
.ot-nav p { margin: 0; display: inline-block; margin: 6px 80px 6px 12px; font-size: 13px; font-weight: 700; line-height: 20px; }

.ot-nav .rond { display: inline-block; position: absolute; width: 30px; height: 30px; border-radius: 24px; background-color: #FF999A; right: 3px; top: 3px; }
.ot-nav .rond span { width: 14px; height: 1px; background-color: #000; display: block; position: absolute; left: 50%; transform: translateX(-50%); transition: all 0.33s; }

.ot-nav .rond span:nth-child(1) { top: calc(50% - 4px); left: calc(50% - 0px); }
.ot-nav .rond span:nth-child(2) { top: calc(50%); left: calc(50% - 2px); }
.ot-nav .rond span:nth-child(3) { top: calc(50% + 4px); left: calc(50% + 2px); }


.ot-nav:hover { border-color: #000; transform: translateX(-50%); }
.ot-nav:hover .rond span:nth-child(2) { width: 7px; height: 1; }
.ot-nav:hover .rond span:nth-child(1) { transform: translateX(-50%) rotate(13deg); left: 50%;  }
.ot-nav:hover .rond span:nth-child(3) { transform: translateX(-50%) rotate(-13deg); left: 50%;  }

.menu-open .ot-nav { border-color: #000; box-shadow: 0 0px 24px #444; transform: translateX(-50%) !important; bottom: 40px; }
.menu-open .ot-nav .rond span:nth-child(2) { height: 0; }
.menu-open .ot-nav .rond span:nth-child(1) { transform: translateX(-50%) rotate(45deg); left: 50%; top: calc(50% - 2px); }
.menu-open .ot-nav .rond span:nth-child(3) { transform: translateX(-50%) rotate(-45deg); left: 50%; top: calc(50% + 1px); }

.menu-open .ot-nav p { font-size: 0; margin: 4px 16px; }
.menu-open .ot-nav .rond { background: #111; }
.menu-open .ot-nav .rond span { background-color: #ff999a; }

.ot-menu { didisplay: block; position: fixed; z-index: 1000; left: 12px; bottom: 0; border-radius: 12px; width: calc(100% - 24px); background: #FF999A; padding: 24px 24px 100px 24px; text-align: center; transform: translateY(100%); transition: all 0.3s; }
.menu-open .ot-menu { transform: translateY(0%); bottom: 12px;  }

.ot-menu .social { position: absolute; bottom: 24px; right: 24px; }
.ot-menu .social a { text-decoration: none;  }
.ot-menu .social a img { width: 24px; }
.ot-menu .social a img { fill: #FF999A; }

header .region-nav-branding,
header .banner-feature { transition: all 0.3s; }

.ot-menu .logo { display: block; position: absolute; left: 24px; bottom: 24px; }

.region-nav-additional { display: block; position: absolute; right: 24px; bottom: 100px; text-align: right; }
.region-nav-additional .nav-item .nav-link { font-size: 14px; }
/* .region-nav-additional .nav-item .nav-link:hover { font-size: 14px; } */


@media screen and (max-width: 768px) {
  .region-nav-additional { position: relative; right: inherit; bottom: initial; text-align: center; margin-top: 12px; padding-top: 12px; }
}





/*
* Webform
*/

.webform-submission-form .fieldset-legend { font-size: 48px; font-weight: 900; line-height: 1; max-width: 650px; display: block; margin: auto; }
.form-composite > legend, .label { display: inline; margin: 0; padding: 0; font-size: 48px; font-weight: 900; line-height: 1; margin-bottom: 32px; }
.form-item { text-align: center; }
.form-actions { text-align: right; position: sticky; bottom: 24px; }

.progress-tracker--center {
  text-align: center;
  background: #f7f7f7;
  position: relative;
  z-index: 999;
}

.progress-step.is-active .progress-marker::before {
  background-color: #ff999a;
  color: #000;
}
.webform-progress-tracker.progress-step:not(.is-active) .progress-marker::before, .webform-progress-tracker .progress-step:hover .progress-marker::before, .webform-progress-tracker .progress-step .progress-marker::after {
  background-color: #000;
}

.progress-marker::before {
  width: 36px;
  top: -6px;
  height: 36px;
  font-weight: 900;
}

.progress-step .progress-marker::before {
  background-color: #000;
}

.progress-step .progress-marker {
  color: #ff999a;
}

.webform-progress-tracker .progress-step.is-complete .progress-marker::before, .webform-progress-tracker .progress-step.is-complete:hover .progress-marker::before, .webform-progress-tracker .progress-step.is-complete .progress-marker::after {
  background-color: #ff999a;
  color: #000;
}

.webform-progress-tracker .progress-step.is-active .progress-title {
  font-weight: 900;
}

.form-control {
  max-width: 400px;
  margin: auto;
  font-size: 16px;
  font-weight: 400;
  border: solid 3px #000;
  border-radius: 24px;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:focus {
  color: var(--bs-body-color);
  background-color: #F7F7F7;
  border-color: #000;
  border-width: 5px;
  outline: 0;
  box-shadow: none;
}

.form-textarea-wrapper textarea {
  margin: 0 auto;
}

/* .form-checkboxes .form-item, .form-radios .form-item { display: inline; margin-right: 17px; } */

.webform-submission-form .form-required::after {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 0.3em;
  content: "";
  vertical-align: super;
  background-image: none;
  background-repeat: no-repeat;
  background-size: 6px 6px;
  content: '*';
  color: #ff999a;
  font-size: 32px;
}

.video-controls .btn svg {
  fill: #ffffff;
  width: 18px !important;
  height: 18px !important;
}

.video-controls .btn:hover svg {
  fill: #ffffff;
}

.webform-progress-tracker .progress-step.is-active:hover .progress-marker::before {
  background-color: #ff999a;
}

.webform-progress-tracker .progress-step .progress-text {
  padding-top: 5px;
  padding-bottom: 0;
  color: #000;
  font-size: 14px;
  line-height: 1.25;
}


/*
* Main
*/

main { margin-bottom: 48px; padding: 8px 24px 24px 24px; transition: filter 0.3s; }

.menu-open header .region-nav-branding,
.menu-open header .banner-feature,
.menu-open main,
.menu-open #block-otentiik-blockderoulantsouslelogo,
.menu-open #footer-site { filter: blur(6px); opacity: 0.8; }





/*
* Block
*/

.block-type-header-small-video {  }
.block-type-header-small-video .embed-container { position: relative; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: hidden; }
.block-type-header-small-video .embed-container iframe { width: 100vw; height: 56.25vw; min-height: 100vh; min-width: 177.77vh; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }


.block-page-title-block { position: sticky; top: 0; z-index: -1; }

@media screen and (max-width: 1024px) {
  .block-page-title-block { position: relative; }
}


.block-language {  }
.block-language ul { padding: 0; list-style: none; line-height: 1.2; margin-left: 12px; font-size: 14px; }
.block-language ul li a { color: #000; text-decoration: none; }
.block-language ul li.is-active a { font-weight: 700; }



.block-type-header-centre { padding: 10vh 0; margin: auto; max-width: 720px; text-align: center;  }
.block-type-header-centre .field--name-field-sur-titre { font-size: 16px; font-weight: 400; letter-spacing: 2px; }
.block-type-header-centre .field--name-field-titre { font-size: 32px; font-weight: 900; }
.block-type-header-centre .field--name-field-cta-fichier .file--application-pdf { margin-top: 8px; background: #000; border: solid 3px #111; padding: 4px 12px; border-radius: 24px; }
.block-type-header-centre .field--name-field-cta-fichier .file--application-pdf a { color: #fff; text-decoration: none; }

.block-type-header-centre .field--name-field-cta-url { margin-top: 8px; background: #F7F7F7; padding: 4px 12px; border-radius: 24px; border: solid 3px #111; }
.block-type-header-centre .field--name-field-cta-url a { color: #000; text-decoration: none; }

.block-type-header-centre .cta .field--name-field-cta-url, .block-type-header-centre .cta .field--name-field-cta-fichier { display: inline-block; }


.block-type-slider { padding: 10vh 0; }

.block-type-slider .cover {
  padding: 56.25% 0 0 0;
  position: relative;
}
.block-type-slider .cover iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.paragraph.paragraph--type--card.paragraph--view-mode--default.paragraph--steps {
  padding: 48px;
  border: solid 3px #000;
  margin: 12px;
  border-radius: 12px;
}

.paragraph.paragraph--type--card.paragraph--view-mode--default.paragraph--steps h3 { text-align: center; margin: 24px 0 0 0; }


.block-video-simple-full .cover { padding:56.25% 0 0 0; position:relative; }
.block-video-simple-full .cover iframe { position:absolute;top:0;left:0;width:100%;height:100%; pointer-events: none; }




.block-text-lead {}
.block-text-lead { font-size: 24px; font-weight: 300; padding: 48px 0; }


.block-feature { margin-bottom: 10vh; padding-bottom: 10vh; }
.block-feature .col-md-4 .field--name-field-titre { font-size: max(3.5vw, 52px); font-weight: 900; position: sticky; top: 12px; line-height: 1; }
.block-feature .field__item:last-child .paragraph--type--etape .field--name-field-corps p { margin-bottom: 0; }

.block-img-full { position: relative; }
.block-img-full img { object-fit: cover; height: calc(66vh - 48px); }


.block-webform { margin-bottom: 48px; background: #F7F7F7; padding: 12px; border-radius: 12px; }



#block-otentiik-logosclients { display: block; }
#block-otentiik-logosclients > div { margin: 16vh auto; max-width: 1024px; text-align: center; }
#block-otentiik-logosclients > div .field--name-field-logos {  }
#block-otentiik-logosclients > div .field--name-field-titre { margin-bottom: 12px; font-size: 5vw; font-weight: 900; display: inline-block; background: #F7F7F7; padding: 12px 24px; border-radius: 48px; } 
#block-otentiik-logosclients > div .field--name-field-logos { margin-top: 24px; }
#block-otentiik-logosclients > div .field--name-field-logos .field__item { display: inline-block; }
#block-otentiik-logosclients > div .field--name-field-logos .field__item img { display: block; width: 90px; margin: 8px; height: 90px; transition: width 0.3s; }

@media screen and (max-width: 768px) {
  #block-otentiik-logosclients > div .field--name-field-logos .field__item img { width: 72px; margin: 0; }
}

#block-otentiik-logosclients > div .field--name-field-texte { margin-top: -20px; transform: rotate(-1.4deg); }

#block-otentiik-travaillonsensemble { display: block; transform: rotate(-1.4deg); border-top: solid 3px #000;  }
#block-otentiik-travaillonsensemble .field--name-body { overflow: hidden; margin: 0 -23px; background: #fff; }
#block-otentiik-travaillonsensemble p { font-size: 4vw; font-weight: 900; line-height: 1; margin: 0; white-space: nowrap; animation: marquee 20s linear infinite; padding: 12px 0; }


@media screen and (max-width: 768px) {
  #block-otentiik-travaillonsensemble p { font-size: 11vw; animation: marquee 10s }
}


.block-video-simple-full { }
.block-video-simple-full video { object-fit: cover; height: calc(100vh - 48px); width: 100%; border-radius: 8px; }



#block-otentiik-views-block-realisations-block-1 { margin-bottom: 25vh;}


/*
* Node
*/

.page-node-type-service { }
.page-node-type-service .field--name-field-image-teaser img { height: calc(66vh - 48px); object-fit: cover; width: 100%; }

.page-node-type-service .header { padding: 10vh 0; margin: auto; max-width: 720px; text-align: center;  }
.page-node-type-service .header .field--name-field-sur-titre { font-size: 16px; font-weight: 400; letter-spacing: 2px; }
.page-node-type-service .header .field--name-field-titre { font-size: 32px; font-weight: 900; }


.page-node-type-service .reference_project { margin: 24px -24px 90px -24px; background: #fff; }
.page-node-type-service .reference_project .splide { visibility: visible; }
.page-node-type-service .reference_project .splide ul {  }
.page-node-type-service .reference_project .splide ul li {  }
.page-node-type-service .reference_project .splide ul li article { position: relative; padding: 12px; }
.page-node-type-service .reference_project .splide ul li article h2 { position: absolute; top: 32px; left: 32px; }
.page-node-type-service .reference_project .splide ul li article h2 a { display: block; color: #000; background: #fff; padding: 12px 24px; border-radius: 24px; text-decoration: none; font-size: 16px; }
.page-node-type-service .reference_project .splide ul li article .node__content { }
.page-node-type-service .reference_project .splide ul li article .node__content img { }



.node--type-realisation.node--view-mode-full { margin-bottom: 25vh; }

.node--type-realisation.node--view-mode-full .arian { position: sticky; top: 24px; text-align: right; z-index: 101; background: #fff; border-radius: 27px; padding-top: 8px; margin-top: -8px; }
.node--type-realisation.node--view-mode-full .arian a, .node--type-realisation.node--view-mode-full .arian h1 { display: inline-block; position: relative; top: initial; }
.node--type-realisation.node--view-mode-full .arian a { color: #000; text-decoration: none; position: relative; bottom: 4px; }
.node--type-realisation.node--view-mode-full .arian .logo { position: absolute; left: 8px; top: 14px; opacity: 0; }
.node--type-realisation.node--view-mode-full .arian .logo img { width: 113px; }

@media screen and (max-width: 992px) {
  .node--type-realisation.node--view-mode-full .arian .logo { display: none;}
}


.node--type-realisation.node--view-mode-full .cover { position: sticky; top: 24px; z-index: 0; height: calc(100vh - 48px); margin-bottom: 50vh; overflow: hidden; }
.node--type-realisation.node--view-mode-full .cover .bg-cover { content:''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #111; border-radius: 12px; }
.node--type-realisation.node--view-mode-full .cover video { position:absolute; top:0; left:0; width:100%; height: calc(100vh - 48px); pointer-events: none; object-fit: cover; border-radius: 12px; }

.node--type-realisation.node--view-mode-full .header { padding: 10vh 0; margin: auto; max-width: 720px; text-align: center; }
.node--type-realisation.node--view-mode-full .header .field--name-body { font-size: 32px; font-weight: 900; }
.node--type-realisation.node--view-mode-full .header, 

.node--type-realisation.node--view-mode-full .main { position: relative; z-index: 100; color: #fff; }
.node--type-realisation.node--view-mode-full .main .field__label { color: #000; }
.node--type-realisation.node--view-mode-full .main .info { margin-bottom: 48px; }
.node--type-realisation.node--view-mode-full .main .field { margin-bottom: 8px; }

.node--type-realisation.node--view-mode-full .field--name-field-image-teaser { display: flex; justify-content: space-between;  align-items: center; flex-wrap: wrap; gap: 24px; }
.node--type-realisation.node--view-mode-full .field--name-field-image-teaser img { margin-bottom: 12px; width: 50%; }
.node--type-realisation.node--view-mode-full .field--name-field-image-teaser .field__item:nth-child(1n) { text-align: right; }
.node--type-realisation.node--view-mode-full .field--name-field-image-teaser .field__item:nth-child(2n) {  text-align: center; }
.node--type-realisation.node--view-mode-full .field--name-field-image-teaser .field__item:nth-child(2n) img {  width: 66%; }
.node--type-realisation.node--view-mode-full .field--name-field-image-teaser .field__item:nth-child(3n) { text-align: left; }


.node--type-realisation.node--view-mode-full .bts { background: #111; margin: 90px 0px 0px 0px; border-radius: 12px; padding: 24px 12px;}
.node--type-realisation.node--view-mode-full .gallery { display: flex; flex-flow: row wrap; gap: 12px; } 
.node--type-realisation.node--view-mode-full .title h2 { position: relative; top: 0px; font-size: 9vw; margin-bottom: 24px; line-height: 1.2; display: inline-block; }
.node--type-realisation.node--view-mode-full .gallery img { flex: auto; height: 20vw; width: auto; object-fit: cover; display: block; transition: all 0.3s; will-change: height, min-width }


.video-js .vjs-tech { pointer-events: none; }

.video-js-service-teaser {
  height: 25vh !important;
  max-height: 200px !important;

}

.video-js-service-teaser video { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; transition: all 0.3s; filter: grayscale(1); }
.block-views-blockservices-block-1 .item-list li:hover video { filter: grayscale(0); }
.block-views-blockservices-block-1 .item-list li .views-field-field-video-mp4 { display: block; background: #F7F7F7; border-radius: 8px; }

.video-controls.work {
  position: sticky;
  z-index: 9999;
  bottom: 24px;
  left: 48px;
  display: inline-block;
  margin: auto;
  background-color: #000;
  color: #fff;
  border-radius: 24px;
  padding: 3px;
  border: solid 3px #000;
  cursor: pointer;
  transition: all 0.6s;
}

.video-controls.bloc-simple {
  bottom: 24px;
  margin: 24px;
}


@media screen and (max-width: 1024px) {
  .video-controls.work { display: none; }
}


.video-controls .btn {
  color: #fff;
  font-size: 13px;
  margin: 0;
  font-weight: 700;
  padding: 4px 8px;
}


.progress-container {
  display: inline-block;
  margin: 0 10px;
}

#progress-bar {
  width: 100%;
  -webkit-appearance: none;
  background: #444;
  height: 3px;
  border-radius: 16px;
  cursor: pointer;
}

#progress-bar::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: #FF999A;
  width: 16px;
  height: 4px;
  transition: all 0.3s;
}

#progress-bar::-webkit-slider-thumb:hover {
  width: 16px;
  height: 16px;
  border-radius: 24px;
}


.video-js { width: 100%; border-radius: 12px; height: calc(100vh - 48px); background-color: initial; }
.vjs-modal-dialog .vjs-modal-dialog-content, .video-js .vjs-modal-dialog, .vjs-button > .vjs-icon-placeholder:before, .video-js .vjs-big-play-button .vjs-icon-placeholder:before { height: calc(100vh - 48px); }
.vjs-poster { height: calc(100vh - 48px); width: 100%; }
.vjs-poster img { height: 100%; width: 100%; object-fit: cover; }



.video-js.vjs-fullscreen.vjs-user-inactive video { translate: none; transition: all 0s !important;
  filter: blur(0) !important;
  transform: none !important;
  opacity: 1 !important;
  object-fit: none;
}







/*
* Views
*/

.block-views-blockservices-block-1 { margin-bottom: 24px; }
.block-views-blockservices-block-1 .item-list li { list-style: none; margin: 0; } 
.block-views-blockservices-block-1 .views-row { position: relative; margin-bottom: 10vh; }
.block-views-blockservices-block-1 .views-field-title { font-size: 24px; font-weight: 900; max-width: calc(100% - 168px); color: #000; width: 100%;line-height: 1; margin: 0 0 89px 0; transition: all 0.3s; }
.block-views-blockservices-block-1 .views-field-title a { color: #000; text-decoration: none; width: 100%; display: block; transition: all 0.3s; }
.block-views-blockservices-block-1 .views-field-view-node { position: relative; text-align: center; }
.block-views-blockservices-block-1 .views-field-view-node a { background: #000; padding: 8px 12px; color: #fff; text-decoration: none; border-radius: 26px; font-size: 12px; }
.block-views-blockservices-block-1 .views-field-field-image-teaser { position: relative; margin-top: auto; }
.block-views-blockservices-block-1 .views-field-field-image-teaser img { height: 25vh; max-height: 200px; object-fit: cover; width: 100%; transition: all 0.3s; filter: grayscale(1); transition: all 0.3s; }

.block-views-blockservices-block-1 .views-field-field-video-mp4 video { width: 100%; }

.block-views-blockservices-block-1 .views-field-view-node-1 span { position: absolute; top: 24px; right: 24px; }
.block-views-blockservices-block-1 .views-field-view-node-1 span a { text-decoration: none; color: #fff; background: #000; padding: 6px 24px; display: inline-block; border-radius: 24px; width: auto; transition: all 0.3s; }


.block-views-blockservices-block-1 .item-list ul { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; padding: 0; margin: 0; }
.block-views-blockservices-block-1 .item-list li { position: relative; list-style: none; margin: 0; background: #EEE; padding: 24px; border-radius: 8px; border: solid 3px #111; display: flex; min-height: 500px; flex-direction: column; transition: all 0.4s; }

.block-views-blockservices-block-1 .item-list li:hover { background: #000; color: #fff; border: solid 3px #fff; }
.block-views-blockservices-block-1 .item-list li:hover .views-field-title a { color: #fff;  }
.block-views-blockservices-block-1 .item-list li:hover .views-field-link-to-revision a { background: #fff; color: #000; }
.block-views-blockservices-block-1 .item-list li:hover img { filter: grayscale(0); }


@media screen and (max-width: 1024px) {
  .block-views-blockservices-block-1 .item-list ul { grid-template-columns: 1fr 1fr; }
}

@media screen and (max-width: 768px) {
  .block-views-blockservices-block-1 .item-list ul { grid-template-columns: 1fr; }
}


.view-realisations { }
.view-realisations .view-content { display: flex; flex-wrap: wrap; gap: 24px; }
.view-realisations .views-row { position: sticky; top: 24px; }
.view-realisations .views-field-field-type-rea { position: absolute; top: 26px; margin-top: 16px; left: 48px; z-index: 9999; background: #FFF; padding: 8px 24px; font-weight: 900; border-radius: 24px; display: inline-block; }
.view-realisations .views-field-title { position: absolute; top: 50%; left: 50%; text-align: center; line-height: 1; transform: translate(-50%, -50%); }
.view-realisations .views-field-field-image-teaser { overflow: hidden; display: block; border-radius: 8px; }
.view-realisations .views-field-field-image-teaser img { object-fit: cover; height: calc(100vh - 48px); }
.view-realisations .views-field-title a { color: #fff; text-decoration: none; font-size: 90px; font-weight: 900; }

.view-realisations .views-field-field-slogan { position: relative; z-index: 9999;  display: block; }
.view-realisations .views-field-field-slogan span { background: #FFF; padding: 8px 24px; font-weight: 900; border-radius: 24px; display: inline-block; }

.view-filters form .form--inline fieldset { width: auto; padding: 2px 24px; border-radius: 32px; background: #F7F7F7; }
.view-filters form .form--inline fieldset > legend { display: inline-block; width: auto; font-size: 24px; margin: 4px 16px 0 0; }
.view-filters form .form--inline fieldset > .fieldset-wrapper { width: auto; display: inline-block; }
.view-realisations .view-filters .bef-exposed-form .form--inline .form-item { display: inline-block; }



@media screen and (max-width: 992px) {
  #edit-field-type-rea-value--wrapper { text-align: left; } 
}



/* paragraph */

.field--name-field-etape-service {  }
/* .field--name-field-etapes .field__item { position: sticky; top: 12px; padding: 12px; background: #F7F7F7; border-radius: 8px; max-width: 920px; margin: 12px auto; min-height: 100px; }
.field--name-field-etapes .field__item .paragraph--type--etape {  }
.field--name-field-etapes .field__item .paragraph--type--etape .row {  }
.field--name-field-etapes .field--name-field-sur-titre { font-size: 12px; letter-spacing: 2px; }
.field--name-field-etapes .field--name-field-titre { margin-bottom: 0; padding-bottom: 0; } */

.field--name-field-etape-service > .field__item { margin: 48px 0;  }
.field--name-field-etape-service .field__item .paragraph--type--etape {  }
.field--name-field-etape-service .field__item .paragraph--type--etape .row { margin-bottom: 48px; }
.field--name-field-etape-service .block-title, .field--name-field-etapes .block-content { }

.field--name-field-etape-service .block-title > div { position: sticky; top: 12px; }
.field--name-field-etape-service .block-title > div h3 { margin-bottom: 10vh; }
.field--name-field-etape-service .block-title > div .field--name-field-titre { font-size: max(3.5vw, 52px); font-weight: 900; line-height: 1;  }

.field--name-field-etape-service .block-number { position: relative; }
.field--name-field-etape-service .block-number .field--name-field-sur-titre {  font-size: 16px; font-weight: 900; }

@media screen and (min-width: 768px) {
  .field--name-field-etape-service .block-number { padding: 24px; }
  .field--name-field-etape-service .block-number .field--name-field-sur-titre { transform: rotate(90deg); transform-origin: left; position: absolute; top: 0;  }
}


/*
* Footer
*/

#footer-site { padding: 90px 24px 90px 24px;  background: #EEE; color: #000; border-radius: 12px; position: relative; border: solid 3px #111;z-index: 99; margin: -96px 24px 0 24px !important; transition: filter 0.3s; }


@media screen and (max-width: 768px) {
  #footer-site { padding: 24px;  }
}

#footer-site .logo { text-align: center; } 
#footer-site .logo img { width: 100%; } 

#footer-site .region-footer { padding: 0; }
#footer-site .navbar-nav a { text-transform: uppercase; display: inline-block; background: #111; margin-bottom: 4px; color: #fff; padding: 4px 12px; font-size: 12px; border-radius: 20px; }

#footer-site .social a { text-decoration: none; }
#footer-site .social a img { width: 24px; }

@media screen and (max-width: 768px) {
  .social { margin-top: 24px; }
  #block-otentiik-footer { display: none; }
}

#legal { display: block; width: 100%; min-height: 90px; position: relative; }
#legal .row { margin: 33px 16px; }
#legal a { color: #000; text-decoration: none; font-weight: 900; }
#legal .icon-map { margin-right: 8px; margin-bottom: 4px; }
#legal .phone-mail { text-align: right; }

@media screen and (max-width: 768px) {
  #legal .phone-mail { text-align: left; margin-top: 12px; margin-bottom: 90px; }
}

#block-otentiik-footer { text-align: right; transform-origin: right; }
#block-otentiik-footer li { display: inline-block; }


.webform-confirmation__message, .webform-confirmation__back { margin: 0 0 1em 0;
  background: #222;
  padding: 24px;
  border-radius: 8px;
  color: #FFF;
  text-align: center;}