/*
Theme Name: Puech Haut
Author:  intégration Olivier Coudre
Author URI: https://puech-haut.com/
Description: theme pour le site Puech Haut
Version: 1.1
Text Domain: site
Tags: ACF
*/

/*
SVG icons
*/
[class^="svg-icon"],
[class*=" svg-icon"] {
  height: 1em;
  width: 1em;
  display: inline-block;
  stroke: none;
  fill: currentColor;
}
[class^="svg-icon-outline"],
[class*=" svg-icon-outline"] {
  height: 1em;
  width: 1em;
  display: inline-block;
  stroke: currentColor;
  fill: none;
}

/**
 * Global & Structure
 */
* {
  box-sizing: border-box;
}
*:after,
*:before {
  box-sizing: inherit;
}

html {
  scroll-behavior: smooth;
  interpolate-size: allow-keywords; /*overflow-y:scroll ;*/
}

:where(html) {
  /* espacements */
  --size-1: 8px;
  --size-2: 16px;
  --size-3: 24px;
  --size-4: 32px;
  --size-5: 40px;
  --size-6: 48px;
  --size-8: 64px;

  --size-default: var(--size-2);
  --space-4: 4px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-72: 72px;
  --space-80: 80px;
  --space-96: 96px;
  --space-112: 112px;
  --space-120: 120px;
  --space-168: 168px;

  /* taille texte */
  --text-2xs: 0.625rem;
  --text-xs: 0.6875rem;
  --text-sm: 0.75rem;
  --text-base: 0.8125rem;
  --text-lg: 0.875rem;
  --text-xl: 0.9375rem;
  --text-2xl: 1rem;
  --text-3xl: 1.25rem;
  --text-4xl: 1.5rem;
  --text-5xl: 1.75rem;
  --text-6xl: 2.25rem;
  --text-special: 2.5rem;
  --text-7xl: 2.75rem;
  --text-8xl: 3.5rem;
  --text-9xl: 4rem;

  /* Couleurs */
  --black: #000;
  --bg-dark: #141414;
  --ink: #181821;
  --muted: #525252;
  --subtle: #737373;
  --border: #bcbcd6;
  --gray: #d4d4d4;
  --light-gray: #e5e5e5;
  --placeholder: #757575;
  --surface: #f5f5f5;
  --bg-light: #f5f5fa;
  --cream: var(--bg-light);
  --white: #ffffff;
  --white12: rgb(255 255 255 / 12%);
  --white20: rgb(255 255 255 / 20%);
  --white40: rgb(255 255 255 / 40%);
  --white50: rgb(255 255 255 / 50%);
  --white60: rgb(255 255 255 / 60%);
  --white70: rgb(255 255 255 / 70%);
  --white80: rgb(255 255 255 / 80%);

  --success: #2f6b4f;
  --success-bg: #f2f7f3;
  --error: #b42318;
  --error-bg: #fff9f8;


  --primary: var(--ink);
  --text: var(--ink);

  --container-w: 1384px;
  --window-max-w:1512px;

  accent-color: var(--ink);
  /*
  --accent-color: var(--primary);*/

  --marker: "■"; /* ▪ • */

  --input-text: var(--text);
  --input-bg: var(--white);
  --input-border: var(--border);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --radius-small: var(--size-1);
  --h2-margin: var(--size-2);
  --p-margin: var(--size-2);
}

:focus-visible:not(:focus) {
  outline-color: var(--primary);
  transition: outline-offset 145ms var(--ease-2);
}
:where(:not(:active):focus-visible) {
  outline-offset: 5px;
  transition-duration: 0.25s;
}

/*@media (prefers-color-scheme: dark) {
  :where(html) {
    --white:#000;
    --black:#fff;
    color-scheme: dark;
  }
}*/


/*
fonts
*/

