/*  
Theme Name: WARE ID
Theme URI: https://ware-id.com/
Description: Thème Wordpress pour WARE ID
Author: Unik Studio
Author URI: https://unikstudio.fr/
*/

@charset "UTF-8";

@import url('fonts.css');
@import url('blocks-bootstrap.css');

.editor-styles-wrapper {
  font-size: 20px;
  font-family: 'Satoshi-Variable', sans-serif;!important;
  font-optical-sizing: auto;
  font-weight: 400;
  line-height: 1.2em;
 }
.editor-styles-wrapper .container {
  position: relative;
  width: 100%;
}
.editor-styles-wrapper .row {
  display:-ms-flexbox;
  display:flex;
  flex-wrap: wrap;
  margin-right:0px;
  margin-left:0px;
  width: 100%;
}
/*** Vars ***/
:root {
  --col-noir: #131313;
  --col-bleu: #262D46;
  --col-bleu-clair: #E3E8EE;
  --col-ciel: #BBD5DA;
  --col-orange: #FF5731;
  --col-blanc: #FFFFFF;
  --col-gris: #F5F5F5;
  --rgb-noir: 19, 19, 19;
  --rgb-bleu: 38, 45, 70;
  --rgb-bleu-clair: 227, 232, 238;
  --rgb-ciel: 187, 213, 218;
  --rgb-orange: 255, 87, 49;
  --rgb-blanc: 255, 255, 255;
  --rgb-gris: 245, 245, 245;

  --block-size-h1: 160px;
  --block-size-h2-xl: 70px;
  --block-size-h2-l: 54px;
  --block-size-h3: 35px;
  --block-size-h4: 20px;
  --block-size-surtitre:  12px;
  --block-size-soustitre:  14px;
  --block-size-txt:  16px;
  --block-size-big-txt:  40px;

  --block-cadre-photo-height: 460px;
  --block-galerie-photo-height:  600px;

  --block-main-padding:  40px;
  --block-main-padding-left:  calc(100% / 12);
  --block-main-padding-right: calc(100% / 12);

  --radius-min:  20px;
}
.editor-styles-wrapper .block-editor-block-list__layout.is-root-container > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: 1200px;
}
.editor-styles-wrapper .offset-lg-1.col-lg-10 {
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}
.editor-styles-wrapper .block-wareid .wp-core-ui .button {
  background: transparent;
  border: none;
}
.editor-styles-wrapper .block-wareid a.button {
  position:relative;
  z-index:2;
  display:inline-block;
  text-align:center;
  cursor:pointer;
  padding: 0px 20px 0px 20px;
  font-size: 20px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 48px;
  height: 48px;
  width:auto;
  cursor: pointer;  
  text-decoration: none;
  border: none;
  background-color: transparent;
  overflow: hidden;
}
.editor-styles-wrapper .block-wareid a.button::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  left: 0px; 
  top: 0px; 
  transition: all 0.65s cubic-bezier(.4,0,0,1);
}
.editor-styles-wrapper .block-wareid a.button-1 {
  color: var(--col-blanc);
  background-color: var(--col-orange);
  border-radius: 30px;
}
.editor-styles-wrapper .block-wareid a.button-1::before {
  background-color: var(--col-orange);
  border-radius: 30px;
  color: var(--col-blanc);
  opacity: 0;
}
.editor-styles-wrapper .block-wareid a.button::after {
  content: "";
  position: absolute;
  width: 0%;
  height: 100%;
  opacity: 1;
  z-index: -1;
  top: 0;
  left: 0; 
  transition: all 0.65s cubic-bezier(.4,0,0,1);
}
.editor-styles-wrapper .block-wareid a.button-1::after {
  background-color: var(--col-bleu);
}
.editor-styles-wrapper .bg-bleu .block-wareid a.button-1::after {
  background-color: var(--col-blanc);
}
.editor-styles-wrapper .block-wareid a.button-1:hover {
  color: var(--col-blanc);
}
.editor-styles-wrapper .bg-bleu .block-wareid a.button-1:hover {
  color: var(--col-bleu);
}
.editor-styles-wrapper .block-wareid a.button-1:hover::after {
  width:100%;
  transition: all 0.65s cubic-bezier(.4,0,0,1);
}
.editor-styles-wrapper .block-wareid a.button-2 {
  color: var(--col-blanc);
  border: solid 1px var(--col-blanc);
  border-radius: 30px;
}
.editor-styles-wrapper .block-wareid a.button-2-b {
  color: var(--col-bleu);
  border: solid 1px var(--col-bleu);
}
.editor-styles-wrapper .block-wareid a.button-2::before {
  background-color: transparent;
  border-radius: 100px;
}
.editor-styles-wrapper .block-wareid a.button-2::after {
  background-color: var(--col-blanc);
}
.editor-styles-wrapper .block-wareid a.button-2-b::after {
  background-color: var(--col-bleu);
}
.editor-styles-wrapper .block-wareid a.button-2:hover {
  color: var(--col-orange);
}
.editor-styles-wrapper .block-wareid a.button-2:hover::after {
  width: 100%;
  transition: all 0.65s cubic-bezier(.4,0,0,1);
}
.editor-styles-wrapper .block-wareid a.button-2-b:hover {
  color: var(--col-blanc);
}
.editor-styles-wrapper .block-wareid a.button-2-b:hover::after {
  width: 100%;
  transition: all 0.65s cubic-bezier(.4,0,0,1);
}

