@font-face {
    font-family: 'Impact';
    src: url('../fonts/impact.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'ITCFranklinGothicBookCp';
    src: url('../fonts/ITC Franklin Gothic Book Compressed.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gasalt';
    src: url('../fonts/Gasalt-Thin.woff2') format('woff2'),
        url('../fonts/Gasalt-Thin.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* [data-theme="corporate"] {
    font-family: Gasalt, sans-serif;
} */
/*
[data-theme] h1,
[data-theme] h2,
[data-theme] h3,
[data-theme] h4,
[data-theme] h5,
[data-theme] h6 {
  @apply font-gasalt;
}*/



/**
* jQuery.UI dialog.
*/
:root {
   --space-m: 1rem; /* 1 * 16px = 16px */
   --space-l: 1.5rem; /* 1.5 * 16px = 24px */
   --font-size-h4: 1.424rem; /* ~23px */
   --color-text: var(--p);
   --color-white: #ffffff;
   --color-focus: #62a5d4;

   --jui-dialog-title-color: var(--color-white);
   --jui-dialog-title-bg-color: var(--color-text);
   --jui-dialog-title-font-size: var(--font-size-h4);
   --jui-dialog-close-button-size: calc(var(--space-m) * 2);
   --jui-dialog-close-button-border-radius: 50%;
   --jui-dialog-close-button-reserved-space: calc(var(--space-m) * 4);
   --jui-dialog-off-canvas-close-button-reserved-space: calc(var(--space-m) * 3);
   --jui-dialog-border-radius: 0.25rem;
   --jui-dialog-box-shadow: 0 0 var(--space-m) calc(var(--space-m) / -4) var(--color-text);
   --jui-dialog--focus-outline: 2px dotted transparent;
   --jui-dialog--focus-box-shadow: 0 0 0 0.1875rem var(--color-focus);
   --jui-dialog-z-index: 1260;
   --jui-dialog-off-canvas-z-index: 501;
}

/* pour le popup du add to cart */
.ui-widget-overlay.ui-front {
    background-color: black;
    opacity: 0.75;
}

.ui-dialog.ui-widget.ui-front {
    z-index: 9999;
    background-color: white;
}



/* pour l'autocompletion de recherche */
.ui-widget.ui-widget-content {
  color: var(--primary);
  background-color: var(--primary-bg);
}
/* pour cacher l'animation AJAX */
.js input.form-autocomplete {
  background-position: 130%;
}
.js input.form-autocomplete.ui-autocomplete-loading {
  /* background-image: url(/core/misc/throbber-active.gif); */
  background-position: 130% center;
}

/* pour l'autocompletion de recherche sur mobile */
#ui-id-2 {
  z-index: 550;
}

/* pour le panier */
.cart--cart-block > .cart-block--summary a {
  display: flex;
}
/* Sur le header */
/* #block-lokat-panier > h2 {
  display: none;
} */


/* pour le Slider des page */
.sp-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}
.sp-slide > div:nth-of-type(2) {
  left: unset !important;
  top: unset !important;
  color: white;
  /* font-size: 200%;
  font-weight: bold; */
  background: none;
  text-shadow: 0 0 5px rgba(0,0,0,0.7);
}
.sp-slide > div:nth-of-type(3) {
  right: 0 !important;
  bottom: 0 !important;
}
.sp-image-container {
  background-color: black;
}
.sp-image-container .sp-image{
  display: flex;
  justify-content: center;
}
.sp-image-container > .sp-image {
  display: contents;
}
.sp-image-container img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}


/* pour les slick */
.slick-arrow::before {
  color: var(--noir-loka);
}
.slick-arrow:hover::before {
    color: var(--rouge-loka);
}
/* pour le slick des prestation */
.vueprestations .slick-track > .slide {
  display: flex;
  place-content: center;
}
/* pour le slick de la FAQ */
.vuefaq .slick {
  margin: 1em 0 3em;
}
.vuefaq .slick-slider .slick-list {
  display: flex;
}
.vuefaq .slick-slider .slick-track {
  display: flex;
  margin-bottom: .5rem;
}
.vuefaq .slick-slide {
  margin: 0 1.2rem;
  display: flex;
}
.vuefaq .slick-slide > div {
  flex-grow: 1;
}
/* le formulaire de recherche */
.vuefaq form.views-exposed-form {
  display: flex;
  align-items: center;
}
.vuefaq form.views-exposed-form .form-item-faq-txt {
  margin: 1em;
}
.webform-submission-je-pose-ma-question-form #edit-ma-question {
  margin-bottom: 1.3em;
}