body {
  font-family: var(--font-base);
  color: var(--text);
  background-color: var(--bg);
  margin: 0;
  font-weight: 400;
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 {
  font-family: var(--font-title);
  margin: 0;
  font-weight: 400;
  text-wrap-style: pretty;
}

a {
  text-decoration: none;
  color: inherit;
  transition:
    color 0.3s ease,
    transform 0.4s var(--ease-out);
}

body {
  --body_size: 0.875rem;
  --h1_size: 44px;
  --h1_lh: 105%;
  --h2_size: 28px;
  --h2_lh: 1.2;
  --h3_size: 24px;
  --h3_lh: 1.25;
  --h4_size: 20px;
  --h4_lh: 1.25;
}
body {
  font-size: var(--body_size);
}
h1, .h1 {font-size: var(--h1_size); line-height: var(--h1_lh); /*letter-spacing: 0.48px;letter-spacing: 0.56px*/;letter-spacing: 0.5px; }
h2, .h2 {font-size: var(--h2_size); line-height: var(--h2_lh); letter-spacing: 0.4px;}
h3, .h3 {font-size: var(--h3_size); line-height: var(--h3_lh); }
h4, .h4 {font-size: var(--h4_size); line-height: var(--h4_lh); }

@media (min-width: 992px) {
  body {
    --body-size: 15px;
    --h1_size: 56px;
    --h2_size: 28px;
    --h3_size: 24px;
    --h4_size: 20px;
  }
}

@media (min-width: 1200px) {
  body {
    --h1_size: var(--text-9xl);
    --h2_size: var(--text-7xl);
    --h3_size: var(--text-5xl);
    --h4_size: var(--text-3xl);
  }
}

/*
global
*/
.ie-alert {padding: 2em; border: red solid 2px; z-index: 999; background: white; position: relative; }

label {color: inherit; cursor: pointer; }
table {margin: 1rem 0; }
ol,ul {margin: 0; list-style-type: none; padding: 0; }
img {max-width: 100%; height: auto; display: block; }
address {font-style: normal; }
p, dt, dd {margin: 0; }
button:not([disabled]) {cursor: pointer; }
figure {margin: 0; padding: 0; }
hr {margin-block: var(--size-2); background-color: var(--border); height: 1px; width: 100%; }

/* container */

/*.container {
  margin-inline: var(--space-24);
  @media (min-width: 992px) {
    margin-inline: var(--space-64);
  }
  @media (min-width: 1512px) {
    width: var(--container-w);
    margin-inline: auto;
  }
}*/
.container {
  margin-inline: var(--space-24);
}
@media (min-width: 992px) {
  .container { margin-inline: var(--space-64); }
}
@media (min-width: 1512px) {
  .container {
    width: var(--container-w);
    margin-inline: auto;
  }
}

.container-ng {
  display: grid;
  grid-template-columns: var(--space-24) [content-start] 1fr [content-end] var(--space-24 );
  grid-template-areas: "left content right";
  @media (min-width: 992px) {
    grid-template-columns: var(--space-64) [content-start] 1fr [content-end] var(--space-64 );
  }
  @media (min-width: 1512px) {
    grid-template-columns: 1fr [content-start] var(--container-w) [content-end] 1fr;
  }
  .content {grid-area: content}
}

/*
Full-Width Backgrounds
*/
/*https://www.smashingmagazine.com/2024/01/css-border-image-property/*/
.full-background {border-image: conic-gradient(pink 0 0) fill 0//0 100vw; }
.full-bg-light {border-image: conic-gradient(var(--bg-light) 0 0) fill 0//0 100vw; }
.bg-dark {background-color: var(--bg-dark);}
.bg-light {background-color: var(--bg-light);}
.full-bg-dark {border-image: conic-gradient(var(--bg-dark) 0 0) fill 0//0 100vw; }
.full-bg-dark-bt {border-image: linear-gradient(to bottom,var(--white20) 1px,var(--bg-dark) 0) fill 0//0 100vw }
.full-bg-dark-bb {border-image: linear-gradient(0deg,var(--white20) 1px,var(--bg-dark) 0) fill 0//0 100vw }
.full-bg-white-btb {
  border-style: solid;
  border-width: 1px 0; /* needed to trigger border-image rendering */
  border-image: linear-gradient(
      to bottom,
      var(--border) 0 1px,
      var(--white) 1px calc(100% - 1px),
      var(--border) calc(100% - 1px) 100%
    ) fill 0//0 100vw;
}

img.gradient-overlay {border-image: fill 0 linear-gradient(#0003,#000); }

/*
utils
*/
.invisible-label,
.invisible-checkbox {
  position: fixed;
  opacity: 0;
  left: 0;
  top: 0;
  pointer-events: none;
}

.visible-xs,
.visible-md,
.visible-md-flex,
.visible-md-content,
.visible-lg,
.visible-lg-flex,
.visible-desktop {
  display: none;
}

@media (min-width: 768px) {
  .visible-xs {
    display: block;
  }
  .hide-xs {
    display: none;
  }
}

@media (min-width: 992px) {
  .visible-md {
    display: block;
  }
  .visible-md-flex {
    display: flex;
  }
  .visible-md-content {
    display: contents;
  }
  .hide-md {
    display: none;
  }
}
@media (min-width: 1200px) {
  .visible-lg,
  .visible-desktop {
    display: block;
  }
  .visible-lg-flex {
    display: flex;
  }
  .hide-lg,
  .hide-desktop {
    display: none;
  }
}
.no-js .hide-nojs {
  display: none;
}

.lines-max-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}
/*
buttons
*/

.btn {
  --btn-bg: var(--ink);
  --btn-text: var(--white);
  --btn-border:transparent;
  font-family: var(--font-button);
  font-style: normal;
  font-weight: 700;
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--btn-text);
  background-color: var(--btn-bg);
  padding: var(--space-14) var(--space-24);
  display: inline-flex;
  align-items: center;
  gap: 0;
  text-decoration: none;
  border: var(--btn-border) solid 1px;

  transition: .2s ease-out;
  .svg-icon {
    width: 0;
    height: 14px;
    opacity: 0;
    margin-left: 0;
    transform: translateX(-6px);
    transition: .2s ease-out;
  }
  .btn-label {
    display: block;
    transform: translateX(0);
    transition: transform .2s ease-out;
  }
  .badge {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--white);
    color: var(--ink);
    font-size: var(--text-2xs);
    &:empty {display: none;}
  }
  &:has(.badge) {
    gap:8px;
  }
}
.btn-arrow::after{
  content:'';
  width: 0;
  height:14px ;
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSJub25lIiBzdHJva2U9IiMxODE4MjEiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjgiIHZpZXdCb3g9IjAgMCAyNCAyNCI+DQogIDxwYXRoIGQ9Ik01IDEyaDE0bS02LTYgNiA2LTYgNiIvPg0KPC9zdmc+");
  background-repeat: no-repeat;
  background-size: 14px;
  background-position: center;
  opacity: 0;
  transform: translateX(-6px);
  transition: .2s ease-out;
}

.nav-card:is(:hover, :active,:focus-visible) span.btn,
:where(a,button).btn:is(:hover, :active, :focus-visible) {

  &::after,
  .svg-icon {
    width: 14px;
    margin-left: 4px;
    opacity: 1;
    transform: translateX(0);
  }
  .btn-label {transform: translateX(-6px);}
}
.btn-light {
  --btn-bg: var(--white);
  --btn-text: var(--ink);
}
.btn-ghost {
  --btn-border:var(--ink);
  --btn-text: var(--ink);
  --btn-bg:none;
  &.btn-light {
    --btn-border:var(--white);
    --btn-text: var(--white);
  }
}


.btn-disabled,
input[type="submit"][disabled],
button[disabled],
button[disabled]:hover {
  background-color: var(--color-neutre);
  cursor: not-allowed;
  border-color: var(--color-neutre);
}

.pill {
  --btn-bg: var(--ink);
  --btn-text: var(--white);
  display: inline-block;
  border-radius: 99em;
  padding: .5em 1em;
  font-weight: 600;
  line-height: 13px;
  letter-spacing: 1.2px;
  color: var(--btn-text);
  background-color: var(--btn-bg);
  text-transform: uppercase;
}
/**
 * Wordpress styles
 */
.alignleft {
  float: left;
}
.alignright {
  float: right;
}
.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
figure.wp-caption.alignleft,
img.alignleft {
  margin: 5px 20px 5px 0;
}
.wp-caption.alignleft {
  margin: 5px 10px 5px 0;
}
figure.wp-caption.alignright,
img.alignright {
  margin: 5px 0 5px 20px;
}
.wp-caption.alignright {
  margin: 5px 0 5px 10px;
}
img.aligncenter {
  margin: 0 auto;
  display: block;
}
img.alignnone {
  margin: 0;
  display: block;
}
.wp-caption .wp-caption-text,
.entry-caption,
.gallery-caption {
  color: var(--subtle);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 150%;
  margin: 12px 0 0 0;
  text-align: left;
}
div.wp-caption.alignright img[class*="wp-image-"] {
  float: right;
}
div.wp-caption.alignright .wp-caption-text {
  padding-left: 10px;
}
.wp-caption.alignleft + ul,
.wp-caption.alignleft + ol {
  list-style-position: inside;
}

/*
  Accessibility
*/
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
  position: absolute !important;
  height: 1px;
  width: 1px;
  user-select: none;
  display: block;
}
.skip a {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip a:where(:focus, :focus-visible) {
  z-index: 10;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
}
@media (max-width: 767px) {
  .skip {
    display: none;
  }
}

/*
main
*/
.site-main {
  min-height: 60vh;
  @media (min-width: 992px) {
    min-height: 0;
  }
}

/* fil d'ariane */
.rank-math-breadcrumb {
  padding: var(--space-16);
  background-color: var(--bg-dark);
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 15px;
  font-weight: 400;
  .separator {
    padding-inline: 0.5rem;
    display: inline-block;
  }
  & > p {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    @media (min-width: 1400px) {
      max-width: var(--container-w);
      margin-inline: auto;
    }
  }
}

/*
page headers
*/
:where(.section-type-video,.page-header.bg-image) {
  display: grid;
  grid-template-areas: "stack";
  isolation: isolate;
  overflow: clip;
  height: min(calc(100svh - var(--header-height)),660px);
  position: relative;

  >* {grid-area: stack; }

  >.img-feat {
    position: absolute;
    inset:0;
    object-fit: cover;
    width: 100%;
    height: 100%;
    transform: scale(var(--par-scale));
    z-index:0 ;

  }
  >.img-overlay {
    z-index: 1;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .8) 100%);
    pointer-events: none;
  }

  >.overlay {
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-self: end;
    align-items: start;
    gap:var(--space-16);
    margin-block: var(--space-56) ;
    color:var(--white);
    @media (min-width: 768px) {
      gap:var(--space-20);
      margin-block: var(--space-80);
    }
  }
  /* TODO : a voir si c'set vraiment utile */
  &:not(.bg-image-center) .header-intro {
    max-width: 680px;
  }
  @media (min-width: 768px) {
    max-height: 760px;
  }
}


.page-header.bg-image-center {
  >.overlay {
    align-items: center;
    >* {max-width: 760px;}
    padding-inline: var(--space-24);
    margin-inline: auto;
    text-align: center;
    @media (min-width: 768px) {
      padding-inline: var(--space-64);
    }
  }
}

.post-featured>.post-link,
.page-header.split-image {
  display: grid;
  --h-space:var(--space-24);
  grid-template-columns: 1fr;
  grid-template-areas:
  "img"
  "content";
  >.img-feat {grid-area: img;}
  img {max-width: none;object-fit: cover;width: 100%;height: 100%;}

  .content {
    grid-area: content;
    padding: var(--h-space);
    display: grid;
    gap:var(--space-20);
    align-content: center;
  }
  .header-intro {margin-inline: 0}
  @media (min-width: 768px) {
    --h-space:var(--space-64);
    grid-template-columns:  var(--h-space) 1fr 1fr var(--h-space );
    grid-template-areas: "img img content right";
    .content {padding-right:0 }
  }
  @media (min-width: 1512px) {
    --half:calc(var(--container-w) / 2 );
    grid-template-columns: 1fr var(--half) var(--half) 1fr;
    >img{max-height: 50vh;min-height: 560px}
    overflow: clip;
  }

}

.entry-title,
.page-title {
  margin: 0;
}

.page-header{
  .eyebrow {
    font-size: var(--text-base);
    letter-spacing: 0.125rem;
    text-transform: uppercase;
  }

  .header-intro {
    font-size: var(--text-lg);
    line-height: 1.7;

    @media (min-width: 768px) {
      font-size: var(--text-xl);
      max-width: 680px;
      margin-inline: auto;
    }
  }
}

.page-header.no-feat {
  background-color: var(--bg-light);
  display: grid;
  justify-items: center;
  gap: var(--space-16);
  padding: var(--space-64) var(--space-24);

  > * {
    text-align: center;
    text-wrap: balance;
  }

  .page-title {
    font-size: var(--text-7xl);
    line-height: 120%;

    letter-spacing: 0.48px;
    max-width: 980px;
    margin: 0 auto;
    @media (min-width: 768px) {
      font-size: var(--text-8xl);
    }
  }

  @media (min-width: 768px) {
    padding: var(--space-80) var(--space-40);
  }
  @media (min-width: 1024px) {
    padding: var(--space-96) var(--space-24);
  }
}

/* text styles */

:where(.entry-content) {
  display: grid;
  gap: var(--space-24);
  font-size: var(--text-base);
  p {
    line-height: 1.8;
  }
  p:empty {
    display: none;
  }
  /*hr {margin-block: var(--space-8)}*/

  :is(h1, h2, h3, h4, h5, h6):first-child {
    margin-top: 0;
  }
  :is(h1, h2, h3, h4, h5, h6):last-child {
    margin-bottom: 0;
  }
  strong {font-weight: 700; }
  ol:not([class]) {
    list-style-type: decimal;
  }
  ul:not([class]) {
    padding-left: var(--space-24);
    list-style-type: disc;
    list-style-position: outside;
  }
  ul:not([class]):first-child {padding-top: 0; }
  ul:not([class]) li + li {margin-top: var(--space-12); }

  ol:not([class]) {
    margin: 0;
    display: grid;
    gap: var(--space-12);
    padding-left: var(--space-24);
    color: var(--muted);
    font-size: var(--text-lg);
    line-height: 1.7;
    > li::marker {
      color: var(--ink);
      font-weight: 600;
    }
    @media (min-width: 992px) {
      font-size: var(--text-xl);
    }
  }
  blockquote {
    display: grid;
    gap: var(--space-12);
    margin: 12px 0;
    padding: var(--space-10) 0 var(--space-10) var(--space-28);
    border-left: 2px solid var(--ink);
    > p:first-child {
      font-size: var(--text-3xl);
      line-height: 1.4;
      font-family: var(--font-title);
    }
    cite {
      color: var(--subtle);
      font-size: var(--text-base);
      font-style: normal;
    }
  }

  @media (min-width: 768px) {
    gap: var(--space-28);
  }
}

/* link underline */
.readmore,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link,
.header-top-menu .menu-item>a,
.section-type-product-grid .text-wrap a,
:where(.entry-content) a:not([class]):not([href$=".pdf"]),
.site-footer a {
  position: relative;

  &::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -4px;
    left: 0;
    height: 1px;
    transform: scaleX(0);
    transform-origin: right center;
    background: currentcolor;
    transition: transform 0.4s var(--ease-out);
    z-index: 2;
  }
  /*:is(:hover, :active, :focus-visible)>&::after,*/
  .mega-current-menu-ancestor>&::after,
  .mega-current-menu-item>&::after,
  &:is(:hover, :active, :focus-visible)::after {
    transform: scaleX(1);
    transform-origin: left center;
  }
  &.readmore,
  &.external-link {
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    padding-right: var(--space-4);
    svg {transition: transform 0.22s ease-out; }
    &:is(:hover, :active, :focus-visible) > svg {transform: translateX(5px); }
    .product-link:is(:hover, :active, :focus-visible) > & > svg {transform: translateX(5px); }
  }
}


#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link::after {bottom: 4px;}

@media (max-width: 1096px) {
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link::after {content:none}
}

:where(.entry-content) a:not([href$=".pdf"]) {
  &:not([class])::before {
    opacity: 1;
    content: "";
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: -4px;
    left: 0;
    height: 1px;
    background: currentColor;
  }
  &:not([class])::after {height: 2px; }

}

a[href$=".pdf"]:not(.btn) {
  display: inline-flex;
  align-items: center;
  gap:16px;
  text-transform: uppercase;
  font-weight: bold;

  &::after {
    content: url(img/download.svg);
    width: 1em;
    height: 1em;
  }

}

.site-footer a {
  &:is(:hover, :active, :focus-visible) {color: var(--white); transform: translateX(3px);}
}

/*
shortcodes
*/
.SC-big {
  display: block;
  color: var(--light-gray);
  font-size: 4rem;
  line-height: 1;
  text-transform: none;
  text-box: trim-both cap alphabetic;
  font-family: var(--font-title);

  @media (min-width: 768px) {
    margin-left: 150px;
    font-size: 8rem;
    margin-bottom: 80px;
  }
  @media (min-width: 1200px) {
    font-size: 12rem;
    margin-bottom: 100px;
  }
}
.SC-note {
  display: grid;
  gap: var(--space-12);
  padding: var(--space-24);
  background: var(--bg-light);
  line-height: 1.8;
  text-wrap: pretty;
  > .label {
    text-transform: uppercase;
    font-size: var(--text-xs);
    font-weight: bold;
    letter-spacing: 0.106rem;
  }
  > p {
    font-size: var(--text-xs);
  }
}

.SC-source {
  color: var(--subtle);
  font-weight: 600;
  letter-spacing: 0.0875rem;
  font-size: var(--text-2xs);
}


/*
default layout
*/
.layout-has-summary {
  display: grid;
  gap: var(--space-48);
  padding-block: var(--space-64) ;
  @media (min-width: 992px) {
    grid-template-columns: 240px minmax(0, 1fr);
    gap: var(--space-48);
    padding-block: var(--space-80);
  }
  .entry-content {
    max-width: 1004px;
    p:first-child {
      font-size: 15px;
      @media (min-width: 768px) {
        font-size: 18px;
      }
    }
  }
}

.toc {

  @media (min-width: 992px) {
    position: sticky;
    top: 100px;
    align-self: start;
  }
  .overline {
    font-size: var(--text-xs);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 2px;
  }
  .toc-body {
    display: grid;
    margin-top: 16px;
    border-left: solid 2px var(--border);
    a {
      padding: 0.92rem 0 0.92rem var(--space-16);
      color: var(--muted);
      font-size: var(--text-base);
      width: fit-content;
      transition:
        color 0.25s ease-out,
        font-weight 0.25s ease-out;

      &.is-active {anchor-name:--active-link}
      &.is-active,
      &:hover {
        font-weight: 600;
        color: var(--ink);
      }
    }

    &::after {
      content: "";
      position: absolute;
      left: calc(anchor(left) - 2px);
      width: 2px;
      background-color: var(--ink);
      bottom: anchor(bottom);
      top: anchor(top);
      position-anchor: --active-link;
      transition: 300ms;
    }
  }
}

/*
devis
*/

.layout-has-right {
  display: grid;
  gap: var(--space-48);
  padding-block: var(--space-64) ;
  @media (min-width: 992px) {
    grid-template-columns: minmax(0, 1fr) 340px ;
    gap: var(--space-48);
    padding-block: var(--space-80);
  }
  .entry-content {
    max-width: 1004px;
    p:first-child {
      font-size: 15px;
      @media (min-width: 768px) {
        font-size: 18px;
      }
    }
  }
}

.right-col {
  >* + * {margin-top: var(--space-20);}

  .eyebrow {text-transform: uppercase; font-weight: bold;font-size: var(--text-2xs);letter-spacing: 1.8px;}
  .steps {
    background-color: var(--bg-light);
    padding: var(--space-28);
    border:solid 1px var(--border);
    .eyebrow {color:var(--subtle)}
    li {
      margin-top: 14px;
      padding-top: 12px;
      border-top:solid 1px var(--border);
      color:subtle;
      font-size: 11px;
      strong {display: block;color:var(--ink);font-size: 13px;margin-top: 3px;}
    }
  }
  .side-contact {
    background-color: var(--ink);
    color:var(--white);
    padding: var(--space-28);
    display: grid;
    gap:8px;
    .eyebrow {color:var(--white60)}
  }
  @media (min-width: 992px) {
    position: sticky;
    top: 100px;
    align-self: start;
  }
}

/*
home
*/

.home-bg-image {
  position: relative;
  z-index: 2;
  height: 620px;
  overflow: visible;
  display: grid;
  align-items: end;
  @media (min-width: 768px) {
    aspect-ratio: 1672 / 715;
    min-height: 620px;
    width: 100%;
    height: auto;
  }
  .img-feat {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% * 941 / 715);
    object-fit: cover;
    object-position: 72% 0;
    @media (min-width: 768px) {
      object-position: 50% 0;
    }
  }
  .overlay {
    color:var(--white);
    padding-bottom: 40px;
    z-index: 3;
    display: grid;
    justify-items: start;
    gap: var(--space-24);
    @media (min-width: 768px) {
      padding-bottom: 64px;
      &>* {max-width: 640px}
    }
  }
}
.home {
  .section-type-product-grid,
  .section-type-text-photos + .section-type-product-grid {
    border-image: conic-gradient(var(--bg-light) 0 0) fill 0//0 100vw;
  }
  .section-type-text-photos.has-bg-image .text-wrap{
    isolation: isolate;
    --gradient:linear-gradient(180deg, #FCEAD7 0%, #FFFFFF 100%);
    background: var(--gradient);
    background-size: 100%;
    background-repeat: no-repeat;
  }
}
/*
* blocs acf
*/

/* partagés entre les blocs */

.module {
  margin-block: 0;
  padding-block: var(--space-56);
}
@media (min-width: 768px) {
  .module { padding-block: var(--space-80); }
}
@media (min-width: 1200px) {
  .module { padding-block: var(--space-120); }
}

/*
 .section-type-xxx
   .text-wrap
   .content
*/
.intro-content {
  display: grid;
  gap: var(--space-24);
  @media (min-width: 992px) {
    gap: var(--space-64);
    row-gap: var(--space-48);
  }
}
/*
bloc texte simple
*/

.section-type-text {
  --section-w:800px;
  padding: var(--space-56) var(--space-24);
  .text-wrap {
    max-width: var(--section-w);
    margin-inline: auto;
    font-size: var(--text-xl);

    /*@media (min-width: 992px) {
      --text-gap:22px;
    }*/
    @media (min-width: 1200px) {
      /*--text-gap:28px;*/
      font-size: var(--text-xl);
    }

    .entry-content {font-size: inherit;}
    .entry-content:not(:has(.split-more)) {
      display: grid; gap:inherit;
    }
  }
  @media (min-width: 1200px) {
    padding-block: var(--space-96);
  }
}

/*
bloc cta
*/

.section-type-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  overflow: clip;

  height: auto;
  min-height: 400px;
  padding: 72px 24px;
  position: relative;
  background-color: var(--black);

  >.bg-image {
    position: absolute;
    inset:0;
    object-fit: cover;
    width: 100%;
    height: 100%;
    /*transform: scale(var(--par-scale));*/
    z-index:0 ;
    opacity: .5;
    transition: transform 1s var(--ease-out);
  }
  &:hover>img {
    transform: scale(1.03);
  }
  /*>.img-overlay {
    position: absolute;
    inset:0;
    z-index: 1;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .8) 100%);
    pointer-events: none;
  }*/

  >.overlay {
    z-index: 2;
    color:var(--white);
    text-align: center;
    h2+p:not(.cta-footer) {max-width: 640px;}
    >p {color:var(--white70)}
    .cta-footer {display: flex;gap:24px 16px ;flex-wrap: wrap;justify-content: center;}
  }
  @media (min-width: 768px) {
    padding: 64px;
    height: 520px;
  }
}
/*
 bloc citation
*/
.section-type-citation {
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  overflow: clip;

  height: auto;
  min-height: 400px;
  padding: 72px 24px;
  position: relative;


  >.bg-image {
    position: absolute;
    inset:0;
    object-fit: cover;
    width: 100%;
    height: 100%;
    transform: scale(var(--par-scale));
    z-index:0 ;

  }
  >.img-overlay {
    position: absolute;
    inset:0;
    z-index: 1;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .8) 100%);
    pointer-events: none;
  }

  blockquote {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap:var(--space-16);
    margin-block: var(--space-56);
    color:var(--white);
    border:0;
    @media (min-width: 768px) {
      gap:var(--space-20);
      margin-block: var(--space-80) ;
    }
    .h2 {text-wrap: balance;}
    >span::before {content:'« '}
    >span::after {content:' »'}
  }
  .author {
    font-style: normal;
    font-size: var(--text-xs);
    letter-spacing: 2px;
    color:var(--white80);
    &::before {content: '— '}
    @media (min-width: 768px) {
      font-size: var(--text-base);
    }
  }
  >.overlay {z-index: 2; }
  @media (min-width: 768px) {
    padding: 64px;
    height: 520px;
  }
}