.editor-styles-wrapper .vertical-align-center {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;  
}
.editor-styles-wrapper .vertical-align-top {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: start;  
}
.editor-styles-wrapper .vertical-align-bottom {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: end;  
}
.editor-styles-wrapper .section-interne {
  position: relative;
  padding: var(--block-main-padding) 0;
}
.editor-styles-wrapper .container-padding-left {
  padding-left: var(--block-main-padding-left);
}
.editor-styles-wrapper .container-padding-right {
  padding-right:var(--block-main-padding-right);
}
.editor-styles-wrapper .cadre-photo {
  overflow: hidden;
  width: 100%;
  height: 560px;
  position: relative;
  z-index: 1;
}
.editor-styles-wrapper .cadre-photo.mode-normal {
  height: auto;
}
.editor-styles-wrapper .cadre-photo.with-legende {
  padding-bottom: 26px;
}
.editor-styles-wrapper .cadre-photo figure {
  position: relative;
  margin: 0;
  height: 100%;
  width: 100%;
}
.editor-styles-wrapper .cadre-photo img {
  mix-blend-mode: normal;
  object-fit: cover;
  object-position: center center;
  height: 100%;
  width: 100%;
}
.editor-styles-wrapper .cadre-photo.mode-normal img {
  object-fit: contain;
}
.editor-styles-wrapper .cadre-photo.mode-background img,
.editor-styles-wrapper .cadre-photo.border-radius img {
	border-radius: var(--radius-min);
}
.editor-styles-wrapper figcaption {
  text-transform: uppercase;
  color: var(--col-bleu);
  font-size: 12px;
  text-align: left;
  font-weight: 500;
  letter-spacing: 0.05em;
}
.editor-styles-wrapper .bg-gris {
  background-color: var(--col-gris);
}
.editor-styles-wrapper .bg-blanc {
  background-color: var(--col-blanc);
}
.editor-styles-wrapper .bg-orange {
  background-color: var(--col-orange);
}
.editor-styles-wrapper .bg-bleu {
  background-color: var(--col-bleu);
}
.editor-styles-wrapper .bg-ciel {
  background-color: var(--col-ciel);
}
.editor-styles-wrapper .bg-orange h2,
.editor-styles-wrapper .bg-orange h3,
.editor-styles-wrapper .bg-bleu .texte,
.editor-styles-wrapper .bg-orange .texte {
  color: var(--col-blanc)!important;
}
.editor-styles-wrapper .bg-bleu h2,
.editor-styles-wrapper .bg-bleu h3 {
  color: var(--col-ciel)!important;
}
.editor-styles-wrapper .block-wareid {
  color: var(--col-bleu);
}
.editor-styles-wrapper .block-wareid h2 {
  font-size: var(--block-size-h2-l);
  line-height: 1.1em;
}
.editor-styles-wrapper .block-wareid h3 {
  font-size: var(--block-size-h3);
  line-height: 1.1em;
}
.bg-bleu a {
  color: var(--col-blanc);
}
.bg-bleu a:hover {
  color: var(--col-orange);
}
.bg-orange a:hover {
  color: var(--col-bleu);
}
.editor-styles-wrapper .wareid-arrow {
  display: block;
  clip-path: polygon(0 42%, 90% 42%, 77% 5%, 82% 0%, 100% 50%, 82% 100%, 77% 95%, 90% 58%, 0 58%);
  width: 36px;
  height: 11px;
  background-color: var(--col-orange);
}
.editor-styles-wrapper .wareid-arrow-up {
  transform: rotate(-90deg);
}
.editor-styles-wrapper .wareid-arrow-down {
  transform: rotate(90deg);
}
.editor-styles-wrapper .wareid-arrow-left {
  transform: rotate(180deg);
}
.editor-styles-wrapper .wareid-arrow-right {
  transform: rotate(0deg);
}
.block-wareid h2 {
  color: var(--col-orange)!important;
  font-weight: 700;
  text-transform: none;
}
.block-wareid.bg-bleu h2,
.block-wareid.bg-orange h2 {
  color: var(--col-blanc)!important;
}
.block-wareid.bg-ciel h2 {
  color: var(--col-bleu)!important;
}
.block-wareid.bg-bleu h2 {
  color: var(--col-ciel)!important;
}
.block-wareid h3 {
  color: var(--col-bleu)!important;
  font-weight: 700;
  text-transform: none;
  font-size: var(--size-h2-l);
}
.block-wareid.bg-bleu h3,
.block-wareid.bg-orange h3 {
  color: var(--col-blanc)!important;
}
.block-wareid.bg-ciel h3 {
  color: var(--col-bleu)!important;
}
.block-wareid.bg-bleu h3 {
  color: var(--col-ciel)!important;
}
.editor-styles-wrapper .block-wareid h2 {
  font-size: var(--block-size-h2-l);
}
.editor-styles-wrapper .block-wareid h3 {
  font-size: var(--block-size-h3);
}
.editor-styles-wrapper .block-paragraphe .texte,
.editor-styles-wrapper .block-paragraphe .texte p {
  font-size: var(--block-size-txt);
  line-height: 1.25em;
}
.editor-styles-wrapper .block-paragraphe .texte.texte-grand,
.editor-styles-wrapper .block-paragraphe .texte.texte-grand p {
  font-size: var(--block-size-big-txt);
}
.block-paragraphe .texte {
  color: var(--col-bleu);
}
.block-paragraphe.bg-bleu .texte,
.block-paragraphe.bg-orange .texte {
  color: var(--col-blanc);
}
.block-paragraphe.bg-ciel .texte {
  color: var(--col-bleu);
}
.block-paragraphe .texte a {
  text-decoration: underline;
  font-weight: 700;
  color: var(--col-bleu);
}
.block-paragraphe .texte a:hover {
  color: var(--col-orange);
}
.block-paragraphe.bg-bleu .texte a {
  color: var(--col-blanc);
}
.block-paragraphe.bg-bleu .texte a:hover {
  color: var(--col-orange);
}
.page-content .block-paragraphe.bg-bleu .texte li::before {
  background-color: var(--col-blanc);
}
.block-paragraphe {
  position: relative;
  z-index: 2;
  background-color: transparent;
  color: var(--col-noir);
  margin: var(--block-main-padding) 0 0;
}
.block-paragraphe-photo {
  margin-top: calc( var(--block-main-padding));
}
.block-paragraphe .container-cta {
  margin-top: 40px;
  text-align: left;
}
.block-galerie #photo-principale {
  height: var(--galerie-photo-height);
}
.editor-styles-wrapper .block-galerie #photo-principale {
  height: var(--block-galerie-photo-height);
}
.block-galerie #photo-principale img {
  position: relative;
  z-index: 1;
}
.block-galerie #photo-principale figure::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 0;
  background-color: var(--col-bleu);
}
.block-galerie #photo-principale.border-radius figure::before {
  border-radius: var(--radius-min);
}
.block-galerie #photo-principale .mfp-click {
  cursor: pointer;
}
.block-galerie .galerie-navigation {
  position: absolute;
  top: 50%;
  width: 100%;
  display: none;
}
.block-galerie .galerie-navigation .photo-precedente {
  position: absolute;
  left: 10px;
}
.block-galerie .galerie-navigation .photo-suivante {
  position: absolute;
  right: 10px;
}
.block-galerie .galerie-navigation a {
  font-size: 0;
}
.block-galerie .autres-vignettes {
  display: flex;
  margin:25px 0;
  text-align:left;
  flex-wrap: wrap;
  justify-content: center;
}
.block-galerie .autres-vignettes a {
  width:90px;
  overflow:hidden;
  margin:0 10px 30px;
  background-color:var(--col-gris);
  border-radius:10px;
  height:90px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  position: relative;
  transition: all 0.65s cubic-bezier(.4,0,0,1);
}
.block-galerie .autres-vignettes a:hover {
  transform: scale3d(1.2, 1.1, 1.0);
  transition: all 0.65s cubic-bezier(.4,0,0,1);
}
/*
.block-galerie .autres-vignettes a:nth-child(8n+1) {
  margin-left: 0;
}
.block-galerie .autres-vignettes a:nth-child(8n+8) {
  margin-right: 0;
}
*/
.block-galerie .autres-vignettes span {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}
.block-galerie .autres-vignettes img {
  height: 100%;
  width: 100%;
  margin: 0 auto;
  object-fit: cover;
  object-position: center;
}
.block-liste-texte .liste-descriptifs {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: var(--main-padding) 0 0;
  list-style: none;
  padding: 0;
}
.editor-styles-wrapper .block-liste-texte .liste-descriptifs {
  margin-top: var(--block-main-padding);
}
.block-liste-texte .liste-descriptifs li {
  width: calc(100% / 3);
  padding-right: var(--main-padding-right);
  padding-bottom: 30px;
}
.editor-styles-wrapper .block-liste-texte .liste-descriptifs li {
  padding-right: var(--block-main-padding-right);
}
.editor-styles-wrapper .block-liste-texte .liste-descriptifs .descriptif {
  display: flex;
}
.editor-styles-wrapper .block-liste-texte .liste-descriptifs .wareid-arrow {
  margin-top: 5px;
}
.editor-styles-wrapper .block-liste-texte .liste-descriptifs .descriptif p {
  margin: 0;
}
.editor-styles-wrapper .block-liste-texte .liste-descriptifs .descriptif .texte {
  padding-left: 10px;
}
.block-video video {
  border-radius: var(--radius-min);
}
.block-video .video-responsive {
  max-width: 100%;
  border-radius: var(--radius-min);
  overflow: hidden;
}
.block-video .video-responsive iframe {
  width: 100%;
}
.block-photo-banner {
  margin-bottom: var(--main-padding);
}
.editor-styles-wrapper .block-photo-banner {
  margin-bottom: var(--block-main-padding);
}
.block-liste-document .liste-documents {
  display: flex;
  flex-wrap: wrap;
  margin: var(--main-padding) 0 0;
  list-style: none;
  padding: 0;
}
.block-liste-document .liste-documents .button {
  margin-right: 30px;
}
.editor-styles-wrapper .block-liste-document .liste-documents {
  margin-top: var(--block-main-padding);
}