@import url('https://fonts.googleapis.com/css2?family=Archivo+Narrow:wght@400;500;600&display=swap');

/*!
 * animate.css -http://daneden.me/animate
 * Version - 3.5.1
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2016 Daniel Eden
 */
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.animated.flipOutX,
.animated.flipOutY,
.animated.bounceIn,
.animated.bounceOut {
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
}

@-webkit-keyframes bounce {

  from,
  20%,
  53%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}

@keyframes bounce {

  from,
  20%,
  53%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}

.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}

@-webkit-keyframes flash {

  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

@keyframes flash {

  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

.flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 1.15, 1.15);
    transform: scale3d(1.15, 1.15, 1.15);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 1.15, 1.15);
    transform: scale3d(1.15, 1.15, 1.15);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

@-webkit-keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
}

@-webkit-keyframes shake {

  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

@keyframes shake {

  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}

@-webkit-keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }

  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }

  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }

  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }

  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }

  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }

  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }

  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }

  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

.headShake {
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-name: headShake;
  animation-name: headShake;
}

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

@keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

.swing {
  -webkit-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
}

@-webkit-keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.tada {
  -webkit-animation-name: tada;
  animation-name: tada;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes wobble {
  from {
    -webkit-transform: none;
    transform: none;
  }

  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes wobble {
  from {
    -webkit-transform: none;
    transform: none;
  }

  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}

.wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble;
}

@-webkit-keyframes jello {

  from,
  11.1%,
  to {
    -webkit-transform: none;
    transform: none;
  }

  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}

@keyframes jello {

  from,
  11.1%,
  to {
    -webkit-transform: none;
    transform: none;
  }

  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}

.jello {
  -webkit-animation-name: jello;
  animation-name: jello;
  -webkit-transform-origin: center;
  transform-origin: center;
}

@-webkit-keyframes bounceIn {

  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes bounceIn {

  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.bounceIn {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}

@-webkit-keyframes bounceInDown {

  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes bounceInDown {

  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}

.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}

@-webkit-keyframes bounceInLeft {

  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes bounceInLeft {

  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}

.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}

@-webkit-keyframes bounceInRight {

  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes bounceInRight {

  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}

.bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
}

@-webkit-keyframes bounceInUp {

  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInUp {

  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}

@-webkit-keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  50%,
  55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}

@keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  50%,
  55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}

.bounceOut {
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut;
}

@-webkit-keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

@keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

.bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown;
}

@-webkit-keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

@keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

.bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft;
}

@-webkit-keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

@keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

.bounceOutRight {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight;
}

@-webkit-keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

@keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

.bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp;
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -150%, 0);
    transform: translate3d(0, -150%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -150%, 0);
    transform: translate3d(0, -150%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@-webkit-keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}

@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-10%, 0, 0);
    transform: translate3d(-10%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-10%, 0, 0);
    transform: translate3d(-10%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
}

@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(10%, 0, 0);
    transform: translate3d(10%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(10%, 0, 0);
    transform: translate3d(10%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

@-webkit-keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
}

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 150%, 0);
    transform: translate3d(0, 150%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 150%, 0);
    transform: translate3d(0, 150%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}

@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

@-webkit-keyframes fadeOutDown {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

@keyframes fadeOutDown {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}

@-webkit-keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

@keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

.fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig;
}

@-webkit-keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

.fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
}

@-webkit-keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

@keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

.fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig;
}

@-webkit-keyframes fadeOutRight {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes fadeOutRight {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

.fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
}

@-webkit-keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

@keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

.fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
  animation-name: fadeOutRightBig;
}

@-webkit-keyframes fadeOutUp {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes fadeOutUp {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}

@-webkit-keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

@keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

.fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
  animation-name: fadeOutUpBig;
}

@-webkit-keyframes flip {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

@keyframes flip {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

.animated.flip {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip;
}

@-webkit-keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

@keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

.flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}

@-webkit-keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

@keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

.flipInY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}

@-webkit-keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

@keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

.flipOutX {
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

@-webkit-keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}

@keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}

.flipOutY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY;
}

@-webkit-keyframes lightSpeedIn {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
    opacity: 1;
  }

  to {
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

@keyframes lightSpeedIn {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
    opacity: 1;
  }

  to {
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

.lightSpeedIn {
  -webkit-animation-name: lightSpeedIn;
  animation-name: lightSpeedIn;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

@-webkit-keyframes lightSpeedOut {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}

@keyframes lightSpeedOut {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}

.lightSpeedOut {
  -webkit-animation-name: lightSpeedOut;
  animation-name: lightSpeedOut;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}

@-webkit-keyframes rotateIn {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

@keyframes rotateIn {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

.rotateIn {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn;
}

@-webkit-keyframes rotateInDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

@keyframes rotateInDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

.rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft;
}

@-webkit-keyframes rotateInDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

@keyframes rotateInDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

.rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight;
}

@-webkit-keyframes rotateInUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

@keyframes rotateInUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

.rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft;
}

@-webkit-keyframes rotateInUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

@keyframes rotateInUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

.rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight;
}

@-webkit-keyframes rotateOut {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}

@keyframes rotateOut {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}

.rotateOut {
  -webkit-animation-name: rotateOut;
  animation-name: rotateOut;
}

@-webkit-keyframes rotateOutDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}

.rotateOutDownLeft {
  -webkit-animation-name: rotateOutDownLeft;
  animation-name: rotateOutDownLeft;
}

@-webkit-keyframes rotateOutDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

.rotateOutDownRight {
  -webkit-animation-name: rotateOutDownRight;
  animation-name: rotateOutDownRight;
}

@-webkit-keyframes rotateOutUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

.rotateOutUpLeft {
  -webkit-animation-name: rotateOutUpLeft;
  animation-name: rotateOutUpLeft;
}

@-webkit-keyframes rotateOutUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}

.rotateOutUpRight {
  -webkit-animation-name: rotateOutUpRight;
  animation-name: rotateOutUpRight;
}

@-webkit-keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%,
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40%,
  80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}

@keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%,
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40%,
  80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}

.hinge {
  -webkit-animation-name: hinge;
  animation-name: hinge;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}

@keyframes rollOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}

.rollOut {
  -webkit-animation-name: rollOut;
  animation-name: rollOut;
}

@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}

.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}

@-webkit-keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomInDown {
  -webkit-animation-name: zoomInDown;
  animation-name: zoomInDown;
}

@-webkit-keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomInLeft {
  -webkit-animation-name: zoomInLeft;
  animation-name: zoomInLeft;
}

@-webkit-keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomInRight {
  -webkit-animation-name: zoomInRight;
  animation-name: zoomInRight;
}

@-webkit-keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomInUp {
  -webkit-animation-name: zoomInUp;
  animation-name: zoomInUp;
}

@-webkit-keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  to {
    opacity: 0;
  }
}

@keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  to {
    opacity: 0;
  }
}

.zoomOut {
  -webkit-animation-name: zoomOut;
  animation-name: zoomOut;
}

@-webkit-keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomOutDown {
  -webkit-animation-name: zoomOutDown;
  animation-name: zoomOutDown;
}

@-webkit-keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
    transform-origin: left center;
  }
}

@keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
    transform-origin: left center;
  }
}

.zoomOutLeft {
  -webkit-animation-name: zoomOutLeft;
  animation-name: zoomOutLeft;
}

@-webkit-keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
    transform-origin: right center;
  }
}

@keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
    transform-origin: right center;
  }
}

.zoomOutRight {
  -webkit-animation-name: zoomOutRight;
  animation-name: zoomOutRight;
}

@-webkit-keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomOutUp {
  -webkit-animation-name: zoomOutUp;
  animation-name: zoomOutUp;
}

@-webkit-keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}

@-webkit-keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}

@-webkit-keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}

@-webkit-keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
}

@-webkit-keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

@keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

.slideOutDown {
  -webkit-animation-name: slideOutDown;
  animation-name: slideOutDown;
}

@-webkit-keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

.slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft;
}

@-webkit-keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

.slideOutRight {
  -webkit-animation-name: slideOutRight;
  animation-name: slideOutRight;
}

@-webkit-keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

.slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp;
}

/**/
@-webkit-keyframes blurFadeIn {
  0% {
    opacity: 0;
    transform: scale(1.3);
  }

  50% {
    opacity: 0.5;
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes blurFadeIn {
  0% {
    opacity: 0;
    transform: scale(1.3);
  }

  50% {
    opacity: 0.5;
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.blurFadeIn {
  -webkit-animation-name: blurFadeIn;
  animation-name: blurFadeIn;
}

@-webkit-keyframes blurFadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    -o-transform: translateY(-10px);
    transform: translateY(-10px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes blurFadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    -o-transform: translateY(-10px);
    transform: translateY(-10px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
}

.blurFadeInDown {
  -webkit-animation-name: blurFadeInDown;
  animation-name: blurFadeInDown;
}

@-webkit-keyframes passing {
  0% {
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    opacity: 0;
  }

  50% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(50%);
    transform: translateX(50%);
    opacity: 0;
  }
}

@keyframes passing {
  0% {
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    opacity: 0;
  }

  50% {
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(50%);
    -ms-transform: translateX(50%);
    transform: translateX(50%);
    opacity: 0;
  }
}

@-webkit-keyframes passing-reverse {
  0% {
    -webkit-transform: translateX(50%);
    transform: translateX(50%);
    opacity: 0;
  }

  50% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    opacity: 0;
  }
}

@keyframes passing-reverse {
  0% {
    -webkit-transform: translateX(50%);
    -ms-transform: translateX(50%);
    transform: translateX(50%);
    opacity: 0;
  }

  50% {
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    opacity: 0;
  }
}

@keyframes jackInTheBox {
  from {
    opacity: 0;
    transform: scale(0.1) rotate(30deg);
    transform-origin: center bottom;
  }

  50% {
    transform: rotate(-10deg);
  }

  70% {
    transform: rotate(3deg);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.jackInTheBox {
  animation-name: jackInTheBox;
}

.contact-display-1-row .title-contact {
  display: inline;
}

@media (max-width: 1600px) and (min-width: 1024px) {
  .banner-left {
    max-width: 52%;
  }

  .banner-right {
    max-width: 46%;
  }
}

.med-bestsale .product-miniature {
  border-bottom: none;
  border-left: none;
  border-right: none;
  padding-left: 0;
  padding-right: 0;
  margin: 0 20px !important;
}

.med-bestsale .product-miniature:hover {
  border-color: #ebebeb;
}

.med-bestsale .pos-product-widget .slick-arrow {
  top: -2.957rem !important;
}

.med-bestsale .pos-product-widget .slick-next {
  right: 1rem !important;
}

.med-bestsale .pos-product-widget .slick-prev {
  right: 3.5rem !important;
}

.toy-bestsale .product-miniature {
  border-bottom: none;
  border-left: none;
  border-right: none;
  padding-left: 0;
  padding-right: 0;
  margin: 0 20px;
  border-radius: 0;
}

.toy-bestsale .product-miniature:hover {
  border-color: #ebebeb;
}

.toy-bestsale .pos-product-widget .slick-slide>*:not(:last-child) {
  margin-bottom: 0;
}

.toy-bestsale .pos-product-widget .slick-next {
  right: 1rem !important;
}

.toy-bestsale .pos-product-widget .slick-prev {
  right: 3.5rem !important;
}

/*# sourceMappingURL=animate.css.map */

.list-bigger-image .style_product_list .img_block {
  max-width: 170px;
}

.has-section-inner .elementor-widget-wrap {
  display: block !important;
}

.elementor-widget-wrap>section {
  width: 100% !important;
}

.elementor-editor-active .elementor.elementor-edit-mode .elementor-top-column .elementor-widget-wrap .elementor-inner-section {
  margin-top: 0;
}

/* Fix for Mega Menu 5 columns */
.menu-25 {
  width: 20% !important;
}

.menu-25 .html-block {}

/* ============================================================================
   MEGAMENU LWC — intégration design maquette « megamenu-lwc »
   Réf (source de vérité) : maquettes-design/megamenu-lwc/ (README + styles.css + captures)
   Cible DOM : module posmegamenu — desktop #_desktop_megamenu / mobile #mobile-megamenu
   Remplace l'ancien bloc « MEGAMENU CUSTOM OVERRIDES - Matching Lacave Style » (#C50063).
   Spécificité : préfixe par l'ID (#_desktop_megamenu / #mobile-megamenu) pour battre
   les sélecteurs de classe de l'ancien bloc, du theme.css et de posmegamenu_s_*.css.
   ============================================================================ */

/* --- Tokens megamenu (complètent le :root global déjà présent) --- */
:root {
  --wc-nav:        #1f1f1f;
  --wc-rouge:      #6e1414;   /* pastille vin rouge */
  --wc-blanc:      #e3cf8f;   /* pastille vin blanc */
  --wc-rose:       #e9a6a0;   /* pastille rosé */
  --wc-champ:      #efe2b0;   /* pastille champagne */
  --mm-sans:       'Archivo Narrow', 'Helvetica Neue', Arial, sans-serif;
}

/* ============================================================================
   1. BARRE DE NAVIGATION (section Elementor portant le megamenu)
   ============================================================================ */
.elementor-element-51c10595,
.elementor-section:has(#_desktop_megamenu) {
  background-color: var(--wc-nav) !important;
}

/* Largeurs des colonnes de la barre : le menu prend la place, la recherche se
   réduit (maquette : recherche ~210px à droite). Évite le retour à la ligne des
   entrées. Cible les 2 colonnes Elementor de la section nav. */
.elementor-element-429b3074 {            /* colonne recherche */
  flex: 0 0 260px !important;
  max-width: 260px !important;
  width: 260px !important;
}
.elementor-element-77a8678a {            /* colonne menu */
  flex: 1 1 auto !important;
  max-width: none !important;
  width: auto !important;
}
#_desktop_megamenu .pos-menu-horizontal .menu-content {
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
}

/* entrées niveau 1 */
#_desktop_megamenu .pos-menu-horizontal .menu-content > li.menu-item > a {
  position: relative !important;
  font-family: var(--mm-sans) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  letter-spacing: .055em !important;
  text-transform: uppercase !important;
  color: #e4e4e4 !important;
  padding: 19px 15px !important;
  transition: color .16s, background .16s !important;
}
#_desktop_megamenu .pos-menu-horizontal .menu-content > li.menu-item > a:hover {
  color: #fff !important;
  background: rgba(255,255,255,.07) !important;
}
#_desktop_megamenu .pos-menu-horizontal .menu-content > li.menu-item:hover > a,
#_desktop_megamenu .pos-menu-horizontal .menu-content > li.menu-item.active > a {
  color: #fff !important;
  background: rgba(255,255,255,.10) !important;
}
/* filet rouge sous l'onglet survolé / ouvert (maquette : seul l'onglet ouvert) */
#_desktop_megamenu .pos-menu-horizontal .menu-content > li.menu-item:hover > a::after {
  content: '';
  position: absolute;
  left: 8px; right: 8px; bottom: 0;
  height: 2px;
  background: var(--wc-red);
}
/* la flèche ▾ des entrées : la maquette n'en affiche pas → masquée en desktop */
#_desktop_megamenu .pos-menu-horizontal .menu-content > li.menu-item > a i.icon-rt-arrow-down {
  display: none !important;
}
/* l'entrée est sur une seule ligne (texte seul) */
#_desktop_megamenu .pos-menu-horizontal .menu-content > li.menu-item > a {
  flex-direction: row !important;
  white-space: nowrap !important;
}

/* champ de recherche intégré à la barre sombre */
.elementor-section:has(#_desktop_megamenu) .elementor-search__container,
.elementor-element-51c10595 .elementor-search__container {
  background: #fff !important;
  border-radius: 2px !important;
  height: 34px !important;
  overflow: hidden !important;
}
.elementor-section:has(#_desktop_megamenu) .elementor-search__input,
.elementor-element-51c10595 .elementor-search__input {
  font-family: var(--serif) !important;
  font-size: 14px !important;
  color: var(--wc-ink) !important;
  background: #fff !important;
  height: 34px !important;
  border: none !important;
}
.elementor-section:has(#_desktop_megamenu) .elementor-search__input::placeholder,
.elementor-element-51c10595 .elementor-search__input::placeholder {
  color: var(--wc-faint) !important;
}
.elementor-section:has(#_desktop_megamenu) .elementor-search__submit,
.elementor-element-51c10595 .elementor-search__submit {
  background: #fff !important;
  color: var(--wc-muted) !important;
}

/* ============================================================================
   2. PANNEAU DÉROULANT
   ============================================================================ */
/* bandeau = pleine largeur écran (skin blanc/liseré rouge/ombre sur .menu-dropdown) */
#_desktop_megamenu .pos-menu-horizontal .menu-content .menu-item .menu-dropdown {
  background: #fff !important;
  border: none !important;
  border-top: 2px solid var(--wc-red) !important;
  border-radius: 0 !important;
  box-shadow: 0 26px 46px -24px rgba(0,0,0,.32) !important;
  transition: opacity .18s ease, visibility .18s ease !important; /* le thème transitionne 'left' → on l'annule */
}
/* contenu = largeur fixe (conteneur), centré sur la zone de contenu → colonnes alignées à gauche sous le menu */
#_desktop_megamenu .pos-menu-horizontal .menu-content .menu-item .menu-dropdown .pos-sub-inner {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 24px 28px 22px !important;
  max-width: 1200px !important;
  margin-left: calc(50vw - 695px) !important;
  margin-right: 0 !important;
}
/* léger fondu/descente à l'ouverture (état de base reste visible — cf README) */
#_desktop_megamenu .pos-menu-horizontal .menu-content .menu-item:hover > .menu-dropdown {
  opacity: 1 !important;
  visibility: visible !important;
}
@media (prefers-reduced-motion: no-preference) {
  #_desktop_megamenu .pos-menu-horizontal .menu-content .menu-item:hover > .menu-dropdown .pos-sub-inner {
    animation: mmIn .16s ease;
  }
}
@keyframes mmIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

/* colonnes (grille Bootstrap conservée, on ne fait que l'habiller) */
#_desktop_megamenu .pos-menu-horizontal .menu-content .menu-item .menu-dropdown .pos-menu-row {
  display: flex !important;
  flex-wrap: wrap !important;
}
#_desktop_megamenu .pos-menu-horizontal .menu-content .menu-item .menu-dropdown .pos-menu-col {
  padding: 0 14px !important;
}

/* en-tête de colonne → .col-head maquette (sombre + soulignement rouge court).
   Le contenu live utilise 2 conventions : <h4/a class="column_title"> ET les
   html-blocks <p class="my-sub-tit"> (migration). On les habille pareil. */
#_desktop_megamenu .pos-menu-horizontal .menu-content .menu-item .menu-dropdown .column_title,
#_desktop_megamenu .pos-menu-horizontal .menu-content .menu-item .menu-dropdown .my-sub-tit {
  display: block !important;
  position: relative !important;
  font-family: var(--mm-sans) !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  letter-spacing: .05em !important;
  text-transform: none !important;
  color: var(--wc-ink) !important;
  padding-bottom: 9px !important;
  margin: 0 0 12px !important;
  border-bottom: 1px solid var(--wc-border-soft) !important;
}
#_desktop_megamenu .pos-menu-horizontal .menu-content .menu-item .menu-dropdown .my-sub-tit.m-t-2 { margin-top: 18px !important; }
#_desktop_megamenu .pos-menu-horizontal .menu-content .menu-item .menu-dropdown .column_title::after,
#_desktop_megamenu .pos-menu-horizontal .menu-content .menu-item .menu-dropdown .my-sub-tit::after {
  content: '';
  position: absolute;
  left: 0; bottom: -1px;
  width: 22px; height: 2px;
  background: var(--wc-red);
}
/* le <li> porteur d'un html-block d'en-tête : pas de puce ni de a-styling */
#_desktop_megamenu .pos-menu-horizontal .menu-content .menu-item .menu-dropdown .submenu-item > .html-block { margin: 0 !important; }
/* en-tête vide : masqué */
#_desktop_megamenu .menu-dropdown .my-sub-tit:empty,
#_desktop_megamenu .menu-dropdown .column_title:empty { display: none !important; }
/* en-tête « placeholder » d'alignement (migration : <p class="my-sub-tit"><br></p>) :
   on garde sa hauteur pour aligner la colonne de continuation, mais sans filet ni
   soulignement rouge orphelin. */
#_desktop_megamenu .menu-dropdown .my-sub-tit:has(br) { border-bottom: none !important; color: transparent !important; }
#_desktop_megamenu .menu-dropdown .my-sub-tit:has(br)::after { display: none !important; }

/* items de colonne → .rub-item maquette */
#_desktop_megamenu .pos-menu-horizontal .menu-content .menu-item .menu-dropdown ul.ul-column { margin: 0 !important; padding: 0 !important; list-style: none !important; }
#_desktop_megamenu .pos-menu-horizontal .menu-content .menu-item .menu-dropdown ul.ul-column > li.submenu-item { margin: 0 !important; }
#_desktop_megamenu .pos-menu-horizontal .menu-content .menu-item .menu-dropdown ul.ul-column > li.submenu-item > a {
  display: block !important;
  font-family: var(--mm-sans) !important;
  font-size: 15.5px !important;
  font-weight: 400 !important;
  color: var(--wc-text) !important;
  padding: 3px 0 !important;
  line-height: 1.28 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  transition: color .14s !important;
}
#_desktop_megamenu .pos-menu-horizontal .menu-content .menu-item .menu-dropdown ul.ul-column > li.submenu-item > a:hover,
#_desktop_megamenu .pos-menu-horizontal .menu-content .menu-item .menu-dropdown .category-sub-menu a:hover {
  color: var(--wc-red) !important;
}

/* ============================================================================
   3. COMPOSANTS MAQUETTE (raccordement : classes de colonne + html-blocks DB)
   Port fidèle de maquettes-design/megamenu-lwc/styles.css, scopé #_desktop_megamenu.
   Le raccordement produira ce markup via colonnes à classe (ex. quick-zone) et
   items html-block (type_link 6). Tant que le contenu DB ne les pose pas, ces
   règles sont inertes (aucune classe correspondante dans le DOM courant).
   ============================================================================ */

/* primitives de disposition */
#_desktop_megamenu .panel-flex { display: flex; align-items: stretch; }
#_desktop_megamenu .cats-zone { padding: 15px 28px 13px; display: grid; gap: 22px; flex: 1; }
#_desktop_megamenu .cats-zone.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#_desktop_megamenu .cats-zone.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#_desktop_megamenu .cats-zone.bx-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px 26px; }

/* eyebrow de zone (ex : « ACCÈS RAPIDES — SÉLECTIONS ») */
#_desktop_megamenu .zone-eyebrow {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--mm-sans); font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--wc-muted);
  margin-bottom: 11px;
}
#_desktop_megamenu .zone-eyebrow svg { color: var(--wc-red); }

/* zone « Accès rapides » teintée (grille 3 blocs) */
#_desktop_megamenu .quick-zone,
#_desktop_megamenu .pos-menu-col.quick-zone {
  background: var(--wc-grey-50) !important;
  border-right: 1px solid var(--wc-border);
  padding: 15px 28px 13px !important;
}
#_desktop_megamenu .quick-zone.slim { flex: 0 0 250px; }
#_desktop_megamenu .qgrid { display: grid; grid-template-columns: repeat(3, minmax(170px, 1fr)); gap: 18px; }
#_desktop_megamenu .qblock { min-width: 0; }
#_desktop_megamenu .qhead {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--mm-sans); font-size: 11.5px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--wc-faint);
  margin-bottom: 7px;
}
#_desktop_megamenu .qhead-ic { display: inline-flex; color: var(--wc-red); }
#_desktop_megamenu .qhead-ic svg { width: 13px; height: 13px; }
#_desktop_megamenu .qlist { display: flex; flex-direction: column; gap: 1px; }
#_desktop_megamenu .qlist.tall { gap: 2px; }