.text-wrap {
  --text-gap:16px;
  gap:var(--text-gap);
  display: flex;flex-direction: column;
  align-items: flex-start;
  .title_before {
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 2px;
    @media (min-width: 992px) {
      font-size: 13px;
    }
  }
  @media (min-width: 992px) {
    --text-gap:24px;
  }

}

/*
bloc text + gallery
*/
@keyframes splitSlideIn {
    from {
        clip-path: inset(0 100% 0 0)
    }

    to {
        clip-path: inset(0)
    }
}
.section-type-text-photos {
  width: 100%;
  /*max-height: 80vh;*/
  margin: 0 auto;
  background: var(--white);
  display: grid;
  .text-wrap {
    padding-block:var(--space-40);
    padding-inline: 24px;

    @media (min-width: 768px) {
      justify-content: center;
      padding-inline: var(--space-56) var(--space-48)
    }
    @media (min-width: 1200px) {
      padding-inline: var(--space-96) var(--space-64)
    }
  }
  @media (min-width: 768px) {
    grid-template-columns: 60% 40%;
  }
  &.text-left {
    @media (min-width: 768px) {
      .split-media {order:2}
    }
    @media (min-width: 992px) {
      grid-template-columns: 40% 60%;
    }
    .text-wrap {
      @media (min-width: 992px) {
        padding-inline: var(--space-48) var(--space-56)
      }
      @media (min-width: 1200px) {
        padding-inline: var(--space-64) var(--space-96)
      }
    }
  }
  @media(prefers-reduced-motion:no-preference) {
    .splide__track--fade>.splide__list>.splide__slide {
      opacity: 1;
      transition: none;
      z-index: auto;
      &.is-next img {transform:scale(1.03);}
      &.is-prev {
        img {transform:scale(1);}
        z-index: 2;
      }
      &.is-active {
        z-index: 3;
        animation: splitSlideIn 1.05s var(--ease-out) both;
        clip-path: inset(0);
        img {transform:scale(1);}
      }
    }
    .splide__track--fade>.splide__list:has(.splide__slide.is-active:last-child) .splide__slide:first-child img{
      transform:scale(1.03);
    }

  }

  img,
  .splide__slide img {
    max-width: none;width: 100%;height: 100%;;max-height: 90vh;object-fit: cover;
    transition: transform 1.1s var(--ease-out);
  }
}
.text.entry-content {

    .text-more{
      display: grid;
      grid-template-rows: 1fr;
      &.is-closing ,
      &[hidden="until-found"] {grid-template-rows: 0fr;}
      transition: grid-template-rows .35s var(--ease-out);
      >div {overflow: hidden;min-height: 0;display: grid;gap:var(--text-gap);}
      /*p:first-child {margin-top:var(--text-gap);}*/
      .no-js & {grid-template-rows: auto;}
    }
  }