/* Adjust autocomplete loader position to match select. */
/* .js input.form-autocomplete {
  background-position: calc(100% - .75rem) center;
} */
/* label.input {
  position: relative;
  display: inline-flex;
  flex-shrink: 1;
  appearance: none;
  align-items: center;
  gap: calc(0.25rem * 2);
} */

.breakout, .bg-breakout {
  width: 100vw;
  position: relative;
  left: calc(-1 * (100vw - 100%) / 2);
}

.form-control.js-form-type-checkbox {
  flex-flow: row wrap;
  align-items: center;
  gap: 8px;
  margin: 0.2em 0;
}
.form-control.js-form-type-checkbox .description {
  flex-basis: 100%;
}

.form-control.js-form-type-radio {
  flex-flow: row;
  gap: 8px;
  margin: 0.2em 0;
}
.form-control.js-form-type-radio .radio,
.form-control.js-form-type-checkbox .checkbox {
  height: 1.2em;
  width: 1.2em;
}
.form-control.js-form-type-radio > label,
.form-control.js-form-type-checkbox > label {
  margin-top: 0.25em;
  line-height: 1;
}



/* les messages systems en AJAX...*/
/* ============================== */
div.messages__wrapper .messages {
  /* display: grid; */
  width: 100%;
  grid-auto-flow: row;
  align-content: flex-start;
  align-items: center;
  justify-items: center;
  gap: 1rem;
  text-align: center;
  border-radius: var(--rounded-box,1rem);
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity)));
  padding: 1rem;
  --tw-text-opacity: 1;
  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
  --alert-bg: var(--fallback-b2,oklch(var(--b2)/1));
  --alert-bg-mix: var(--fallback-b1,oklch(var(--b1)/1));
  background-color: var(--alert-bg);
}
@media (min-width: 640px) {
  div.messages__wrapper .messages {
    grid-auto-flow: column;
    grid-template-columns: auto minmax(auto,1fr);
    justify-items: start;
    text-align: start;
  }
}
div.messages__wrapper .messages.messages--status {
  border-color: var(--fallback-in,oklch(var(--in)/.2));
  --tw-text-opacity: 1;
  color: var(--fallback-inc,oklch(var(--inc)/var(--tw-text-opacity)));
  --alert-bg: var(--fallback-in,oklch(var(--in)/1));
  --alert-bg-mix: var(--fallback-b1,oklch(var(--b1)/1));
}

/* Force le centrage des modal ...*/
/* ============================== */
div.ui-dialog.ui-corner-all.ui-widget.ui-widget-content.ui-front.ui-dialog-buttons {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
}

/* le menu de coté pour filtrer et trier les produts */
/* ================================================= */

form#views-exposed-form-produit-categorie-bloc-produit-cat > fieldset,
form#views-exposed-form-produit-categorie-bloc-vaisselle > fieldset {
  margin-bottom: 1em;
}

#views-exposed-form-produit-categorie-bloc-produit-cat > fieldset > legend,
#views-exposed-form-produit-categorie-bloc-vaisselle > fieldset > legend {
    text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  /* font-size: x-large; */
  width: 100%;
}
/* le menu de coté pour filtrer et trier les produts */
#views-exposed-form-produit-categorie-bloc-produit-cat .checkbox,
#views-exposed-form-produit-categorie-bloc-vaisselle .checkbox {
    --chkbg: var(--rouge-loka);
  background-color: white;
  border-color: black;
}
#views-exposed-form-produit-categorie-bloc-produit-cat .radio,
  #views-exposed-form-produit-categorie-bloc-vaisselle .radio {
    background-color: white;
  border-color: black;
}
#views-exposed-form-produit-categorie-bloc-produit-cat .radio:checked,
  #views-exposed-form-produit-categorie-bloc-vaisselle .radio:checked {
    background-color: var(--rouge-loka);
}