/* item filtre (entonnoir / pastille) → .filt-item maquette */
#_desktop_megamenu .filt-item {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 3px 8px; margin: 0 -8px;
  font-family: var(--mm-sans); font-size: 15.5px; color: var(--wc-text);
  cursor: pointer; transition: background .14s, color .14s;
}
#_desktop_megamenu .filt-item:hover {
  background: #fff; color: var(--wc-ink);
  box-shadow: inset 0 0 0 1px var(--wc-border);
}
#_desktop_megamenu .filt-item .fglyph { display: inline-flex; color: var(--wc-faint); flex-shrink: 0; margin-top: 2px; }
#_desktop_megamenu .filt-item:hover .fglyph { color: var(--wc-red); }
#_desktop_megamenu .filt-item .pdot,
#_desktop_megamenu .pdot {
  width: 12px; height: 12px; border-radius: 50%; margin-top: 2px; flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.18);
}
#_desktop_megamenu .pdot.rouge { background: var(--wc-rouge); }
#_desktop_megamenu .pdot.blanc { background: var(--wc-blanc); }
#_desktop_megamenu .pdot.rose { background: var(--wc-rose); }
#_desktop_megamenu .pdot.champagne { background: var(--wc-champ); }
#_desktop_megamenu .filt-l { min-width: 0; line-height: 1.3; }

/* colonnes de rubriques → .rcol / .col-head / .rub-item maquette */
#_desktop_megamenu .rcol { min-width: 0; display: flex; flex-direction: column; }
#_desktop_megamenu .col-head {
  position: relative;
  font-family: var(--mm-sans); font-size: 14.5px; font-weight: 600; letter-spacing: .05em;
  color: var(--wc-ink); padding-bottom: 6px; margin-bottom: 7px;
  border-bottom: 1px solid var(--wc-border-soft);
}
#_desktop_megamenu .col-head::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 22px; height: 2px; background: var(--wc-red); }
#_desktop_megamenu .rlist { display: flex; flex-direction: column; gap: 1px; }
#_desktop_megamenu .rub-item {
  font-family: var(--mm-sans); font-size: 15.5px; color: var(--wc-text);
  padding: 1px 0; line-height: 1.18; cursor: pointer; transition: color .14s; display: block;
}
#_desktop_megamenu .rub-item:hover { color: var(--wc-red); }
#_desktop_megamenu .rub-item.big { font-size: 15px; font-weight: 500; padding: 9px 0; }

/* « voir plus » / CTA rail → .more / .rail-cta maquette */
#_desktop_megamenu .more,
#_desktop_megamenu .mm-more {
  margin-top: 6px; padding-top: 7px;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mm-sans); font-size: 11.5px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: var(--wc-red); cursor: pointer;
}
#_desktop_megamenu .more svg, #_desktop_megamenu .mm-more svg { transition: transform .16s; }
#_desktop_megamenu .more:hover svg, #_desktop_megamenu .mm-more:hover svg { transform: translateX(3px); }

/* rail « Accès rapides » étroit à droite (Bordeaux, Bourgogne…) */
#_desktop_megamenu .quick-rail {
  flex: 0 0 234px; background: var(--wc-grey-50); border-left: 1px solid var(--wc-border);
  padding: 15px 22px 13px; display: flex; flex-direction: column;
}
#_desktop_megamenu .quick-rail.narrow { flex-basis: 212px; }
#_desktop_megamenu .rail-cta {
  margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--wc-border);
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mm-sans); font-size: 12px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--wc-red); cursor: pointer;
}
#_desktop_megamenu .rail-cta svg { transition: transform .16s; }
#_desktop_megamenu .rail-cta:hover svg { transform: translateX(3px); }

/* grille « OFFRES SPÉCIALES » → cartes .sel-card maquette */
#_desktop_megamenu .offres-wrap { padding: 15px 28px 16px; }
#_desktop_megamenu .sel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 16px; }
#_desktop_megamenu .sel-card {
  display: flex; align-items: center; gap: 13px; padding: 9px 14px;
  background: var(--wc-grey-50); border: 1px solid var(--wc-border);
  cursor: pointer; transition: border-color .15s, background .15s;
}
#_desktop_megamenu .sel-card:hover { background: #fff; border-color: var(--wc-red); }
#_desktop_megamenu .sel-fic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; background: #fff; border: 1px solid var(--wc-border);
  color: var(--wc-red); flex-shrink: 0;
}
#_desktop_megamenu .sel-card:hover .sel-fic { background: var(--wc-red); color: #fff; border-color: var(--wc-red); }
#_desktop_megamenu .sel-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
#_desktop_megamenu .sel-l { font-family: var(--mm-sans); font-size: 16px; font-weight: 600; color: var(--wc-ink); }
#_desktop_megamenu .sel-d { font-family: var(--mm-sans); font-size: 14px; color: var(--wc-muted); }
#_desktop_megamenu .sel-arr { color: var(--wc-faint); display: inline-flex; flex-shrink: 0; }
#_desktop_megamenu .sel-card:hover .sel-arr { color: var(--wc-red); }

/* spiritueux : grille 2 colonnes, items à filet bas */
#_desktop_megamenu .spirit-wrap { padding: 15px 30px 16px; }
#_desktop_megamenu .spirit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; margin-top: 6px; }
#_desktop_megamenu .spirit-grid .rub-item { border-bottom: 1px solid var(--wc-border-soft); }

/* ============================================================================
   3bis. PANNEAUX STATIQUES (override template posmegamenu.tpl du thème)
   ============================================================================ */
#_desktop_megamenu .pos-sub-inner.mm-flush { padding: 0 !important; }
#_desktop_megamenu .panel-flex > .quick-zone { flex: 0 0 auto; }                 /* zone filtres = largeur contenu (VINS large / CHAMPAGNE étroite) */
#_desktop_megamenu .panel-flex > .quick-zone + .cats-zone { flex: 1 1 auto; }    /* rubriques prennent le reste */
#_desktop_megamenu .panel-flex > .cats-zone:first-child { flex: 1 1 auto; }      /* BORDEAUX/BOURGOGNE — rubriques à gauche */
#_desktop_megamenu .panel-flex > .quick-rail { flex: 0 0 234px; }                /* rail Accès rapides à droite */
#_desktop_megamenu .panel-flex > .quick-rail.narrow { flex-basis: 212px; }
#_desktop_megamenu .rail-head {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--mm-sans); font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--wc-red);
  margin-bottom: 14px;
}
#_desktop_megamenu .rail-head svg { color: var(--wc-red); flex-shrink: 0; }
/* panneaux statiques : tous alignés au bord gauche du contenu (comme la maquette),
   pas ancrés sous leur onglet. li en static → le panneau s'ancre sur .pos-menu-horizontal. */
#_desktop_megamenu.mm-static .pos-menu-horizontal { position: relative; }
#_desktop_megamenu.mm-static .menu-content > li.menu-item { position: static; }
#_desktop_megamenu.mm-static .menu-content > li.menu-item > .menu-dropdown {
  left: calc(695px - 50vw) !important; right: auto !important; top: 100% !important; width: 100vw !important;
}

/* ============================================================================
   4. MOBILE (#mobile-megamenu) — accordéon (maquette .mphone)
   ============================================================================ */
/* entrées niveau 1 : rangées séparées, libellé uppercase, toggle +/- */
#mobile-megamenu .menu-content { display: block !important; }
#mobile-megamenu .menu-content > li.menu-item {
  border-top: 1px solid var(--wc-border-soft) !important;
  position: relative !important;
}
#mobile-megamenu .menu-content > li.menu-item:first-child { border-top: none !important; }
#mobile-megamenu .menu-content > li.menu-item.active { background: var(--wc-grey-50) !important; }
#mobile-megamenu .menu-content > li.menu-item > a {
  font-family: var(--mm-sans) !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: var(--wc-ink) !important;
  padding: 16px 18px !important;
}
#mobile-megamenu .menu-content > li.menu-item.active > a,
#mobile-megamenu .menu-content > li.menu-item > a:hover { color: var(--wc-red) !important; }
/* toggle +/- (icon-drop-mobile) */
#mobile-megamenu .icon-drop-mobile { color: var(--wc-muted) !important; }
#mobile-megamenu .menu-item.active > .icon-drop-mobile { color: var(--wc-red) !important; }

/* corps déroulé */
#mobile-megamenu .menu-dropdown .pos-sub-inner { padding: 4px 18px 14px !important; }
/* en-têtes de section → col-head (sombre + soulignement rouge) */
#mobile-megamenu .menu-dropdown .my-sub-tit,
#mobile-megamenu .menu-dropdown .column_title {
  position: relative !important;
  display: block !important;
  font-family: var(--mm-sans) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--wc-ink) !important;
  margin: 14px 0 8px !important;
  padding-bottom: 7px !important;
  border-bottom: 1px solid var(--wc-border-soft) !important;
}
#mobile-megamenu .menu-dropdown .my-sub-tit::after,
#mobile-megamenu .menu-dropdown .column_title::after {
  content: ''; position: absolute; left: 0; bottom: -1px; width: 20px; height: 2px; background: var(--wc-red);
}
#mobile-megamenu .menu-dropdown .my-sub-tit:empty,
#mobile-megamenu .menu-dropdown .column_title:empty { display: none !important; }
/* items */
#mobile-megamenu .menu-dropdown ul.ul-column { margin: 0 !important; padding: 0 !important; list-style: none !important; }
#mobile-megamenu .menu-dropdown ul.ul-column > li.submenu-item > a {
  display: block !important;
  font-family: var(--mm-sans) !important;
  font-size: 13.5px !important;
  color: var(--wc-text) !important;
  padding: 7px 0 !important;
  line-height: 1.3 !important;
}
#mobile-megamenu .menu-dropdown ul.ul-column > li.submenu-item > a:hover { color: var(--wc-red) !important; }

/* --- accordéon mobile statique (override posmegamenu-mobile.tpl) : composants charte --- */
#mobile-megamenu.mm-static-m .menu-dropdown { display: none; }   /* replié ; slideDown via activeMobile() */
#mobile-megamenu .menu-content > li.menu-item > a { padding-right: 44px !important; }
#mobile-megamenu .icon-drop-mobile {
  position: absolute; top: 12px; right: 16px; width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
#mobile-megamenu .icon-drop-mobile::before {
  content: '+'; font-family: var(--mm-sans); font-size: 21px; font-weight: 400; line-height: 1; color: var(--wc-muted);
}
#mobile-megamenu .icon-drop-mobile.open_menu::before { content: '\2212'; color: var(--wc-red); }
#mobile-megamenu .icon-drop-mobile i { display: none !important; }
/* filtres (pastilles / entonnoirs) */
#mobile-megamenu .m-filts { display: flex; flex-direction: column; gap: 1px; margin: 0 0 6px; }
#mobile-megamenu .filt-item { display: flex; align-items: center; gap: 9px; padding: 7px 2px; font-family: var(--mm-sans); font-size: 13.5px; color: var(--wc-text); }
#mobile-megamenu .filt-item:hover { color: var(--wc-ink); }
#mobile-megamenu .filt-item .fglyph { display: inline-flex; color: var(--wc-faint); flex-shrink: 0; }
#mobile-megamenu .filt-item .pdot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }
#mobile-megamenu .pdot.rouge { background: var(--wc-rouge); }
#mobile-megamenu .pdot.blanc { background: var(--wc-blanc); }
#mobile-megamenu .pdot.rose { background: var(--wc-rose); }
#mobile-megamenu .pdot.champagne { background: var(--wc-champ); }
/* cartes OFFRES (1 colonne) */
#mobile-megamenu .sel-grid { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 6px 0; }
#mobile-megamenu .sel-card { display: flex; align-items: center; gap: 12px; padding: 11px 12px; background: var(--wc-grey-50); border: 1px solid var(--wc-border); }
#mobile-megamenu .sel-fic { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: #fff; border: 1px solid var(--wc-border); color: var(--wc-red); flex-shrink: 0; }
#mobile-megamenu .sel-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
#mobile-megamenu .sel-l { font-family: var(--mm-sans); font-size: 14px; font-weight: 600; color: var(--wc-ink); }
#mobile-megamenu .sel-d { font-family: var(--mm-sans); font-size: 12px; color: var(--wc-muted); }
/* « voir plus » */
#mobile-megamenu .more { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mm-sans); font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--wc-red); padding: 8px 0 2px; }
/* familles spiritueux en 2 colonnes */
#mobile-megamenu .ul-column.m-two { display: grid !important; grid-template-columns: 1fr 1fr; gap: 0 16px; }


/* =============================================
   SLICK SLIDER BASE CSS (fix for ztl_lwc)
   ============================================= */
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -khtml-user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent
}

.slick-list {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0
}

.slick-list:focus {
  outline: none
}

.slick-list.dragging {
  cursor: pointer;
  cursor: hand
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0)
}

.slick-track {
  position: relative;
  top: 0;
  left: 0;
  display: block;
  margin-left: auto;
  margin-right: auto
}

.slick-track:before,
.slick-track:after {
  display: table;
  content: ''
}

.slick-track:after {
  clear: both
}

.slick-loading .slick-track {
  visibility: hidden
}

.slick-slide {
  display: none;
  float: left;
  height: 100%;
  min-height: 1px
}

[dir='rtl'] .slick-slide {
  float: right
}

.slick-slide img {
  display: block
}

.slick-slide.slick-loading img {
  display: none
}

.slick-slide.dragging img {
  pointer-events: none
}

.slick-initialized .slick-slide {
  display: block
}

.slick-loading .slick-slide {
  visibility: hidden
}

.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent
}

.slick-arrow.slick-hidden {
  display: none
}

.slick-dots {
  position: relative;
  bottom: 0;
  display: block;
  width: 100%;
  padding: 0;
  margin: 10px 0 0;
  list-style: none;
  text-align: center
}

.slick-dots li {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 0 5px;
  padding: 0;
  cursor: pointer
}

.slick-dots li button {
  font-size: 0;
  line-height: 0;
  display: block;
  width: 20px;
  height: 20px;
  padding: 5px;
  cursor: pointer;
  color: transparent;
  border: 0;
  outline: none;
  background: transparent
}

.slick-dots li button:before {
  font-size: 10px;
  line-height: 20px;
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  content: '•';
  text-align: center;
  opacity: .25;
  color: #000
}

.slick-dots li.slick-active button:before {
  opacity: .75;
  color: #000
}


#product .featured-products {
  display: none !important;
}

/* ===================================================
   LWC WINE SHOP — Category & Product Page Design
   Inspired by lewineclub.com
   =================================================== */

/* --- Color tokens --- */
:root {
  --lwc-wine:        #7B2D2D;
  --lwc-wine-dark:   #5C1E1E;
  --lwc-wine-light:  #9B3D3D;
  --lwc-gold:        #C9A84C;
  --lwc-cream:       #FAF9F7;
  --lwc-border:      #E5E0D8;
  --lwc-text-dark:   #2C1810;
  --lwc-text-mid:    #555555;
  --lwc-text-light:  #999999;
  --lwc-green:       #2E7D32;
}

/* ===================================================
   CATEGORY PAGE — PRODUCT CARDS
   =================================================== */

.lwc-wine-card {
  background: #fff;
  border: 1px solid var(--lwc-border);
  border-radius: 4px;
  overflow: hidden;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-shadow: none;
}

.lwc-wine-card:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,0.11);
  transform: translateY(-3px);
}

/* Image area */
.lwc-wine-card__img {
  position: relative;
  background: #F5F3EF;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lwc-wine-card__img a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.lwc-wine-card__img img {
  max-height: 100%;
  max-width: 90%;
  width: auto;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.lwc-wine-card:hover .lwc-wine-card__img img {
  transform: scale(1.05);
}

/* Discount badge */
.lwc-wine-card__discount-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--lwc-wine);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 3px;
  z-index: 2;
  line-height: 1.4;
}

/* Product flags */
.lwc-wine-card__flags {
  position: absolute;
  top: 10px;
  left: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.lwc-wine-card__flags li {
  display: inline-block;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-radius: 2px;
  background: var(--lwc-gold);
  color: #fff;
}

.lwc-wine-card__flags li.new { background: #1976D2; }
.lwc-wine-card__flags li.on-sale { background: var(--lwc-wine); }

/* Quick view */
.lwc-wine-card .quick-view {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.2s ease;
  white-space: nowrap;
  z-index: 3;
}

.lwc-wine-card:hover .quick-view {
  opacity: 1;
}

.lwc-wine-card .quick-view .quick_view {
  background: rgba(255,255,255,0.93);
  color: var(--lwc-wine);
  padding: 5px 14px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--lwc-border);
  display: inline-block;
}

/* Card body */
.lwc-wine-card__body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.lwc-wine-card__body .inner_desc {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Producer */
.lwc-wine-card__producer {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--lwc-text-light);
  margin-bottom: 4px;
  font-weight: 600;
}

.lwc-wine-card__producer a {
  color: var(--lwc-wine);
  text-decoration: none;
}

.lwc-wine-card__producer a:hover {
  text-decoration: underline;
}

/* Product name */
.lwc-wine-card__name {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 8px;
  color: var(--lwc-text-dark);
}

.lwc-wine-card__name a {
  color: inherit;
  text-decoration: none;
}

.lwc-wine-card__name a:hover {
  color: var(--lwc-wine);
}

/* Price */
.lwc-wine-card__price {
  margin: 0 0 10px;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
}

.lwc-wine-card__old-price,
.lwc-wine-card__price .regular-price {
  font-size: 12px !important;
  color: var(--lwc-text-light) !important;
  text-decoration: line-through !important;
  font-weight: 400 !important;
}

.lwc-wine-card__current-price,
.lwc-wine-card__price .price {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--lwc-wine) !important;
}

/* Add to cart area */
.lwc-wine-card__actions {
  margin-top: auto;
  padding-top: 8px;
}

.lwc-wine-card__cart-btn .product-add-to-cart {
  margin: 0;
}

.lwc-wine-card__cart-btn .button,
.lwc-wine-card__cart-btn .add-to-cart,
.lwc-wine-card__cart-btn button {
  width: 100% !important;
  display: block !important;
  background: var(--lwc-wine) !important;
  color: #fff !important;
  border: none !important;
  padding: 9px 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: 3px !important;
  cursor: pointer !important;
  transition: background 0.2s ease !important;
  text-align: center !important;
  letter-spacing: 0.2px;
  box-shadow: none !important;
}

.lwc-wine-card__cart-btn .button:hover,
.lwc-wine-card__cart-btn .add-to-cart:hover,
.lwc-wine-card__cart-btn button:hover {
  background: var(--lwc-wine-dark) !important;
  color: #fff !important;
}

.lwc-wine-card__cart-btn .ajax_add_to_cart_button.disabled {
  background: #ccc !important;
  cursor: not-allowed !important;
}

/* Extra buttons */
.lwc-wine-card__extra-btns {
  display: flex;
  gap: 5px;
  margin-top: 6px;
  justify-content: center;
  flex-wrap: wrap;
}

.lwc-wine-card__extra-btns a,
.lwc-wine-card__extra-btns > span,
.lwc-wine-card__extra-btns button {
  font-size: 11px;
  color: var(--lwc-text-mid);
  background: none;
  border: 1px solid var(--lwc-border);
  padding: 4px 10px;
  border-radius: 3px;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
  display: inline-block;
}

.lwc-wine-card__extra-btns a:hover,
.lwc-wine-card__extra-btns button:hover {
  border-color: var(--lwc-wine);
  color: var(--lwc-wine);
  text-decoration: none;
}

/* Stock badge */
.lwc-wine-card__stock {
  margin-top: 8px;
  border-top: 1px solid var(--lwc-border);
  padding-top: 6px;
}

.lwc-stock-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
}

.lwc-stock-badge--in {
  color: var(--lwc-green);
}

.lwc-stock-badge--out {
  color: #c62828;
}

.lwc-stock-badge .material-icons {
  font-size: 14px;
  vertical-align: middle;
}


/* ===================================================
   PRODUCT DETAIL PAGE
   =================================================== */

.lwc-product-detail {
  padding: 30px 0 20px;
}

/* Gallery column */
.lwc-product-gallery {
  padding-right: 30px;
}

/* Info column */
.lwc-product-info {
  padding-left: 10px;
}

/* Producer */
.lwc-pd-producer {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  margin-bottom: 6px;
}

.lwc-pd-producer a {
  color: var(--lwc-wine);
  text-decoration: none;
}

.lwc-pd-producer a:hover {
  text-decoration: underline;
}

/* Title */
.lwc-pd-title {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--lwc-text-dark) !important;
  line-height: 1.3 !important;
  margin-bottom: 6px !important;
}

/* Reference */
.lwc-pd-reference {
  font-size: 12px;
  color: var(--lwc-text-light);
  margin-bottom: 14px;
}

/* Price block */
.lwc-pd-price-block {
  background: var(--lwc-cream);
  border: 1px solid var(--lwc-border);
  border-radius: 4px;
  padding: 14px 16px;
  margin-bottom: 18px;
}

.lwc-pd-price-block .product-prices {
  margin: 0;
}

.lwc-pd-price-block .product-discount .regular-price {
  font-size: 14px !important;
  color: var(--lwc-text-light) !important;
  text-decoration: line-through !important;
  font-weight: 400 !important;
}

.lwc-pd-price-block .current-price-value {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: var(--lwc-wine) !important;
}

.lwc-pd-price-block .discount,
.lwc-pd-price-block .discount-percentage,
.lwc-pd-price-block .discount-amount {
  display: inline-block !important;
  background: var(--lwc-wine) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
  border-radius: 3px !important;
  margin-left: 8px;
  vertical-align: middle;
}

.lwc-pd-price-block .tax-shipping-delivery-label {
  font-size: 12px;
  color: var(--lwc-text-light);
  margin-top: 4px;
}

.lwc-pd-price-block .product-without-taxes {
  font-size: 12px;
  color: var(--lwc-text-light);
}

/* Variants */
.lwc-pd-variants .product-variants-item {
  margin-bottom: 14px;
}

.lwc-pd-variants .control-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--lwc-text-dark);
  margin-bottom: 7px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.lwc-pd-variants select.form-control-select {
  border: 1.5px solid var(--lwc-border) !important;
  border-radius: 3px !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
  color: var(--lwc-text-dark) !important;
  background: #fff !important;
  min-width: 200px;
  cursor: pointer;
  transition: border-color 0.2s;
  box-shadow: none !important;
}

.lwc-pd-variants select.form-control-select:focus {
  border-color: var(--lwc-wine) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(123,45,45,0.12) !important;
}

.lwc-pd-variants .input-container {
  margin-right: 6px;
  margin-bottom: 6px;
}

.lwc-pd-variants .input-radio {
  display: none;
}

.lwc-pd-variants .input-radio + .radio-label {
  display: inline-block;
  padding: 6px 14px;
  border: 1.5px solid var(--lwc-border);
  border-radius: 3px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--lwc-text-dark);
  user-select: none;
}

.lwc-pd-variants .input-radio:checked + .radio-label {
  border-color: var(--lwc-wine);
  background: var(--lwc-wine);
  color: #fff;
}

.lwc-pd-variants .input-radio + .radio-label:hover {
  border-color: var(--lwc-wine);
  color: var(--lwc-wine);
}

/* Color swatches */
.lwc-pd-variants .input-color {
  display: none;
}

.lwc-pd-variants .input-color + .color {
  display: inline-block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid var(--lwc-border);
  transition: border-color 0.2s;
}

.lwc-pd-variants .input-color:checked + .color {
  border-color: var(--lwc-wine);
  box-shadow: 0 0 0 2px var(--lwc-wine);
}

/* Add to cart block */
.lwc-pd-add-to-cart .product-add-to-cart {
  background: var(--lwc-cream);
  border: 1px solid var(--lwc-border);
  border-radius: 4px;
  padding: 16px;
  margin-bottom: 14px;
}

.lwc-pd-add-to-cart .control-label {
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: var(--lwc-text-dark) !important;
  margin-bottom: 10px;
  display: block;
}

.lwc-pd-add-to-cart .product-quantity {
  display: flex;
  gap: 10px;
  align-items: stretch;
  flex-wrap: wrap;
}

.lwc-pd-add-to-cart .qty {
  display: flex;
  align-items: center;
}