.split-more {
  .no-js & {display: none;}
  display: flex; align-items: center; gap:var(--space-8);
  text-transform: uppercase;
  font-weight: 700;
  font-size: 10px;
  line-height: 13px;
  letter-spacing: 1.4px;
  width: max-content;
  padding: 0px;
  border: 0;
  background: none;

  .split-more__label_open {display: none;}
  .svg-icon { width: 14px; height: 14px; transition: transform .22s ease-out;}
  &[aria-expanded="true"] {
    .split-more__label {display: none;}
    .split-more__label_open {display: inline;}
    .svg-icon {transform: rotate(45deg); }
  }

}

/*
bloc stats
*/

.section-type-stats {

  padding-block: var(--space-56) ;
  display: flex;
  flex-wrap: wrap;
  row-gap: var(--space-24);
  max-width: var(--window-max-w);
  .stat {
    flex: 1 0 200px;
    padding: 0;
    margin: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    dt {
      text-transform: uppercase;font-size: var(--text-2xs);letter-spacing: 1.5px;
      order:2;
      padding-top:16px;
      margin-top: 14px;
      background-image: linear-gradient(to right,var(--ink));
      background-size: 28px 2px;
      background-position: top center;
      background-repeat: no-repeat;
    }
    dd {
      font: 400 var(--text-7xl) / 1.1 var(--font-title);
      @media (min-width: 992px){
        font-size:  var(--text-7xl);
      }
      @media (min-width: 1400px){
        font-size:  var(--text-9xl);
      }
    }

    @media (max-width: 448px){
      &+.stat {border-top: 1px solid var(--border);padding-top: var(--space-24); }
    }
    @media (min-width: 449px) {
      &+.stat {border-left: 1px solid var(--border);}
    }
    @media (min-width: 449px) and (max-width: 648px){
      &:nth-child(odd) {border-left: 0; }
    }
    @media (min-width: 649px) and (max-width: 847px){
      &:nth-child(4) {border-left: 0; }
    }
    @media (min-width: 847px) and (max-width: 1047px){
      &:nth-child(5) {border-left: 0; }
    }

  }
  @media (min-width: 663px){
    row-gap: var(--space-48);
  }
  @media (min-width: 1200px){
    padding-block: var(--space-96);
  }
}

/*
bloc steps
*/
.section-type-steps {

  color: var(--white);
  /*display: grid;
  gap: var(--space-32);
  @media (min-width: 992px) {
    gap: var(--space-64);
    row-gap: var(--space-48);
  }*/
  .title_before {color:var(--white50)}
  .entry-content {color:var(--white60)}
}
.steps-items {
  margin: 0;padding: 0;
  display: flex;
  gap: var(--space-24);
  overflow-x: auto;
  margin-right: calc( var(--space-24) * -1);
  padding-right: var(--space-24);
  scroll-snap-type: x mandatory;
  counter-reset: step;
  .step-item {
    counter-increment: step;
    flex: 0 0 min(82vw,410px);
    scroll-snap-align: start;
    display: grid;
    align-content: start;
    --space:var(--space-16);
    gap:var(--space);
    padding-bottom: var(--space);

    &::before {
      content:'0' counter(step);
      font: 400 var(--text-8xl) / 1 var(--font-title);
      letter-spacing: .56px;
      grid-row-start: 1;
      grid-column-start: 1;
      z-index: 2;
      align-self: end;
    }
    &:has(img)::before {
      font-size: var(--text-7xl);
      margin-left: 18px;
      margin-bottom: 18px;
    }
    &:has(img)::after {
      content:'';
      grid-row-start: 1;
      grid-column-start: 1;
      z-index: 1;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.8) 100%);
    }
    img {
      grid-row-start: 1;
      grid-column-start: 1;
    }

    @media (min-width: 992px) {
      flex-basis:328px;
      --space: var(--space-20);
    }
    @media (min-width: 992px) and (pointer:fine ){
      img {width: 100%; height: 100%; object-fit: cover; }
    }
  }

  @media (min-width: 992px) and (pointer:fine ){
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  @media (min-width: 1200px) {
    display: grid;
    /* display all cells on one row */
    grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  }
}

