/* wz-foundations */
/* Design foundations derived from the theme. Do not hand-edit: apply_design_foundations rewrites this whole block. */

:root {
    --wz-space-2xs: clamp(8px, 0.5rem + 0.2vw, 12px);
    --wz-space-xs: clamp(12px, 0.75rem + 0.3vw, 16px);
    --wz-space-s: clamp(16px, 1rem + 0.5vw, 24px);
    --wz-space-m: clamp(24px, 1.5rem + 0.8vw, 32px);
    --wz-space-l: clamp(24px, 1.5rem + 0.9vw, 36px);
    --wz-space-xl: clamp(32px, 2rem + 1.4vw, 48px);
    --wz-space-2xl: clamp(40px, 2.5rem + 2vw, 64px);
    --wz-space-3xl: clamp(56px, 3.5rem + 3vw, 88px);
    --wz-flow: 0.9em;
    --wz-radius-s: 16px;
    --wz-radius-m: 32px;
    --wz-radius-l: 48px;
    --wz-surface: rgba(0, 0, 0, .035);
    --wz-surface-high: rgba(0, 0, 0, .06);
    --wz-border: rgba(0, 0, 0, .14);
    --wz-text-muted: rgba(0, 0, 0, .62);
    --wz-ink: #14161a;
    --wz-ink-on: #f4f2f0;
    --wz-elev-1: 0 1px 2px rgba(17, 17, 17, .06), 0 2px 6px rgba(17, 17, 17, .05);
    --wz-elev-2: 0 1px 2px rgba(17, 17, 17, .07), 0 4px 12px rgba(17, 17, 17, .07), 0 12px 28px rgba(17, 17, 17, .06);
}

/* Vertical rhythm between sections. The theme ships 20/30/40/50 px, below the 64-96 px
   a content section needs; margin "none" stays untouched (it is glued on purpose). */
.body__wrapper .wiziblocks__item.small { margin-bottom: var(--wz-space-l); }
.body__wrapper .wiziblocks__item.medium { margin-bottom: var(--wz-space-2xl); }
.body__wrapper .wiziblocks__item.large { margin-bottom: var(--wz-space-3xl); }
.body__wrapper .wiziblocks__item:not(.small):not(.medium):not(.large):not(.none) { margin-bottom: var(--wz-space-2xl); }

/* Flow inside a block. The theme sets margin:0 and padding:0 on headings and paragraphs,
   so two paragraphs touch. The class is repeated to win over the theme rule without !important. */
body.body .wiziblocks__item.wiziblocks__item p + p { margin-top: var(--wz-flow); }
body.body .wiziblocks__item.wiziblocks__item h2 + p,
body.body .wiziblocks__item.wiziblocks__item h3 + p,
body.body .wiziblocks__item.wiziblocks__item h4 + p { margin-top: var(--wz-space-2xs); }
body.body .wiziblocks__item.wiziblocks__item p + h2,
body.body .wiziblocks__item.wiziblocks__item p + h3 { margin-top: var(--wz-space-m); }

/* Display voice "quiet": Titles stay discreet so the products carry the page: the right choice for a large catalogue. */
/* The theme caps a title at 48 px and font.titleSize does nothing, so the size lives here. */
body.body .wiziblocks__item.wiziblocks__item h1,
body.body .wiziblocks__item.wiziblocks__item h2 {
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: normal;
    text-transform: none;
}
body.body .wiziblocks__item.wiziblocks__item h1 { font-size: clamp(1.625rem, 1.1rem + 1.6vw, 2.375rem); }
body.body .wiziblocks__item.wiziblocks__item h2 { font-size: clamp(1.375rem, 1rem + 1.2vw, 1.875rem); }

/* Line-height: generous on reading sizes (the theme sets 1.4 on titles and text alike). */
body.body .wiziblocks__item.wiziblocks__item h3 { line-height: 1.2; }
body.body .wiziblocks__item.wiziblocks__item p,
body.body .wiziblocks__item.wiziblocks__item li { line-height: 1.55; }

/* Measure: 45-75 characters per line. A one-column text block spans the whole container otherwise. */
body.body .wiziblocks__item.wiziblocks__item .wizi-txt--one p { max-width: 68ch; margin-inline: auto; }