/* Section du Tri */
#views-exposed-form-produit-categorie-bloc-produit-cat
 details[data-drupal-selector="edit-bef-sort-options"]
 .form-radios div:nth-child(2),
#views-exposed-form-produit-categorie-bloc-vaisselle
 details[data-drupal-selector="edit-bef-sort-options"]
 .form-radios div:nth-child(2) {
  display: none;
}
#views-exposed-form-produit-categorie-bloc-produit-cat
 details[data-drupal-selector="edit-bef-sort-options"]
 fieldset > legend,
#views-exposed-form-produit-categorie-bloc-vaisselle
 details[data-drupal-selector="edit-bef-sort-options"]
 fieldset > legend {
  display: none;
}


/* le Bt de reset */
#views-exposed-form-produit-categorie-bloc-produit-cat div.form-actions,
#views-exposed-form-produit-categorie-bloc-vaisselle div.form-actions {
    width: 100%;
  padding: 1em;
  text-align: center;
}

/* le Bt de Retour TOP */
.scroll-top-button {
    z-index: 540;
}


/* le menu principal */
/* ================= */
#block-lokat-navigationprincipale > ul  {
  font-weight: bold;
}
#block-lokat-navigationprincipale > ul > li > details > ul {
  min-width: 18em;
  color: oklch(var(--pc));
  background-color: oklch(var(--p));
  border: oklch(var(--nc)) 2px solid;
}
#block-lokat-navigationprincipale :where(li:not(.menu-title) > :not(ul, details, .menu-title)),
#block-lokat-navigationprincipale :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
  /* border-radius: var(--rounded-btn,.5rem);
  padding: .5rem 1rem; */
  font-size: inherit;
  /* line-height: 1.25rem; */
}

/* le menu footer avec icons */
/* ========================= */
a.flex > .ui-icons-menu-text {
  line-height: .8;
  margin-top: 0.3rem;
}

/* Produit */
/* ======= */
.tab:is(input[type=radio]):after {
  min-width: 7em;
}


/* Modal - popup du panier */
/* ======================= */
.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close .ui-icon.ui-icon-closethick {
  /* width: 100%;
  height: 100%;
  margin: 0; */
  transform: none;
  /* background: url(data:image/svg+xml,%3csvg width='12' height='12' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11 1.318l-10 10M11 11.318l-10-10' stroke='%23D3D4D9' stroke-width='1.5'/%3e%3c/svg%3e) no-repeat 50%; */
}


/* Validation du panier */
/* ==================== */
#edit-order-fieldscheckout-field-adresse-livraison-0-format {
  display: none;
}


/* VIDEO */
/* ===== */
.remotedvideo {
  width: 100%;
  position: relative;
  line-height: 0;
}
.remotedvide > .videosize {
  width: 100%;
  height: 0; /* Remplacé par le padding-bottom */
  line-height: 0;
}
.remotedvideo > iframe {
  position: absolute;
  width: 100%;
  height: 99.99%;
  top:0px;
  left: 0px;
}


/* MESSAGE */
/* ======= */
div.messages__wrapper {
  padding: 2rem;
}


/* Webform */
/* ==================== */
.webform-flexbox.retourligne {
  flex-wrap: wrap;
}
.webform-flexbox.retourligne > .webform-flex {
  flex-basis: 100%;
}

.webform-submission-form input {
  width: 100%;
}
.label-white .webform-submission-form label,
.label-white .webform-submission-form legend {
  color: white;
  font-weight: bold;
}
.label-white .webform-submission-form label.cursor-pointer {
  color: black;
}
.webform-submission-form .contremargex {
  margin-left: -0.5em;
  margin-right: -0.5em;
}
.form-item--error-message {
  background-color: var(--rouge-loka);
  color: white;
}
#webform-submission-candidature-add-form .webform-address,
#webform-submission-candidature-node-87-add-form .webform-address {
  margin: -1em 0;
}
#webform-submission-candidature-add-form input[name="document_joint_remove_button"],
#webform-submission-candidature-node-87-add-form input[name="document_joint_remove_button"] {
  margin: .5em 0;
}