.lwc-pd-add-to-cart .qty input#quantity_wanted {
  width: 72px !important;
  border: 1.5px solid var(--lwc-border) !important;
  border-radius: 3px !important;
  padding: 9px 8px !important;
  font-size: 16px !important;
  text-align: center;
  font-weight: 600;
  box-shadow: none !important;
  color: var(--lwc-text-dark);
}

.lwc-pd-add-to-cart .qty input#quantity_wanted:focus {
  border-color: var(--lwc-wine) !important;
  outline: none !important;
}

.lwc-pd-add-to-cart .add {
  flex: 1;
  min-width: 150px;
}

.lwc-pd-add-to-cart .add .add-to-cart,
.lwc-pd-add-to-cart .add button[data-button-action="add-to-cart"] {
  width: 100% !important;
  height: 100% !important;
  background: var(--lwc-wine) !important;
  color: #fff !important;
  border: none !important;
  padding: 11px 18px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border-radius: 3px !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
  letter-spacing: 0.3px;
  box-shadow: none !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.lwc-pd-add-to-cart .add .add-to-cart:hover,
.lwc-pd-add-to-cart .add button[data-button-action="add-to-cart"]:hover {
  background: var(--lwc-wine-dark) !important;
}

.lwc-pd-add-to-cart .buy {
  width: 100%;
  margin-top: 8px;
}

.lwc-pd-add-to-cart .buy .buy-now,
.lwc-pd-add-to-cart .buy button[data-button-action="buy-now"] {
  width: 100% !important;
  background: transparent !important;
  color: var(--lwc-wine) !important;
  border: 1.5px solid var(--lwc-wine) !important;
  padding: 9px 18px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: 3px !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  box-shadow: none !important;
  display: block;
  text-align: center;
}

.lwc-pd-add-to-cart .buy .buy-now:hover,
.lwc-pd-add-to-cart .buy button[data-button-action="buy-now"]:hover {
  background: var(--lwc-wine) !important;
  color: #fff !important;
}

/* Cart action hooks */
.lwc-pd-add-to-cart .cart_button {
  width: 100%;
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}

/* Availability */
#product-availability {
  font-size: 13px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 4px;
}

#product-availability .product-available { color: var(--lwc-green); }
#product-availability .product-unavailable { color: #c62828; }
#product-availability .product-last-items { color: #f57c00; }

/* Reassurance */
.lwc-pd-reassurance {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--lwc-border);
}

/* Short description */
.lwc-pd-short-desc {
  font-size: 14px;
  line-height: 1.65;
  color: var(--lwc-text-mid);
  margin-bottom: 16px;
}

/* Tabs section */
.lwc-pd-tabs {
  margin-top: 40px;
  border-top: 2px solid var(--lwc-border);
  padding-top: 28px;
}

.lwc-pd-tabs .tabs .nav-tabs {
  border-bottom: 2px solid var(--lwc-border);
  margin-bottom: 24px;
}

.lwc-pd-tabs .nav-link {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--lwc-text-mid) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 10px 22px !important;
  border: none !important;
  border-bottom: 2.5px solid transparent !important;
  margin-bottom: -2px !important;
  border-radius: 0 !important;
  background: transparent !important;
  transition: color 0.2s;
}

.lwc-pd-tabs .nav-link.active,
.lwc-pd-tabs .nav-link:hover {
  color: var(--lwc-wine) !important;
}

.lwc-pd-tabs .nav-link.active {
  border-bottom-color: var(--lwc-wine) !important;
}

.lwc-pd-tabs .product-description {
  font-size: 14px;
  line-height: 1.7;
  color: var(--lwc-text-mid);
}

/* ===================================================
   RESPONSIVE
   =================================================== */

@media (max-width: 991px) {
  .lwc-product-gallery {
    padding-right: 15px;
    margin-bottom: 28px;
  }
  .lwc-product-info {
    padding-left: 15px;
  }
}

@media (max-width: 767px) {
  .lwc-pd-title {
    font-size: 19px !important;
  }
  .lwc-pd-price-block .current-price-value {
    font-size: 24px !important;
  }
  .lwc-pd-add-to-cart .product-quantity {
    flex-direction: column;
    align-items: stretch;
  }
  .lwc-pd-add-to-cart .qty {
    justify-content: center;
  }
  .lwc-pd-add-to-cart .qty input#quantity_wanted {
    width: 100% !important;
  }
  .lwc-pd-add-to-cart .add {
    min-width: unset;
  }
  .lwc-product-detail {
    padding: 16px 0;
  }
}

@media (max-width: 575px) {
  .lwc-wine-card__body {
    padding: 10px;
  }
  .lwc-wine-card__name {
    font-size: 12px;
  }
  .lwc-wine-card__current-price,
  .lwc-wine-card__price .price {
    font-size: 15px !important;
  }
  .lwc-pd-tabs {
    margin-top: 24px;
  }
}

/* Custom styles to match the products sort order dropdown to the legacy theme */
#js-product-list-top .sort-by-row .products-sort-order {
  max-width: 18.75rem !important;
}

#js-product-list-top .sort-by-row .products-sort-order .select-title {
  border: 1.5px solid #000 !important;
  padding: 5px 15px !important;
  line-height: 1.5rem !important;
  margin: 0 !important;
  border-radius: 5px !important;
  color: #000 !important;
  box-shadow: none !important;
  font-weight: 500 !important;
  background-color: #fff !important;
  width: 100% !important;
  text-align: left !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

#js-product-list-top .sort-by-row .products-sort-order .dropdown-menu {
  background: #ffffff !important;
  border: 1px solid #ebebeb !important;
  border-radius: 3px !important;
  right: 0px !important;
  left: 0px !important;
  width: auto !important;
  box-shadow: none !important;
  max-width: 100% !important;
  font-size: 0.875rem !important;
  margin-top: 2px !important;
  padding: 0px !important;
}

#js-product-list-top .sort-by-row .products-sort-order .dropdown-menu .select-list {
  font-size: inherit !important;
  padding: 7px 15px !important;
  color: #253237 !important;
  display: block !important;
}

#js-product-list-top .sort-by-row .products-sort-order .dropdown-menu .select-list:hover {
  color: #ffffff !important;
  background-color: var(--hovercolor) !important;
  text-decoration: none !important;
}

/* ===== GC — corrections front LWC (début) ===== */

/* Lot 1 : bouton Ajouter au panier — couleur de marque LWC (#AC0505) */
.product-add-to-cart .add-to-cart,
.product-actions .add-to-cart,
.add-to-cart {
    background-color: #AC0505 !important;
    border-color: #AC0505 !important;
    color: #fff !important;
    transition: background-color .15s ease, transform .05s ease;
}
.product-add-to-cart .add-to-cart:hover,
.product-actions .add-to-cart:hover,
.add-to-cart:hover {
    background-color: #8A0404 !important;
    border-color: #8A0404 !important;
    color: #fff !important;
}
.product-add-to-cart .add-to-cart:active,
.product-actions .add-to-cart:active,
.add-to-cart:active {
    background-color: #6E0303 !important;
    border-color: #6E0303 !important;
    transform: translateY(1px);
}

/* Lot 2 : typo fiche produit — Archivo Narrow (titres) + Georgia (texte), ref ancien site lewineclub.com */
/* Classes confirmées dans product_layout1.tpl et product-prices.tpl */

/* Titre produit h1 — .h1.namne_details */
.product-layout1 h1.namne_details,
.product-layout1 .h1.namne_details {
    font-family: "Archivo Narrow", sans-serif !important;
    font-weight: 500 !important;          /* maquette : 500 */
    font-size: 28px !important;
    color: #373737 !important;
    line-height: 1.2 !important;
    letter-spacing: .005em !important;
    /* P5 : pleine largeur, wrap libre sur 2+ lignes (plus de bride max-width) */
    max-width: none !important;
    width: 100% !important;
    display: block !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    margin-bottom: 2px !important;
}

/* Référence produit — .product-reference label + span */
.product-layout1 .product-reference,
.product-layout1 .product-reference .label,
.product-layout1 .product-reference span {
    font-family: Georgia, "Times New Roman", serif !important;
}

/* Labels et valeurs du bloc caractéristiques — .my-product-features */
.my-product-features .features-title,
.my-product-features .feature-label,
.my-product-features .feature-value {
    font-family: Georgia, "Times New Roman", serif !important;
}

/* Description produit */
.my-product-description .description-content {
    font-family: Georgia, "Times New Roman", serif !important;
}

/* Prix — Archivo Narrow, lisible et net */
.product-layout1 .product-prices .current-price-value,
.product-layout1 .product-price {
    font-family: "Archivo Narrow", sans-serif !important;
    font-weight: 600 !important;
}

/* -------------------------------------------------------
   Lot 3 : intégration maquette fiche produit LWC
   REWRITE PASSE 3 (Opus) — bataille de spécificité gagnée
   Chaque règle bat sa concurrente theme.css/POS (sélecteur profond + !important).
   ------------------------------------------------------- */

/* GC — Tokens LWC GLOBAUX au :root. Ils n'étaient définis QUE dans .product-layout1 (fiche
   produit) → indéfinis sur #category (catégorie) après retrait de l'inline <style>, d'où tous
   les var(--wc-red) transparents (CTA, trait rouge, chips…). Valeurs = maquette categorie-lwc/styles.css. */
:root {
  --wc-red: #AC0505;
  --wc-red-dark: #8d0404;
  --wc-ink: #373737;
  --wc-text: #4a4a4a;
  --wc-muted: #8a8a8a;
  --wc-faint: #aaaaaa;
  --wc-border: #e5e5e5;
  --wc-border-soft: #ededed;
  --wc-grey-50: #fafafa;
  --wc-grey-100: #f5f5f5;
  --wc-wine: #6e1414;
  --wc-wine-dot: #6e1414;
}

/* Palette + base typo (scoped .product-layout1) */
.product-layout1 {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 15px;
    line-height: 1.6;
    color: #4a4a4a;
    -webkit-font-smoothing: antialiased;
    --wc-ink:         #373737;
    --wc-text:        #4a4a4a;
    --wc-muted:       #8a8a8a;
    --wc-faint:       #aaaaaa;
    --wc-red:         #AC0505;
    --wc-border:      #e5e5e5;
    --wc-border-soft: #ededed;
    --wc-grey-50:     #fafafa;
    --wc-grey-100:    #f5f5f5;
    --wc-wine-dot:    #6e1414;
}

/* === Région (catégorie, breadcrumb count-3) === */
.product-layout1 .product-category-region {
    font-family: "Archivo Narrow", sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--wc-muted);
    margin: 0 0 4px;
    font-size: 13px !important;
    display: block;
}

/* === Badge Bio === */
.product-layout1 .product-bio-badge {
    display: inline-block;
    font-family: "Archivo Narrow", sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #2f6b2f;
    background: #eef5ee;
    border: 1px solid #d8e7d8;
    border-radius: 3px;
    padding: 4px 9px;
    margin: 6px 0 8px;
}

/* === Stock — point vert gauche + texte + quantité, aligné À GAUCHE, PAS de barre ===
   CONCURRENT : theme.css:24365 .product-layout1 .my-quantities {display:inline-flex;
   background:#e8f5e9; border:1px solid #a5d6a7; border-radius:20px; padding:4px 12px}.
   ON GAGNE : sélecteur 0,3,0 + !important. width:fit-content + margin-right:auto = collé à gauche.
   La pastille verte est un <span class="stock-dot"> stylé en cercle (indépendant de FontAwesome). */
.product-layout1 .product-quantities.my-quantities {
    display: flex !important;
    width: -moz-fit-content !important;
    width: fit-content !important;
    max-width: 100% !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 6px auto 2px 0 !important;   /* margin-right:auto → ancré à gauche */
    text-align: left !important;
    font-family: "Archivo Narrow", sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--wc-muted) !important;
}
/* pastille verte garantie (cercle CSS, pas de dépendance FontAwesome) */
.product-layout1 .my-quantities .stock-dot {
    display: inline-block !important;
    width: 9px !important;
    height: 9px !important;
    min-width: 9px !important;
    flex: 0 0 9px !important;
    border-radius: 50% !important;
    background: #2f9b4a !important;
    box-shadow: 0 0 0 3px rgba(47,155,74,.14) !important;
    margin: 0 !important;
}
.product-layout1 .my-quantities .stock-label {
    color: var(--wc-ink) !important;
    font-weight: 600 !important;
}
.product-layout1 .my-quantities .stock-count {
    color: var(--wc-muted) !important;
    font-weight: 500 !important;
}
/* fallback si l'icône FA est encore rendue (autres branches) */
.product-layout1 .my-quantities i.fa-check-circle {
    color: #2f9b4a !important;
    font-size: 10px !important;
    line-height: 1 !important;
}
.product-layout1 .my-quantities i.fa-clock-o {
    color: var(--wc-muted) !important;
    font-size: 12px !important;
    line-height: 1 !important;
}

/* === Bloc prix — ligne unique baseline (inline-block, robuste, sans display:contents) ===
   CONCURRENTS : theme.css:11691 .product-price{color:var(--hovercolor)} (rose !),
   theme.css:11880 .product-prices div{margin-bottom:.625rem},
   theme.css:18223 .has-discount .discount{background:#cf292b;color:#fff} (badge rouge plein).
   ON GAGNE en inline-block + baseline + !important. */
.product-layout1 .product-prices {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    column-gap: 12px !important;
    row-gap: 0 !important;
    margin: 4px 0 0 !important;
    line-height: 1.1 !important;
}
.product-layout1 .product-prices > div {
    margin-bottom: 0 !important;
}
/* prix barré (promo) — flex item, gap géré par column-gap du parent */
.product-layout1 .product-prices .product-discount {
    display: inline-flex !important;
    align-items: baseline !important;
    flex: 0 0 auto !important;
    vertical-align: baseline !important;
    color: var(--wc-faint) !important;
    margin: 0 !important;
    padding: 0 !important;
}
.product-layout1 .product-prices .product-discount .regular-price {
    font-family: "Archivo Narrow", sans-serif !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    color: var(--wc-faint) !important;
    text-decoration: line-through !important;
    margin: 0 !important;
}
/* conteneur prix principal — flex item */
.product-layout1 .product-prices .product-price {
    display: inline-flex !important;
    align-items: baseline !important;
    flex: 0 0 auto !important;
    vertical-align: baseline !important;
    margin: 0 !important;
    color: var(--wc-ink) !important;
    font-weight: 600 !important;
}
.product-layout1 .product-prices .current-price {
    display: inline-flex !important;
    align-items: baseline !important;
    vertical-align: baseline !important;
}
/* prix TTC en évidence */
.product-layout1 .product-prices .current-price-value {
    font-family: "Archivo Narrow", sans-serif !important;
    font-size: 34px !important;
    font-weight: 600 !important;
    color: var(--wc-ink) !important;
    letter-spacing: .01em !important;
    line-height: 1 !important;
    vertical-align: baseline !important;
}
/* tag promo -35% : pastille rose clair (PAS le rouge plein du thème) */
.product-layout1 .product-prices .discount,
.product-layout1 .product-prices .discount-percentage,
.product-layout1 .product-prices .discount-amount {
    display: inline-block !important;
    font-family: "Archivo Narrow", sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--wc-red) !important;
    background: #fbeaea !important;
    border: none !important;
    border-radius: 3px !important;
    padding: 3px 8px !important;
    margin: 0 0 0 10px !important;
    letter-spacing: .02em !important;
    line-height: 1 !important;
    text-transform: none !important;
    vertical-align: 7px !important;
}
/* label TTC → INLINE après le prix (flex item, même ligne), discret */
.product-layout1 .product-prices .tax-shipping-delivery-label {
    display: inline-flex !important;
    align-items: baseline !important;
    flex: 0 0 auto !important;
    width: auto !important;
    font-family: "Archivo Narrow", sans-serif !important;
    font-size: 14px !important;
    color: var(--wc-muted) !important;
    margin: 0 !important;
    align-self: baseline !important;
}
/* si une info livraison s'y trouve, elle passe sous le prix (pleine largeur) */
.product-layout1 .product-prices .tax-shipping-delivery-label .delivery-information {
    flex: 0 0 100% !important;
    display: block !important;
    font-size: 12px !important;
    margin-top: 4px !important;
}
.product-layout1 .product-prices .product-unit-price,
.product-layout1 .product-prices .product-without-taxes,
.product-layout1 .product-prices .product-pack-price,
.product-layout1 .product-prices .price-ecotax {
    display: block !important;
    width: 100% !important;
    font-size: 12px !important;
    color: var(--wc-muted) !important;
    margin: 2px 0 0 !important;
}

/* === Prix HT (sous le TTC, discret) === */
.product-layout1 .product-price-ht {
    font-family: "Archivo Narrow", sans-serif !important;
    font-size: 14px !important;
    color: var(--wc-muted) !important;
    margin: 2px 0 0 !important;
    letter-spacing: .02em !important;
}

/* === Séparateur structurel (= .fp-divider maquette) === */
.product-layout1 .product-price-divider {
    height: 1px !important;
    background: var(--wc-border) !important;
    margin: 10px 0 !important;
    border: none !important;
}