/*
bloc team
*/
.team-rail {
  display: flex; gap:6px;
  flex-direction: column;
  @media (min-width: 768px) {
    gap: var(--space-8);
    flex-direction: row;
    height: 560px;
  }
}
.person {
  display: block;
  overflow: hidden;
  position: relative;
  border: 0;
  padding: 0;
  background: #222;

  cursor: pointer;
  text-align: left;
  transition: height .6s var(--ease-out);
  height: 92px;
  &::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .86), transparent 55%);
  }
  img {
    position: absolute;
    inset:0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.3);
    transition: transform .7s var(--ease-out), filter .5s;
  }
  .person-info {
    position: absolute;
    bottom: 10px;
    left: 10px;
    padding: 10px;
    right: 10px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color:var(--white);
  }
  .person-role {text-transform: uppercase;color:var(--white70)}
  .person-name {margin-top: 4px;}
  .person-bio {
    max-width: 420px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    color:var(--white80);
    transition: max-height .4s var(--ease-out), opacity .4s;
  }
  &:is(:hover,:focus-visible,[aria-expanded=true]) {
    img {transform: scale(1.04); filter: saturate(1) }
  }
  &[aria-expanded=true] {
    height: 480px;

    .person-bio {
      max-height: 100px;
      margin-top: 12px;
      opacity: 1;
    }
    @media (min-width: 768px) {
      flex:3;
      height: 100%;
    }
  }

  @media (min-width: 768px) {
    height: auto;
    flex:1;
    transition: flex .65s var(--ease-out);
  }
}
/*
bloc product grid
*/
.section-type-product-grid {

  @media (min-width: 992px){
    .text-wrap {
      display: grid;
      gap:12px 0;
      grid-template-areas:
        "before before"
        "title action";
      .title_before {grid-area: before}
      h2 {grid-area: title}
      a {grid-area: action;justify-self: end;align-self: center;}
    }
  }
}

/*
bloc nav cards
*/
.section-type-nav-cards {
  /*display: grid;
  gap:var(--space-24);
  @media (min-width: 992px){
    gap:var(--space-48);
  }*/
}
.nav-card {
  --card-pad: 28px;
  isolation: isolate;
  overflow: hidden;
  display: grid;

  grid-template-areas: "stack";
  >* {grid-area: stack}
  color:var(--white);
  background-color: var(--black);
  cursor: pointer;

  img {
    width: 100%;
    transform: scale(1);
    transition: transform .7s var(--ease-out);
  }

  >.img-overlay {z-index: 1; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .85) 100%);}

  &:is(:hover,:active,:focus-visible) {
    img {transform: scale(1.05);}
    .nav-card-content {transform: translateY(-8px);}
    .icon {background: rgba(0, 0, 0, .2);transform: translateX(6px);}
  }

  .nav-card-content {
    padding: var(--card-pad);
    z-index: 2;
    align-self: end;
    display: grid;
    gap:16px;
    transition: transform .6s var(--ease-out);
    .nav-card-category {
      text-transform: uppercase;
      font-weight: 700;
      font-size: 11px;
      line-height: 14px;
      letter-spacing: 1.8px;
      color: var(--white70);
    }
    .nav-card-texts {display: grid; gap:8px; }
  }
  .nav-card-subtitle {
    opacity: .7;
  }
  .icon {
    display: grid;
    place-content: center;
    width: 40px;height: 40px;
    border-radius: 40px;
    border:var(--white40) solid 1px;
    transition: transform .5s var(--ease-out),background .4s
  }
  .action {justify-self: start;}
}


/*
accordions
*/
:root {
  --summary-gap-horiz:var(--space-12);
  @media (min-width: 992px) {
    --summary-gap-horiz:var(--space-28);
  }
}
.section-type-accordions {

  padding-block: var(--space-64);

  display: grid;
  gap: var(--space-48);


  hr {margin: 0;background-color: var(--black);height: 3px;width: 56px;}

  .items {counter-reset: faq;}
  details {
    counter-increment: faq;
    &[open] i,
    :is(summary:hover,summary:focus){
      &::before {color:var(--ink);}
      &>i{
        background-color: var(--black);
        svg {color:var(--white)}
      }
    }

    summary {
      font-family: var(--font-title);
      font-size: var(--text-2xl);
      font-weight: 400;
      line-height: 1.25;
      justify-content: start;
      gap: var(--summary-gap-horiz);
      padding: var(--space-24) 0;
      h2 {font-size: inherit;}
      &::before {
        font-family: var(--font-base);
        content:'0' counter(faq);
        width: 2ch;
        font-style: normal;
        font-weight: 400;
        font-size: 11px;
        line-height: 14px;
        letter-spacing: 2px;
        color:var(--border);
      }
      >i {
        margin-left: auto;width: 44px;height: 44px;display: grid;place-content: center;border:solid 1px var(--border)
      }

      @media (min-width: 992px) {
        font-size: var(--text-3xl);
      }
    }
  }

  .acc-text {
    padding-bottom: var(--space-16);
    @media (min-width: 992px) {
      padding-bottom: var(--space-32);
      padding-inline: calc(14px + var(--summary-gap-horiz)) calc(44px + var(--summary-gap-horiz));
    }
  }

  @media (min-width: 992px) {
    &.is-2col {
      grid-template-columns: 400px 1fr;
      gap: var(--space-64);
    }
  }
  @media (min-width: 1200px) {
    &.is-2col {
      grid-template-columns: 440px 1fr;
      gap: var(--space-96);
    }
  }

}
details {

  border: 0;
  border-top: 1px solid var(--border-faq,var(--border));
  /*&::details-content {overflow-y: clip; }
  &:not([open])::details-content {
    height: 0;

    transition:
      height var(--acc-dur) 150ms,
      content-visibility var(--acc-dur) var(--acc-dur) allow-discrete,
      opacity 100ms 0ms;
  }
  &[open]::details-content {
    height: auto;
    opacity: 1;
    transition:
      height var(--acc-dur) 0ms,
      content-visibility var(--acc-dur) 0ms allow-discrete,
      opacity 100ms 150ms;
  }*/
  &[open] .acc-icon-open {display: none; }
  &:not([open]) .acc-icon-close {display: none; }
}


summary {
  text-wrap-style: pretty;
  padding-block: var(--space-16);
  position: relative;
  line-height: 1;
  cursor: pointer;
  font-weight: 700;
  display: flex;
  column-gap: 15px;
  justify-content: space-between;
  align-items: center;
  &::-webkit-details-marker {display: none; }

  @media (min-width: 992px) {
    padding-block: var(--space-24);
  }
}

/*
bloc video
*/
.section-type-video {
  background-color: var(--black);
  >img {
    position: absolute;
    inset:0;
    object-fit: cover;
    width: 100%;
    height: 100%;
    transform: scale(var(--par-scale));
    z-index:1 ;
    transition:opacity .5 ease, content-visibility .5s .5s allow-discrete;
  }
  >.img-overlay {
    transition:opacity .5 ease, content-visibility .5s .5s allow-discrete;
  }
  >.overlay {
    align-self: center;
    justify-content: center;
    max-width: 100ch;
    padding-inline: var(--space-24);
    margin-inline: auto;
    text-align: center;

    transition:opacity .5 ease, content-visibility .5s .5s allow-discrete;

    @media (min-width: 768px) {
      margin-block: auto;
      padding-inline: var(--space-64);
    }
  }

  .video__play {
    width: 80px;
    height: 120px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 48px;
    background: var(--white20);
    color: var(--ph-white);
    display: grid;
    place-items: center;
    cursor: pointer;
    margin-inline: auto;
    margin-bottom: 40px;
    opacity:1;
    scale:1;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition:  .5s var(--ease-reveal);
    &:hover{background:var(--white40) }
    &:focus-visible{outline:2px solid var(--white);outline-offset:5px}
    /*svg{position:absolute;transition:transform .45s var(--ease-reveal),opacity .25s ease}*/
    /*.pause {opacity: 0; transform: scale(.45);}*/
    &.is-playing {opacity: 0; scale:.45; }
  }

  iframe {
    width: 100%;
    height: 100%;
    z-index: 0;
  }
  &.show-player {
    >img,
    >.img-overlay,
    >.overlay {opacity: 0;display: none;}
  }

}