/* Surface strategy "alternate": Sections alternate between the page background and a tinted surface: the page reads in chapters. */
/* Hang these on a section with class_custom. The colour goes on __maxWidth: the theme repaints */
/* the page background there, so painting .wiziblocks__item alone shows only in the gutters. */
.wiziblocks__item.wz-alt .wiziblocks__item__maxWidth {
    background-color: var(--wz-surface);
    padding-block: var(--wz-space-l);
}

/* Elevation: layered shadows. A single shadow reads as cheap; the theme ships one at 75% opacity. */
body.body .wiziBtn:hover { box-shadow: var(--wz-elev-2); }

/* Visible focus ring (WCAG 2.4.7). Keyboard only: it never shows on a mouse click. */
body.body a:focus-visible,
body.body button:focus-visible,
body.body input:focus-visible,
body.body select:focus-visible,
body.body textarea:focus-visible,
body.body [tabindex]:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
    border-radius: var(--wz-radius-s);
}

/* Every header variant pins itself on mobile, so an anchor or a keyboard focus
   lands under it without this (WCAG 2.4.11 Focus Not Obscured). Values measured
   in a browser, not guessed: docs/tools/header-sticky-probe.mjs. */
html { scroll-padding-top: 70px; }
/* This variant leaves the top free on a desktop. */
@media (min-width: 1024px) { html { scroll-padding-top: 0; } }

/* /wz-foundations */

/* Contraste liens surfaces claires — 2026-10-06 */
.wiziblocks__item a:not(.xplore-card):not([class*="btn"]):not([class*="button"]) {
  color: #C21875;
}

.xplore-card,
.xplore-card:hover,
.xplore-card:focus,
.xplore-card:visited {
  color: #ffffff;
}

/* Contraste liens footer Xplore — 2026-10-06 */
.footer .footer__wrapper__left__primary__ul__li__link,
.footer .footer__wrapper__left__primary__ul__li__link:visited {
  color: #ffffff;
}
.footer .footer__wrapper__left__primary__ul__li__link:hover,
.footer .footer__wrapper__left__primary__ul__li__link:focus-visible {
  color: #ff91cd;
}

/* CTA Xplore texte visible — 2026-10-06 — 2026-10-06 */
.xa .xa-btn.xa-btn--primary,
.xa .xa-btn.xa-btn--primary:visited,
.xa .xa-btn.xa-btn--primary:hover,
.xa .xa-btn.xa-btn--primary:focus,
.xc .xc-primary,
.xc .xc-primary:visited,
.xc .xc-primary:hover,
.xc .xc-primary:focus,
.xp-passport .xp-passport-primary,
.xp-passport .xp-passport-primary:visited,
.xp-passport .xp-passport-primary:hover,
.xp-passport .xp-passport-primary:focus {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.xa .xa-btn.xa-btn--primary {
  font-size: 16px !important;
  line-height: 1.25 !important;
  text-indent: 0 !important;
}

/* Ajout — 2026-10-23 */
/* Xplore - pied de page : garder la casse des libellés (FAQ, Xplore Care, Passeport) */
.footer .footer__wrapper__left__primary__ul__li__link {
  text-transform: none;
}

/* Ajout — 2026-10-23 */
/* Xplore - fiches produit : description lisible (texte fournisseur souvent justifié) */
.prod-infos__desc .prod-infos__anim p,
.prod-infos__desc .prod-infos__anim li {
  text-align: left !important;
  font-size: 15px;
  line-height: 1.7;
}

/* Ajout — 2026-10-23 */
/* Xplore - page Guides & conseils : cartes sans style de lien du thème */
.xh a.xh-card,
.xh a.xh-card:hover,
.xh a.xh-card * {
  text-decoration: none !important;
}
.xh a.xh-card h3 { color: #201c22 !important; }
.xh a.xh-card p { color: #6d6570 !important; }
.xh a.xh-card .xh-meta,
.xh a.xh-card .xh-more { color: #c21875 !important; }
.xh a.xh-card:hover h3 { color: #c21875 !important; }