/* === Chips Millésime / Couleur / Contenance === */
.product-layout1 .product-feature-chips {
    display: flex !important;
    align-items: flex-end !important;
    gap: 30px !important;
    flex-wrap: wrap !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    border: none !important;
}
.product-layout1 .product-feature-chips .fp-opt {
    display: flex !important;
    flex-direction: column !important;
}
.product-layout1 .product-feature-chips .fp-opt-label {
    font-family: "Archivo Narrow", sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    color: var(--wc-muted) !important;
    margin-bottom: 7px !important;
    font-size: 12px !important;
}
.product-layout1 .product-feature-chips .fp-chip {
    display: inline-flex !important;
    align-items: center !important;
    height: 40px !important;
    font-family: "Archivo Narrow", sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--wc-ink) !important;
    border: 1px solid var(--wc-border) !important;
    border-radius: 4px !important;
    padding: 0 14px !important;
    background: var(--wc-grey-50) !important;
    white-space: nowrap !important;
}
/* pastille couleur : VERROUILLÉE 13px (flex:0 0 = pas d'étirement) */
.product-layout1 .product-feature-chips .fp-color-dot {
    display: inline-block !important;
    width: 13px !important;
    height: 13px !important;
    min-width: 13px !important;
    max-width: 13px !important;
    min-height: 13px !important;
    max-height: 13px !important;
    flex: 0 0 13px !important;
    border-radius: 50% !important;
    background: var(--wc-wine-dot, #6e1414) !important;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.18) !important;
    margin: 0 0 0 8px !important;
    padding: 0 !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
}
/* Teinte de la pastille selon le type de vin (classe posée dans le TPL).
   Spécificité 0,4,0 + !important pour battre la couleur de base ci-dessus. */
.product-layout1 .product-feature-chips .fp-color-dot.fp-color-dot--blanc        { background: #E8DCC0 !important; }
.product-layout1 .product-feature-chips .fp-color-dot.fp-color-dot--rose         { background: #E8A9A0 !important; }
.product-layout1 .product-feature-chips .fp-color-dot.fp-color-dot--rouge        { background: #7B2D2D !important; }
.product-layout1 .product-feature-chips .fp-color-dot.fp-color-dot--effervescent { background: #E6D9A8 !important; }
.product-layout1 .product-feature-chips .fp-color-dot.fp-color-dot--default      { background: #9a9a9a !important; }

/* === Correction 1 : masquer le bandeau info "Votre panier contient X de ces produits" ===
   C'est une notification de niveau INFO (bleue) rendue dans #notifications (notifications.tpl).
   On masque UNIQUEMENT l'info — les erreurs critiques (danger) et avertissements (warning)
   restent visibles. Spécificité ID (#notifications) → gagne sans peine. */
#notifications .alert-info,
#notifications article[data-alert="info"],
#notifications .alert.alert-info {
    display: none !important;
}

/* === Stepper quantité + bouton (form INTACT, CSS seul) ===
   CONCURRENT : theme.css:8664 .bootstrap-touchspin{float:left;width:auto},
   input{width:3rem;height:2.5rem;float:left}, btn vertical floats.
   ON GAGNE : boîte bordée 52px, input large, flèches à droite avec séparateur. */
.product-layout1 .product-add-to-cart .control-label {
    display: none !important;
}
.product-layout1 .product-quantity {
    display: flex !important;
    align-items: stretch !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
    margin-top: 10px !important;
}
.product-layout1 .product-quantity .qty {
    display: inline-flex !important;
    align-items: stretch !important;
    flex: 0 0 auto !important;
    height: 52px !important;
    border: 1px solid var(--wc-border) !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}
.product-layout1 .qty input#quantity_wanted,
.product-layout1 .qty input.input-group,
.product-layout1 .bootstrap-touchspin input.form-control {
    float: none !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 50px !important;
    border: none !important;
    outline: none !important;
    text-align: center !important;
    font-family: "Archivo Narrow", sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--wc-ink) !important;
    background: #fff !important;
    padding: 0 !important;
    box-shadow: none !important;
    -moz-appearance: textfield !important;
}
.product-layout1 .qty input#quantity_wanted::-webkit-outer-spin-button,
.product-layout1 .qty input#quantity_wanted::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}
/* === Stepper HORIZONTAL "− [qty] +" via réorganisation CSS du touchspin ===
   On garde le touchspin natif (multiples/min/AJAX intacts) et on réordonne ses
   propres boutons : moins à GAUCHE, input au centre, plus à DROITE (flex order).
   Le wrapper vertical est aplati (display:contents) pour que ses 2 boutons
   deviennent frères flex de .bootstrap-touchspin. */
.product-layout1 .qty .bootstrap-touchspin {
    display: flex !important;
    align-items: stretch !important;
    float: none !important;
    width: auto !important;
    height: 50px !important;
    border: none !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
}
.product-layout1 .qty .bootstrap-touchspin .input-group-btn-vertical {
    display: contents !important;
}
/* input au centre */
.product-layout1 .qty .bootstrap-touchspin input#quantity_wanted,
.product-layout1 .qty .bootstrap-touchspin input.input-group {
    order: 1 !important;
}
/* − (down) à gauche, + (up) à droite */
.product-layout1 .qty .bootstrap-touchspin-down { order: 0 !important; border-right: 1px solid var(--wc-border) !important; }
.product-layout1 .qty .bootstrap-touchspin-up   { order: 2 !important; border-left: 1px solid var(--wc-border) !important; }
.product-layout1 .qty .btn.bootstrap-touchspin-up,
.product-layout1 .qty .btn.bootstrap-touchspin-down {
    flex: 0 0 38px !important;
    width: 38px !important;
    height: 50px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border-top: none !important;
    border-bottom: none !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: var(--wc-ink) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    cursor: pointer !important;
}
.product-layout1 .qty .btn.bootstrap-touchspin-up:hover,
.product-layout1 .qty .btn.bootstrap-touchspin-down:hover {
    background: var(--wc-grey-100) !important;
}
/* glyphes : remplace les chevrons material par − et + nets */
.product-layout1 .qty .bootstrap-touchspin .touchspin-up,
.product-layout1 .qty .bootstrap-touchspin .touchspin-down {
    font-size: 0 !important;
    line-height: 0 !important;
    width: auto !important;
    height: auto !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
}
.product-layout1 .qty .bootstrap-touchspin .touchspin-down::after {
    content: '\2212' !important;            /* signe moins − */
    font-family: "Archivo Narrow", sans-serif !important;
    font-size: 20px !important;
    line-height: 1 !important;
    color: var(--wc-ink) !important;
}
.product-layout1 .qty .bootstrap-touchspin .touchspin-up::after {
    content: '+' !important;
    font-family: "Archivo Narrow", sans-serif !important;
    font-size: 20px !important;
    line-height: 1 !important;
    color: var(--wc-ink) !important;
}
/* bouton Ajouter au panier — prend le reste de la largeur, même hauteur */
.product-layout1 .product-quantity .add {
    flex: 1 1 auto !important;
    min-width: 220px !important;
    margin: 0 !important;
}
.product-layout1 .product-quantity .add .add-to-cart {
    height: 52px !important;
    width: 100% !important;
    font-family: "Archivo Narrow", sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    border-radius: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}
/* pas d'icône panier dans le bouton (maquette = texte seul) */
.product-layout1 .product-quantity .add .add-to-cart .material-icons {
    display: none !important;
}
/* wishlist/compare (displayAfterButtonCart) → ligne suivante, discrets */
.product-layout1 .product-quantity .cart_button {
    flex: 0 0 100% !important;
    margin-top: 12px !important;
}
/* message dispo / quantité min sous le bloc achat */
.product-layout1 #product-availability,
.product-layout1 .product-minimal-quantity {
    display: block !important;
    margin-top: 10px !important;
    font-family: "Archivo Narrow", sans-serif !important;
    font-size: 13px !important;
    color: var(--wc-muted) !important;
}

/* === Grille features haute masquée (contenu dans l'onglet Fiche technique) === */
.product-layout1 .my-product-features {
    display: none !important;
}

/* === Réassurance (blockreassurance via hook displayReassurance) === */
.product-layout1 .block-reassurance {
    margin-top: 30px !important;
}
.product-layout1 .block-reassurance ul,
.product-layout1 .block-reassurance .block-reassurance-item-list {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    border: 1px solid var(--wc-border) !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.product-layout1 .block-reassurance ul li,
.product-layout1 .block-reassurance .block-reassurance-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 16px 18px !important;
    background: var(--wc-grey-50) !important;
    border-right: 1px solid var(--wc-border) !important;
    border-bottom: none !important;
    margin: 0 !important;
    font-family: "Archivo Narrow", sans-serif !important;
    font-size: 12.5px !important;
    line-height: 1.3 !important;
    color: var(--wc-ink) !important;
    font-weight: 500 !important;
}
.product-layout1 .block-reassurance ul li:last-child,
.product-layout1 .block-reassurance .block-reassurance-item:last-child {
    border-right: none !important;
}
.product-layout1 .block-reassurance img,
.product-layout1 .block-reassurance svg {
    width: 22px !important;
    height: 22px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
}
.product-layout1 .block-reassurance span {
    margin: 0 !important;
}

/* === Onglets (product-tab.tpl horizontal) ===
   CONCURRENT : theme.css:11939 .tabs{padding:1.25rem 1.875rem;background:#fff},
   .tabs .nav-tabs{border-bottom:#f6f6f6 2px solid}, .nav-link{color:#7a7a7a}. */
.product-tabs-section .tabs {
    padding: 0 !important;
    margin-top: 10px !important;
    background: transparent !important;
}
.product-tabs-section .tabs .nav-tabs {
    display: flex !important;
    justify-content: center !important;
    gap: 38px !important;
    border: none !important;
    border-bottom: 1px solid var(--wc-border) !important;
    margin-bottom: 34px !important;
    padding: 0 !important;
    background: none !important;
}
.product-tabs-section .tabs .nav-tabs .nav-item {
    margin: 0 !important;
}
.product-tabs-section .tabs .nav-tabs .nav-link {
    position: relative !important;
    font-family: "Archivo Narrow", sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    color: var(--wc-muted) !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 2px 16px !important;
    transition: color .18s !important;
}
.product-tabs-section .tabs .nav-tabs .nav-link:hover {
    color: var(--wc-ink) !important;
    background: none !important;
    border-color: transparent !important;
}
.product-tabs-section .tabs .nav-tabs .nav-link.active {
    color: var(--wc-ink) !important;
    background: none !important;
    border: none !important;
}
.product-tabs-section .tabs .nav-tabs .nav-link.active::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -1px !important;
    height: 2px !important;
    background: var(--wc-red) !important;
}
.product-tabs-section .tabs .tab-content {
    max-width: 760px !important;
    margin: 0 auto !important;
    padding: 0 16px !important;
    border: none !important;            /* retire le cadre (theme:18808 .tabs .tab-content) */
    box-shadow: none !important;
    background: transparent !important;
}
.product-tabs-section .product-description,
.product-tabs-section .product-description p {
    font-family: Georgia, "Times New Roman", serif !important;
    color: var(--wc-text) !important;
    font-size: 15.5px !important;
    line-height: 1.75 !important;
    margin: 0 0 14px !important;
}
.product-tabs-section .product-description p:first-child {
    color: var(--wc-ink) !important;
}

/* === Fiche technique : dl.data-sheet → tableau 2 colonnes alternées === */
.product-tabs-section .data-sheet {
    display: grid !important;
    grid-template-columns: 42% 58% !important;
    width: 100% !important;
    max-width: 720px !important;
    margin: 0 auto !important;
    border: 1px solid var(--wc-border) !important;
    border-radius: 6px !important;
    overflow: hidden !important;
}
.product-tabs-section .data-sheet .name,
.product-tabs-section .data-sheet .value {
    font-family: "Archivo Narrow", sans-serif !important;
    font-size: 14px !important;
    padding: 11px 16px !important;
    border-bottom: 1px solid var(--wc-border-soft) !important;
    margin: 0 !important;
}
.product-tabs-section .data-sheet .name:last-of-type,
.product-tabs-section .data-sheet .value:last-of-type {
    border-bottom: none !important;
}
.product-tabs-section .data-sheet .name:nth-of-type(odd),
.product-tabs-section .data-sheet .value:nth-of-type(odd) {
    background: var(--wc-grey-100) !important;
}
.product-tabs-section .data-sheet .name:nth-of-type(even),
.product-tabs-section .data-sheet .value:nth-of-type(even) {
    background: #fff !important;
}
.product-tabs-section .data-sheet .name {
    color: var(--wc-muted) !important;
    font-weight: 500 !important;
}
.product-tabs-section .data-sheet .value {
    color: var(--wc-ink) !important;
    font-weight: 600 !important;
}
.product-tabs-section .product-features > .h6,
.product-tabs-section .product-features > p.h6 {
    font-family: "Archivo Narrow", sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    color: var(--wc-muted) !important;
    margin-bottom: 14px !important;
}

/* === Responsive — breakpoints Bootstrap (lg=992, md=768) === */
@media (max-width: 991px) {
    .product-layout1 .product-feature-chips { gap: 18px 20px !important; }
    .product-layout1 .block-reassurance ul,
    .product-layout1 .block-reassurance .block-reassurance-item-list {
        grid-template-columns: 1fr !important;
    }
    .product-layout1 .block-reassurance ul li,
    .product-layout1 .block-reassurance .block-reassurance-item {
        border-right: none !important;
        border-bottom: 1px solid var(--wc-border) !important;
    }
    .product-layout1 .block-reassurance ul li:last-child,
    .product-layout1 .block-reassurance .block-reassurance-item:last-child {
        border-bottom: none !important;
    }
}
@media (max-width: 767px) {
    .product-layout1 .product-feature-chips { gap: 14px 18px !important; }
    .product-layout1 .product-prices .current-price-value { font-size: 27px !important; }
    .product-layout1 .product-prices { margin-top: 16px !important; }
    .product-layout1 .product-price-divider { margin: 20px 0 !important; }
    .product-layout1 .product-quantity { gap: 10px !important; }
    .product-layout1 .product-quantity .add { min-width: 0 !important; flex: 1 1 100% !important; }
    .product-tabs-section .tabs .nav-tabs { gap: 22px !important; }
    .product-tabs-section .tabs .nav-tabs .nav-link {
        font-size: 13px !important;
        letter-spacing: .1em !important;
        padding-bottom: 13px !important;
    }
    .product-tabs-section .tabs .tab-content { padding: 0 4px !important; }
    .product-tabs-section .data-sheet { grid-template-columns: 46% 54% !important; }
    .product-tabs-section .data-sheet .name,
    .product-tabs-section .data-sheet .value {
        font-size: 13.5px !important;
        padding: 10px 12px !important;
    }
    .product-tabs-section .product-description p { font-size: 15px !important; }
}

/* ===================================================================
   Lot 5 (Opus) — Breadcrumb, résidu titre, réassurance hardcodée
   =================================================================== */

/* === P6/P7 : Breadcrumb — chevrons ›, espacement aéré, page courante rouge ===
   CONCURRENT theme.css:13949 #wrapper .breadcrumb li::after{content:'/'} ;
   last-child = var(--hovercolor). Sélecteur identique + !important → gagne.
   items en inline-flex/nowrap = chaque libellé reste entier (plus de fragment
   "…2024 — BIO" coupé en milieu de mot = le "résidu rouge" du point 7). */
#wrapper .breadcrumb {
    padding: 10px 0 !important;
    background: transparent !important;
}
#wrapper .breadcrumb ol {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    row-gap: 4px !important;
    padding-left: 0 !important;
    margin-bottom: 0 !important;
}
#wrapper .breadcrumb li {
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
}
#wrapper .breadcrumb li::after {
    content: '\203A' !important;          /* chevron › */
    margin: 0 8px !important;
    color: #999999 !important;
    font-size: 17px !important;
    font-weight: 400 !important;
}
#wrapper .breadcrumb li:last-child::after {
    content: '' !important;
    margin: 0 !important;
}
#wrapper .breadcrumb li a {
    color: #888888 !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    letter-spacing: .01em !important;
    text-decoration: none !important;
}
#wrapper .breadcrumb li a:hover {
    color: #AC0505 !important;
}
/* page courante (dernier item, sans <a>) en rouge, wrap propre comme un bloc */
#wrapper .breadcrumb li:last-child,
#wrapper .breadcrumb li:last-child span,
#wrapper .breadcrumb li:last-child a {
    color: #AC0505 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    white-space: normal !important;
}

/* === P4 : Réassurance hardcodée — 3 cellules, fond gris clair, bordure fine === */
.product-layout1 .gc-reassurance {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    margin-top: 0 !important;
    border: 1px solid var(--wc-border) !important;
    border-radius: 6px !important;
    overflow: hidden !important;
}
.product-layout1 .gc-reassurance__cell {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    background: var(--wc-grey-50) !important;
    border-right: 1px solid var(--wc-border) !important;
}
.product-layout1 .gc-reassurance__cell:last-child {
    border-right: none !important;
}
.product-layout1 .gc-reassurance__ico {
    color: var(--wc-ink) !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}
.product-layout1 .gc-reassurance__txt {
    font-family: "Archivo Narrow", sans-serif !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    color: var(--wc-ink) !important;
    font-weight: 500 !important;
}
@media (max-width: 767px) {
    .product-layout1 .gc-reassurance { grid-template-columns: 1fr !important; }
    .product-layout1 .gc-reassurance__cell {
        border-right: none !important;
        border-bottom: 1px solid var(--wc-border) !important;
    }
    .product-layout1 .gc-reassurance__cell:last-child { border-bottom: none !important; }
}

/* === P3 : Cadre "contained" autour de l'image bouteille (façon maquette) ===
   Bordure fine + fond blanc + coins arrondis + padding ; bouteille centrée.
   Frame sur .images-container uniquement ; on ne force PAS de display sur
   .product-cover.slick-block (slick gère son layout). */
.product-layout1 .images-container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    border: 1px solid var(--wc-border) !important;
    border-radius: 8px !important;
    background: #fff !important;
    padding: 28px !important;
    min-height: 400px !important;
    box-shadow: 0 8px 30px -22px rgba(0,0,0,.18) !important;
}
.product-layout1 .images-container .product-cover-container {
    position: static !important;
    width: 100% !important;
    margin: 0 auto !important;
}
.product-layout1 .images-container img {
    max-width: 100% !important;
    max-height: 430px !important;
    height: auto !important;
    width: auto !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    display: block !important;
    font-size: 0 !important;   /* P5 net : si une image casse, pas de texte alt en encadré gris */
    color: transparent !important;
}
/* flag (BIO…) ancré en haut à gauche DANS le cadre, comme la maquette */
.product-layout1 .images-container .product-flag {
    position: absolute !important;
    top: 14px !important;
    left: 14px !important;
    z-index: 3 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
@media (max-width: 767px) {
    .product-layout1 .images-container {
        padding: 18px !important;
        min-height: 0 !important;
    }
    .product-layout1 .images-container img { max-height: 320px !important; }
}

/* === ÉCART 1 (renfort) : densification colonne info — mater les wrappers thème ===
   theme.css:24384 .product-layout1 .my-fixed{margin:12px 0 16px} entoure le bloc prix
   ET le form → gros vides. On resserre tous les wrappers. */
.product-layout1 .my-fixed { margin: 4px 0 6px !important; }
.product-layout1 .product-reference { margin: 0 0 6px !important; }
.product-layout1 .product-information { margin: 0 !important; }
.product-layout1 .product-actions.my-fixed { margin: 6px 0 0 !important; }
/* colonne avis (hook displayReviewsProduct) souvent vide → pas d'espace mort */
.product-layout1 > .col-md-7 > .col-md-3.p0 { margin: 0 !important; padding: 0 !important; min-height: 0 !important; }
.product-layout1 .product-quantity .qty,
.product-layout1 .product-quantity .add { margin-bottom: 0 !important; }

/* === ALIGNEMENT breadcrumb ⇄ fiche (page produit) ===
   Le breadcrumb est dans .page-title-wrapper > .container ; la fiche dans .container.
   Les DEUX sont déjà dans un .container Bootstrap identique (même max-width + gouttières
   15px) → ils s'alignent. Le souci = .page-title-wrapper (theme 14499) qui ajoute :
     - background: url(bg_breadcrumb.jpg)  → bandeau pleine largeur (le "fond rosé")
     - text-align: center                  → breadcrumb centré
     - padding: 30px 0 + margin-bottom:60px → décrochage visuel
   On neutralise tout ça, scope à la page produit (#product). Aucun déplacement TPL. */
#product .page-title-wrapper,
#product .page-title-wrapper.p_tilte_small,
#product .page-title-wrapper.p_tilte_big {
    background: none !important;
    background-image: none !important;
    background-color: transparent !important;
    padding: 6px 0 2px !important;
    margin-bottom: 0 !important;
    min-height: 0 !important;
    text-align: left !important;
    position: static !important;
}
#product .page-title-wrapper::before,
#product .page-title-wrapper::after {
    display: none !important;
    background: none !important;
    content: none !important;
}
/* header de page vide sur la fiche → pas d'espace mort au-dessus du breadcrumb */
#product .page-title-wrapper .page-header { display: none !important; }
/* le breadcrumb garde le même conteneur centré que la fiche ; items alignés à gauche */
#product .page-title-wrapper .container { text-align: left !important; }
#product #wrapper .breadcrumb { padding: 0 !important; margin: 4px 0 !important; }

/* === Largeur max 1100px centrée : breadcrumb + fiche alignés (page produit) ===
   Structure live : <section id=wrapper> > .page-title-wrapper > .container (breadcrumb)
                    et <section id=wrapper> > .container (fiche). Les deux = .container BS.
   On cap ces conteneurs à 1100px + margin auto → breadcrumb et fiche partagent exactement
   la même largeur centrée et les mêmes bords G/D. Scope #product (n'affecte pas header/footer/
   autres pages). Responsive : sous ~1130px, width:100% prend la largeur dispo avec 15px de
   gouttière, colonnes col-md-5/7 empilées sous 768px (Bootstrap). */
#product #wrapper > .container,
#product .page-title-wrapper > .container,
#product #notifications > .container {
    max-width: 1150px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* === Ajustements (capture) : réassurance rapprochée === */

/* RESTAURATION : le bloc de layout flex des colonnes a été RETIRÉ.
   Il forçait .product-layout1 { display:flex; flex-wrap:nowrap } → les 3 enfants du .row
   (col-md-5 image, col-md-7 infos, col-md-12 onglets) étaient mis sur UNE seule ligne
   = 3 colonnes, les onglets "Détails du produit" remontés à droite.
   Sans ce bloc, on revient au Bootstrap natif : col-md-5 + col-md-7 sur une ligne,
   col-md-12 (onglets) qui passe à la ligne en dessous (flex-wrap:wrap). 2 colonnes + onglets dessous. */

/* Point 1 — resserrer l'espace AU-DESSUS de la réassurance + messages d'achat */
.product-layout1 .product-information { padding: 0 !important; }
.product-layout1 .product-minimal-quantity { margin: 22px 0 4px !important; font-size: 17px !important; }
.product-layout1 #product-availability { margin: 4px 0 0 !important; }
.product-layout1 .product-quantity .cart_button { margin-top: 6px !important; }

/* ===================================================================
   Ajustements (capture) : marge haute / image +15% / gap 20px colonnes
   AUCUN flex-wrap ni changement de largeur de colonne (pour ne PAS recréer
   le bug des 3 colonnes). On reste sur 2 colonnes + onglets col-md-12 dessous.
   =================================================================== */

/* MODIF 1 — rapprocher la fiche du breadcrumb : tirer la row vers le haut */
#product .product-container.product-layout1 { margin-top: 28px !important; }

/* MODIF 2 — agrandir la bouteille ~15% DANS la colonne image (sans élargir la
   colonne ni déborder). Slick fige des largeurs inline (~377px) → on force ses
   éléments à 100% pour remplir le cadre, on réduit le padding du cadre et on
   monte le max-height de l'img (430 → 495 ≈ +15%). */
.product-layout1 .images-container .product-cover,
.product-layout1 .images-container .slick-list,
.product-layout1 .images-container .slick-track,
.product-layout1 .images-container .slick-slide,
.product-layout1 .images-container .cover-item {
    width: 100% !important;
}
.product-layout1 .images-container { padding: 16px !important; }
.product-layout1 .images-container img {
    max-height: 570px !important;
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
}

/* MODIF 3 — +20px de gouttière entre image et infos, SANS changer la largeur
   des colonnes : padding-left 15px (Bootstrap) + 20px = 35px sur .col-md-7,
   box-sizing border-box → la largeur de colonne est inchangée, le contenu se
   décale juste de 20px. Pas de flex-wrap, pas de 3e colonne, pas de débordement. */
.product-layout1 > .col-md-7 {
    padding-left: 35px !important;
    box-sizing: border-box !important;
}

/* Point 3 — réduire l'espace entre le bloc "Partager" (trait gris) et la réassurance.
   Le trait gris = border-top de .product-additional-info (theme:18598, padding-top:20px) ;
   .social-sharing a margin-top:1.5rem (theme:12514). On resserre ces deux blocs. */
.product-layout1 .product-additional-info { padding-top: 10px !important; margin-top: 0 !important; }
.product-layout1 .social-sharing { margin-top: 8px !important; }
.product-layout1 .gc-reassurance { margin-top: 0 !important; }

/* Point 4 — décoller la section onglets "Détails du produit" du bloc réassurance au-dessus */
.product-layout1 .product-tabs-section { margin-top: 34px !important; }

/* Point 1 — colonne image +20% : .col-md-5 41,67% -> 50%, .col-md-7 58,33% -> 50%.
   Total 100% → 2 colonnes, pas de 3e colonne (on NE touche PAS flex-wrap, le col-md-12
   onglets passe toujours dessous). box-sizing border-box (global) → le padding-left:35px
   du gap reste intérieur, pas de débordement. Scopé ≥768px → mobile empilé. */
@media (min-width: 768px) {
    .product-layout1 > .col-md-5 { flex: 0 0 50% !important; max-width: 50% !important; }
    .product-layout1 > .col-md-7 { flex: 0 0 50% !important; max-width: 50% !important; }
}

/* Point 4 — masquer le DERNIER item du breadcrumb (nom produit, déjà dans le H1).
   Séparateur = li::after → masquer le dernier li laisserait un chevron orphelin sur
   l'avant-dernier (Mâcon) : on neutralise donc son ::after via nth-last-child(2). */
#wrapper .breadcrumb li:last-child { display: none !important; }
#wrapper .breadcrumb li:nth-last-child(2)::after { content: '' !important; margin: 0 !important; }

/* Lien "Retour" injecté en tête du breadcrumb (JS dans product_layout1.tpl).
   Reste FONCÉ + GRAS (ne pas éclaircir comme les autres niveaux). Spécificité
   #wrapper .breadcrumb .gc-breadcrumb-back a (1,2,1) > #wrapper .breadcrumb li a (1,1,1). */
#wrapper .breadcrumb li.gc-breadcrumb-back a,
#wrapper .breadcrumb .gc-breadcrumb-back a {
    color: #2c2c2c !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    text-decoration: none !important;
}
#wrapper .breadcrumb .gc-breadcrumb-back a:hover { color: #AC0505 !important; }
#wrapper .breadcrumb .gc-breadcrumb-back .gc-back-arrow {
    font-weight: 700 !important;
    font-size: 17px !important;
    line-height: 1 !important;
    display: inline-block !important;
}

/* Nettoyage onglet "Détails du produit" : masquer les doublons (Référence, Stock, État),
   le titre "Fiche technique" et le bloc out-of-stock vide. Scope #product-details UNIQUEMENT
   → ne touche PAS la Référence / le badge "En stock" du HAUT de fiche. La data-sheet reste. */
#product-details .product-reference { display: none !important; }
#product-details .product-quantities { display: none !important; }
#product-details .product-condition { display: none !important; }
#product-details .product-out-of-stock { display: none !important; }
#product-details .product-features .h6 { display: none !important; }   /* titre seul, PAS la .data-sheet */

.gc-footer-reassurance {
    --gcfr-red:#AC0505; --gcfr-ink:#373737; --gcfr-muted:#8a8a8a; --gcfr-border:#e5e5e5; --gcfr-bg:#f5f5f5;
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: 60px !important;
    background: var(--gcfr-bg) !important;
    border-top: 1px solid var(--gcfr-border) !important;
    border-bottom: 1px solid var(--gcfr-border) !important;
}
.gc-footer-reassurance *, .gc-footer-reassurance *::before, .gc-footer-reassurance *::after { box-sizing: border-box !important; }
.gc-footer-reassurance .gc-fr-wrap {
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding: 0 32px !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
}
.gc-footer-reassurance .gc-fr-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 16px !important;
    padding: 30px 26px !important;
}
.gc-footer-reassurance .gc-fr-item + .gc-fr-item { border-left: 1px solid var(--gcfr-border) !important; }
.gc-footer-reassurance .gc-fr-ico { color: var(--gcfr-ink) !important; flex-shrink: 0 !important; display: inline-flex !important; margin-top: 2px !important; }
.gc-footer-reassurance .gc-fr-ico svg { width: 30px !important; height: 30px !important; }
.gc-footer-reassurance .gc-fr-title {
    font-family: "Archivo Narrow", sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    color: var(--gcfr-red) !important;
    margin-bottom: 6px !important;
    line-height: 1.2 !important;
}
.gc-footer-reassurance .gc-fr-txt {
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    color: var(--gcfr-muted) !important;
    margin: 0 !important;
    max-width: 24ch !important;
}
@media (max-width: 980px) {
    .gc-footer-reassurance .gc-fr-wrap { grid-template-columns: 1fr 1fr !important; padding: 0 24px !important; }
    .gc-footer-reassurance .gc-fr-item:nth-child(3) { border-left: none !important; }
    .gc-footer-reassurance .gc-fr-item:nth-child(n+3) { border-top: 1px solid var(--gcfr-border) !important; }
}
@media (max-width: 600px) {
    .gc-footer-reassurance .gc-fr-wrap { grid-template-columns: 1fr !important; padding: 0 18px !important; }
    .gc-footer-reassurance .gc-fr-item { padding: 20px 0 !important; }
    .gc-footer-reassurance .gc-fr-item + .gc-fr-item { border-left: none !important; border-top: 1px solid var(--gcfr-border) !important; }
    .gc-footer-reassurance .gc-fr-txt { max-width: none !important; }
}

/* Masquer l'ANCIEN bandeau réassurance Creative Elements du footer (4 icon-box),
   SITE-WIDE désormais : remplacé par .gc-footer-reassurance custom injecté dans footer.tpl.
   Cible la SECTION précise data-id 22e0206 → ne touche pas logo/liens/paiement/mentions ni
   les autres icon-box / blockreassurance. Zéro-out complet pour ne laisser aucun blanc. */
.elementor-element-22e0206,
#footer .elementor-element-22e0206 {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

/* GC — FLUSH (priorité n°1) : le bandeau custom est désormais 1er enfant de <footer id="footer">,
   il doit coller au footer sans aucun espace. On neutralise le margin-top:60px du bloc global
   .gc-footer-reassurance (utile hors footer) quand il est DANS le footer. */