/*
splide carousel
*/

.splide {
  padding-inline: 0;
  margin-bottom: 0;
  .no-js & {
    visibility: visible;
    .splide__list {aspect-ratio: 1}
    .splide__slide:not(:first-child) {display: none;}
    .splide__slide img {object-fit: cover; width: 100%; height: 100%; }
  }
  .splide__arrows {
    display: none;
    @media screen and (min-width: 992px) {display: block; }
  }
  .splide__arrow--prev {right: calc(34px + 10px + 44px); left:auto}
  .splide__arrow--next {right: 34px; }
  .splide__arrow {
    width: 44px;
    height: 44px;
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, 0.501961);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.14902);
    backdrop-filter: blur(5px);
    top:auto;
    bottom:44px;
    transform:none;
    transform-origin: center;
    transition: transform .35s var(--ease-out), background .35s;

    &:not([disabled]) {opacity: 1; }
    &:hover {
      opacity: 1;
      background: #0000006b;
      transform:scale(1.08);
    }
    svg {height: var(--space-16); width: var(--space-16); }
  }
}

/* Conteneur de la pagination */
.splide__pagination.splide__pagination--custom {
  display: grid;
  align-items: center;
  width: 136px;
  grid-template-columns: 2ch 1fr 2ch;
  gap: 12px;
  position: absolute;
  bottom: 8px;
  left: 24px;
  @media (min-width: 768px) {
    left: 32px;
    bottom: 50px;
  }

  background: rgba(40, 40, 40, 0.85);
  border-radius: 999px;
  padding: 8px 18px;
  list-style: none;
  margin: 0;
  width: 136px;

  font-size: 12px;
  font-weight: 700;
  color: #fff;

  >li {display: none;}

  &::before,&::after {
    letter-spacing: 0.5px;
    min-width: 2ch;
    text-align: center;
  }
  &::before {content: attr(data-current); } /* Numéro du slide actuel (gauche) */
  &::after {content: attr(data-total); } /* Nombre total de slides (droite) */

  .progress {
    height: 2px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 2px;
    overflow: hidden;
    width: auto;
    margin: auto 0;
    .progress__bar {
      height: 100%;
      width: 0%;
      background: #fff;
      border-radius: 2px;
      transition: width 0.3s ease;
    }
  }

}
.splide__list {gap: 0; align-items: stretch; }

/*
card grid
*/
.card {
  display: grid;
  gap:16px;
  .card-desc {
    display: flex;
    flex-direction: column;
    gap:8px;
  }
}
/*
product grid
*/


.product-grid {
  padding-block:var(--space-16);
  @media (min-width: 992px) {
    padding-block:var(--space-24);
  }
  @media (min-width: 1200px) {
    padding-block: var(--space-72);
  }
}
.grid4 {
  display: grid;
  gap:var(--space-16) var(--space-32);
  grid-template-columns: 1fr ;

  h3 {letter-spacing: .32px;font-size: 22px;line-height: 1.2;}


  @media (min-width: 768px) {
    gap:var(--space-24);
    grid-template-columns: repeat(3,1fr);
  }

  @media (min-width: 1200px) {
    gap:var(--space-32);
    grid-template-columns: repeat(4,1fr);
  }
}
.grid3 {
  display: grid;
  gap:var(--space-16) var(--space-24);
  grid-template-columns: 1fr ;

  @media (min-width: 600px) {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  @media (min-width: 992px) {
    gap: var(--space-20);
    grid-template-columns: repeat(3,1fr);
  }
  @media (min-width: 1200px) {
    gap:var(--space-32);
  }
}
.grid2 {
  display: grid;
  gap:var(--space-16) var(--space-24);
  grid-template-columns: 1fr ;

  @media (min-width: 600px) {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  @media (min-width: 992px) {
    gap: var(--space-20);
  }
  @media (min-width: 1200px) {
    gap:var(--space-32);
  }
}

.grid-scroll {
  display: flex;
  overflow-x: auto;
  margin-right: calc(var(--space-24) * -1);
  padding-right: var(--space-24);
  scroll-snap-type: x mandatory;

  > * {
    flex: 0 0 min(82vw, 410px);
    scroll-snap-align: start;
  }
   @media (min-width: 992px) {
    display: grid;
    gap: var(--space-20);
    overflow: visible;
    margin-inline: auto;
    padding: 0;
    width: 100%;
  }
}
.product-grid:has(+.pagination-centered) {
    padding-bottom: 0;
  }


.product-link{
  display: grid;
  gap:var(--space-8);
  padding-bottom: var(--space-8);
  &:is(:hover,:active,:focus) img{
    transform: scale(1.04);
  }
}

.post-image,
.product-image {
  display: block;
  overflow: hidden;
  img {transition: transform .42s ease-out; }
}
.product-image {
  margin-bottom: var(--space-8);
}
.post-category ,
.product-category {
  text-transform: uppercase;
  font-size: var(--text-xs);
  letter-spacing: 2px;
}

.post-name,
.product-name {font-size: 20px; display: block;
}
.post-excerpt,
.product-excerpt {
  font-size: 14px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.readmore {
  width: fit-content;
  font-size: 11px;
  line-height: 160%;
  letter-spacing: 0.5px;
}


/*
single wine
*/
.product-desc {
  background-color: var(--bg-light);
  display: grid;
  gap:var(--space-24);
  align-items: start;
  @media (min-width: 768px) {
    grid-template-columns: 1fr 37%;
  }
  @media (min-width: 992px) {
    /*gap:var(--space-64);*/
    gap:var(--space-96);
  }
  @media (min-width: 1200px) {
    gap:var(--space-120);
    grid-template-columns: 1fr 500px;
  }
  hr {margin-block: 0;}
  strong:first-child {text-transform: uppercase;font-size: 12px;letter-spacing: 3px; }
  .col.entry-content .btn {width: fit-content;}
}
.product-meta {
  padding: 0;
  display: grid;
  gap:var(--space-24);
  li {display: grid;gap:8px}
  strong {text-transform: uppercase;font-size: 12px;letter-spacing: 2px;text-box-trim: trim-both;}
  @media (min-width: 992px) {
    align-content: start;
    height: 100%;
    /*border-left: solid 1px var(--border);
    padding-left: var(--space-32);*/
  }
  /*@media (min-width: 1200px) {
    padding-left: var(--space-48);
  }*/
}

.SC-list {
  &>:first-child {margin-bottom: 1em;display: block;}
  & > ul {
    display: grid;
    li {display: flex;justify-content: space-between;}
  }
  &.is-compact {
    & > ul {gap:10px;}
  }
  & > ol{
    display: block;
    list-style-type: none;
    counter-reset: listnum;
    padding: 0;
    li {
      counter-increment: listnum;
      display: flex;
      align-item: center;
      gap:2em;
      &::before {
        content:'0' counter(listnum);
        font: 400 var(--text-3xl) / 1 var(--font-title);
      }
    }

  }

  &.is-default {
    li {padding-block: 1rem; border-top:solid 1px var(--border)}
    li:last-child {border-bottom: solid 1px var(--border)}
  }
}

/*
single recipe
*/

.recipe-desc {
  background-color: var(--white);

  display: grid;
  gap:var(--space-32);
  align-items: start;
  @media (min-width: 768px) {
    grid-template-columns: 1fr 30%;
  }
  @media (min-width: 992px) {
    gap:var(--space-64);
  }
  @media (min-width: 1200px) {
    gap:var(--space-120);
  }
  hr {margin-block: 0;}
  strong:first-child {text-transform: uppercase;font-size: 12px;letter-spacing: 3px;}

  .col.wine {
    display: flex;flex-direction: column;gap:gap:var(--space-24);
  }
}


/*
actu list
*/



/* pagination */
.pagination-centered {
  display: grid;
  align-items: center;
  .pagination {margin-inline: auto}
}
.pagination {
  display: flex;
  gap: var(--space-8);
  flex-wrap: wrap;
  padding: var(--space-40);
  .page-link {
    line-height: 1;
    font-size: 13px;

    height: 40px;
    border: solid 1px var(--border);
    display: flex;
    gap: var(--space-8)
    transition: background .25s,color .25s,border-color .25s,transform .3s var(--ease-out);
    aspect-ratio: 1;
    align-items: center;
    justify-content: center;

    &:not(.pagination-next):not(.pagination-previous) {
      aspect-ratio: 1;
    }

    &.current {
      border-color: var(--black);
      background-color: var(--black);
      color: var(--white);
      font-weight: bold;
    }
    &:where(:active, :focus, :hover):not(.current){
      border-color: var(--black);
      transform: translateY(-2px)
    }

    &.pagination-previous,
    &.pagination-next {
      padding: 0 1rem;
      width: auto;
      aspect-ratio: auto;
    }
  }
}


/*
single actu
*/
.tax-links {display: flex;gap:var(--space-10);flex-wrap: wrap;}
.author-info {
  background-color: var(--bg-light);
  padding: var(--space-16);
  display: grid;
  column-gap: var(--space-16);
  row-gap: 4px;
  grid-template-areas:
  "img label"
  "img name"
  "img desc"
  ;
  grid-template-columns: auto 1fr;
  line-height: 1;
  .avatar {grid-area: img;background-color: var(--placeholder);border-radius: 99em}
  .author-label {grid-area: label;text-transform: uppercase;font-size: 11px;color:var(--subtle);letter-spacing: 1.6px;}
  .author-name {grid-area: name;font-size: 14px;}
  p.author-desc {grid-area: desc;font-size: 13px;color:var(--muted)}
  @media (min-width: 768px) {
    padding: var(--space-24);
  }
}

/*
liste actus
*/
.post-featured {
  .post-name {
    font-size: var(--text-5xl);
    @media (min-width: 992px) {
      font-size: var(--text-7xl);
    }
  }
}
.post-link {
  display: grid;
  background-color: var(--white);
  transition: background-color .22s ease-out;
  &:is(:hover,:active,:focus-visible) {
    background-color: var(--bg-light);
    .post-body {transform: translateY(-4px); }
    .post-link-label {opacity: 1;
      .svg-icon {transform: translateX(5px);}
    }
    img {transform: scale(1.04); }

  }
}
.post-meta {
  display: flex;
  gap:var(--space-10);
  font-size: 11px;
  *+* {
    display: inline-flex;
    gap:inherit;
    &::before{ content:'•' }
  }
}
.post-term {text-transform: uppercase;}
.post-body {
  display: grid;
  gap:var(--space-10);
  transition: transform .22s ease-out;
  padding: var(--space-24);
  @media (min-width: 768px) {
    padding: var(--space-32);
  }
}
.post-link-label {
  padding-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  width: max-content;
  /*padding-top: var(--space-4);*/
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.6;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity .18s ease-out;
  .svg-icon {width: 14px;height: 14px;transition: transform .22s ease-out; }
}

/*
widgets
*/
.single-post-after {
  .eyebrow {text-transform: uppercase;}
  .widget {
    display: grid;
    gap: var(--space-32);
    @media (min-width: 992px) {
      gap: var(--space-64);
      row-gap: var(--space-48);
    }
  }
}

/*
gallery
*/

.gallery-grid {
  display: grid;
  justify-content: center;
  --space-gal: var(--space-16);
  gap: var(--space-gal);
  align-items: center;
  img {max-width: none; width: 100%; height: 100%;object-fit: cover;}

  @media (min-width: 992px) {
    --space-gal: var(--space-24);
  }
  .gallery-row {
    display: grid;gap:inherit;
  }
  &.gallery-col-2 .gallery-row {
    grid-template-columns: 1fr;
    @media (min-width: 768px) {
      display: grid;
      gap:inherit;
      grid-template-columns: minmax(0, 720fr) minmax(0, 640fr);
      &:nth-child(even) {
        grid-template-columns: minmax(0, 640fr) minmax(0, 720fr);
      }
    }
  }
  &.gallery-col-3 .gallery-row {
    grid-template-columns: 1fr;
    grid-template-rows: 380px;
    @media (min-width: 768px) {
      display: grid;
      gap:inherit;
      grid-template-columns: 520fr 440fr 376fr;
      &:nth-child(even) {
        grid-template-columns: 376fr 440fr 520fr
      }
    }
  }
}



a.gallery-item[data-fslightbox] {
  display: grid;
  grid-template-areas: "stack";
  overflow: clip;
  cursor: zoom-in;
  color: var(--white);
  & > * {grid-area: stack}
  img {transition: transform .8s var(--ease-out)}

  .gallery-item-caption {
    font-weight: 700;
    font-size: 12px;
    line-height: 140%;
    letter-spacing: 0.2px;
    justify-self: start;
    align-self: end;
    margin: var(--space-20);
    z-index: 2;
  }
  &:has(.gallery-item-caption)::before {
    grid-area: stack;
    content : '';
    inset:0;
    z-index: 1;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .8) 100%);
  }
  .gallery-item-icon {
    grid-area: stack;
    justify-self: end;
    align-self: end;
    margin: var(--space-20);
    z-index: 2;
    display: grid;
    place-items: center;
    width: 44px;
    aspect-ratio: 1;
    border: 1px solid var(--white60);
    border-radius: 50%;
    background: rgba(0, 0, 0, .2);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .4s, transform .5s var(--ease-out);
    .svg-icon {width: 18px;height: 18px;}
  }
  &:is(:hover,:active,:focus) {
    img {transform: scale(1.045);}
    .gallery-item-icon {opacity: 1;transform: none;}
  }
}
.fslightbox-slide-btn {
  border: 1px solid var(--white40);
  border-radius: 50%;
  background: rgba(0, 0, 0, .22);
  transition: background .3s, transform .4s var(--ease-out);
  .fslightbox-svg-path{
    fill:none;
    stroke: var(--white);
    stroke-width:1.7;
  }
}
.fslightbox-slide-btn-container:hover {
  .fslightbox-slide-btn {background: rgba(255, 255, 255, .14);transform: scale(1.06);}
  .fslightbox-svg-path {fill:none; }
}


/*
contact
*/

.contact-cards {
  display: flex;
  flex-wrap: wrap;
  grid-template-columns: repeat(3,1fr);
  gap: var(--space-24)
}
.contact-card {
  flex:1 1 250px;
  display: grid;
  gap: var(--space-16);
  padding: var(--space-32);
  border: 1px solid var(--border);
  border-radius: 2px;
  background: var(--bg-light);
  color: inherit;
  text-decoration: none;
  transition: transform .5s var(--ease-out),background .3s;

  .icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--white);
    transition: transform .45s var(--ease-out);
    font-size: 16px;
  }
  small {color: var(--subtle); font-size: var(--text-2xs); font-weight: 600; letter-spacing: 1.8px }
  strong {
    font: 400 var(--text-3xl)/1.25 var(--font-title) ;
    @media (min-width:992px){
      font-size: var(--text-4xl);
    }
    @media (min-width:1200px){
      font-size: var(--text-5xl);
    }
  }
  span:last-child {color: var(--muted); font-size: var(--text-base) }

  &:is(a):where(:hover,:active,:focus-visible) {
    transform: translateY(-7px);
    background: var(--ph-white);
    .icon {transform: rotate(-8deg) scale(1.06)}
  }
}

.section-type-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-40);
  @media (min-width: 992px) {
    grid-template-columns: 380px 1fr;
    gap: var(--space-80);
  }
  .form-nav-card {
    border: 1px solid var(--border);
    background: var(--bg-light);
    display: grid;
    grid-template-columns: 1fr 2fr;
    @media (min-width: 992px) {
      grid-template-columns: 1fr;
    }
    img {
      display: block;
      width: 100%;
      max-width: none;
      height: 190px; object-fit: cover; transition: transform .7s var(--ease-out);
    }
    .form-nav-card-body {
      padding: var(--space-24);
      display: grid;
      gap:8px;
    }
  }
}


[type="color"],
[type="date"],
[type="datetime-local"],
[type="datetime"],
[type="email"],
[type="month"],
[type="number"],
[type="password"],
[type="tel"],
[type="text"],
[type="time"],
[type="url"],
[type="week"],
textarea {
  outline: none;
  color: var(--input-text);
  padding: 1rem;
  width: 100%;
  border: 0;
  font-size: inherit;
  border-radius: var(--input-radius);
  background-color: var(--input-bg);
  border-bottom: var(--input-border) solid 1px;
}
::placeholder {
  color: var(--placeholder);
  font-family: var(--font-base);
  font-size: 1em;
}

.ff-default .ff-el-form-control {
  --fluentform-border-radius:0;
  font-family: var(--font-base);
  font-size: 15px;
  color:var(--ink);
  &:focus {border-width:2px}
}
/* field error */
.fluentform {
  --fluentform-danger:var(--error);
}

.fluentform .ff-el-is-error .ff-el-form-control {
  color:var(--ink);
  background-color: var(--error-bg);
  border-width: 2px;
}