#footer .gc-footer-reassurance {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* ============================================================
   GC — ZONE A : page catégorie LWC (structure). Scope #category.
   Layout réel = layout-left-column (content col-md-9, pas de right-column).
   Vérifié contre le rendu réel /lwc/5039-vins-de-bourgogne.
   → AUCUN impact fiche produit (#product) ni autres pages.
   ============================================================ */

/* A1 — PLEINE LARGEUR : retire le max-width des conteneurs, marges latérales 40px.
   (grille déjà col-md-9 ; #left-column reste col-md-3 NATIF — largeur calée en Zone D) */
:is(#category, #search, .categoryproducts) #wrapper > .container,
:is(#category, #search, .categoryproducts) .page-title-wrapper > .container {
    max-width: none !important; width: 100% !important;
    padding-left: 40px !important; padding-right: 40px !important;
}

/* A2 — Bandeau titre : pas de bannière, fond blanc */
:is(#category, #search, .categoryproducts) .page-title-wrapper,
:is(#category, #search, .categoryproducts) .page-title-wrapper.p_tilte_small,
:is(#category, #search, .categoryproducts) .page-title-wrapper.p_tilte_big { background: none !important; min-height: 0 !important; padding: 0 !important; }
:is(#category, #search, .categoryproducts) .page-title-wrapper::before, :is(#category, #search, .categoryproducts) .page-title-wrapper::after { display: none !important; }

/* A3 — Ordre : breadcrumb AU-DESSUS du titre */
:is(#category, #search, .categoryproducts) .page-title-wrapper .container { display: flex !important; flex-direction: column !important; }
:is(#category, #search, .categoryproducts) .page-title-wrapper .page-header { order: 2 !important; margin: 0 !important; }
:is(#category, #search, .categoryproducts) #wrapper .breadcrumb { order: 1 !important; }

/* A4 — Breadcrumb discret (restyle du séparateur natif). Dernier item = catégorie courante (rouge), conservé. */
:is(#category, #search, .categoryproducts) #wrapper .breadcrumb { padding: 20px 0 4px !important; margin: 0 !important; background: none !important; }
:is(#category, #search, .categoryproducts) #wrapper .breadcrumb ol { display: flex !important; flex-wrap: wrap; align-items: center; gap: 11px; margin: 0; padding: 0; }
:is(#category, #search, .categoryproducts) #wrapper .breadcrumb li,
:is(#category, #search, .categoryproducts) #wrapper .breadcrumb li a { font-family: "Archivo Narrow", sans-serif !important; font-size: 13px !important; color: var(--wc-muted) !important; }
:is(#category, #search, .categoryproducts) #wrapper .breadcrumb li a:hover { color: var(--wc-ink) !important; }
:is(#category, #search, .categoryproducts) #wrapper .breadcrumb li::after { color: #cfcfcf !important; }
:is(#category, #search, .categoryproducts) #wrapper .breadcrumb li:last-child::after { content: '' !important; }
:is(#category, #search, .categoryproducts) #wrapper .breadcrumb li:last-child,
:is(#category, #search, .categoryproducts) #wrapper .breadcrumb li:last-child span { color: var(--wc-red) !important; font-weight: 600 !important; }

/* A5 — Titre 34px Archivo Narrow */
:is(#category, #search, .categoryproducts) .page-header h1 {
    font-family: "Archivo Narrow", sans-serif !important; font-weight: 600 !important;
    font-size: 34px !important; line-height: 1.1 !important; color: var(--wc-ink) !important;
    letter-spacing: .005em !important; margin: 14px 0 0 !important;
}

/* A6 — Compteur (toolbar, restylé) */
:is(#category, #search, .categoryproducts) #js-product-list-top .total-products p {
    font-family: "Archivo Narrow", sans-serif !important; font-size: 14px !important;
    font-weight: 500 !important; color: var(--wc-muted) !important; margin: 0 !important;
}

/* A7 — Description SEO pleine largeur : de-cardée, titre doublon masqué, typo maquette.
   Marge sur .block-category (présent SEULEMENT si description) → état vide = aucun trou. */
:is(#category, #search, .categoryproducts) .block-category.card { border: none !important; box-shadow: none !important; background: none !important; padding: 0 !important; margin: 18px 0 28px !important; }
:is(#category, #search, .categoryproducts) .block-category > .h1 { display: none !important; }
:is(#category, #search, .categoryproducts) #category-description { max-width: 76ch !important; color: var(--wc-text) !important; font-family: Georgia, serif !important; font-size: 15px !important; line-height: 1.75 !important; }
:is(#category, #search, .categoryproducts) #category-description p { margin: 0 0 12px !important; }

/* A7b — Mécanisme « Lire la suite » (clip + dégradé + bouton), injecté en JS (no-op si vide) */
:is(#category, #search, .categoryproducts) .gc-seo-clip { position: relative; max-height: 4.9em; overflow: hidden; transition: max-height .3s ease; }
:is(#category, #search, .categoryproducts) .gc-seo-clip.open { max-height: 120em; }
:is(#category, #search, .categoryproducts) .gc-seo-clip:not(.open)::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2.2em; background: linear-gradient(to bottom, rgba(255,255,255,0), #fff); }
:is(#category, #search, .categoryproducts) .gc-seo-more { background: none; border: none; cursor: pointer; font-family: "Archivo Narrow", sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--wc-red); padding: 10px 0 0; display: inline-flex; align-items: center; gap: 6px; }
:is(#category, #search, .categoryproducts) .gc-seo-more svg { transition: transform .25s ease; }
:is(#category, #search, .categoryproducts) .gc-seo-more.open svg { transform: rotate(180deg); }

/* Responsive : padding latéral 40 → 24 → 18 ; titre 27px */
@media (max-width: 980px){ :is(#category, #search, .categoryproducts) #wrapper > .container, :is(#category, #search, .categoryproducts) .page-title-wrapper > .container { padding-left: 24px !important; padding-right: 24px !important; } }
@media (max-width: 600px){ :is(#category, #search, .categoryproducts) #wrapper > .container, :is(#category, #search, .categoryproducts) .page-title-wrapper > .container { padding-left: 18px !important; padding-right: 18px !important; } :is(#category, #search, .categoryproducts) .page-header h1 { font-size: 27px !important; } }

/* ============================================================
   GC — ZONE B : carte produit mosaïque (#category .grid). Scope #category.
   Habille la carte native (grid3.tpl) au look maquette .gcard.
   Grille Bootstrap native conservée (col-xl-3→lg-4→sm-6→xs-12 = 4→3→2→1).
   ============================================================ */
:is(#category, #search, .categoryproducts) .product_content.grid { align-items: stretch !important; }
:is(#category, #search, .categoryproducts) .product_content.grid .item-product { display: flex !important; margin-bottom: 22px !important; }

:is(#category, #search, .categoryproducts) .item-product .js-product-miniature { display: flex !important; flex-direction: column !important; width: 100% !important; height: 100% !important; border: 1px solid var(--wc-border) !important; border-radius: 8px !important; background: #fff !important; box-shadow: 0 6px 22px -16px rgba(0,0,0,.16) !important; overflow: hidden !important; transition: box-shadow .25s, border-color .25s !important; }
:is(#category, #search, .categoryproducts) .item-product .js-product-miniature:hover { box-shadow: 0 16px 40px -20px rgba(0,0,0,.26) !important; border-color: #dcdcdc !important; }
/* Bord carte = EXACTEMENT la maquette (1px solid #e5e5e5, radius 8px). Sélecteur large (hors .item-product aussi) + hex en dur pour battre le thème (« trop épais »). */
:is(#category, #search, .categoryproducts) .js-product-miniature { border: 1px solid #e5e5e5 !important; border-radius: 8px !important; }

/* Média carré + image ENTIÈRE (contain) sur fond blanc, légère marge interne */
:is(#category, #search, .categoryproducts) .js-product-miniature .img_block { position: relative !important; aspect-ratio: 1/1 !important; background: #fff !important; border-bottom: 1px solid var(--wc-border-soft) !important; overflow: hidden !important; }
:is(#category, #search, .categoryproducts) .js-product-miniature .img_block .product-thumbnail { display: block !important; width: 100% !important; height: 100% !important; padding: 10px !important; box-sizing: border-box !important; }
:is(#category, #search, .categoryproducts) .js-product-miniature .img_block .product-thumbnail img { width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: center !important; }

/* Badges promo (€) + bio (rempli) */
:is(#category, #search, .categoryproducts) .gc-gcard-promo { position: absolute !important; top: 12px; left: 12px; z-index: 2; font-family: "Archivo Narrow",sans-serif; font-size: 17px; font-weight: 700; color: #fff; background: var(--wc-red); border-radius: 4px; padding: 6px 12px; line-height: 1.15; box-shadow: 0 1px 4px rgba(0,0,0,.18); }
:is(#category, #search, .categoryproducts) .gc-gcard-bio { position: absolute !important; top: 12px; right: 12px; z-index: 2; font-family: "Archivo Narrow",sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #fff; background: #2f6b2f; border-radius: 3px; padding: 4px 7px; }
/* Badge multiple (lot) x3/x6 : BAS-DROITE de l'image. Couleurs distinctes du rouge promo : x3 = anthracite, x6 = bordeaux. Taille +35%. */
:is(#category, #search, .categoryproducts) .gc-gcard-mult { position: absolute !important; bottom: 12px !important; right: 12px !important; top: auto !important; left: auto !important; z-index: 3; font-family: "Archivo Narrow",sans-serif; font-size: 16px; font-weight: 700; color: #fff; background: #373737; border-radius: 4px; padding: 5px 12px; line-height: 1.2; letter-spacing: .02em; white-space: nowrap; box-shadow: 0 1px 4px rgba(0,0,0,.22); }
:is(#category, #search, .categoryproducts) .gc-gcard-mult--3 { background: #373737 !important; } /* anthracite */
:is(#category, #search, .categoryproducts) .gc-gcard-mult--6 { background: #6e1414 !important; } /* bordeaux */
:is(#category, #search, .categoryproducts) .js-product-miniature:has(> .row) .gc-gcard-mult { bottom: 12px !important; right: 12px !important; top: auto !important; }

/* GC — Mêmes badges (promo + lot x3/x6) reportés sur la FICHE PRODUIT, posés sur l'image de couverture (comme la carte catalogue). */
.product-layout1 .images-container .product-cover-container { position: relative !important; }
.product-layout1 .gc-gcard-promo { position: absolute !important; top: 16px; left: 16px; z-index: 5; pointer-events: none; font-family: "Archivo Narrow",sans-serif; font-size: 18px; font-weight: 700; color: #fff; background: var(--wc-red); border-radius: 4px; padding: 7px 13px; line-height: 1.15; box-shadow: 0 1px 4px rgba(0,0,0,.18); }
.product-layout1 .gc-gcard-mult { position: absolute !important; bottom: 16px !important; right: 16px !important; top: auto !important; left: auto !important; z-index: 5; pointer-events: none; font-family: "Archivo Narrow",sans-serif; font-size: 17px; font-weight: 700; color: #fff; background: #373737; border-radius: 4px; padding: 6px 13px; line-height: 1.2; letter-spacing: .02em; white-space: nowrap; box-shadow: 0 1px 4px rgba(0,0,0,.22); }
.product-layout1 .gc-gcard-mult--3 { background: #373737 !important; }
.product-layout1 .gc-gcard-mult--6 { background: #6e1414 !important; }
.categoryproducts .pos_title h2 { text-transform: none !important; }

/* Corps : flex colonne + aplatissement de .inner_desc pour aligner le bas */
:is(#category, #search, .categoryproducts) .js-product-miniature .product_desc { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; padding: 18px 18px 20px !important; min-width: 0 !important; }
:is(#category, #search, .categoryproducts) .js-product-miniature .inner_desc { display: contents !important; }

/* Masquage clutter hors maquette */
:is(#category, #search, .categoryproducts) .js-product-miniature .manufacturer,
:is(#category, #search, .categoryproducts) .js-product-miniature .hook-reviews,
:is(#category, #search, .categoryproducts) .js-product-miniature .quick-view,
:is(#category, #search, .categoryproducts) .js-product-miniature .product-desc,
:is(#category, #search, .categoryproducts) .js-product-miniature .variant-links,
:is(#category, #search, .categoryproducts) .js-product-miniature .add-to-links .compare,
:is(#category, #search, .categoryproducts) .js-product-miniature .add-to-links > li:empty { display: none !important; }

/* Nom : 3 lignes fixes (order 1, en haut) */
:is(#category, #search, .categoryproducts) .js-product-miniature .product_desc h3 { order: 1; margin: 0 !important; }
:is(#category, #search, .categoryproducts) .js-product-miniature .product_name { font-family: "Archivo Narrow",sans-serif !important; font-weight: 600 !important; font-size: 15.5px !important; line-height: 1.3 !important; color: var(--wc-ink) !important; display: -webkit-box !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; min-height: 3.9em !important; white-space: normal !important; }
:is(#category, #search, .categoryproducts) .js-product-miniature .product_name:hover { color: var(--wc-red) !important; }

/* Meta attributs (order 2) : pastille couleur · contenance · millésime */
:is(#category, #search, .categoryproducts) .gc-gcard-meta { order: 2; display: flex; align-items: center; gap: 7px; font-family: "Archivo Narrow",sans-serif; font-size: 12px; color: var(--wc-muted); margin-top: 8px; }
:is(#category, #search, .categoryproducts) .gc-wine-dot { width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); flex-shrink: 0; background: var(--wc-faint); }
:is(#category, #search, .categoryproducts) .gc-wine-dot--rouge { background: #6e1414; }
:is(#category, #search, .categoryproducts) .gc-wine-dot--blanc { background: #e3cf8f; }
:is(#category, #search, .categoryproducts) .gc-wine-dot--rosé, :is(#category, #search, .categoryproducts) .gc-wine-dot--rose { background: #e9a6a0; }
:is(#category, #search, .categoryproducts) .gc-wine-dot--champagne, :is(#category, #search, .categoryproducts) .gc-wine-dot--effervescent { background: #efe2b0; }

/* Région (maquette .gcard-region) — capitales, au-dessus du nom, dans le <h3> */
:is(#category, #search, .categoryproducts) .js-product-miniature .gc-gcard-region { display: block !important; font-family: "Archivo Narrow",sans-serif !important; font-size: 10.5px !important; font-weight: 600 !important; letter-spacing: .12em !important; text-transform: uppercase !important; color: var(--wc-muted) !important; margin: 0 0 7px !important; }

/* Méta en pièces .gc-m : GRILLE = ligne « · » ; LISTE = chips bordées (maquette .meta-chip) */
:is(#category, #search, .categoryproducts) .gc-gcard-meta .gc-m { display: inline-flex !important; align-items: center !important; gap: 6px !important; }
:is(#category, #search, .categoryproducts) .gc-gcard-meta .gc-m + .gc-m::before { content: "·" !important; color: var(--wc-faint) !important; margin-right: 6px !important; }
:is(#category, #search, .categoryproducts) .js-product-miniature:has(> .row) .gc-gcard-meta { gap: 8px !important; margin-top: 18px !important; }
:is(#category, #search, .categoryproducts) .js-product-miniature:has(> .row) .gc-gcard-meta .gc-m { background: var(--wc-grey-50) !important; border: 1px solid var(--wc-border) !important; border-radius: 4px !important; padding: 5px 10px !important; font-size: 12.5px !important; font-weight: 600 !important; color: var(--wc-ink) !important; gap: 7px !important; }
:is(#category, #search, .categoryproducts) .js-product-miniature:has(> .row) .gc-gcard-meta .gc-m + .gc-m::before { content: none !important; }

/* Prix (order 3) : poussé en bas */
:is(#category, #search, .categoryproducts) .js-product-miniature .product-price-and-shipping { order: 3 !important; margin-top: auto !important; padding-top: 14px !important; display: flex !important; align-items: baseline !important; gap: 9px !important; flex-wrap: wrap !important; }
:is(#category, #search, .categoryproducts) .js-product-miniature .product-price-and-shipping .regular-price { font-family: "Archivo Narrow",sans-serif !important; font-size: 13px !important; color: var(--wc-faint) !important; text-decoration: line-through !important; }
:is(#category, #search, .categoryproducts) .js-product-miniature .product-price-and-shipping .price { font-family: "Archivo Narrow",sans-serif !important; font-weight: 600 !important; font-size: 21px !important; color: var(--wc-ink) !important; }
:is(#category, #search, .categoryproducts) .js-product-miniature .product-price-and-shipping .discount-product { display: none !important; }

/* Stock (order 4) */
:is(#category, #search, .categoryproducts) .js-product-miniature .availability { order: 4 !important; margin-top: 11px !important; margin-bottom: 6px !important; display: block !important; }
:is(#category, #search, .categoryproducts) .gc-gcard-stock { display: flex; align-items: center; gap: 7px; font-family: "Archivo Narrow",sans-serif; font-size: 11.5px; color: var(--wc-muted); }
:is(#category, #search, .categoryproducts) .gc-gcard-stock .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
:is(#category, #search, .categoryproducts) .gc-gcard-stock.ok .dot { background: #2f9b4a; }
:is(#category, #search, .categoryproducts) .gc-gcard-stock.low { color: #b9750a; } :is(#category, #search, .categoryproducts) .gc-gcard-stock.low .dot { background: #e28c00; }
:is(#category, #search, .categoryproducts) .gc-gcard-stock.out { color: var(--wc-faint); } :is(#category, #search, .categoryproducts) .gc-gcard-stock.out .dot { background: var(--wc-faint); }

/* Pastilles couleur sur la facette COULEUR (maquette .cdot) */
:is(#category, #search, .categoryproducts) #search_filters .gc-fdot { display: inline-block !important; width: 11px !important; height: 11px !important; border-radius: 50% !important; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18) !important; margin-right: 8px !important; vertical-align: middle !important; flex-shrink: 0 !important; background: var(--wc-faint) !important; }
:is(#category, #search, .categoryproducts) #search_filters .gc-fdot.r-rouge { background: #6e1414 !important; }
:is(#category, #search, .categoryproducts) #search_filters .gc-fdot.r-blanc { background: #e3cf8f !important; }
:is(#category, #search, .categoryproducts) #search_filters .gc-fdot.r-rose { background: #e9a6a0 !important; }
:is(#category, #search, .categoryproducts) #search_filters .gc-fdot.r-champ { background: #efe2b0 !important; }

/* CTA "Ajouter au panier" (order 5) : pleine largeur, rouge, tout en bas. Form panier intact.
   Le thème style_product2 met le bouton en rond icône (font-size:0, border-radius:50%, li.cart flex).
   On neutralise tout ça ; l'ID #category gagne la spécificité. Cible .ajax_add_to_cart_button (bouton + span). */
:is(#category, #search, .categoryproducts) .js-product-miniature .add-to-links { order: 5 !important; display: block !important; position: static !important; opacity: 1 !important; visibility: visible !important; transform: none !important; bottom: auto !important; left: auto !important; right: auto !important; width: auto !important; height: auto !important; list-style: none !important; margin: 14px 0 0 !important; padding: 0 !important; }
:is(#category, #search, .categoryproducts) .js-product-miniature .add-to-links li.cart, :is(#category, #search, .categoryproducts) .js-product-miniature .add-to-links .product-add-to-cart, :is(#category, #search, .categoryproducts) .js-product-miniature .add-to-links form { position: static !important; width: 100% !important; opacity: 1 !important; visibility: visible !important; transform: none !important; }
:is(#category, #search, .categoryproducts) .js-product-miniature .add-to-links li.cart { display: block !important; width: 100% !important; flex: none !important; }
:is(#category, #search, .categoryproducts) .js-product-miniature .add-to-links .product-add-to-cart,
:is(#category, #search, .categoryproducts) .js-product-miniature .add-to-links form { margin: 0 !important; width: 100% !important; }
:is(#category, #search, .categoryproducts) .js-product-miniature .add-to-links li.cart .ajax_add_to_cart_button {
    width: 100% !important; height: 44px !important; min-width: 0 !important; padding: 0 !important;
    border: none !important; border-radius: 4px !important; cursor: pointer !important;
    background: var(--wc-red) !important; color: #fff !important;
    font-family: "Archivo Narrow",sans-serif !important; font-size: 12.5px !important; line-height: 1 !important;
    font-weight: 600 !important; letter-spacing: .08em !important; text-transform: uppercase !important;
    display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
    transition: background .2s !important;
}
:is(#category, #search, .categoryproducts) .js-product-miniature .add-to-links li.cart .ajax_add_to_cart_button::before { font-size: 15px !important; margin: 0 !important; display: inline-block !important; line-height: 1 !important; }
:is(#category, #search, .categoryproducts) #js-product-list .js-product-miniature .add-to-links li.cart .ajax_add_to_cart_button:hover, :is(#category, #search, .categoryproducts) #js-product-list .js-product-miniature .add-to-links li.cart .ajax_add_to_cart_button:focus { background: #8a0404 !important; background-color: #8a0404 !important; color: #fff !important; }
:is(#category, #search, .categoryproducts) .js-product-miniature .add-to-links li.cart .ajax_add_to_cart_button.disabled { background: var(--wc-grey-100) !important; color: var(--wc-faint) !important; opacity: 1 !important; }

/* Zéro mention HT en catégorie (filet) */
:is(#category, #search, .categoryproducts) .js-product-miniature .product-price-ht,
:is(#category, #search, .categoryproducts) .js-product-miniature [class*="tax-exc"] { display: none !important; }

/* ============================================================
   GC — ZONE C : vue LISTE (maquette .lcard). DOM RÉEL = reconstruction theme.js :
   article.js-product-miniature:has(> .row) > .row >
     .img_block.col-4  +  .product_desc.col-8 > (manufacturer, h3[+gc-gcard-meta],
       .product-price-and-shipping, .product-desc, .availability[.gc-gcard-stock],
       ul.add-to-links, .variant-links)
   On cible .style_product1 (2 classes > Zone B générique .js-product-miniature).
   Mosaïque .style_product2 INTACTE. !important partout.
   ============================================================ */

/* Carte = bordure + radius + ombre (.lcard) */
:is(#category, #search, .categoryproducts) .js-product-miniature:has(> .row) { display: block !important; border: 1px solid var(--wc-border) !important; border-radius: 8px !important; background: #fff !important; box-shadow: 0 6px 22px -16px rgba(0,0,0,.16) !important; overflow: hidden !important; margin: 0 0 18px !important; transition: box-shadow .25s ease, border-color .25s ease !important; }
:is(#category, #search, .categoryproducts) .js-product-miniature:has(> .row):hover { box-shadow: 0 16px 40px -20px rgba(0,0,0,.26) !important; border-color: #dcdcdc !important; }

/* .row → grille média(188) | infos(1fr) ; gouttières + float Bootstrap neutralisés */
:is(#category, #search, .categoryproducts) .js-product-miniature:has(> .row) > .row { display: grid !important; grid-template-columns: 188px minmax(0,1fr) !important; margin: 0 !important; align-items: stretch !important; }
:is(#category, #search, .categoryproducts) .js-product-miniature:has(> .row) > .row > .img_block,
:is(#category, #search, .categoryproducts) .js-product-miniature:has(> .row) > .row > .product_desc { float: none !important; }

/* Média (col-4 → 188px) : fond gris, bordure droite, image contain */
:is(#category, #search, .categoryproducts) .js-product-miniature:has(> .row) .img_block { flex: none !important; width: auto !important; max-width: none !important; min-width: 0 !important; padding: 0 !important; position: relative !important; background: var(--wc-grey-50) !important; border-right: 1px solid var(--wc-border-soft) !important; border-bottom: none !important; aspect-ratio: auto !important; }
:is(#category, #search, .categoryproducts) .js-product-miniature:has(> .row) .img_block .thumbnail.product-thumbnail { display: flex !important; align-items: center !important; justify-content: center !important; height: 100% !important; min-height: 210px !important; padding: 14px !important; margin: 0 !important; }
:is(#category, #search, .categoryproducts) .js-product-miniature:has(> .row) .img_block img { width: auto !important; max-width: 100% !important; height: auto !important; max-height: 210px !important; object-fit: contain !important; }
/* flags promo/bio (hérités Zone B, repositionnés coins média) */
:is(#category, #search, .categoryproducts) .js-product-miniature:has(> .row) .gc-gcard-promo { top: 12px !important; left: 12px !important; }
:is(#category, #search, .categoryproducts) .js-product-miniature:has(> .row) .gc-gcard-bio { top: 12px !important; right: 12px !important; }

/* Infos (col-8) → grille corps(1fr) | achat(250px), 4 rangées */
:is(#category, #search, .categoryproducts) .js-product-miniature:has(> .row) .product_desc { display: grid !important; grid-template-columns: minmax(0,1fr) 250px !important; grid-template-rows: auto auto 1fr auto !important; align-items: start !important; gap: 0 !important; padding: 0 !important; flex: none !important; max-width: none !important; width: auto !important; position: relative !important; }
/* fond + bordure colonne ACHAT (derrière le contenu) */
:is(#category, #search, .categoryproducts) .js-product-miniature:has(> .row) .product_desc::after { content: "" !important; position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; width: 250px !important; border-left: 1px solid var(--wc-border-soft) !important; background: #fff !important; z-index: 0 !important; }
:is(#category, #search, .categoryproducts) .js-product-miniature:has(> .row) .product_desc > * { position: relative !important; z-index: 1 !important; }

/* CORPS col.1 — région (manufacturer ré-affiché) */
/* région : feature dans le h3 (manufacturer JAMAIS utilisé comme région — consigne) */
:is(#category, #search, .categoryproducts) .js-product-miniature:has(> .row) .manufacturer { display: none !important; }
/* nom + meta (la meta est DANS le h3) */
:is(#category, #search, .categoryproducts) .js-product-miniature:has(> .row) .product_desc h3 { grid-column: 1 !important; grid-row: 2 !important; padding: 24px 26px 0 !important; margin: 0 !important; }
:is(#category, #search, .categoryproducts) .js-product-miniature:has(> .row) .gc-gcard-region { font-size: 11px !important; margin: 0 0 8px !important; }
:is(#category, #search, .categoryproducts) .js-product-miniature:has(> .row) .product_name { font-size: 20px !important; line-height: 1.25 !important; -webkit-line-clamp: 2 !important; min-height: 0 !important; }
:is(#category, #search, .categoryproducts) .js-product-miniature:has(> .row) .gc-gcard-meta { margin-top: 16px !important; flex-wrap: wrap !important; }
/* stock bas-gauche */
:is(#category, #search, .categoryproducts) .js-product-miniature:has(> .row) .availability { grid-column: 1 !important; grid-row: 4 !important; align-self: end !important; padding: 14px 26px 22px !important; margin: 0 !important; }

/* ACHAT col.2 — prix (centré vertical) + bouton (bas) */
:is(#category, #search, .categoryproducts) .js-product-miniature:has(> .row) .product-price-and-shipping { grid-column: 2 !important; grid-row: 1 / 4 !important; align-self: center !important; flex-direction: column !important; align-items: flex-end !important; justify-content: center !important; text-align: right !important; padding: 22px 24px 0 !important; margin: 0 !important; gap: 2px !important; }
:is(#category, #search, .categoryproducts) .js-product-miniature:has(> .row) .product-price-and-shipping .price { font-size: 30px !important; }
:is(#category, #search, .categoryproducts) .js-product-miniature:has(> .row) .add-to-links { grid-column: 2 !important; grid-row: 4 !important; align-self: end !important; padding: 0 24px 22px !important; margin: 0 !important; }
:is(#category, #search, .categoryproducts) .js-product-miniature:has(> .row) .add-to-links li.cart .ajax_add_to_cart_button { height: 48px !important; }
/* CTA liste : 5px de marge de chaque côté (sinon collé au bord). .style_product2:has(>.row) pour battre le reset grille 6381 (qui fuit sur la liste). */
:is(#category, #search, .categoryproducts) #js-product-list .js-product-miniature.style_product2:has(> .row) .add-to-links { padding: 0 24px 22px !important; margin: 0 !important; }

/* Masquages liste (clutter hors maquette) */
:is(#category, #search, .categoryproducts) .js-product-miniature:has(> .row) .product-desc,
:is(#category, #search, .categoryproducts) .js-product-miniature:has(> .row) .variant-links,
:is(#category, #search, .categoryproducts) .js-product-miniature:has(> .row) .hook-reviews,
:is(#category, #search, .categoryproducts) .js-product-miniature:has(> .row) .quick-view { display: none !important; }

/* Repli mobile : empile média / corps / achat */
@media (max-width: 575px) {
    :is(#category, #search, .categoryproducts) .js-product-miniature:has(> .row) > .row { grid-template-columns: 1fr !important; }
    :is(#category, #search, .categoryproducts) .js-product-miniature:has(> .row) .img_block { border-right: none !important; border-bottom: 1px solid var(--wc-border-soft) !important; }
    :is(#category, #search, .categoryproducts) .js-product-miniature:has(> .row) .product_desc { grid-template-columns: 1fr !important; grid-template-rows: none !important; display: flex !important; flex-direction: column !important; }
    :is(#category, #search, .categoryproducts) .js-product-miniature:has(> .row) .product_desc::after { display: none !important; }
    :is(#category, #search, .categoryproducts) .js-product-miniature:has(> .row) .product-price-and-shipping,
    :is(#category, #search, .categoryproducts) .js-product-miniature:has(> .row) .add-to-links { align-items: flex-start !important; text-align: left !important; padding: 12px 26px 0 !important; }
    :is(#category, #search, .categoryproducts) .js-product-miniature:has(> .row) .add-to-links { padding-bottom: 22px !important; }
}

/* ============================================================
   GC — ZONE D : colonne filtres (ps_facetedsearch). Scope #category.
   Natif habillé : on STYLE le DOM du module, on ne touche NI sa structure NI ses
   hooks AJAX (data-search-url / .js-search-link / .js-search-filters-clear-all).
   ============================================================ */

/* Largeur colonne filtres (≈ maquette) + la grille reprend le reste (≥992px) */
@media (min-width: 992px) {
    :is(#category, #search, .categoryproducts) #left-column { flex: 0 0 256px !important; max-width: 256px !important; margin-top: 0 !important; padding-top: 0 !important; }
    :is(#category, #search, .categoryproducts) #content-wrapper { flex: 1 1 auto !important; width: calc(100% - 256px) !important; max-width: calc(100% - 256px) !important; margin-top: 0 !important; padding-top: 0 !important; padding-left: 56px !important; }
    :is(#category, #search, .categoryproducts) #content-wrapper .row, :is(#category, #search, .categoryproducts) #wrapper .row.flex-layout, :is(#category, #search, .categoryproducts) #wrapper > .container > .row { align-items: flex-start !important; }
}

/* Conteneur facettes */
:is(#category, #search, .categoryproducts) #search_filters { font-family: "Archivo Narrow", sans-serif !important; border: none !important; background: none !important; padding: 0 !important; box-shadow: none !important; }

/* Titre "Filtrer par" */
:is(#category, #search, .categoryproducts) #search_filters .my-faced { font-size: 14px !important; font-weight: 600 !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: var(--wc-ink) !important; padding: 0 0 14px !important; margin: 0 0 4px !important; border-bottom: 2px solid var(--wc-ink) !important; display: flex !important; align-items: center !important; gap: 9px !important; }
:is(#category, #search, .categoryproducts) #search_filters .my-faced::before { content: "" !important; width: 15px !important; height: 15px !important; flex-shrink: 0 !important; background-repeat: no-repeat !important; background-position: center !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23373737' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='4' y1='7' x2='20' y2='7'/%3E%3Cline x1='7' y1='12' x2='17' y2='12'/%3E%3Cline x1='10' y1='17' x2='14' y2='17'/%3E%3C/svg%3E") !important; }

/* Tout effacer */
:is(#category, #search, .categoryproducts) #search_filters .clear-all-wrapper { padding: 12px 0 0 !important; margin: 0 !important; }
:is(#category, #search, .categoryproducts) #search_filters .js-search-filters-clear-all { font-family: "Archivo Narrow", sans-serif !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: .04em !important; color: var(--wc-muted) !important; background: none !important; border: none !important; padding: 6px 0 !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; text-transform: none !important; }
:is(#category, #search, .categoryproducts) #search_filters .js-search-filters-clear-all:hover { color: var(--wc-red) !important; }
:is(#category, #search, .categoryproducts) #search_filters .js-search-filters-clear-all .material-icons { font-size: 16px !important; }

/* === GC — FILTRES ACTIFS : barre en ZONE CATALOGUE = #js-active-search-filters (PAS dans #search_filters). Maquette .active-bar / .ab-title / .ab-chip === */
:is(#category, #search, .categoryproducts) #js-active-search-filters, :is(#category, #search, .categoryproducts) #search_filters .active_filters { background: none !important; background-color: transparent !important; border: none !important; box-shadow: none !important; padding: 0 0 16px !important; margin: 0 0 20px !important; border-bottom: 1px solid var(--wc-border-soft) !important; border-radius: 0 !important; }
:is(#category, #search, .categoryproducts) #js-active-search-filters .active-filter-title, :is(#category, #search, .categoryproducts) .active_filters .active-filter-title { font-family: "Archivo Narrow",sans-serif !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: .1em !important; text-transform: uppercase !important; color: var(--wc-ink) !important; margin: 0 0 12px !important; padding: 0 !important; border: none !important; background: none !important; }
:is(#category, #search, .categoryproducts) #js-active-search-filters ul, :is(#category, #search, .categoryproducts) .active_filters ul { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; align-items: center !important; }
:is(#category, #search, .categoryproducts) #js-active-search-filters .filter-block, :is(#category, #search, .categoryproducts) .active_filters .filter-block { font-family: "Archivo Narrow",sans-serif !important; font-size: 12.5px !important; font-weight: 500 !important; color: var(--wc-ink) !important; background: var(--wc-grey-100) !important; border: 1px solid var(--wc-border) !important; border-radius: 999px !important; padding: 5px 6px 5px 12px !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; margin: 0 !important; line-height: 1.25 !important; box-shadow: none !important; }
:is(#category, #search, .categoryproducts) #js-active-search-filters .filter-block a, :is(#category, #search, .categoryproducts) #js-active-search-filters .filter-block .close, :is(#category, #search, .categoryproducts) .active_filters .filter-block a { color: var(--wc-muted) !important; opacity: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 18px !important; height: 18px !important; border-radius: 50% !important; font-size: 14px !important; line-height: 1 !important; text-decoration: none !important; flex-shrink: 0 !important; }
:is(#category, #search, .categoryproducts) #js-active-search-filters .filter-block a:hover, :is(#category, #search, .categoryproducts) .active_filters .filter-block a:hover { color: var(--wc-red) !important; background: rgba(172,5,5,.08) !important; }

/* Section facette + header (titre + collapse natif conservé) */
:is(#category, #search, .categoryproducts) #search_filters .facet { padding: 16px 0 !important; border-bottom: 1px solid var(--wc-border-soft) !important; margin: 0 !important; }
:is(#category, #search, .categoryproducts) #search_filters .facet:last-child { border-bottom: none !important; }
/* retrait de la fine ligne grise sous le titre de facette (bordure native du .facet-title) — ne concerne PAS le trait ink de FILTRER PAR (.my-faced) */
:is(#category, #search, .categoryproducts) #search_filters .facet .facet-title { border-bottom: none !important; }
:is(#category, #search, .categoryproducts) #search_filters .facet .title { display: flex !important; align-items: center !important; justify-content: space-between !important; cursor: pointer !important; padding: 0 !important; }
:is(#category, #search, .categoryproducts) #search_filters .facet .facet-title { font-family: "Archivo Narrow", sans-serif !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: .12em !important; text-transform: uppercase !important; color: var(--wc-ink) !important; margin: 0 !important; }
:is(#category, #search, .categoryproducts) #search_filters .facet .collapse-icons { color: var(--wc-muted) !important; margin-left: auto !important; }
:is(#category, #search, .categoryproducts) #search_filters .facet .collapse-icons .material-icons { font-size: 18px !important; }

/* Corps + longues listes scrollables (hors slider) */
:is(#category, #search, .categoryproducts) #search_filters .facet ul.collapse { padding: 12px 0 0 !important; margin: 0 !important; list-style: none !important; }
:is(#category, #search, .categoryproducts) #search_filters .facet ul.collapse:not(.faceted-slider) { max-height: 200px !important; overflow-y: auto !important; padding-right: 4px !important; }
:is(#category, #search, .categoryproducts) #search_filters .facet ul.collapse::-webkit-scrollbar { width: 6px; }
:is(#category, #search, .categoryproducts) #search_filters .facet ul.collapse::-webkit-scrollbar-thumb { background: #d8d8d8; border-radius: 3px; }
:is(#category, #search, .categoryproducts) #search_filters .facet ul.collapse > li { margin: 0 !important; padding: 0 !important; border: none !important; }

/* Ligne case à cocher (crow) */
:is(#category, #search, .categoryproducts) #search_filters .facet-label { display: flex !important; align-items: center !important; gap: 10px !important; width: 100% !important; margin: 0 !important; padding: 4px 0 !important; cursor: pointer !important; font-family: "Archivo Narrow", sans-serif !important; }
:is(#category, #search, .categoryproducts) #search_filters .facet-label .custom-checkbox,
:is(#category, #search, .categoryproducts) #search_filters .facet-label .custom-radio { position: static !important; top: 0 !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; flex-shrink: 0 !important; }
/* boîte LWC (span après input, hors pastille couleur) */
:is(#category, #search, .categoryproducts) #search_filters .facet-label .custom-checkbox input[type='checkbox']+span:not(.color),
:is(#category, #search, .categoryproducts) #search_filters .facet-label .custom-radio input+span { width: 16px !important; height: 16px !important; border: 1.5px solid var(--wc-border) !important; border-radius: 3px !important; background: #fff !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transition: background .15s, border-color .15s !important; }
:is(#category, #search, .categoryproducts) #search_filters .facet-label .custom-checkbox input[type='checkbox']:checked+span:not(.color) { background: var(--wc-red) !important; border-color: var(--wc-red) !important; }
:is(#category, #search, .categoryproducts) #search_filters .facet-label .custom-checkbox .checkbox-checked { color: #fff !important; font-size: 14px !important; }
/* pastille couleur (Couleur) */
:is(#category, #search, .categoryproducts) #search_filters .facet-label .custom-checkbox span.color { width: 14px !important; height: 14px !important; border-radius: 50% !important; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18) !important; margin: 0 !important; }
/* label + compteur */
:is(#category, #search, .categoryproducts) #search_filters .facet-label a.search-link { flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; display: flex !important; align-items: center !important; font-size: 13.5px !important; color: var(--wc-text) !important; text-decoration: none !important; }
:is(#category, #search, .categoryproducts) #search_filters .facet-label:hover a.search-link { color: var(--wc-ink) !important; }
:is(#category, #search, .categoryproducts) #search_filters .facet-label.active a.search-link { color: var(--wc-ink) !important; font-weight: 600 !important; }
:is(#category, #search, .categoryproducts) #search_filters .facet-label .magnitude { margin-left: auto !important; padding-left: 8px !important; font-size: 12px !important; color: var(--wc-faint) !important; font-variant-numeric: tabular-nums !important; }

/* Champ de recherche injecté (JS) dans les longues listes (Producteur/Appellation…) */
:is(#category, #search, .categoryproducts) #search_filters .gc-facet-search { margin: 0 0 10px !important; }
:is(#category, #search, .categoryproducts) #search_filters .gc-facet-search input { width: 100% !important; font-family: "Archivo Narrow", sans-serif !important; font-size: 13px !important; color: var(--wc-ink) !important; border: 1px solid var(--wc-border) !important; border-radius: 4px !important; height: 34px !important; padding: 0 12px !important; background: var(--wc-grey-50) !important; }
:is(#category, #search, .categoryproducts) #search_filters .gc-facet-search input:focus { outline: none !important; border-color: var(--wc-ink) !important; background: #fff !important; }
:is(#category, #search, .categoryproducts) #search_filters .gc-facet-search input::placeholder { color: var(--wc-faint) !important; }

/* Slider prix (jQuery UI) — habillage LWC */
:is(#category, #search, .categoryproducts) #search_filters .faceted-slider { padding: 14px 6px 4px !important; max-height: none !important; overflow: visible !important; }
:is(#category, #search, .categoryproducts) #search_filters .faceted-slider p { font-size: 12.5px !important; color: var(--wc-muted) !important; margin: 0 0 10px !important; }
:is(#category, #search, .categoryproducts) #search_filters .ui-slider.ui-slider-horizontal { height: 4px !important; background: var(--wc-border) !important; border: none !important; border-radius: 3px !important; margin: 14px 0 !important; }
:is(#category, #search, .categoryproducts) #search_filters .ui-slider .ui-widget-header,
:is(#category, #search, .categoryproducts) #search_filters .ui-slider .ui-slider-range { background: var(--wc-red) !important; }
:is(#category, #search, .categoryproducts) #search_filters .ui-slider .ui-slider-handle { width: 16px !important; height: 16px !important; top: -6px !important; margin-left: -8px !important; border-radius: 50% !important; background: #fff !important; border: 2px solid var(--wc-red) !important; box-shadow: 0 1px 3px rgba(0,0,0,.2) !important; cursor: grab !important; }

/* PRIX custom (maquette PriceFilter : 2 inputs + dual-range 0–500/+) ; slider jQuery UI natif masqué via .gc-has-price (JS construit q=Prix-€-min-max, max=500 -> max catalogue = palier ouvert) */
:is(#category, #search, .categoryproducts) #search_filters .facet.gc-has-price > ul.faceted-slider { display: none !important; }
:is(#category, #search, .categoryproducts) #search_filters .gc-price { padding: 12px 4px 2px !important; }
:is(#category, #search, .categoryproducts) #search_filters .gc-price .price-fields { display: flex !important; align-items: center !important; gap: 10px !important; margin-bottom: 4px !important; }
:is(#category, #search, .categoryproducts) #search_filters .gc-price .pf { position: relative !important; flex: 1 1 0 !important; min-width: 0 !important; }
:is(#category, #search, .categoryproducts) #search_filters .gc-price .pf > input { width: 100% !important; box-sizing: border-box !important; font-family: "Archivo Narrow",sans-serif !important; font-size: 13.5px !important; font-weight: 600 !important; color: var(--wc-ink) !important; background: var(--wc-grey-50) !important; border: 1px solid var(--wc-border) !important; border-radius: 4px !important; height: 38px !important; padding: 0 10px 0 23px !important; -moz-appearance: textfield !important; }
:is(#category, #search, .categoryproducts) #search_filters .gc-price .pf > input:focus { outline: none !important; border-color: var(--wc-ink) !important; background: #fff !important; }
:is(#category, #search, .categoryproducts) #search_filters .gc-price .pf > input::-webkit-outer-spin-button, :is(#category, #search, .categoryproducts) #search_filters .gc-price .pf > input::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0 !important; }
:is(#category, #search, .categoryproducts) #search_filters .gc-price .pf-cur { position: absolute !important; left: 9px !important; top: 50% !important; transform: translateY(-50%) !important; font-size: 13px !important; color: var(--wc-muted) !important; pointer-events: none !important; }
:is(#category, #search, .categoryproducts) #search_filters .gc-price .pf-dash { color: var(--wc-faint) !important; flex: 0 0 auto !important; }
:is(#category, #search, .categoryproducts) #search_filters .gc-price .dr { padding: 0 8px !important; }
:is(#category, #search, .categoryproducts) #search_filters .gc-price .dr-track { position: relative !important; height: 4px !important; border-radius: 3px !important; background: var(--wc-border) !important; margin: 17px 0 6px !important; }
:is(#category, #search, .categoryproducts) #search_filters .gc-price .dr-fill { position: absolute !important; top: 0 !important; height: 100% !important; border-radius: 3px !important; background: var(--wc-red) !important; }
:is(#category, #search, .categoryproducts) #search_filters .gc-price .dr-knob { position: absolute !important; top: 50% !important; width: 16px !important; height: 16px !important; border-radius: 50% !important; background: #fff !important; border: 2px solid var(--wc-red) !important; transform: translate(-50%,-50%) !important; box-shadow: 0 1px 3px rgba(0,0,0,.25) !important; cursor: grab !important; touch-action: none !important; z-index: 2 !important; }
:is(#category, #search, .categoryproducts) #search_filters .gc-price .dr-knob:active { cursor: grabbing !important; }
:is(#category, #search, .categoryproducts) #search_filters .gc-price .range-bounds { display: flex !important; justify-content: space-between !important; font-family: "Archivo Narrow",sans-serif !important; font-size: 12px !important; color: var(--wc-muted) !important; margin-top: 2px !important; }

/* ===== GC — ZONE D bis : ordre (Prix 1er) + accordéon propre ===== */
:is(#category, #search, .categoryproducts) #search_filters { display: flex !important; flex-direction: column !important; }
:is(#category, #search, .categoryproducts) #search_filters .my-faced { order: -100 !important; }
:is(#category, #search, .categoryproducts) #search_filters .clear-all-wrapper { order: -99 !important; }
:is(#category, #search, .categoryproducts) #search_filters .facet { order: 1 !important; }
:is(#category, #search, .categoryproducts) #search_filters .facet[data-type="price"] { order: -98 !important; }
:is(#category, #search, .categoryproducts) #search_filters .facet:not([data-type="price"]) > ul.collapse,
:is(#category, #search, .categoryproducts) #search_filters .facet:not([data-type="price"]) > ul.faceted-slider { display: none !important; }
:is(#category, #search, .categoryproducts) #search_filters .facet:not([data-type="price"]).gc-open > ul.collapse,
:is(#category, #search, .categoryproducts) #search_filters .facet:not([data-type="price"]).gc-open > ul.faceted-slider { display: block !important; }
:is(#category, #search, .categoryproducts) #search_filters .facet[data-type="price"] > ul.collapse,
:is(#category, #search, .categoryproducts) #search_filters .facet[data-type="price"] > ul.faceted-slider { display: block !important; }
:is(#category, #search, .categoryproducts) #search_filters .facet .collapse-icons { display: none !important; }
:is(#category, #search, .categoryproducts) #search_filters .facet:not([data-type="price"]) .title { position: relative !important; cursor: pointer !important; padding-right: 22px !important; -webkit-user-select: none !important; user-select: none !important; }
:is(#category, #search, .categoryproducts) #search_filters .facet:not([data-type="price"]) .title::after { content: "" !important; position: absolute !important; right: 6px; top: 50%; width: 7px; height: 7px; border-top: 2px solid var(--wc-muted) !important; border-right: 2px solid var(--wc-muted) !important; border-bottom: none !important; transform: translateY(-50%) rotate(45deg); transition: transform .2s ease; pointer-events: none; }
:is(#category, #search, .categoryproducts) #search_filters .facet:not([data-type="price"]).gc-open .title::after { transform: translateY(-50%) rotate(135deg) !important; }
/* Chevron ▾ sur PRIX (toujours ouvert) — maquette */
:is(#category, #search, .categoryproducts) #search_filters .facet[data-type="price"] .title { position: relative !important; padding-right: 22px !important; }
:is(#category, #search, .categoryproducts) #search_filters .facet[data-type="price"] .title::after { content: "" !important; position: absolute !important; right: 6px; top: 50%; width: 7px; height: 7px; border-top: 2px solid var(--wc-muted) !important; border-right: 2px solid var(--wc-muted) !important; border-bottom: none !important; transform: translateY(-50%) rotate(135deg) !important; pointer-events: none; }
/* trait rouge natif sous chaque sous-titre : retiré (garde séparateurs gris + le rouge du titre principal) */
:is(#category, #search, .categoryproducts) #search_filters .facet .facet-title::before, :is(#category, #search, .categoryproducts) #search_filters_wrapper #search_filters .facet .facet-title:before { display: none !important; }
/* compteur de valeurs à côté du titre */
:is(#category, #search, .categoryproducts) #search_filters .facet .gc-facet-count { font-family: "Archivo Narrow",sans-serif !important; font-size: 12px !important; font-weight: 400 !important; color: var(--wc-faint) !important; margin-left: 8px !important; }
/* champ recherche : masqué/affiché AVEC l'accordéon */
:is(#category, #search, .categoryproducts) #search_filters .facet:not([data-type="price"]):not(.gc-open) > .gc-facet-search { display: none !important; }
:is(#category, #search, .categoryproducts) #search_filters .facet:not([data-type="price"]).gc-open > .gc-facet-search { display: block !important; }

/* ===== GC — ZONE A bis : header (titre gauche + compteur + trait rouge) + toolbar. Inline anti-cache. ===== */
:is(#category, #search, .categoryproducts) #wrapper > .container, :is(#category, #search, .categoryproducts) .page-title-wrapper > .container { max-width: none !important; width: 100% !important; padding-left: 40px !important; padding-right: 40px !important; }
@media (max-width:980px){ :is(#category, #search, .categoryproducts) #wrapper > .container, :is(#category, #search, .categoryproducts) .page-title-wrapper > .container { padding-left:24px !important; padding-right:24px !important; } }
@media (max-width:600px){ :is(#category, #search, .categoryproducts) #wrapper > .container, :is(#category, #search, .categoryproducts) .page-title-wrapper > .container { padding-left:18px !important; padding-right:18px !important; } }
:is(#category, #search, .categoryproducts) .page-title-wrapper, :is(#category, #search, .categoryproducts) .page-title-wrapper.p_tilte_small, :is(#category, #search, .categoryproducts) .page-title-wrapper.p_tilte_big { background: none !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; }
:is(#category, #search, .categoryproducts) .page-title-wrapper::before, :is(#category, #search, .categoryproducts) .page-title-wrapper::after { display: none !important; }
:is(#category, #search, .categoryproducts) .page-title-wrapper .container { display: flex !important; flex-direction: column !important; }
:is(#category, #search, .categoryproducts) .page-title-wrapper .page-header { order: 2 !important; }
:is(#category, #search, .categoryproducts) #wrapper .breadcrumb { order: 1 !important; padding: 20px 0 4px !important; margin: 0 !important; background: none !important; }
:is(#category, #search, .categoryproducts) #wrapper .breadcrumb li, :is(#category, #search, .categoryproducts) #wrapper .breadcrumb li a { font-family: "Archivo Narrow",sans-serif !important; font-size: 13px !important; color: var(--wc-muted) !important; }
:is(#category, #search, .categoryproducts) #wrapper .breadcrumb li a:hover { color: var(--wc-ink) !important; }
:is(#category, #search, .categoryproducts) #wrapper .breadcrumb li:last-child, :is(#category, #search, .categoryproducts) #wrapper .breadcrumb li:last-child span { color: var(--wc-red) !important; font-weight: 600 !important; }
:is(#category, #search, .categoryproducts) .page-header { text-align: left !important; display: block !important; padding: 14px 0 0 !important; }
:is(#category, #search, .categoryproducts) .page-header h1 { display: inline-block !important; vertical-align: baseline !important; font-family: "Archivo Narrow",sans-serif !important; font-weight: 600 !important; font-size: 34px !important; line-height: 1.1 !important; color: var(--wc-ink) !important; letter-spacing: .005em !important; margin: 0 !important; }
:is(#category, #search, .categoryproducts) .page-header .gc-cat-count { display: inline-block !important; vertical-align: baseline !important; margin-left: 14px !important; font-family: "Archivo Narrow",sans-serif !important; font-size: 14px !important; font-weight: 500 !important; color: var(--wc-muted) !important; white-space: nowrap !important; }
:is(#category, #search, .categoryproducts) .page-header::after { content: "" !important; display: block !important; width: 46px !important; height: 2px !important; background: var(--wc-red) !important; margin: 14px 0 0 !important; }
@media (max-width:600px){ :is(#category, #search, .categoryproducts) .page-header h1 { font-size: 27px !important; } }
:is(#category, #search, .categoryproducts) #js-product-list-top { padding: 0 !important; margin: 0 0 22px !important; border: none !important; }
:is(#category, #search, .categoryproducts) #js-product-list-top .row.flex-layout { display: flex !important; align-items: center !important; justify-content: space-between !important; flex-wrap: wrap !important; gap: 12px 18px !important; margin: 0 !important; }
:is(#category, #search, .categoryproducts) #js-product-list-top .total-products { display: flex !important; align-items: center !important; gap: 14px !important; width: auto !important; max-width: none !important; flex: 0 1 auto !important; padding: 0 !important; }
:is(#category, #search, .categoryproducts) #js-product-list-top .total-products p { font-family: "Archivo Narrow",sans-serif !important; font-size: 14px !important; color: var(--wc-muted) !important; margin: 0 !important; }
:is(#category, #search, .categoryproducts) #js-product-list-top .sort-by-row { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 16px !important; width: 100% !important; flex: 1 1 auto !important; margin: 0 !important; }
/* la colonne de droite (tri) grandit jusqu'au bord (space-between conservé ; gap:0 supprime les 18px réservés qui empêchaient le col d'atteindre le bord ; padding-right:0 aligne sur les cartes) */
:is(#category, #search, .categoryproducts) #js-product-list-top .row.flex-layout { gap: 0 !important; column-gap: 0 !important; }
:is(#category, #search, .categoryproducts) #js-product-list-top .row > [class*="col-"]:last-child { flex: 1 1 auto !important; max-width: none !important; padding-right: 0 !important; }
:is(#category, #search, .categoryproducts) #js-product-list-top .sort-by { font-family: "Archivo Narrow",sans-serif !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: var(--wc-muted) !important; width: auto !important; padding: 0 !important; }
:is(#category, #search, .categoryproducts) #js-product-list-top .products-sort-order { width: auto !important; flex: 0 0 auto !important; padding: 0 !important; }
/* Bascule vue = groupe bordé, actif fond ink + icône blanche (maquette .view-toggle) */
:is(#category, #search, .categoryproducts) #js-product-list-top ul.display { display: flex !important; align-items: center !important; gap: 0 !important; border: 1px solid var(--wc-border) !important; border-radius: 4px !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; list-style: none !important; }
:is(#category, #search, .categoryproducts) #js-product-list-top ul.display li { width: 40px !important; height: 38px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #fff !important; color: var(--wc-muted) !important; cursor: pointer !important; padding: 0 !important; margin: 0 !important; transition: background .15s, color .15s !important; }
:is(#category, #search, .categoryproducts) #js-product-list-top ul.display li + li { border-left: 1px solid var(--wc-border) !important; }
:is(#category, #search, .categoryproducts) #js-product-list-top ul.display li i { font-size: 18px !important; line-height: 1 !important; height: auto !important; width: auto !important; align-self: center !important; display: block !important; }
:is(#category, #search, .categoryproducts) #js-product-list-top ul.display li.selected { background: var(--wc-ink) !important; color: #fff !important; }
:is(#category, #search, .categoryproducts) #js-product-list-top ul.display li:hover:not(.selected) { color: var(--wc-ink) !important; }

/* ===== GC — CORRECTIFS (vus sur capture) : tri sans cadre noir, slider natif masqué, description non débordante ===== */
/* P3 — TRIER PAR : remplace le cadre noir (#000) par un select propre maquette (.select-wrap select) */
:is(#category, #search, .categoryproducts) #js-product-list-top .products-sort-order .select-title { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 8px !important; min-width: 180px !important; border: 1px solid var(--wc-border) !important; border-radius: 4px !important; color: var(--wc-ink) !important; background-color: #fff !important; font-family: "Archivo Narrow",sans-serif !important; font-size: 13.5px !important; font-weight: 600 !important; padding: 0 13px !important; height: 38px !important; line-height: 1 !important; box-shadow: none !important; }
:is(#category, #search, .categoryproducts) #js-product-list-top .products-sort-order .select-title:hover, :is(#category, #search, .categoryproducts) #js-product-list-top .products-sort-order .select-title:focus { border-color: var(--wc-ink) !important; }
/* flèche dropdown : centrée verticalement + poussée à droite (était flottante en haut) */
:is(#category, #search, .categoryproducts) #js-product-list-top .products-sort-order .select-title i, :is(#category, #search, .categoryproducts) #js-product-list-top .products-sort-order .select-title .material-icons, :is(#category, #search, .categoryproducts) #js-product-list-top .products-sort-order .select-title .float-xs-right { float: none !important; margin: 0 0 0 auto !important; line-height: 1 !important; height: auto !important; font-size: 20px !important; color: var(--wc-muted) !important; display: inline-flex !important; align-items: center !important; align-self: center !important; }
/* PRIX — masquer TOUT le slider jQuery UI natif (handles + label "x € - y €") ; ne garder que le titre + mon .gc-price */
:is(#category, #search, .categoryproducts) #search_filters .facet.gc-has-price > *:not(.title):not(.gc-price) { display: none !important; }
/* P4 — En-tête : la description (page_map) ne déborde plus sur le catalogue (marge nette + clip borné) */
:is(#category, #search, .categoryproducts) #js-product-list-header { margin: 0 0 22px !important; padding: 0 !important; clear: both !important; }
:is(#category, #search, .categoryproducts) #js-product-list-header .block-category { margin: 10px 0 0 !important; }
:is(#category, #search, .categoryproducts) #js-product-list-header .gc-seo-clip { max-height: 4.9em !important; }

/* ============================================================
   GC — CTA « Ajouter au panier » VISIBLE AU REPOS (grille + liste).
   Thème : cache au repos (position:absolute; font-size:0; opacity:0; visibility:hidden;
   transform; fond jaune #fee119) et révèle au survol. On force l'état au repos en
   neutralisant TOUTES ces propriétés, sur le conteneur ET le bouton. 2 ids pour battre
   le thème. NE touche PAS au formulaire add-to-cart de la fiche produit (#product). !important.
   ============================================================ */
/* (a) montrer au repos — grille + liste, sans toucher au layout */
:is(#category, #search, .categoryproducts) #js-product-list .js-product-miniature .add-to-links,
:is(#category, #search, .categoryproducts) #js-product-list .js-product-miniature .add-to-links li.cart,
:is(#category, #search, .categoryproducts) #js-product-list .js-product-miniature .add-to-links li.cart .ajax_add_to_cart_button,
:is(#category, #search, .categoryproducts) #js-product-list .js-product-miniature .add-to-links li.cart .add-to-cart {
  opacity: 1 !important; visibility: visible !important;
  transform: none !important; -webkit-transform: none !important; -moz-transform: none !important;
  max-height: none !important; overflow: visible !important;
}
:is(#category, #search, .categoryproducts) #js-product-list .js-product-miniature .add-to-links { font-size: 13px !important; }
/* (b) GRILLE (style_product2) : conteneur en flux, bas de carte (anti position:absolute) */
:is(#category, #search, .categoryproducts) #js-product-list .js-product-miniature.style_product2 .add-to-links {
  position: static !important; top: auto !important; bottom: auto !important; left: auto !important; right: auto !important;
  display: block !important; height: auto !important; background: transparent !important; margin: 14px 0 0 !important; padding: 0 !important;
}
:is(#category, #search, .categoryproducts) #js-product-list .js-product-miniature.style_product2 .add-to-links li.cart { display: block !important; width: 100% !important; margin: 0 !important; }
:is(#category, #search, .categoryproducts) #js-product-list .js-product-miniature.style_product2 .add-to-links li.cart .ajax_add_to_cart_button { height: 44px !important; }
/* (c) bouton : fond rouge + label (anti font-size:0 + fond jaune) — grille + liste */
:is(#category, #search, .categoryproducts) #js-product-list .js-product-miniature .add-to-links li.cart .ajax_add_to_cart_button,
:is(#category, #search, .categoryproducts) #js-product-list .js-product-miniature .add-to-links li.cart .add-to-cart {
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 100% !important; min-width: 0 !important;
  background: var(--wc-red) !important; color: #fff !important;
  font-family: "Archivo Narrow", sans-serif !important; font-size: 12.5px !important; font-weight: 600 !important;
  letter-spacing: .08em !important; text-transform: uppercase !important; line-height: 1 !important;
  border: none !important; border-radius: 4px !important; padding: 0 14px !important; cursor: pointer !important;
}
/* (d) icône :before du thème masquée (mockup = libellé) ; liens non-cart masqués (hors mockup) */
:is(#category, #search, .categoryproducts) #js-product-list .js-product-miniature .add-to-links li.cart .ajax_add_to_cart_button::before { display: none !important; }
:is(#category, #search, .categoryproducts) #js-product-list .js-product-miniature .add-to-links li:not(.cart) { display: none !important; }

/* ===== GC — corrections front LWC (fin) ===== */

/* ===== GC — RECHERCHE uniquement (#search) : terme recherché en gras entre guillemets +
   espace sous l'en-tête (la catégorie a sa description à cet endroit, pas la recherche). ===== */
#search .page-header h1 strong { font-weight: 700 !important; }
#search .row.row-wrapper { margin-top: 36px !important; }




/* ==========================================================================
   GC — LWC : Améliorations menu/navbar/cart (2026-06-04)
   Scope : 3 fixes décidés en fresh-eyes review
   - (1) Compteur panier dissocié du prix → pastille rouge sur l'icône
   - (2) Onglet actif/survolé : trait rouge + épais & fond + contrasté
   - (3) CTA copy fix géré dans posmegamenu.tpl ("Voir l'appellation" → "Voir plus")
   ========================================================================== */

/* (1) ------ Compteur panier en pastille rouge superposée sur l'icône ------ */
#_desktop_cart_block .blockcart > a {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  overflow: visible !important;
}
#_desktop_cart_block .blockcart > a > i {
  position: relative !important;
  line-height: 1 !important;
}
#_desktop_cart_block .blockcart .cart-products-count {
  position: absolute !important;
  top: -8px !important;
  left: 10px !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 5px !important;
  background: var(--wc-red) !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  font-style: normal !important;
  line-height: 18px !important;
  text-align: center !important;
  letter-spacing: 0 !important;
  box-shadow: 0 0 0 2px #fff !important;
  z-index: 3 !important;
  pointer-events: none;
}
#_desktop_cart_block .blockcart[data-cartitems="0"] .cart-products-count {
  display: none !important;
}
#_desktop_cart_block .blockcart .cart-products-total {
  margin-left: 4px !important;
}

/* (2) ------ Onglet actif / survolé : fond + trait rouge renforcés -------- */
#_desktop_megamenu .pos-menu-horizontal .menu-content > li.menu-item:hover > a,
#_desktop_megamenu .pos-menu-horizontal .menu-content > li.menu-item.active > a {
  background: rgba(255,255,255,.18) !important;
}
#_desktop_megamenu .pos-menu-horizontal .menu-content > li.menu-item:hover > a::after,
#_desktop_megamenu .pos-menu-horizontal .menu-content > li.menu-item.active > a::after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -1px !important;
  height: 3px !important;
  background: var(--wc-red) !important;
  z-index: 5 !important;
}
/* ==========================================================================
   GC — LWC : Améliorations menu/navbar/cart                          [fin]
   ========================================================================== */


/* ==========================================================================
   GC — LWC : Connexion & Création de compte (charte Le Wine Club)   [début]
   Restyle CSS pur des templates customer/authentication + registration.
   Charte : rouge #AC0505 · encre #373737 · vin #6e1414 · Archivo Narrow + Georgia.
   Transposition du bloc auth V10V. Ajouté en fin de région GC (flux serveur intact).
   Polices : Archivo Narrow chargée via @import (l.1) + Google Fonts ; Georgia = système.
   ========================================================================== */

/* Variables locales charte (auto-portées, scopées aux pages auth) */
body#authentication,
body#registration,
body#password {
  --la-red: #AC0505;
  --la-red-deep: #8d0404;
  --la-red-tint: #fbeaea;
  --la-red-line: #eccccc;
  --la-ink: #373737;
  --la-text: #4a4a4a;
  --la-muted: #8a8a8a;
  --la-line: #e5e5e5;
  --la-field: #f6f5f3;
  --la-wine: #6e1414;
  --la-wine-2: #220505;
  --la-title: "Archivo Narrow", "Helvetica Neue", Arial, sans-serif;
  --la-serif: Georgia, "Times New Roman", serif;
  --la-sans: "Archivo Narrow", "Helvetica Neue", Arial, sans-serif;
}

/* Fond de page sobre + neutralisation du chrome de contenu thème */
body#authentication,
body#registration,
body#password {
  background-color: #f6f5f3 !important;
}
body#authentication #content,
body#registration #content,
body#password #content {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
body#authentication .page-title-wrapper,
body#registration .page-title-wrapper,
body#password .page-title-wrapper {
  display: none !important;
}

/* ==========================================================================
   Carte en split : panneau visuel (gauche) + formulaire (droite)
   ========================================================================== */
.custom-login-wrapper,
.custom-register-wrapper {
  max-width: 1040px;
  margin: clamp(28px, 5vw, 64px) auto;
  padding: 0 16px;
  font-family: var(--la-sans);
  color: var(--la-text);
}

/* Largeur de la colonne visuelle gauche (panneau absolu) */
:root,
body#authentication,
body#registration {
  --la-panel-w: clamp(280px, 36%, 380px);
}

/* Reset box-sizing dans les cartes (au cas où le thème ne l'impose pas) */
.custom-login-wrapper *,
.custom-register-wrapper * {
  box-sizing: border-box;
}

.login-card,
.register-card {
  position: relative;
  background-color: #fff;
  border-radius: 18px;
  /* La colonne gauche (panneau visuel) est en position absolue : on réserve
     sa largeur via le padding-left de la carte. */
  padding: clamp(34px, 4vw, 52px) clamp(34px, 4vw, 52px) clamp(30px, 4vw, 44px);
  padding-left: calc(var(--la-panel-w) + clamp(34px, 4vw, 56px));
  box-shadow: 0 28px 60px -34px rgba(110, 20, 20, 0.40), 0 2px 6px rgba(55, 55, 55, 0.05);
  border: 1px solid var(--la-line);
  overflow: hidden;
}

/* Panneau visuel à gauche (absolu, pleine hauteur de la carte) */
.login-card::before,
.register-card::before {
  content: "";
  position: absolute;
  left: clamp(14px, 1.6vw, 18px);
  top: clamp(14px, 1.6vw, 18px);
  bottom: clamp(14px, 1.6vw, 18px);
  width: var(--la-panel-w);
  border-radius: 14px;
  background:
    radial-gradient(120% 90% at 78% 12%, rgba(172, 5, 5, 0.48), transparent 55%),
    linear-gradient(158deg, #6e1414 0%, #3a0a0a 58%, #1c0404 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  z-index: 0;
}

/* Contenu textuel du panneau visuel (par-dessus le dégradé) */
.login-card::after,
.register-card::after {
  position: absolute;
  left: clamp(14px, 1.6vw, 18px);
  top: clamp(14px, 1.6vw, 18px);
  bottom: clamp(14px, 1.6vw, 18px);
  width: var(--la-panel-w);
  border-radius: 14px;
  padding: clamp(28px, 3vw, 38px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 16px;
  color: #fff;
  pointer-events: none;
  z-index: 1;
  font-family: var(--la-serif);
  font-weight: 400;
  line-height: 1.6;
  font-size: 14.5px;
  box-sizing: border-box;
}
.login-card::after {
  content: "LE WINE CLUB\A\A Bon retour au Club.\A Retrouvez vos commandes, vos favoris et notre sélection de cavistes.\A\A ✦  Paiement 100 % sécurisé\A ✦  Une sélection de cavistes\A ✦  Expédition soignée";
  white-space: pre-line;
}
.register-card::after {
  content: "LE WINE CLUB\A\A Rejoignez le Club.\A Créez votre compte pour commander en un clic et suivre vos livraisons.\A\A ✦  Paiement 100 % sécurisé\A ✦  Une sélection de cavistes\A ✦  Expédition soignée";
  white-space: pre-line;
}

/* Les vrais contenus passent au-dessus du panneau, dans la colonne droite */
.custom-login-wrapper .login-card > *,
.custom-register-wrapper .register-card > * {
  position: relative;
  z-index: 2;
}

/* Titres / sous-titres — titre = Archivo Narrow MAJ (identité LWC), sous-titre = Georgia */
.login-card-title,
.register-card-title {
  font-family: var(--la-title) !important;
  font-size: clamp(25px, 3vw, 32px);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase !important;
  color: var(--la-ink);
  margin: 0 0 8px 0;
  text-align: left;
}
.login-card-subtitle,
.register-card-subtitle {
  font-family: var(--la-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--la-muted);
  margin: 0 0 26px 0;
  text-align: left;
}
.login-card-subtitle a,
.register-card-subtitle a {
  color: var(--la-red) !important;
  font-weight: 700;
  font-style: normal;
  text-decoration: none;
}
.login-card-subtitle a:hover,
.register-card-subtitle a:hover {
  color: var(--la-red-deep) !important;
  text-decoration: underline;
}

/* Eyebrow décoratif au-dessus du titre */
.login-card-title::before,
.register-card-title::before {
  content: "Espace membre";
  display: block;
  font-family: var(--la-sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--la-red);
  margin-bottom: 12px;
}

/* ==========================================================================
   Champs de formulaire (pilules charte)
   ========================================================================== */
.login-card .form-group,
.register-card .form-group {
  display: flex !important;
  flex-direction: column !important;
  margin: 0 0 16px 0 !important; /* annule les marges négatives Bootstrap .row */
  width: 100% !important;
}
/* Neutralise les marges négatives des .row du thème dans les cartes */
.login-card .row,
.register-card .row,
.login-card #login-form > div,
.register-card #customer-form > div {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Masquer champs ETS vides + commentaires vides */
.register-card .form-group.row:has(> label[for=""]),
.register-card .form-control-comment:empty {
  display: none !important;
}

.login-card .form-group .form-control-label,
.register-card .form-group .form-control-label {
  text-align: left !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  margin-bottom: 7px !important;
  font-family: var(--la-sans) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  color: var(--la-ink) !important;
  padding: 0 !important;
}

.login-card .form-group > div,
.register-card .form-group > div {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  padding: 0 !important;
}

.login-card .form-control,
.register-card .form-control {
  width: 100% !important;
  height: 50px !important;
  padding: 12px 16px !important;
  box-sizing: border-box !important;
  font-family: var(--la-sans) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  border: 1.5px solid var(--la-line) !important;
  border-radius: 10px !important;
  background-color: var(--la-field) !important;
  color: var(--la-ink) !important;
  box-shadow: none !important;
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s !important;
}
.login-card .form-control::placeholder,
.register-card .form-control::placeholder {
  color: #a6a6a6 !important;
}
.login-card .form-control:focus,
.register-card .form-control:focus {
  border-color: var(--la-red) !important;
  background-color: #fff !important;
  box-shadow: 0 0 0 3px rgba(172, 5, 5, 0.14) !important;
  outline: none !important;
}

/* Select (au cas où un thème en ajoute) */
.register-card select,
.register-card select.form-control,
.register-card select.form-control-select {
  width: 100% !important;
  height: 50px !important;
  padding: 12px 16px !important;
  font-family: var(--la-sans) !important;
  font-size: 15px !important;
  border: 1.5px solid var(--la-line) !important;
  border-radius: 10px !important;
  background-color: var(--la-field) !important;
  color: var(--la-ink) !important;
  box-sizing: border-box !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 16px !important;
  padding-right: 42px !important;
}

/* ==========================================================================
   Titre (civilité) — radios M. / Mme en "pills"
   ========================================================================== */
.register-card .form-group:has(input[name="id_gender"]) > div {
  display: flex !important;
  gap: 10px !important;
}
.register-card .radio-inline {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 11px 18px !important;
  font-family: var(--la-sans) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--la-ink) !important;
  background: var(--la-field) !important;
  border: 1.5px solid var(--la-line) !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  transition: border-color 0.2s, background-color 0.2s, color 0.2s !important;
}
.register-card .radio-inline:hover {
  border-color: var(--la-red-line) !important;
}
/* La pastille radio native est masquée (le label-pilule fait office de bouton) */
.register-card .radio-inline .custom-radio,
.register-card .radio-inline .custom-radio span {
  display: none !important;
}
.register-card .radio-inline input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  pointer-events: none !important;
}
.register-card .radio-inline:has(input:checked) {
  border-color: var(--la-red) !important;
  background: var(--la-red-tint) !important;
  color: var(--la-red-deep) !important;
}

/* ==========================================================================
   Mot de passe : bouton "Afficher / show-password"
   (login : .password-input-container ; register : .input-group)
   ========================================================================== */
.login-card .password-input-container,
.register-card .password-input-container,
.register-card .input-group,
.login-card .input-group {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
}
.login-card .password-input-container .form-control,
.register-card .password-input-container .form-control,
.register-card .input-group .form-control,
.login-card .input-group .form-control {
  padding-right: 92px !important;
  border-radius: 10px !important;
  width: 100% !important;
  display: block !important;
}
.login-card .password-input-container .show-password-btn,
.register-card .password-input-container .show-password-btn,
.register-card .input-group .input-group-btn,
.login-card .input-group .input-group-btn {
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  height: 50px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 10 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}
.login-card .password-input-container .show-password-btn,
.register-card .password-input-container .show-password-btn,
.register-card .input-group .input-group-btn .btn,
.login-card .input-group .input-group-btn .btn {
  color: var(--la-red) !important;
  font-family: var(--la-sans) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  outline: none !important;
  cursor: pointer !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 16px !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
}
.register-card .password-input-container .show-password-btn,
.register-card .input-group .input-group-btn .btn {
  margin-right: 0 !important;
}

/* ==========================================================================
   Cases à cocher (optin, GDPR, newsletter) — charte
   ========================================================================== */
.register-card .extra_customer_box_form {
  display: none !important;
}
.register-card .custom-checkbox,
.register-card .checkbox,
.register-card .form-group.checkbox,
.register-card [class*="gdpr_consent"],
.register-card [class*="gdpr-consent"],
.register-card .custom-checkbox-wrapper {
  display: flex !important;
  align-items: flex-start !important;
  margin-bottom: 6px !important;
  width: 100% !important;
  padding: 0 !important;
}
.register-card .custom-checkbox label,
.register-card .checkbox label,
.register-card [class*="gdpr_consent"] label,
.register-card [class*="gdpr-consent"] label,
.register-card .custom-checkbox-wrapper label {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  font-family: var(--la-serif) !important;
  font-size: 13px !important;
  color: var(--la-text) !important;
  line-height: 1.45 !important;
  cursor: pointer !important;
  margin: 0 !important;
  text-align: left !important;
}
/* Case native masquée — la pastille stylée (span suivant) la remplace */
.register-card .custom-checkbox label input[type="checkbox"],
.register-card .checkbox label input[type="checkbox"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  pointer-events: none !important;
}
/* Pastille visuelle de la case (le <span> qui suit l'input) */
.register-card .custom-checkbox label > span:first-of-type,
.register-card .checkbox label > span:first-of-type {
  flex: 0 0 auto !important;
  width: 20px !important;
  height: 20px !important;
  border: 1.5px solid var(--la-line) !important;
  border-radius: 6px !important;
  background: var(--la-field) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 1px !important;
  transition: border-color 0.15s, background-color 0.15s !important;
}
.register-card .custom-checkbox label:has(input:checked) > span:first-of-type,
.register-card .checkbox label:has(input:checked) > span:first-of-type,
.register-card .custom-checkbox label input:checked + span,
.register-card .checkbox label input:checked + span {
  border-color: var(--la-red) !important;
  background: var(--la-red) !important;
}
.register-card .custom-checkbox label .checkbox-checked,
.register-card .checkbox label .checkbox-checked {
  color: #fff !important;
  font-size: 15px !important;
}
.register-card .custom-checkbox label em,
.register-card .checkbox label em,
.register-card [class*="gdpr_consent"] label em,
.register-card [class*="gdpr-consent"] label em {
  font-size: 11.5px !important;
  color: var(--la-muted) !important;
  font-style: normal !important;
}
.register-card .custom-checkbox label em p,
.register-card .checkbox label em p {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: inherit !important;
  color: inherit !important;
}
.register-card .custom-checkbox a,
.register-card .checkbox a {
  color: var(--la-red) !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
}

/* ==========================================================================
   Boutons d'envoi — rouge charte
   ========================================================================== */
.login-card #submit-login,
.login-card .form-control-submit,
.register-card .form-control-submit,
.login-card .form-footer .btn-primary,
.register-card .form-footer .btn-primary {
  width: 100% !important;
  height: 52px !important;
  margin-top: 8px !important;
  background-color: var(--la-red) !important;
  background-image: none !important;
  border: 1.5px solid var(--la-red) !important;
  border-radius: 9px !important;
  color: #fff !important;
  font-family: var(--la-sans) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  box-shadow: 0 12px 26px -14px rgba(172, 5, 5, 0.55) !important;
  cursor: pointer !important;
  transition: background-color 0.2s, border-color 0.2s, transform 0.12s !important;
  float: none !important;
}
.login-card #submit-login:hover,
.login-card .form-control-submit:hover,
.register-card .form-control-submit:hover {
  background-color: var(--la-red-deep) !important;
  border-color: var(--la-red-deep) !important;
}
.login-card #submit-login:active,
.register-card .form-control-submit:active {
  transform: scale(0.99) !important;
}
.login-card .form-footer,
.register-card .form-footer {
  margin-top: 4px !important;
  padding: 0 !important;
  text-align: left !important;
}

/* Masquer libellés "optionnel"/commentaires parasites */
.login-card .form-control-comment,
.register-card .form-control-comment,
.register-card .optional,
.register-card .optionnel,
.register-card span.optional,
.register-card span.optionnel,
.register-card div.optional,
.register-card div.optionnel,
#customer-form .form-control-comment,
#customer-form .optional,
#customer-form .optionnel {
  display: none !important;
}

/* Lien "mot de passe oublié" */
.forgot-password {
  text-align: right;
  margin-top: -6px;
  margin-bottom: 22px;
}
.forgot-password a {
  font-family: var(--la-sans);
  font-size: 13px;
  color: var(--la-red);
  font-weight: 600;
  text-decoration: none;
}
.forgot-password a:hover {
  color: var(--la-red-deep);
  text-decoration: underline;
}

/* Bascule "Pas de compte ?" (login) — sous la carte, alignée colonne droite */
.no-account-box {
  text-align: center;
  margin: 18px auto 0;
  max-width: 1040px;
  padding: 0 16px;
  font-family: var(--la-sans);
  font-size: 14px;
  color: var(--la-muted);
}
.no-account-box a {
  color: var(--la-red);
  font-weight: 700;
  text-decoration: none;
}
.no-account-box a:hover {
  color: var(--la-red-deep);
  text-decoration: underline;
}

/* Messages d'erreur (form-errors) à la charte */
body#authentication .alert,
body#registration .alert,
body#password .alert,
.login-card .help-block,
.register-card .help-block {
  font-family: var(--la-sans) !important;
  font-size: 13px !important;
  border-radius: 9px !important;
}
.login-card .has-error .form-control,
.register-card .has-error .form-control {
  border-color: #d63a4a !important;
}

/* ==========================================================================
   Responsive — le panneau visuel passe en bandeau haut, puis disparaît
   ========================================================================== */
@media (max-width: 860px) {
  .login-card,
  .register-card {
    padding-left: clamp(22px, 5vw, 40px) !important;
    padding-right: clamp(22px, 5vw, 40px) !important;
    padding-top: calc(200px + clamp(24px, 4vw, 34px)) !important;
  }
  .login-card::before,
  .register-card::before,
  .login-card::after,
  .register-card::after {
    left: clamp(14px, 3vw, 18px);
    right: clamp(14px, 3vw, 18px);
    top: clamp(14px, 3vw, 18px);
    bottom: auto;
    width: auto;
    height: 200px;
  }
  .login-card::after,
  .register-card::after {
    height: 200px;
    padding: clamp(20px, 4vw, 28px);
    justify-content: center;
    gap: 14px;
  }
}
@media (max-width: 560px) {
  .login-card,
  .register-card {
    padding-top: clamp(28px, 6vw, 36px) !important;
  }
  .login-card::before,
  .register-card::before { display: none; }
  .login-card::after,
  .register-card::after { display: none; }
}

/* --------------------------------------------------------------------------
   AMENDMENT 2026-06-04 (retour client) :
   • retrait du panneau visuel rouge → carte mono-colonne recentrée, plus étroite
   • retrait du titre (et de son eyebrow ::before)
   • Prénom / Nom côte à côte (inscription)
   -------------------------------------------------------------------------- */
.custom-login-wrapper,
.custom-register-wrapper { max-width: 560px !important; }
.no-account-box { max-width: 560px !important; }
.login-card,
.register-card {
  padding: clamp(32px, 4vw, 46px) clamp(28px, 4vw, 44px) clamp(28px, 4vw, 40px) !important;
}
/* Panneau visuel supprimé */
.login-card::before,
.register-card::before,
.login-card::after,
.register-card::after { display: none !important; content: none !important; }
/* Titre (et eyebrow) supprimés */
.login-card-title,
.register-card-title { display: none !important; }
.login-card-subtitle,
.register-card-subtitle { margin-top: 2px !important; }
/* Prénom + Nom côte à côte (float = robuste face aux espaces inline) */
.register-card #customer-form .form-group:has(#field-firstname),
.register-card #customer-form .form-group:has(#field-lastname) {
  float: left !important;
  width: calc(50% - 7px) !important;
}
.register-card #customer-form .form-group:has(#field-firstname) { margin-right: 14px !important; }
.register-card #customer-form .form-group:has(#field-email) { clear: both !important; }
/* Responsive : neutralise l'ancien décalage panneau + repasse les noms en pile */
@media (max-width: 860px) {
  .login-card,
  .register-card {
    padding-top: clamp(32px, 4vw, 46px) !important;
    padding-left: clamp(22px, 5vw, 40px) !important;
    padding-right: clamp(22px, 5vw, 40px) !important;
  }
}
@media (max-width: 560px) {
  .register-card #customer-form .form-group:has(#field-firstname),
  .register-card #customer-form .form-group:has(#field-lastname) { float: none !important; width: 100% !important; }
  .register-card #customer-form .form-group:has(#field-firstname) { margin-right: 0 !important; }
}
/* ==========================================================================
   GC — LWC : Connexion & Création de compte (charte Le Wine Club)    [fin]
   ========================================================================== */

/* ==========================================================================
   GC — LWC : Home en crème continue (2026-06-04 PM)
   Suppression de la "bande blanche orpheline" entre image grappes (#04 9b2f461,
   bg #FFFFFF explicite), réassurance triptyque (#05 2c018d83, transparent),
   section vide (#06 f41d6a8, ~600 B sans contenu) et témoignages (#07 53ad495,
   crème #fbf7f0). Choix : monochrome crème sur toute la home — cartes blanches
   (témoignages) ressortent par contraste interne. Scope : body#index uniquement.
   ========================================================================== */
body#index.page-index {
  background-color: #fbf7f0 !important;
}
/* Section grappes #04 : force le fond explicite blanc vers crème pour absorber */
body#index .elementor-element-9b2f461:not(.elementor-motion-effects-element-type-background),
body#index .elementor-element-9b2f461 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-color: #fbf7f0 !important;
}
/* Section vide #06 (f41d6a8, 0 widget) : retire-la pour collapser l'écart */
body#index .elementor-element-f41d6a8 {
  display: none !important;
}
/* ==========================================================================
   GC — LWC : Home en crème continue                                  [fin]
   ========================================================================== */

/* === GC PRIMEUR : fiche en pré-commande -> ne garder que le bouton « Pré-Commander » === */
.product-add-to-cart:has(.fmmpreorderButton) .add,
.product-add-to-cart:has(.fmmpreorderButton) .cart_button,
.product-add-to-cart:has(.fmmpreorderButton) .js-mailalert { display: none !important; }

/* === GC PRIMEUR : pastille « PRIMEUR » sur l'image (cartes LWC), équivalent LCDCE === */
.js-product-miniature:has(.my-preorder-label) .product_desc,
.js-product-miniature:has(.my-preorder-label) .inner_desc,
.js-product-miniature:has(.my-preorder-label) .hook-reviews { position: static !important; }
.js-product-miniature .my-preorder-label { position: absolute !important; top: 12px !important; left: 0 !important; width: auto !important; z-index: 6 !important; }
.js-product-miniature .my-preorder-label-text { display: inline-block !important; padding: 5px 12px !important; border-radius: 0 6px 6px 0 !important; color: #fff !important; font-weight: 600 !important; font-size: 12px !important; text-transform: uppercase !important; letter-spacing: 1px !important; }

/* === GC PRIMEUR : pastille sur l'image de la FICHE LWC === */
.product-cover-container { position: relative; }
.product-cover-container .my-preorder-label { position: absolute !important; top: 12px !important; left: 0 !important; width: auto !important; z-index: 6 !important; }
.product-cover-container .my-preorder-label-text { display: inline-block !important; padding: 6px 14px !important; border-radius: 0 6px 6px 0 !important; color: #fff !important; font-weight: 600 !important; font-size: 13px !important; text-transform: uppercase !important; letter-spacing: 1px !important; }

/* === GC PRIMEUR : CTA fiche PREMIUM (LWC) === */
#product .product-quantity:has(.fmmpreorderButton){display:flex !important;align-items:stretch !important;gap:14px !important;flex-wrap:nowrap !important;max-width:500px}
#product .product-quantity:has(.fmmpreorderButton) .qty{flex:0 0 auto}
#product .product-quantity:has(.fmmpreorderButton) .product-additional-info{flex:1 1 auto;display:flex;align-items:stretch;margin:0 !important}
#product .fmmpoLatestver.box{flex:1;display:flex;border:0 !important;box-shadow:none !important;padding:0 !important;margin:0 !important;background:transparent !important}
#product .fmmpoLatestver.box br{display:none !important}
#product .fmmpreorderButton{flex:1;width:100% !important;height:auto !important;min-height:46px !important;margin:0 !important;padding:11px 28px !important;background:#619651 !important;border:0 !important;border-radius:6px !important;color:#fff !important;font-size:13.5px !important;font-weight:700 !important;letter-spacing:1.3px !important;text-transform:uppercase !important;box-shadow:0 4px 12px rgba(97,150,81,.2) !important;cursor:pointer !important;transition:background .2s,transform .15s,box-shadow .2s !important}
#product .fmmpreorderButton:hover{background:#527f43 !important;transform:translateY(-1px) !important;box-shadow:0 6px 15px rgba(97,150,81,.3) !important}
#product .fmmpreorderButton:active{transform:translateY(0) !important}
/* stepper aligné/épuré */
#product .product-quantity:has(.fmmpreorderButton) .qty .input-group,
#product .product-quantity:has(.fmmpreorderButton) #quantity_wanted{height:52px !important}

/* === GC PRIMEUR : ajustements CTA fiche LWC (badge collé gauche + bouton sans ombre) === */
#product .product-cover-container .my-preorder-label{left:-17px !important}
#product .fmmpreorderButton,
#product .fmmpreorderButton:hover{box-shadow:none !important}

/* === GC PRIMEUR : retirer le trait gris au-dessus du CTA (border-top product-additional-info) === */
#product .product-additional-info{border-top:0 !important;margin-top:0 !important;padding-top:0 !important}

/* === GC PRIMEUR : police du titre du vin (Archivo Narrow) sur bouton CTA + tag PRIMEUR === */
#product .fmmpreorderButton{font-family:"Archivo Narrow",sans-serif !important}
.my-preorder-label-text,
#product .my-preorder-label-text{font-family:"Archivo Narrow",sans-serif !important}

/* ==========================================================================
   GC — LWC : Page Contact "Nous contacter" — v3 (façon La Cave des CE) [début]
   2026-06-09
   Carte blanche centrée, en-tête "Vous avez une question ?" + tél + filet,
   formulaire à champs sur 2 colonnes. Pas de panneau réassurance.
   Charte LWC : rouge #AC0505 · Archivo Narrow + Georgia.
   ========================================================================== */

body#contact {
  --lc-red: #AC0505;
  --lc-red-deep: #8d0404;
  --lc-red-tint: #fbeaea;
  --lc-red-line: #e9c9c9;
  --lc-ink: #373737;
  --lc-text: #4a4a4a;
  --lc-muted: #8a8a8a;
  --lc-line: #ddd8d2;
  --lc-page: #f1efec;
  --lc-title: "Archivo Narrow", "Helvetica Neue", Arial, sans-serif;
  --lc-serif: Georgia, "Times New Roman", serif;
  --lc-sans: "Archivo Narrow", "Helvetica Neue", Arial, sans-serif;
}

body#contact { background-color: var(--lc-page) !important; }
body#contact #main { background: transparent !important; }
body#contact #main .row { margin-left: 0 !important; margin-right: 0 !important; }
body#contact .page-header,
body#contact .page-title-wrapper,
body#contact .breadcrumb { display: none !important; }
/* Champ "Document joint" retiré (demande Gabriel) */
body#contact .form-group.row:has(input[type="file"]) { display: none !important; }

body#contact #content-wrapper.js-content-wrapper {
  float: none !important; width: 100% !important; max-width: 880px !important;
  margin: clamp(24px, 4vw, 54px) auto !important; padding-left: 16px !important; padding-right: 16px !important;
}
body#contact #content.page-content {
  background: none !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; overflow: visible !important;
}
body#contact #content.page-content * { box-sizing: border-box; }

body#contact .gc-contact {
  background: #fff; border: 1px solid var(--lc-line); border-radius: 14px;
  box-shadow: 0 30px 60px -38px rgba(110, 20, 20, 0.30), 0 2px 8px rgba(55, 55, 55, 0.05);
  padding: clamp(30px, 4vw, 56px) clamp(24px, 4vw, 56px) clamp(28px, 4vw, 48px);
}

body#contact .gc-c-head { text-align: center; margin-bottom: clamp(22px, 3vw, 34px); }
body#contact .gc-c-title {
  font-family: var(--lc-title); font-size: clamp(27px, 3.4vw, 38px); font-weight: 600;
  letter-spacing: 0.02em; text-transform: uppercase; color: var(--lc-ink); margin: 0 0 12px 0; line-height: 1.08;
}
body#contact .gc-c-sub {
  font-family: var(--lc-serif); font-style: italic; font-size: 16px; font-weight: 400; line-height: 1.55;
  color: var(--lc-text); margin: 0 auto; max-width: 34em;
}
body#contact .gc-c-sub strong { font-weight: 700; font-style: normal; color: var(--lc-ink); white-space: nowrap; }
body#contact .gc-c-todo {
  display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: var(--lc-red-tint); color: var(--lc-red-deep);
  font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; vertical-align: middle;
}
body#contact .gc-c-rule { display: block; width: 56px; height: 3px; border-radius: 3px; background: var(--lc-red); margin: clamp(18px, 2.4vw, 26px) auto clamp(16px, 2vw, 22px); }
body#contact .gc-c-formtitle {
  font-family: var(--lc-title); font-size: 14px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lc-muted); margin: 0; text-align: center;
}

body#contact .form-fields .form-group.row:not(:has(input)):not(:has(select)):not(:has(textarea)) { display: none !important; margin: 0 !important; }

body#contact .form-fields { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 2px 22px !important; margin: 0 !important; padding: 0 !important; }
body#contact .form-group.row { display: flex !important; flex-direction: column !important; margin: 0 0 16px 0 !important; width: 100% !important; min-width: 0 !important; }
body#contact .form-group.row:has(input[type="file"]), body#contact .form-group.row:has(#id_contact), body#contact .form-group.row:has(textarea) { grid-column: 1 / -1 !important; }
body#contact .form-group.row .row { margin-left: 0 !important; margin-right: 0 !important; }

body#contact .form-control-label {
  text-align: left !important; width: 100% !important; max-width: 100% !important; flex: 0 0 auto !important; margin-bottom: 7px !important; padding: 0 !important;
  font-family: var(--lc-sans) !important; font-weight: 600 !important; font-size: 14px !important; letter-spacing: 0.01em !important; color: var(--lc-ink) !important;
}
body#contact .form-group.row > div[class*="col-"] { width: 100% !important; max-width: 100% !important; flex: 0 0 auto !important; padding: 0 !important; }

body#contact .form-control {
  width: 100% !important; height: 48px !important; padding: 11px 14px !important;
  font-family: var(--lc-sans) !important; font-size: 15px !important; font-weight: 400 !important;
  color: var(--lc-ink) !important; background-color: #fff !important; border: 1px solid var(--lc-line) !important; border-radius: 7px !important; box-shadow: none !important;
  transition: border-color 0.18s, box-shadow 0.18s !important;
}
body#contact .form-control::placeholder { color: #b0aaa4 !important; }
body#contact .form-control:focus { border-color: var(--lc-red) !important; box-shadow: 0 0 0 3px rgba(172, 5, 5, 0.12) !important; outline: none !important; }
body#contact select.form-control {
  appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; padding-right: 40px !important; cursor: pointer !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 13px center !important; background-size: 16px !important;
}
body#contact textarea.form-control { height: auto !important; min-height: 150px !important; padding-top: 12px !important; line-height: 1.55 !important; resize: vertical !important; }

body#contact .form-group.row:has(input[type="file"]) > div[class*="col-"] { position: relative !important; }
body#contact input[type="file"] {
  position: relative !important; z-index: 1 !important; width: 100% !important; height: auto !important; min-height: 48px !important; padding: 14px 14px 14px 180px !important;
  font-family: var(--lc-sans) !important; font-size: 13.5px !important; color: var(--lc-muted) !important;
  background-color: #fff !important; border: 1px dashed var(--lc-red-line) !important; border-radius: 7px !important; cursor: pointer !important;
}
body#contact input[type="file"]::file-selector-button,
body#contact input[type="file"]::-webkit-file-upload-button { color: transparent !important; width: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; background: transparent !important; }
body#contact .form-group.row:has(input[type="file"]) > div[class*="col-"]::before {
  content: "Choisir un fichier"; position: absolute !important; left: 7px !important; top: 7px !important; bottom: 7px !important; z-index: 2 !important;
  display: flex !important; align-items: center !important; pointer-events: none !important; padding: 0 16px !important;
  background: var(--lc-red-tint) !important; border: 1px solid var(--lc-red-line) !important; border-radius: 6px !important; color: var(--lc-red-deep) !important;
  font-family: var(--lc-sans) !important; font-weight: 600 !important; font-size: 12px !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; white-space: nowrap !important;
}
body#contact .form-control-comment { display: block !important; width: 100% !important; margin-top: 6px !important; padding: 0 !important; font-family: var(--lc-sans) !important; font-size: 12.5px !important; color: var(--lc-muted) !important; }

body#contact .form-footer { margin: 8px 0 0 0 !important; padding: 0 !important; text-align: center !important; }
body#contact .form-footer .btn-primary[type="submit"],
body#contact .form-footer input[type="submit"],
body#contact #submit-message {
  width: 100% !important; max-width: 340px !important; height: 52px !important; margin: 0 auto !important; display: inline-block !important;
  font-family: var(--lc-sans) !important; font-size: 14px !important; font-weight: 600 !important; letter-spacing: 0.10em !important; text-transform: uppercase !important;
  color: #fff !important; background-color: var(--lc-red) !important; background-image: none !important; border: 1.5px solid var(--lc-red) !important; border-radius: 8px !important;
  box-shadow: 0 14px 28px -16px rgba(172, 5, 5, 0.5) !important; cursor: pointer !important; float: none !important;
  transition: background-color 0.2s, border-color 0.2s, transform 0.12s !important;
}
body#contact .form-footer .btn-primary[type="submit"]:hover,
body#contact .form-footer input[type="submit"]:hover { background-color: var(--lc-red-deep) !important; border-color: var(--lc-red-deep) !important; }
body#contact .form-footer .btn-primary[type="submit"]:active,
body#contact .form-footer input[type="submit"]:active { transform: scale(0.99) !important; }

body#contact .alert { border-radius: 8px !important; border: 1px solid var(--lc-line) !important; font-family: var(--lc-sans) !important; font-size: 14.5px !important; padding: 14px 18px !important; }
body#contact .alert-success { background: #eef7ef !important; border-color: #cfe8d2 !important; color: #226b35 !important; }
body#contact .alert-danger { background: var(--lc-red-tint) !important; border-color: var(--lc-red-line) !important; color: var(--lc-red-deep) !important; }

@media (max-width: 640px) {
  body#contact .form-fields { grid-template-columns: 1fr !important; }
  body#contact .gc-contact { padding: clamp(24px, 6vw, 32px) !important; }
  body#contact .form-footer .btn-primary[type="submit"], body#contact .form-footer input[type="submit"] { max-width: none !important; }
}
/* ==========================================================================
   GC — LWC : Page Contact — v3 (façon La Cave des CE)                [fin]
   ========================================================================== */