.site-main .fluentform .ff-el-group.ff_list_buttons {
    .ff-el-input--content {display: flex;gap:10px;flex-wrap: wrap;}
    .ff-el-form-check:first-child,
    .ff-el-form-check:last-child,
    .ff-el-form-check  {
      margin: 0;
      border-radius: 0;
      label>span {
        padding: 10px 16px;
        border-radius: 5em;font-size: inherit; border:1px solid var(--border);color:var(--muted);font-weight: 400;
        transition: background .25s, color .25s, border-color .25s, transform .3s var(--ease-out);
        @media only screen and (max-width: 768px) {
          border-radius: 5em !important;
        }
      }
      label:hover>span {
      border-color: var(--ink);
      transform: translateY(-2px);
      }
      &.ff_item_selected label>span {
        color:var(--white);
        background-color: var(--black);
      }

    }
  }

.ff-errors-in-stack {
  .error {
    padding: 1rem;
    border: solid 1px var(--fluentform-danger);
    background-color: var(--error-bg);
  }
}
.ff-message-success {
  border: solid 1px var(--success);
  box-shadow: none;
  padding: var(--space-24);
  background-color: var(--success-bg);
  font-size: 14px;
  &::before {
    font-family: var(--font-title);
    font-size: 24px;
    margin-bottom: 14px;
    display: block;
    padding-left: 52px;
    background: url(/wp-content/themes/puechhaut/img/msg-icon-success.svg) no-repeat;
    background-size: contain;
    background-position: left center;
    content:'';
  }
}

[lang="fr-FR"] .ff-message-success::before {content: 'Message envoyé';}
[lang="en-GB"] .ff-message-success::before {content: 'Message sent';}

/*
footer
*/

.site-footer {
  color: var(--white60);
  .footer-seo {
    padding-block: var(--space-40);
    display: grid;
    gap: var(--space-32);
    a {
      color: var(--gray);
    }
    @media (min-width: 768px) {
      grid-template-columns: auto 1fr;
      gap: var(--space-80);
      padding-block: var(--space-56);
    }
    @media (min-width: 1300px) {
      grid-template-columns: 360px 1fr;
    }
  }
  .footer-newsletter {
    color:var(--white);
    padding-block: var(--space-20);
    @media (min-width: 992px) {
      padding-block: var(--space-40);
    }
  }
  .footer-bottom {
    font-size: var(--text-xs);
    display: grid;
    gap: var(--space-24);
    padding-block: var(--space-20);
    @media (min-width: 992px) {
      display: flex;
      justify-content: space-between;
      padding-block: var(--space-20);
    }
    .footer .menu {
      display: grid;
      gap: var(--space-10);
      @media (min-width: 992px) {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-24);
      }
    }
  }
}

.footer-seo-1 {
  .brand-image {width: 114px; }
  .brand-name {
    color: var(--white);
    letter-spacing: 2px;
    font-size: var(--text-2xl);
    margin-top: var(--size-1);
  }
  p {line-height: 1.7; }
  p + p {margin-top: 1em; }
}

.site-footer .social-items {
  display: flex;
  gap: var(--size-2);
  a {display: block; line-height: 1; font-size: 22px; }
  .svg-icon {display: block; scale: 0.72; }
  a.social-link {
    display: block;
    &:is(:hover, :active, :focus-visible) {
      transform: translateY(-3px);
    }
  }
}

.wordmark {
  font-size: 3.25rem;
  color: var(--white);
  max-width: 100%;
  white-space: nowrap;
  background-color: var(--bg-dark);
  text-align: center;
  overflow: hidden;
  font-family: var(--font-title);
  line-height: 1;
  padding-bottom: 16px;
  padding-top: var(--space-20);

  .wordmark__letter {
    display: inline-block;
    margin-right: 6px;
    &:last-child {
      margin-right: 0;
    }
    opacity: 0.3;
    will-change: transform, opacity;
    transition:
      transform 0.5s var(--ease-out),
      opacity 0.35s ease;
    &:hover {
      opacity: 1;
      transform: translateY(-7px);
    }
  }
  @media (min-width: 998px) {
    font-size: 190px;
    height: 150px;
    padding-top: var(--space-24);
    .wordmark__letter {
      margin-right: 0.31em;
      &:hover {
        transform: translateY(-14px);
      }
    }
  }
}

.site-footer .menu-accordion {
  details {
    --border-faq:var(--white12);
    @media (min-width: 1025px) {
      border-top: 0;
    }
  }
  summary,
  .acc-title {
    font-weight: 600;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--white40);
    @media (min-width: 1025px) {
      pointer-events: none;
    }
    @media (max-width: 1023px) {
      &:after {
        font-size: var(--text-2xl);
        color: var(--white);
        content: "+";
      }
      details[open] &:after {
        content: "−";
      }
    }
  }
  .acc-text {
    padding-bottom: var(--space-12);
    a {
      display: block;
      width: fit-content;
      margin: 12px 0;
    }
  }
  @media (min-width: 1025px) {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-40);
  }
}


/*
print
*/

@media print {
  .hidden-print,
  .hide-for-print {
    display: none !important;
  }
  body {
    font-size: 14px;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  blockquote {margin: 0; }
  a[href]:after {content: none; }
  hr {margin: 1rem auto 2rem; }
  p + h2 {margin-top: 1rem; }
  p + h3 {margin-top: 1rem; }
}
@page {size: A4 portrait; }

/*
plugins
*/

.site-social-share
{
 :where(a, button) {padding: 5px; display: block; }
  svg {display: block; }
  button {background: none; border: 0; font-size: inherit; color: inherit; }
  button > svg {width: 0.9em; height: 0.9em; transform: translateY(2px); }
}

.site-share-services {display: flex; gap: 5px; }

/*
plugin cookie notice
*/
.cookies-refused #cookie-notice,
.cookies-accepted #cookie-notice {position: static; }
#cookie-notice .cn-button {margin-bottom: 0; }
#cn-revoke-text {color: var(--text); }
#cookie-notice .cn-buttons-container .cn-button:not(.cn-button-custom) {border-radius: 0; }
.cookie-revoke-container {background-color: #fff; }
.grecaptcha-badge {visibility: hidden; }

.debug-section {position: relative; z-index: 10; }


/*
 language switcher plugin polylang
*/

.lang-switcher {
  position: relative;
  width: max-content;
  :is(.lang-switcher-toggle):is(:hover, :focus-visible) {
    border-color: var(--ink);
  }
}

.lang-switcher-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  line-height: 1;
  anchor-name: --lang-switcher-toggle;
  .lang-code {text-box: trim-both cap alphabetic; }
  .svg-icon{transition: transform .2s ease-out; opacity: .6; }
  &[aria-expanded="true"] .svg-icon{
    transform: rotate(180deg);
  }
  img {width: 16px;}
}

.lang-switcher-dialog {
  position: fixed;
  top: 64px;
  right: var(--space-24);
  left: auto;
  width: min(200px, calc(100vw - (var(--space-24) * 2)));
  margin: 0;
  padding: 6px;
  max-height: calc( 100dvh - var(--header-height) );
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--white);
  box-shadow: 0px 12px 32px -8px rgba(0, 0, 0, 0.18);
  color: var(--ink);
  &::backdrop {background: transparent; }

  @media (min-width: 768px) {right: var(--space-64); }

  @supports (anchor-name: --lang-switcher-toggle) {
    position-anchor: --lang-switcher-toggle;
    top: calc(anchor(bottom) + 12px);
    right: anchor(right);
  }

}

.lang-switcher-list {
  display: grid;
  gap: var(--space-4);

  img {width: 16px; }
  a {
    display: flex;
    align-items: center;
    gap: var(--space-10);
    padding: var(--space-8) var(--space-10);
    border-radius: 8px;
    line-height: 1;
    &:is(:hover, :focus,:active) {background: var(--bg-light); }
    &:focus-visible{outline-offset: 0px; }
  }
  .lang-name {text-box: trim-both cap alphabetic; }
}
/*
brevo form :
  widget,
  .sib-form : html from brevo
*/
.footer-newsletter {

  :where(.widget_sib_subscribe_form,.sib-form) {
    display: flex;
    gap: 16px;
    flex-direction: column;
    @media (min-width: 768px) {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }

    div[class*="sib_signup_box_inside_"] {
      display: flex;
      align-items: center;
      .sib-email-area {flex-grow: 1; }
      input {
        color:var(--white);
        width: 100%; border:0;background: #262626; padding: 16px; font-size: 13px;
        @media (min-width: 768px) {
          width: 300px;
        }
        &::placeholder {
          font-family: var(--font-base);
          text-align: left;
          color: var(--white40);
        }
      }
      .btn {
        padding: 12px 18px;
      }
    }
  }
}
/*
fluent form demande de devis
titres avec compteur
*/
.frm-fluent-form {
  counter-reset: step;
  .ff-custom_html:has(.title-prefix-number) {
    counter-increment: step;
  }
  .title-prefix-number{
    display: flex;
    align-items: center;
    gap:14px;
  }
  .title-prefix-number::before {
    content: counter(step);
    background-color: var(--ink);
    color:var(--white);
    width: 32px;
    height: 32px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-family: var(--font-base);
    font-weight: 700;
    font-size: 13px;
  }
}