/* Fonts ----------------------------------------------------------------- */
/* Alice, served from the theme instead of Google Fonts (see inc/enqueue.php).
   Same subsets and unicode ranges as Google's CSS. */

@font-face {
  font-family: 'Alice';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/alice-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Alice';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/alice-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Base ------------------------------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text);
  background: var(--color-accent);
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body.mini-cart-open {
  overflow: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: 400;
  margin: 0 0 0.5em;
}

h1 {
  font-size: 48px;
  color: var(--color-primary);
}

a {
  color: inherit;
}

ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.icon {
  width: 20px;
  height: 20px;
  vertical-align: -0.2em;
  flex-shrink: 0;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--control-height);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: var(--btn-font-weight);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-text);
  background: var(--color-accent);
  border: 1px solid var(--color-secondary);
  padding: 0 32px;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.btn:hover,
.btn--primary {
  color: var(--color-accent);
  background: var(--color-secondary);
}

/* Header ------------------------------------------------------------------ */

.site-header {
  background: var(--color-accent);
  text-align: center;
  position: sticky;
  top: 0;
  z-index: 100;
  transition: transform 0.3s ease;
}

.site-header.header--hidden {
  transform: translateY(-100%);
}

/* Panier + validation : pas de header qui réapparaît au scroll up, il
   masquerait le formulaire et le récapitulatif (voir mini-cart.js).
   Boutique (et résultats de recherche, même gabarit) : la barre Filtres ou
   la colonne de filtres sert de barre collée ; un header qui revient les
   recouvrait ou les poussait à chaque remontée. */
.woocommerce-cart .site-header,
.woocommerce-checkout .site-header,
.woocommerce-shop .site-header {
  position: relative;
}

.site-header__logo-row {
  text-align: center !important;
  padding: 3em 2em 2em;
}

.site-header__nav-row {
  display: inline-flex;
  align-items: center;
  gap: 2em;
  padding: 0 0em 2.5em;
  border-bottom: 3px dotted var(--color-secondary);
  transition: border-color 0.3s ease;
}

/* The dotted line separates the header from the page top; once the header
   sticks over scrolled content it would cut through images, so hide it. */
.site-header.header--stuck .site-header__nav-row {
  border-bottom-color: transparent;
}

.site-main {
  display: block;
  padding-top: var(--space-xl);
  flex: 1 0 auto;
}

/* Specificity must beat WooCommerce's ".woocommerce-page img{height:auto}"
   (present on product-view pages), which otherwise wins and makes the
   logo fall back to its native 211px height. */
.site-logo {
  display: block;
}

.site-header .site-logo__img {
  height: 55px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  margin: 0 auto;
}

.site-footer .site-logo__img {
  height: 48px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.site-footer__col--brand {
  padding-right: 2em;
}

.site-footer__col--brand p {
  max-width: 314px;
}

.site-nav__list {
  display: flex;
  gap: 2em;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav__list a {
  position: relative;
  text-decoration: none;
  padding-bottom: 0.2em;
}

.site-nav__list a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.site-nav__list a:hover::after,
.site-nav__list .current-menu-item a::after {
  transform: scaleX(1);
}

.site-header__icons {
  display: flex;
  align-items: center;
  gap: 1.25em;
}

/* Search --------------------------------------------------------------------- */

.site-search {
  position: relative;
  display: flex;
  align-items: center;
}

.site-search__toggle {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.1em;
  color: var(--color-text);
  flex-shrink: 0;
  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

.site-search__toggle:hover {
  color: var(--color-secondary);
  transform: scale(1.15);
}

/* Collapsed by default — slides open to the left of the toggle icon when
   .site-search gets .is-open (see assets/js/search.js). Since the header
   nav row is display:inline-flex, it (and its dotted border) grows with it. */
.site-search__input {
  width: 0;
  padding: 0;
  margin: 0;
  border: none;
  opacity: 0;
  font-family: var(--font-body);
  background: transparent;
  transition:
    width 0.35s ease,
    opacity 0.3s ease,
    margin 0.35s ease,
    padding 0.35s ease;
}

/* Retire la croix "effacer" native du navigateur (type="search") — la loupe
   fait déjà office de bouton pour fermer/vider la recherche. */
.site-search__input::-webkit-search-cancel-button,
.site-search__input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.site-search.is-open .site-search__input {
  width: 200px;
  opacity: 1;
  padding: 8px 12px;
  margin-right: 0.5em;
  border: 1px solid var(--color-secondary);
  border-radius: var(--radius-sm);
}

.site-search.is-open .site-search__input:focus-visible {
  outline: none;
}

.site-search__results {
  position: absolute;
  top: 100%;
  right: 0;
  width: 320px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--color-accent);
  box-shadow: 0 12px 28px rgba(29, 29, 27, 0.16);
  padding: 0.4em;
  margin-top: 0.75em;
  z-index: 100;
  opacity: 0;
  border-radius: var(--radius-sm);
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    visibility 0.25s;
}

.site-search__results.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.site-search__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-search__item + .site-search__item {
  border-top: 1px solid rgba(29, 29, 27, 0.08);
}

.site-search__item a {
  display: flex;
  align-items: center;
  gap: 0.85em;
  padding: 0.6em 0.5em;
  text-decoration: none;
  transition: background 0.15s ease;
}

.site-search__item a:hover {
  background: var(--color-secondary-10);
}

.site-search__item img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  flex-shrink: 0;
}

.site-search__item-title {
  flex: 1 1 auto;
  font-size: 0.9em;
  line-height: 1.3;
  text-align: left;
}

.site-search__empty {
  font-size: 0.9em;
  margin: 0;
  padding: 1.25em 0.75em;
  text-align: center;
  opacity: 0.7;
}

.site-search__more {
  display: block;
  text-align: center;
  font-size: 0.78em;
  font-weight: 400;
  color: var(--color-text);
  opacity: 0.6;
  text-decoration: none;
  padding: 0.6em;
  margin-top: 0.4em;
  border-top: 1px solid rgba(29, 29, 27, 0.08);
  transition:
    opacity 0.15s ease,
    background 0.15s ease;
}

.site-search__more:hover {
  opacity: 1;
  background: var(--color-secondary-10);
}

/* Wishlist --------------------------------------------------------------------- */

.wishlist-header {
  position: relative;
  font-size: 1.1em;
  color: var(--color-text);
  display: inline-flex;
  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

.wishlist-header:hover {
  color: var(--color-secondary);
  transform: scale(1.15);
}

.count-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  background: var(--color-primary);
  color: var(--color-accent);
  border-radius: 50%;
  font-size: 11px;
  font-family: var(--font-body);
  min-width: 16px;
  line-height: 16px;
  text-align: center;
}

.wishlist-toggle {
  background: var(--color-accent);
  border: none;
  border-radius: 50%;
  width: 2.25em;
  height: 2.25em;
  cursor: pointer;
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
}

.wishlist-toggle.is-active .icon-heart {
  fill: currentColor;
  color: var(--color-primary);
}

/* Cœur dessiné par Lola (lolacamus_wishlist_heart) : contour par défaut,
   cœur plein magenta une fois le produit dans la liste. Les deux tracés sont
   superposés dans le même SVG, on passe de l'un à l'autre en fondu. */
.heart-drawn {
  width: 22px;
  height: 22px;
  overflow: visible;
}

.heart-drawn__outline,
.heart-drawn__fill {
  transition: opacity 0.2s ease;
}

.heart-drawn__outline {
  fill: currentColor;
}

.heart-drawn__fill {
  fill: var(--color-primary);
  opacity: 0;
}

.wishlist-toggle.is-active .heart-drawn__fill {
  opacity: 1;
}

.wishlist-toggle.is-active .heart-drawn__outline {
  opacity: 0;
}

/* Petit rebond quand on ajoute à la liste (pas au retrait), sauf si le
   visiteur a demandé moins d'animations à son système. */
@media (prefers-reduced-motion: no-preference) {
  .wishlist-toggle.is-popping .heart-drawn {
    animation: heart-pop 0.35s ease-out;
  }
}

/* Page liste de souhaits : carte retirée en fondu (wishlist.js). */
#wishlist-grid .product-card {
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

#wishlist-grid .product-card.is-removing {
  opacity: 0;
  transform: scale(0.96);
}

@keyframes heart-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

.product-card {
  position: relative;
}

.product-card .wishlist-toggle {
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  z-index: 2;
}

.product-view__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
}

.product-view__title-row h1 {
  margin: 0;
}

.wishlist-toggle--single {
  flex-shrink: 0;
}

.site-nav__list a:hover,
.site-nav__list .current-menu-item a {
  color: var(--color-secondary);
}

.site-nav--mobile,
.menu-toggle {
  display: none;
}

.site-logo--mobile {
  display: none;
}

/* Mini-cart ---------------------------------------------------------------- */

.mini-cart {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.mini-cart__toggle {
  background: transparent !important;
  border: none;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.25em;
  color: var(--color-text);
  position: relative;
  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

.mini-cart__toggle:hover {
  color: var(--color-secondary);
  transform: scale(1.15);
}

.mini-cart__overlay {
  position: fixed;
  inset: 0;
  background: rgba(29, 29, 27, 0.5);
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.mini-cart__overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.mini-cart__drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 380px;
  max-width: 90vw;
  background: var(--color-accent);
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.15);
  padding: 2em;
  overflow-y: auto;
  z-index: 201;
  transform: translateX(100%);
  visibility: hidden;
  transition:
    transform 0.3s ease,
    visibility 0.3s ease;
}

.mini-cart__drawer.is-open {
  transform: translateX(0);
  visibility: visible;
}

.mini-cart__close {
  position: absolute;
  top: 1.5em;
  right: 1.5em;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text);
  transition: color 0.2s ease;
}

.mini-cart__close:hover {
  color: var(--color-secondary);
}

.mini-cart__body {
  margin-top: 3em;
}

.mini-cart__items {
  list-style: none;
  margin: 0 0 1.5em;
  padding: 0;
}

.mini-cart__item {
  display: flex;
  align-items: flex-start;
  gap: 1em;
  padding: 1em 0;
  border-bottom: 1px solid var(--color-secondary);
}

.mini-cart__item-image {
  flex-shrink: 0;
  display: block;
}

.mini-cart__item-image img {
  width: 64px;
  height: 64px;
  object-fit: cover;
}

.mini-cart__item-details {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  text-align: left;
}

.mini-cart__item-title {
  text-decoration: none;
  font-size: 0.9em;
  line-height: 1.4;
}

.mini-cart__item-line {
  font-size: 0.85em;
  color: var(--color-text);
}

.mini-cart__item-remove {
  flex-shrink: 0;
  color: var(--color-text);
  transition: color 0.2s ease;
}

.mini-cart__item-remove .icon {
  width: 14px;
  height: 14px;
}

.mini-cart__item-remove:hover {
  color: var(--color-primary);
}

.mini-cart__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-weight: 600;
  margin-bottom: 1.5em;
  padding-top: 1em;
}

.mini-cart__actions {
  display: flex;
  flex-direction: column;
  gap: 0.75em;
}

.mini-cart__actions .btn {
  width: 100%;
}

/* Footer -------------------------------------------------------------------- */

.site-footer {
  background: var(--color-secondary-10);
  padding: var(--space-lg) 2em 1em;
  margin-top: var(--space-xxxl);
}

.site-footer__columns {
  display: grid;
  grid-template-columns: 1.5fr repeat(6, 1fr);
  gap: 2em;
  max-width: 1400px;
  margin: auto;
}

.site-footer__col h2 {
  color: var(--color-secondary);
  font-size: 1.25em;
  margin-bottom: 1em;
}

.site-footer__list,
.site-footer__contact,
.site-footer__payment-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__list li,
.site-footer__contact li {
  margin-bottom: 0.5em;
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.site-footer__list a,
.site-footer__contact a {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  color: var(--color-text);
  text-decoration: none;
}

/* Nav menus : underline sur le <a> directement (pas de span) */
.site-footer__list a {
  position: relative;
  padding-bottom: 0.2em;
}

.site-footer__list a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition:
    transform 0.25s ease,
    color 0.2s ease;
}

.site-footer__list a:hover::after {
  transform: scaleX(1);
}

/* Contact/social : underline sur le <span> uniquement (icône exclue) */
.site-footer__contact a span {
  position: relative;
  padding-bottom: 0.2em;
}

.site-footer__contact a span::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition:
    transform 0.25s ease,
    color 0.2s ease;
}

.site-footer__list a:hover,
.site-footer__contact a:hover {
  color: var(--color-secondary);
}

.site-footer__contact a:hover span::after {
  transform: scaleX(1);
}

.site-footer__contact .icon {
  width: 1.25em; /* the SVG centres itself in the box, as the FA glyphs did */
  height: 1em;
  vertical-align: middle;
  flex-shrink: 0;
  color: var(--color-secondary);
}

.site-footer__payment-list {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 0.75em;
  justify-content: start;
}

.payment-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

.payment-badge img {
  width: 38px;
  height: 25px;
  display: block;
}

.payment-badge:hover {
  transform: scale(1.1);
}

.site-footer__copyright {
  text-align: center;
  margin: 2em -2em -1em;
  padding: 0.4em 2em;
  background: var(--color-secondary);
  color: var(--color-accent);
}

.site-footer__copyright p {
  margin: 0;
  font-size: 0.85em;
}

/* Generic page content (Elementor-rendered pages fall through here) -------- */

.error-404 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex: 1 0 auto;
  padding: var(--space-xl) 2em;
  gap: 1rem;
}

.error-404__code {
  font-size: 6rem;
  font-family: var(--font-heading);
  color: var(--color-primary);
  line-height: 1;
  margin: 0;
}

.error-404__title {
  font-size: 1.5rem;
  margin: 0;
}

.error-404__message {
  color: var(--color-text);
  margin: 0;
}

.error-404__back {
  margin-top: 0.5rem;
}

.generic-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 2em;
  line-height: 1.7;
}

.generic-content h1 {
  font-size: 2.5em;
  margin-bottom: 0.75em;
}

.generic-content h2 {
  color: var(--color-primary);
  font-size: 1.5em;
  margin-top: 1.5em;
}

.generic-content h3 {
  font-size: 1.1em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 1.5em;
}

.generic-content p {
  margin: 0 0 1em;
}

.generic-content img {
  max-width: 100%;
  height: auto;
  margin: 1em 0;
}

.generic-content a {
  color: var(--color-primary);
  text-decoration: underline;
}

.generic-content a:hover {
  color: var(--color-secondary);
}

.page-header {
  text-align: center;
  max-width: 1200px;
  margin: 2em auto;
  padding: 0 2em;
}

.page-header__tagline {
  font-family: var(--font-heading);
  font-style: italic;
}

/* Archives page -------------------------------------------------------------- */

.page-archives__header {
  margin-bottom: 2.5em;
}

.page-archives__header h1 {
  margin-bottom: 1em;
}

.page-archives__divider {
  border: none;
  border-top: 1px solid var(--color-primary-40);
  max-width: var(--carousel-image-width);
  margin: 0 auto 3em;
  padding: 0;
}

/* Product grid --------------------------------------------------------------- */

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  list-style: none;
  /* Marge de 2em sur les côtés : sans elle, entre ~960 et 1400px la grille
     touchait les bords de l'écran. Largeur max inchangée pour le contenu. */
  max-width: calc(var(--carousel-image-width) + 4em);
  margin: 0 auto;
  padding: 0 2em;
}

.product-card {
  text-align: left;
}

.product-card__link {
  text-decoration: none;
  display: block;
}

.product-card__media {
  position: relative;
  overflow: hidden;
}

.product-card img {
  aspect-ratio: 3 / 4;
  height: auto;
  width: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

/* Survol réservé aux appareils qui ont un vrai survol (souris, trackpad).
   Au doigt, :hover se déclenche au tap et reste collé : sur iOS le 1er tap
   affiche l'overlay au lieu d'ouvrir la fiche (il en faut un 2e), et
   l'overlay reste affiché au retour sur la page. Ciblage par capacité et
   non par largeur : une tablette avec souris garde l'effet. */
@media (hover: hover) and (pointer: fine) {
  .product-card__link:hover img {
    transform: scale(1.03);
  }
}

.product-card__overlay {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--color-secondary) 92%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5em;
  opacity: 0;
  transition: opacity 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
  .product-card__link:hover .product-card__overlay {
    opacity: 1;
  }
}

.product-card__variations {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  font-family: var(--font-body);
  color: var(--color-accent);
}

.product-card__variations li {
  display: flex;
  justify-content: space-between;
  gap: 1em;
  padding: 0.4em 0;
  font-size: 18px;
}

.product-card__variation-price,
.product-card__variation-price .woocommerce-Price-amount.amount {
  color: var(--color-accent);
}

.product-card__title {
  font-size: 18px;
  font-weight: 600;
  margin-top: 0.75em;
}

.product-card--priced .product-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5em;
  margin-top: 0.5em;
}

.product-card--priced .product-card__title {
  margin-top: 0;
}

.product-card--priced .product-card__separator,
.product-card--priced .product-card__price {
  margin: 0;
}

.product-grid__pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.25em;
  margin: 3em 0 1em;
}

.product-grid__pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2em;
  height: 2em;
  padding: 0 0.4em;
  font-family: var(--font-body);
  font-size: 0.85em;
  font-weight: 200;
  color: var(--color-text);
  text-decoration: none;
}

.product-grid__pagination .page-numbers.current {
  color: var(--color-primary);
}

.product-grid__pagination a.page-numbers:hover {
  color: var(--color-primary);
}

.homepage__cta {
  text-align: center;
  margin: 4em 0;
  padding: 0 1em; /* sinon le bouton (libellé long) touche les bords en mobile S */
}

.site-tagline {
  text-align: center;
  font-family: var(--font-heading);
  color: var(--color-primary);
  margin: 0 0 var(--space-xxxl);
}

/* Boutique filter -------------------------------------------------------------- */

.boutique-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  justify-content: center;
  max-width: 1200px;
  margin: 0 auto 2em;
  padding: 0 2em;
}

.boutique-filter__pill {
  display: inline-block;
  padding: 0.4em 1.2em;
  border: 1px solid var(--color-secondary);
  text-decoration: none;
  font-size: 0.85em;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.boutique-filter__pill.is-active {
  background: var(--color-secondary);
  color: var(--color-text); /* crème sur corail = 2:1, illisible ; noir = 7,9:1 */
}

/* Survol (souris uniquement, comme les cartes produit) : fond teinté sur un
   filtre inactif, fond un peu plus soutenu sur un filtre déjà actif. */
@media (hover: hover) and (pointer: fine) {
  .boutique-filter__pill:hover {
    background: var(--color-secondary-20);
  }

  .boutique-filter__pill.is-active:hover {
    background: color-mix(in srgb, var(--color-secondary) 85%, var(--color-text));
  }
}

/* Boutique layout (filtres Thème/Format/Type + grille) -------------------------- */

.boutique-layout {
  max-width: 1400px;
  margin: 0 auto;
}

/* Colonne de filtres repliable (ordinateur, au-delà de 960px) : fermée par
   défaut, la grille prend toute la largeur ; ouverte par le bouton Filtres,
   elle s'insère à gauche et la grille se resserre (3 colonnes plus étroites).
   Sur mobile, elle n'existe pas : c'est le tiroir qui sert. */
.boutique-layout__sidebar {
  display: none;
}

@media (min-width: 961px) {
  .boutique-layout {
    display: grid;
    grid-template-columns: 0 minmax(0, 1fr);
    column-gap: 0;
    max-width: calc(var(--carousel-image-width) + 4em);
    padding: 0 2em;
    transition:
      grid-template-columns 0.3s ease,
      column-gap 0.3s ease;
  }

  .boutique-layout.has-sidebar {
    grid-template-columns: 240px minmax(0, 1fr);
    column-gap: var(--space-lg);
  }

  .boutique-layout.no-transition,
  .boutique-layout.no-transition .boutique-layout__sidebar {
    transition: none;
  }

  /* La grille suit la largeur de sa colonne (marges gérées par .boutique-layout). */
  .boutique-layout__grid .product-grid {
    max-width: none;
    padding: 0;
  }

  .boutique-layout__sidebar {
    display: block;
    position: sticky;
    top: calc(var(--header-offset, 0px) + 1.5em);
    align-self: start;
    max-height: calc(100vh - var(--header-offset, 0px) - 3em);
    overflow: hidden auto;
    padding: 1.5em;
    border: 1px solid color-mix(in srgb, var(--color-secondary) 40%, transparent);
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 0.25s ease,
      visibility 0.25s,
      top 0.3s ease;
  }

  .boutique-layout.has-sidebar .boutique-layout__sidebar {
    opacity: 1;
    visibility: visible;
  }

  /* En-tête de colonne : « Filtres » + croix de fermeture, sur sa propre
     ligne pour ne pas se confondre avec « Réinitialiser les filtres ». */
  .boutique-layout__sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: -0.25em 0 1.25em;
    padding-bottom: 0.75em;
    border-bottom: 1px solid color-mix(in srgb, var(--color-secondary) 40%, transparent);
  }

  .boutique-layout__sidebar-head .boutique-filters__label {
    margin: 0;
  }

  .boutique-layout__sidebar-close {
    display: inline-flex;
    padding: 0.25em;
    margin-right: -0.25em;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text);
    transition: color 0.2s ease;
  }

  .boutique-layout__sidebar-close:hover {
    color: var(--color-secondary);
  }

  /* Colonne ouverte : le bouton s'efface, l'en-tête « Filtres ✕ » de la
     colonne prend le relais (la croix ramène le bouton). Masqué sans retirer
     sa place : le retirer raccourcissait la page, le navigateur recalait le
     défilement et la navigation réapparaissait en poussant le contenu. */
  body.boutique-sidebar-open .boutique-filters-bar {
    visibility: hidden;
  }

}


/* Décalage pour le scroll-to-top au changement de page (voir boutique-filter.js) :
   sans ça le haut de la grille se retrouve caché sous le header sticky. */
#boutique-grid {
  scroll-margin-top: 260px; /* header desktop (~175px) + barre de filtres collée */
}

.boutique-layout__grid.is-loading {
  opacity: 0.4;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

@keyframes lc-skeleton-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}

.product-card--skeleton {
  pointer-events: none;
}

.product-card--skeleton .product-card__media {
  aspect-ratio: 3 / 4;
  background: var(--color-secondary-20);
  animation: lc-skeleton-pulse 1.4s ease-in-out infinite;
}

.product-card--skeleton .product-card__title--skeleton {
  height: 0.9em;
  width: 55%;
  background: var(--color-secondary-20);
  margin-top: 0.6em;
  animation: lc-skeleton-pulse 1.4s ease-in-out infinite 0.15s;
}

.boutique-filters__group {
  margin-bottom: 2em;
}

.boutique-filters__label {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 200;
  text-transform: uppercase;
  margin: 0 0 0.75em;
}

.boutique-filters__reset {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-body);
  font-size: 0.85em;
  color: var(--color-primary);
  text-decoration: none;
  margin-bottom: 1.5em;
}

.boutique-filters__reset .icon {
  width: 16px;
  height: 16px;
}

.boutique-filters .boutique-filter {
  justify-content: flex-start;
  max-width: none;
  margin: 0;
  padding: 0;
}

.boutique-filters-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  max-width: 100%;
  height: var(--control-height);
  padding: 0 32px;
  margin: 0 auto;
  font-family: var(--font-body);
  font-weight: var(--btn-font-weight);
  text-transform: uppercase;
  color: var(--color-text);
  background: var(--color-accent);
  border: 1px solid var(--color-secondary);
  cursor: pointer;
}

.boutique-filters-toggle:hover {
  color: var(--color-text);
  background: var(--color-secondary);
}

.boutique-filters-overlay {
  position: fixed;
  inset: 0;
  background: rgba(29, 29, 27, 0.5);
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.boutique-filters-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

/* Tiroir des filtres : arrive par la gauche (le panier, lui, arrive par la
   droite). */
.boutique-filters-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 380px;
  max-width: 90vw;
  background: var(--color-accent);
  box-shadow: 4px 0 16px rgba(0, 0, 0, 0.15);
  padding: 2em;
  overflow-y: auto;
  z-index: 201;
  transform: translateX(-100%);
  visibility: hidden;
  transition:
    transform 0.3s ease,
    visibility 0.3s ease;
}

.boutique-filters-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
}

.boutique-filters-drawer__close {
  position: absolute;
  top: 1.5em;
  right: 1.5em;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text);
  transition: color 0.2s ease;
}

.boutique-filters-drawer__close:hover {
  color: var(--color-secondary);
}

.boutique-filters-drawer .boutique-filters {
  margin-top: 3em;
}

/* Le tiroir reste ouvert pendant qu'on coche plusieurs filtres (la grille se
   met à jour derrière) ; ce bouton collé en bas le ferme. bottom/marges
   négatifs = annule le padding du tiroir pour coller au bord. */
.boutique-filters-drawer__footer {
  position: sticky;
  bottom: -2em;
  margin: 0 -2em -2em;
  padding: 1em 2em 1.5em;
  background: var(--color-accent);
}

.boutique-filters-drawer__apply {
  width: 100%;
}

.boutique-filters-toggle__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5em;
  height: 1.5em;
  margin-left: 0.5em;
  padding: 0 0.4em;
  border-radius: 999px;
  font-size: 0.8em;
  color: var(--color-accent);
  background: var(--color-primary);
}

.boutique-filters-toggle__count[hidden] {
  display: none;
}

body.filters-open {
  overflow: hidden;
}

/* Barre de filtres (toutes tailles) : bouton qui ouvre le tiroir, collé sous
   le header une fois dépassé (.is-stuck, boutique-filter.js). Padding
   identique dans les deux états : la hauteur ne change pas, donc la grille en
   dessous ne saute pas au moment où elle se colle. */
.boutique-filters-bar {
  position: sticky;
  top: var(--header-offset, 0px);
  z-index: 90;
  margin: var(--space-md) 0 var(--space-lg);
  padding: 0.75em 2em;
  transition:
    top 0.3s ease,
    background-color 0.3s ease,
    box-shadow 0.3s ease;
}

.boutique-filters-bar.is-stuck {
  background-color: var(--color-accent);
  box-shadow: 0 6px 16px rgba(29, 29, 27, 0.08);
}

/* Ordinateur : bouton plus large (300px), centré au-dessus de la grille ;
   la barre collée garde son fond pleine largeur. */
@media (min-width: 961px) {
  .boutique-filters-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* 300px minimum, s'élargit avec le rappel des filtres jusqu'à 640px. */
  .boutique-filters-toggle {
    min-width: 300px;
    max-width: min(100%, 640px);
    margin: 0;
  }
}

/* Rappel des filtres actifs dans le bouton ; tronqué proprement s'il y en a
   beaucoup (on les retire depuis la colonne ou le tiroir). */
.boutique-filters-toggle__summary {
  min-width: 0;
  margin-left: 0.75em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8em;
  text-transform: none;
  color: var(--color-primary);
}

.boutique-filters-toggle__summary:empty {
  display: none;
}

.boutique-filters-toggle__count {
  flex-shrink: 0;
}

@media (max-width: 960px) {
  /* Cibles tactiles plus confortables dans le tiroir (~40px de haut). */
  .boutique-filters-drawer .boutique-filter__pill {
    padding: 0.7em 1.2em;
  }

  /* Header (~60px) + barre de filtres collée (~70px) au-dessus de la grille. */
  #boutique-grid {
    scroll-margin-top: 140px;
  }

  /* Mobile : bouton pleine largeur dans les deux états (à sa place et
     collé) ; seul le fond de la barre change une fois collée. */
  .boutique-filters-toggle {
    width: 100%;
  }

  .boutique-filters-bar {
    padding: 0.75em 1em;
  }


  /* « Voir les résultats (N) » : une seule ligne, padding réduit pour tenir
     dans le tiroir à 320px. */
  .boutique-filters-drawer__apply {
    padding: 0 1em;
    white-space: nowrap;
  }
}

/* Pages lieux (/aquarelles/{lieu}/, inc/places.php) ------------------------------ */

.place-header {
  max-width: 46em;
  margin-inline: auto;
  padding-inline: 1em;
}

.place-header__intro {
  margin-top: 1em;
  line-height: 1.7;
}

.place-header__intro p {
  margin: 0 0 0.8em;
}

@media (max-width: 782px) {
  /* Long texte centré = pénible à lire sur téléphone. */
  .place-header__intro,
  .place-header__count {
    text-align: left;
  }
}

.place-header__count {
  margin: 1.25em 0 0;
  font-size: 0.85em;
}

.place-header__count a {
  color: var(--color-primary);
}

.place-grid {
  margin-top: var(--space-lg);
}

.place-others {
  max-width: calc(var(--carousel-image-width) + 4em);
  margin: var(--space-xxl) auto 0;
  padding: 0 2em;
  text-align: center;
}

.place-others__title {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 400;
  margin: 0 0 1em;
}

/* Cartes lieux : une aquarelle + le nom (inc/places.php). */
.place-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.place-card__link {
  display: block;
  color: var(--color-text);
  text-decoration: none;
}

.place-card__link img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.place-card__link {
  overflow: hidden;
}

.place-card__name {
  display: block;
  margin-top: 0.5em;
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
}

@media (hover: hover) and (pointer: fine) {
  .place-card__link:hover img {
    transform: scale(1.03);
  }

  .place-card__link:hover .place-card__name {
    color: var(--color-primary);
  }
}

@media (max-width: 782px) {
  /* Mobile : une rangée qui défile, cartes à 40 % de la largeur. */
  .place-others {
    padding: 0;
  }

  .place-others__title {
    padding: 0 1em;
  }

  .place-cards {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 0 1em 0.5em;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .place-cards::-webkit-scrollbar {
    display: none;
  }

  .place-card {
    flex: 0 0 40%;
    scroll-snap-align: start;
  }

  .place-card__name {
    font-size: 16px;
  }
}

/* Single product ------------------------------------------------------------- */

.product-view {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 3em;
  max-width: 1400px;
  margin: 2em auto;
  padding: 0 2em;
}

.product-view__gallery {
  flex: 1 1 45%;
  min-width: 300px;
  position: sticky;
  top: calc(var(--header-offset, 0px) + 2em);
  transition: top 0.3s ease;
  align-self: flex-start;
}

/* Replace WooCommerce's raw 🔍 emoji trigger with a proper icon — the
   button itself stays (it's what opens the fullscreen PhotoSwipe viewer). */
.woocommerce-product-gallery {
  position: relative;
}

/* Without this, images narrower than the gallery's own box (depends on each
   photo's aspect ratio) don't stretch to fill it — leaving a gap on the
   right that the corner icon (positioned against the full box) floats over. */
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image img {
  width: 100%;
}

.woocommerce-product-gallery__trigger {
  /* WooCommerce's own rule for this (which normally also sets these
     position/sizing properties) isn't matching on this install, so this
     rule owns the full look rather than relying on a partial override. */
  position: absolute !important;
  top: 0.5em !important;
  right: 0.5em !important;
  z-index: 99 !important;
  width: 36px;
  height: 36px;
  border-radius: 100%;
  background: var(--color-accent) !important;
  border: none !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.woocommerce-product-gallery__trigger span {
  display: none;
}

.woocommerce-product-gallery__trigger::before {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231D1D1B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 21-4.34-4.34'/%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* WooCommerce's native zoom (wc-product-gallery-zoom) binds hover/mousemove
   handlers to whichever gallery image is currently the active slide, so by
   default it works on every image. Restrict it to the artwork photo (always
   the first gallery image) by blocking pointer events on the rest — their
   zoom handlers are still bound, they just never receive the hover that
   would trigger them. The mockup images stay fully visible/clickable via
   their own thumbnail nav, only the zoom-on-hover is suppressed. */

.flex-control-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  margin-top: 1em !important;
}

.flex-control-thumbs li {
  width: calc(33.333% - 0.667em);
}

.flex-control-thumbs img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1; /* vignettes carrées, source 600×800 recadrée */
  object-fit: cover;
  cursor: pointer;
  border: 1px solid transparent;
  opacity: 0.7;
}

.flex-control-thumbs img:hover,
.flex-control-thumbs img.flex-active {
  opacity: 1;
}

.product-view__summary {
  flex: 1 1 40%;
  min-width: 300px;
  max-width: 550px;
  position: sticky;
  top: calc(var(--header-offset, 0px) + 2em);
  transition: top 0.3s ease;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: 2em;
}

.product-view__summary h1 {
  color: var(--color-text);
}

.woocommerce-product-details__short-description {
  font-family: var(--font-heading);
  font-size: 18px;
  text-align: justify;
}

.product-view__divider {
  border: none;
  border-top: 1px solid var(--color-secondary);
  margin: 0;
}

.product-view__divider:first-child {
  margin-bottom: 1.5em;
}

.product-view__divider:last-child {
  margin-top: 1.5em;
}

.product-view__purchase-block {
  width: 100%;
}

.product-view__care-copy {
  text-align: justify;
}

.product-view__care-copy a {
  position: relative;
  color: var(--color-primary);
  text-decoration: none;
  padding-bottom: 0.2em;
}

.product-view__care-copy a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.product-view__care-copy a:hover::after {
  transform: scaleX(1);
}

/* Same arrow for the guide link when the text comes from Lola's page
   ("Texte des fiches produits"), where the editor can't hold an inline SVG. */
.product-view__care-copy a[href*="encadrement-et-marges"]:not(:has(svg))::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 0.5em;
  vertical-align: middle;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8L22 12L18 16'/%3E%3Cpath d='M2 12H22'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8L22 12L18 16'/%3E%3Cpath d='M2 12H22'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform 0.25s ease;
}

.product-view__care-copy a[href*="encadrement-et-marges"]:not(:has(svg)):hover::before {
  transform: translateX(0.25em);
}

.product-view__care-copy a svg {
  vertical-align: middle;
  margin-right: 0.5em;
  transition: transform 0.25s ease;
}

.product-view__care-copy a:hover svg {
  transform: translateX(0.25em);
}

/* Retour / contact : sous les deux colonnes (image et texte), pour que les
   boutons d'achat restent seuls dans la colonne de droite. */
.product-view__actions {
  display: flex;
  justify-content: center;
  gap: 1em;
  max-width: 1400px;
  margin: var(--space-xxxl) auto 2em;
  padding: 0 2em;
}

.product-view__actions .btn {
  flex: 0 1 320px;
}

/* WooCommerce overrides recovered from the orphaned Additional CSS + the
   per-template custom CSS embedded in the old Elementor product templates.
   Both hide-rules below were present on BOTH product-view templates, so
   they're applied unconditionally rather than branched. */

.stock {
  display: none;
}

.woocommerce #content .message {
  display: none !important;
}

.woocommerce-Price-amount.amount {
  color: var(--color-text);
}

.product-view .price,
.product-view .price .woocommerce-Price-amount.amount {
  font-size: 1.5rem;
  font-weight: 400;
  display: block;
  margin-bottom: 1rem;
}

.single_variation .woocommerce-variation-price {
  margin: 0.5em 0 1em;
  font-size: 1.25em;
  font-weight: 400;
}

.variations_form.cart {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.woocommerce-variation-add-to-cart,
form.cart:not(.variations_form) {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.single_variation .woocommerce-variation-price {
  margin: 0;
  font-size: 1.25em;
  font-weight: 400;
}

.woocommerce-variation-add-to-cart .quantity,
form.cart:not(.variations_form) .quantity {
  margin: 0;
  width: 7.5rem;
  height: var(--control-height);
  border: 1px solid var(--color-secondary);
}

.woocommerce-variation-add-to-cart .qty,
form.cart:not(.variations_form) .qty {
  width: 100%;
  height: 100%;
  padding: 0;
  text-align: center;
  font-family: var(--font-body);
  font-size: 1em;
  border: none;
  background-color: transparent;
  color: var(--color-text);
}

.woocommerce-variation-add-to-cart .single_add_to_cart_button,
form.cart:not(.variations_form) .single_add_to_cart_button,
.lc-buy-now {
  width: 100%;
  margin: 0;
}

.lc-buy-now {
  background: var(--color-secondary);
  color: var(--color-accent);
  border-color: var(--color-secondary);
}

.lc-buy-now:hover {
  background: var(--color-accent);
  color: var(--color-text);
}

.woocommerce-variation-add-to-cart .qty:focus,
form.cart:not(.variations_form) .qty:focus {
  outline: none;
}

/* Browser spinners hidden */
.quantity input.qty::-webkit-inner-spin-button,
.quantity input.qty::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.quantity input.qty {
  -moz-appearance: textfield;
}

/* Stepper container */
.quantity {
  display: flex;
  align-items: stretch;
}

.quantity input.qty {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
}

/* ± buttons — no outer border, internal dividers only */
.qty-btn {
  flex: 0 0 2rem;
  background: transparent;
  border: none;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.qty-btn:hover {
  background: var(--color-secondary);
  color: var(--color-accent);
}

/* Variation attribute selector */
.variations_form table.variations,
.variations_form table.variations tbody,
.variations_form table.variations tr {
  display: block !important;
  width: 100%;
}

.variations_form .variations {
  width: 100%;
  margin-bottom: 0;
  border: 0;
}

.variations_form .variations th,
.variations_form .variations td {
  padding: 0 0 0.25rem;
  text-align: left;
  vertical-align: middle;
}

.variations_form .variations .label {
  display: block !important;
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.75em;
  letter-spacing: 0.08em;
  font-weight: 200;
  text-transform: uppercase;
  white-space: nowrap;
  margin-bottom: 0.25rem;
}

.variations_form .variations .value {
  display: block !important;
  width: 100%;
  margin-bottom: 0;
}

.variations_form .variations select {
  width: 100%;
  height: var(--control-height);
  border: 1px solid var(--color-secondary);
  appearance: none;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23333' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75em center;
  box-shadow: none;
  font-family: var(--font-body);
  font-weight: 200;
  font-size: 1em;
  color: var(--color-text);
  padding: 0 2.25em 0 0.5em;
}

.variations_form .variations select:focus {
  border: 1px solid var(--color-secondary);
  outline: none;
}

.variations_form .variations select option[value=''] {
  display: none;
}

.reset_variations,
.woocommerce-variation-availability {
  display: none !important;
}

/* Price injected inside form — hidden when empty (before variation selected) */
.woocommerce-variation.single_variation:empty {
  display: none;
}

/* Price inside the purchase form — override .product-view .price { margin-bottom: 1rem }
   .woocommerce-Price-amount.amount est aussi ciblé car son margin-bottom (display:block)
   traverse le <p> par margin collapse quand le parent a margin:0 sans padding/border. */
.product-view__purchase-block .lc-form-price,
.product-view__purchase-block .lc-form-price .woocommerce-Price-amount.amount,
.woocommerce-variation-add-to-cart .price,
.woocommerce-variation-add-to-cart .price .woocommerce-Price-amount.amount,
.woocommerce-variation.single_variation {
  margin: 0;
}

.wc-block-cart__submit-button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-accent);
  border: 1px solid var(--color-secondary);
}

.wc-block-cart__submit-button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  color: var(--color-accent);
  background: var(--color-secondary);
}

/* WooCommerce's own CSS targets button.button.alt with higher specificity
   (background-color:#7f54b3), which otherwise wins over the rules above. */
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--control-height);
  font-family: var(--font-body);
  color: var(--color-text);
  border-radius: 0px;
  text-transform: uppercase;
  font-weight: 200;
  background-color: var(--color-accent);
  border: 1px solid var(--color-secondary);
  padding: 0 32px;
}

.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
  color: var(--color-accent);
  background-color: var(--color-secondary);
}

.woocommerce #respond input#submit.alt.disabled,
.woocommerce #respond input#submit.alt.disabled:hover,
.woocommerce #respond input#submit.alt:disabled,
.woocommerce #respond input#submit.alt:disabled:hover,
.woocommerce a.button.alt.disabled,
.woocommerce a.button.alt.disabled:hover,
.woocommerce a.button.alt:disabled,
.woocommerce a.button.alt:disabled:hover,
.woocommerce button.button.alt.disabled,
.woocommerce button.button.alt.disabled:hover,
.woocommerce button.button.alt:disabled,
.woocommerce button.button.alt:disabled:hover,
.woocommerce input.button.alt.disabled,
.woocommerce input.button.alt.disabled:hover,
.woocommerce input.button.alt:disabled,
.woocommerce input.button.alt:disabled:hover {
  color: var(--color-text);
  background-color: var(--color-accent);
  border: 1px solid var(--color-secondary);
  opacity: 0.5;
}

/* Contact page ----------------------------------------------------------------- */

.contact-page {
  display: flex;
  gap: var(--space-lg);
  max-width: 1200px;
  margin: var(--space-lg) auto;
  padding: 0 2em;
}

.contact-page__portrait {
  flex: 1 1 40%;
  min-width: 0;
}

.contact-page__content {
  flex: 1 1 60%;
  min-width: 0;
}

.contact-page__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Generic 2-column content page (à propos, coloriages, encadrement) ------------ */

.content-page {
  display: flex;
  gap: var(--space-lg);
  max-width: 1200px;
  margin: var(--space-lg) auto;
  padding: 0 2em;
}

.content-page--reverse {
  flex-direction: row-reverse;
}

.content-page__media {
  flex: 1 1 40%;
  min-width: 0;
}

.content-page__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.content-page__body {
  flex: 1 1 60%;
  min-width: 0;
}

.content-page__body p {
  margin: 0 0 1em;
}

.content-page__body .btn {
  margin-top: 1em;
}

/* Groupe de boutons en fin de page (encadrement) : espacés, même rangée sur
   desktop, pleine largeur empilés sur mobile (voir 480px). */
.content-page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75em;
  margin-top: 1.5em;
}

.content-page__actions .btn {
  margin-top: 0;
}

/* Page banner (image de fond + titre) ------------------------------------------- */

.page-banner {
  position: relative;
  height: clamp(240px, 30vw, 420px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: var(--space-lg);
}

.page-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--page-banner-image);
  background-size: cover;
  background-position: center;
  opacity: 0.75;
  transform: scale(1.2);
}

.page-banner--repeat {
  height: 23.66vw;
  min-height: 160px;
}

.page-banner.page-banner--repeat::before {
  background-size: auto 100%;
  background-repeat: repeat-x;
  background-position: top center;
  transform: none;
}

.page-banner__title {
  position: relative;
  font-family: var(--font-heading);
  font-size: 48px;
  font-weight: 400;
  color: var(--color-primary);
  margin: 0;
}

@media (max-width: 782px) {
  /* Mobile : la page démarre sur la photo. Bannière masquée visuellement
     seulement, pour garder le h1 lisible par Google et les lecteurs d'écran
     (bannière pleine des coloriages, sans titre, conservée). */
  /* Coloriages : frise décorative retirée, la page démarre sur l'image. */
  .page-banner--repeat {
    display: none;
  }

  .page-banner:not(.page-banner--repeat) {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .page-banner__title {
    font-size: 32px;
  }
}

/* À propos --------------------------------------------------------------------- */

.a-propos .content-page__media {
  align-self: flex-start;
  position: sticky;
  top: calc(var(--header-offset, 0px) + 1.5em);
  transition: top 0.3s ease;
}

.a-propos .content-page__media img {
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: contain;
}

.a-propos .content-page__body p.a-propos__heading {
  font-size: 60px;
  font-weight: 400;
  line-height: 1.1;
  color: var(--color-text);
  margin: 0 0 0.2em;
}

.a-propos__name {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 400;
  margin: 0 0 0.2em;
}

.a-propos__role {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 24px;
  font-weight: 400;
  margin: 0 0 1em;
}

.a-propos .content-page__body p {
  font-family: var(--font-heading);
  font-size: 16px;
}

.a-propos .content-page__body a:not(.btn) {
  color: var(--color-primary);
}

.a-propos .content-page__body p.a-propos__technical {
  font-family: var(--font-body);
}

.a-propos__accent-link {
  color: var(--color-primary) !important;
  text-decoration: none;
}

/* Encadrement et marges (page-encadrement-et-marges.php) ------------------------ */

.framing {
  max-width: 1200px;
  margin: var(--space-lg) auto;
  padding: 0 2em;
}

.framing img {
  display: block;
  width: 100%;
  height: auto;
}

.framing__intro {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--space-lg);
  align-items: center;
}

.framing__intro-text h2 {
  font-size: 2em;
  margin-bottom: 0.25em;
}

.framing__lead,
.framing-option__lead {
  font-family: var(--font-heading);
  font-size: 1.25em;
  color: var(--color-primary);
  margin: 0 0 1em;
}

.framing__jump {
  list-style: none;
  padding: 0;
  margin: 1.5em 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75em;
}

.framing__jump a {
  display: inline-block;
  padding: 0.6em 1.2em;
  border: 1px solid var(--color-secondary);
  color: var(--color-text);
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.framing__jump a:hover,
.framing__jump a:focus-visible {
  background: var(--color-secondary);
  color: var(--color-accent);
}

.framing__options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

.framing-option {
  background: #fff;
  border: 1px solid var(--color-secondary-20);
  scroll-margin-top: calc(var(--header-offset, 0px) + 1em);
}

.framing-option__media img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.framing-option__body {
  padding: var(--space-md);
}

.framing-option__title {
  font-size: 1.6em;
  margin-bottom: 0.25em;
}

.framing-option__facts {
  margin: 0 0 1.5em;
  border-top: 1px solid var(--color-secondary-20);
}

.framing-option__facts > div {
  display: grid;
  grid-template-columns: 6.5em minmax(0, 1fr);
  gap: 1em;
  padding: 0.6em 0;
  border-bottom: 1px solid var(--color-secondary-20);
}

.framing-option__facts dt {
  font-size: 0.75em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  align-self: center;
  opacity: 0.7;
}

.framing-option__facts dd {
  margin: 0;
}

.framing-option__body p:last-child {
  margin-bottom: 0;
}

.framing__examples {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.framing__examples img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Tablette : les deux options l'une sous l'autre, photos en situation
   toujours côte à côte (petites, elles ne rallongent pas la page). */
@media (max-width: 768px) {
  .framing__options {
    grid-template-columns: minmax(0, 1fr);
  }

  .framing__examples {
    gap: 1em;
  }
}

.framing__help {
  max-width: 640px;
  margin: var(--space-xl) auto 0;
  padding: var(--space-md);
  text-align: center;
  background: var(--color-secondary-10);
}

.framing__help h2 {
  font-size: 1.6em;
}

.framing__help .content-page__actions {
  justify-content: center;
}

/* Coloriages -------------------------------------------------------------------- */

.content-page.coloriages {
  align-items: center;
}

.coloriages .content-page__media {
  align-self: flex-start;
  position: sticky;
  top: calc(var(--header-offset, 0px) + 1.5em);
  transition: top 0.3s ease;
}

.coloriages .content-page__media img {
  height: auto;
  aspect-ratio: 1810 / 2560;
  object-fit: contain;
}

.coloriages__heading {
  font-family: var(--font-heading);
  font-size: 60px;
  font-weight: 400;
  line-height: 1.1;
  color: var(--color-text);
  margin: 0 0 0.3em;
}

/* Mobile : titre sur une seule ligne, taille indexée sur la largeur d'écran. */
@media (max-width: 782px) {
  .coloriages__heading {
    font-size: 8.2vw;
  }

  .coloriages__heading br {
    display: none;
  }
}

.coloriages__subheading {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 400;
  margin: 0 0 0.5em;
}

.coloriages .content-page__body .coloriages__intro {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
}

.contact-page__icon-list {
  list-style: none;
  margin: 1em 0 2em;
  padding: 0;
}

.contact-page__icon-list li {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin-bottom: 0.5em;
}

.contact-page__icon-list a {
  color: var(--color-text);
  text-decoration: none;
  display: inline-block;
  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

.contact-page__icon-list a:hover {
  color: var(--color-primary);
  transform: scale(1.05);
}

.contact-page__icon-list .icon {
  color: var(--color-primary);
  font-size: 20px;
  vertical-align: -0.15em;
}

.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
  margin-bottom: 1em;
}

.contact-form__field--honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-form__field input,
.contact-form__field textarea {
  font-family: var(--font-body);
  background: var(--color-accent);
  border: 1px solid var(--color-secondary);
  border-radius: 0;
  padding: var(--input-padding);
}

.contact-form__field input:focus,
.contact-form__field textarea:focus {
  outline: none;
  border: 1px solid var(--color-secondary);
}

.contact-form button[type='submit'] {
  width: 100%;
}

.contact-form__notice {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 1em 1.2em;
  margin-top: 1.5em;
  font-family: var(--font-body);
  animation: contact-form-notice-in 0.4s ease;
}

.contact-form__notice--success {
  background: var(--color-accent);
  border: 1px solid var(--color-secondary);
  color: var(--color-text);
  font-weight: 400;
}

.contact-form__notice--success .icon {
  flex-shrink: 0;
  color: var(--color-secondary);
}

.contact-form__notice--error {
  background: #fdeaea;
  border: 1px solid #c0392b;
}

@keyframes contact-form-notice-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive ------------------------------------------------------------------- */

@media (max-width: 960px) {
  .site-nav {
    display: none;
  }

  .menu-toggle {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
  }

  .menu-toggle__bar {
    width: 24px;
    height: 2px;
    background: var(--color-text);
    transition:
      transform 0.3s ease,
      opacity 0.2s ease,
      background 0.2s ease;
  }

  .menu-toggle:hover .menu-toggle__bar {
    background: var(--color-secondary);
  }

  .menu-toggle.is-open .menu-toggle__bar:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  .menu-toggle.is-open .menu-toggle__bar:nth-child(2) {
    opacity: 0;
  }

  .menu-toggle.is-open .menu-toggle__bar:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  .site-nav--mobile__list {
    list-style: none;
    margin: 0;
    padding: 1em 2em;
  }

  .site-footer__columns {
    grid-template-columns: 1fr 1fr;
  }

  /* Contact right after the site map, before the place / theme / legal lists. */
  .site-footer__col {
    order: 2;
  }

  .site-footer__col--brand,
  .site-footer__col:nth-child(2),
  .site-footer__col--contact {
    order: 1;
  }

  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .product-card img {
    aspect-ratio: 3 / 4;
    height: auto;
  }

  .product-view,
  .contact-page,
  .content-page,
  .content-page--reverse {
    flex-direction: column;
  }

  /* À propos + coloriages : colonnes empilées, plus de sticky sur l'image
     (sélecteurs aussi précis que ceux qui l'activent, sinon ils gagnent). */
  .a-propos .content-page__media,
  .coloriages .content-page__media {
    position: static;
  }

  /* Encadrement : une colonne, photo d'introduction plafonnée (portrait,
     elle dépasserait sinon un écran de haut). */
  .framing__intro {
    grid-template-columns: minmax(0, 1fr);
  }

  .framing__intro-media {
    max-width: 480px;
    margin: 0 auto;
  }

  .product-view__gallery,
  .product-view__summary {
    flex: 1 1 auto;
  }

  /* Empilée : toute la largeur dès le chargement. Avec align-self:flex-start
     (utile sur ordinateur) elle prenait la largeur de l'image (600px) au
     moment où le diaporama WooCommerce mesure ses images, puis s'élargissait :
     on voyait un morceau de l'image suivante sur tablette. */
  .product-view__gallery {
    position: static;
    align-self: center;
    width: 100%;
    max-width: 600px; /* tablette : image principale pas plus haute qu'un écran */
  }
}

/* Cart page (WooCommerce Cart block) ------------------------------------------- */

.cart-page {
  max-width: 1200px;
  margin: 0 auto 4em;
  padding: 0 2em;
}

.cart-page .wc-block-cart,
.cart-page .wc-block-cart * {
  font-family: var(--font-body);
}

.cart-page h1,
.cart-page h2,
.cart-page h3,
.cart-page .wc-block-cart-item__product-name {
  font-family: var(--font-heading);
}

.wc-block-components-product-name {
  font-family: var(--font-heading) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  text-decoration: none;
}

/* Line items ---------------------------------------------------------------- */

.wc-block-cart-items {
  border-top: 1px solid var(--color-border-light);
}

/* Séparateurs gris, comme ceux du récapitulatif (pas d'orange). */
.wc-block-cart-items__header,
.wc-block-cart-items tr {
  border-bottom: 1px solid var(--color-border-light) !important;
}

/* Mobile : le récapitulatif passe sous les articles et ouvre déjà sur sa
   propre bordure (codes promo) — sans ça, double trait sous le dernier article. */
@media (max-width: 782px) {
  .wc-block-cart-items tr:last-child {
    border-bottom: none !important;
  }
}

/* Petits mobiles (S, 320px) : la grille WC d'une ligne (80px image + colonne
   produit fixe de 132px + total) fait 326px minimum pour 288px dispo, d'où
   les prix coupés à droite. Colonne produit flexible, image et écarts réduits. */
@media (max-width: 400px) {
  .wc-block-components-sidebar-layout.is-mobile table.wc-block-cart-items tr.wc-block-cart-items__row {
    grid-template-columns: 56px minmax(0, 1fr);
    column-gap: 12px;
  }

  .wc-block-components-sidebar-layout.is-mobile td.wc-block-cart-item__image {
    padding-right: 0;
  }
}

.wc-block-cart-item__image img {
  border-radius: 0 !important;
}

.wc-block-cart-item__remove-link {
  color: var(--color-text) !important;
}

.wc-block-cart-item__remove-link:hover {
  color: var(--color-primary) !important;
}

/* Quantity stepper ------------------------------------------------------------ */

.wc-block-components-quantity-selector {
  border: none !important;
  border: 1px solid var(--color-border-light) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.wc-block-components-quantity-selector__input,
.wc-block-components-quantity-selector__button {
  box-shadow: none !important;
}

.wc-block-components-quantity-selector__input {
  font-family: var(--font-body) !important;
  color: var(--color-text) !important;
}

.wc-block-components-quantity-selector__button {
  color: var(--color-text) !important;
}

/* Coupon form ------------------------------------------------------------------ */

.wc-block-components-totals-coupon-link {
  color: var(--color-primary) !important;
}

.wc-block-components-totals-coupon__form .wc-block-components-text-input input {
  border-color: var(--color-border-light) !important;
  border-radius: 0 !important;
  font-family: var(--font-body) !important;
}

.wc-block-components-totals-coupon__form .wc-block-components-text-input input:focus,
.wc-block-components-totals-coupon__form .wc-block-components-text-input input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border-color: var(--color-secondary) !important;
}

.wc-block-components-totals-coupon__button.wp-element-button {
  background: var(--color-accent) !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-secondary) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--font-body) !important;
  font-weight: var(--btn-font-weight) !important;
  text-transform: uppercase !important;
}

.wc-block-components-totals-coupon__button.wp-element-button:hover,
.wc-block-components-totals-coupon__button.wp-element-button:hover * {
  background: var(--color-secondary) !important;
  color: var(--color-accent) !important;
}

/* Notices (code promo appliqué, erreurs de panier/caisse) ------------------------ */

.wc-block-components-notice-banner {
  background: var(--color-accent) !important;
  border: 1px solid var(--color-secondary) !important;
  border-radius: 0 !important;
  color: var(--color-text) !important;
  font-family: var(--font-body) !important;
}

.wc-block-components-notice-banner > svg {
  background-color: var(--color-secondary) !important;
  fill: var(--color-accent) !important;
}

.wc-block-components-notice-banner.is-error,
.wc-block-components-notice-banner.is-warning {
  border-color: var(--color-primary) !important;
}

.wc-block-components-notice-banner.is-error > svg,
.wc-block-components-notice-banner.is-warning > svg {
  background-color: var(--color-primary) !important;
}

.wc-block-components-notice-banner__content a {
  color: var(--color-primary) !important;
}

/* Order summary / totals box --------------------------------------------------- */

.wc-block-cart__totals-title {
  font-family: var(--font-heading);
}

.wc-block-components-totals-item__value,
.wc-block-components-totals-item__label {
  font-family: var(--font-body) !important;
  color: var(--color-text) !important;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-weight: 600;
}

/* Proceed to checkout button ----------------------------------------------------- */

.wc-block-cart__submit-button.wp-element-button {
  width: 100%;
  background: var(--color-accent) !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-secondary) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--font-body) !important;
  font-weight: var(--btn-font-weight) !important;
  text-transform: uppercase !important;
}

.wc-block-cart__submit-button.wp-element-button:hover,
.wc-block-cart__submit-button.wp-element-button:hover * {
  background: var(--color-secondary) !important;
  color: var(--color-accent) !important;
}

/* Cross-sells -------------------------------------------------------------------- */

.wc-block-cart-cross-sells__product {
  font-family: var(--font-body);
}

.wc-block-cart-cross-sells .wc-block-components-product-title {
  font-family: var(--font-heading) !important;
}

.wc-block-cart-cross-sells .wp-block-button__link {
  background: var(--color-accent) !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-secondary) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-transform: uppercase;
}

.wc-block-cart-cross-sells .wp-block-button__link:hover {
  background: var(--color-secondary) !important;
  color: var(--color-accent) !important;
}

/* Checkout page (WooCommerce Checkout block) ------------------------------------ */

.checkout-page .wc-block-checkout,
.checkout-page .wc-block-checkout * {
  font-family: var(--font-body);
}

.checkout-page h1,
.checkout-page h3 {
  font-family: var(--font-heading) !important;
  padding-top: 16px;
}

.checkout-page h2,
.checkout-page .wc-block-components-checkout-step__title {
  font-family: var(--font-body) !important;
  padding-top: 16px;
}

.checkout-page .wc-block-components-product-name {
  font-family: var(--font-heading) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
}

/* Step sections (contact info, shipping, payment...) ----------------------------- */

.wc-block-components-checkout-step {
  border-top: 1px solid var(--color-border-light) !important;
  margin: 24px 0 24px 0 !important;
}

.wc-block-components-checkout-step__title .wc-block-components-checkout-step__title-icon,
.wc-block-components-checkout-step__description {
  color: var(--color-text) !important;
}

/* Text inputs, selects ------------------------------------------------------------ */

.wc-block-components-text-input input,
.wc-block-components-address-form select,
.checkout-page select {
  font-family: var(--font-body) !important;
  background: #fff !important;
  border-color: var(--color-border-light) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.wc-block-components-text-input input:focus,
.wc-block-components-text-input input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border-color: var(--color-secondary) !important;
}

.wc-block-components-text-input label {
  font-family: var(--font-body) !important;
}

/* Radio controls (shipping method, payment method) -------------------------------- */

.wc-block-components-radio-control__input {
  accent-color: var(--color-primary) !important;
  border-radius: 50% !important;
}

.wc-block-components-radio-control--highlight-checked
  label.wc-block-components-radio-control__option--checked-option-highlighted,
.wc-block-components-radio-control--highlight-checked
  .wc-block-components-radio-control-accordion-option--checked-option-highlighted {
  box-shadow: inset 0 0 0 0.5px var(--color-text) !important;
  background: transparent !important;
}

/* Place order button ---------------------------------------------------------------- */

.wc-block-components-checkout-place-order-button.wp-element-button {
  width: 100%;
  background: var(--color-secondary) !important;
  color: var(--color-accent) !important;
  border: 1px solid var(--color-secondary) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--font-body) !important;
  font-weight: var(--btn-font-weight) !important;
  text-transform: uppercase !important;
  font-size: 16px !important;
  transition: 0.2s ease;
}

.wc-block-components-checkout-place-order-button.wp-element-button:hover,
.wc-block-components-checkout-place-order-button.wp-element-button:hover * {
  background: var(--color-secondary) !important;
  color: var(--color-accent) !important;
  transform: scale(1.02);
}

.wc-block-components-checkbox {
  padding-top: 24px;
}

.wc-block-components-order-summary-item__quantity {
  border-radius: 50% !important;
  background: var(--color-primary) !important;
  color: var(--color-accent) !important;
  font-family: var(--font-body) !important;
  font-size: 0.7rem !important;
  font-weight: 400 !important;
}

.checkout-page
  *:not(.wc-block-components-radio-control__input):not(
    .wc-block-components-order-summary-item__quantity
  ) {
  border-radius: 0 !important;
}

/* Checked shipping/payment option label — beats WC's more specific rule */
.checkout-page
  .wc-block-components-radio-control--highlight-checked
  label.wc-block-components-radio-control__option--checked-option-highlighted {
  border-radius: 0 !important;
}

/* Order notes textarea */
.wc-block-components-textarea {
  background: #fff !important;
  border-radius: 0 !important;
  border: 1px solid rgba(29, 29, 27, 0.2) !important;
  box-shadow: none !important;
  padding: var(--input-padding) !important;
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  resize: vertical;
}
.wc-block-components-textarea:focus {
  border-color: rgba(29, 29, 27, 0.4) !important;
  outline: none !important;
  box-shadow: none !important;
}

.checkout-page .wc-block-components-express-payment__title,
.wc-block-components-express-payment-continue-rule {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
}

/* Empty wishlist state ------------------------------------------------------------ */
/* Same layout as the empty cart below, then the place / theme cards. */

.wishlist-empty {
  max-width: calc(var(--carousel-image-width) + 4em);
  margin: var(--space-lg) auto 0;
  padding: 0 2em;
  text-align: center;
}

.wishlist-empty__heart svg {
  width: 48px;
  height: 48px;
  color: var(--color-primary);
}

.wishlist-empty__title {
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 400;
  color: var(--color-primary);
  margin: 0.2em 0 0.4em;
}

.wishlist-empty__intro {
  max-width: 34em;
  margin: 0 auto 1.5em;
  font-family: var(--font-body);
}

.wishlist-empty__cta {
  display: inline-block;
  background: var(--color-accent);
  color: var(--color-text);
  border: 1px solid var(--color-secondary);
  padding: 0.9em 2em;
  font-family: var(--font-body);
  font-weight: var(--btn-font-weight);
  text-transform: uppercase;
  text-decoration: none;
}

.wishlist-empty__cta:hover {
  background: var(--color-secondary);
  color: var(--color-accent);
}

.wishlist-empty__more {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 400;
  margin: var(--space-xxl) 0 var(--space-md);
}

.wishlist-empty .place-cards {
  text-align: left;
}

/* .product-grid's display: grid would otherwise beat the hidden attribute. */
#wishlist-grid[hidden],
.wishlist-empty[hidden] {
  display: none;
}

/* Empty cart state ---------------------------------------------------------------- */
/* Contenu : page Panier (tools/pages/6.html). Titre, phrase, bouton vers la
   boutique, puis les dernières aquarelles en cartes au style du site
   (portrait 3:4, titre, prix ; pas de bouton d'ajout). */

.wp-block-woocommerce-empty-cart-block {
  max-width: calc(var(--carousel-image-width) + 4em);
  margin: var(--space-lg) auto 0;
  padding: 0 2em;
}

.wc-block-cart__empty-cart__title {
  font-family: var(--font-heading) !important;
  font-size: 40px !important;
  font-weight: 400 !important;
  color: var(--color-primary) !important;
  margin: 0 0 0.4em !important;
}

.wp-block-woocommerce-empty-cart-block p.lc-empty-cart__intro {
  max-width: 34em;
  margin: 0 auto 1.5em;
  text-align: center;
  font-family: var(--font-body);
}

.wp-block-woocommerce-empty-cart-block .wp-block-button__link {
  background: var(--color-accent) !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-secondary) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0.9em 2em !important;
  font-family: var(--font-body) !important;
  font-weight: var(--btn-font-weight) !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}

.wp-block-woocommerce-empty-cart-block .wp-block-button__link:hover {
  background: var(--color-secondary) !important;
  color: var(--color-accent) !important;
}

.wp-block-woocommerce-empty-cart-block .lc-empty-cart__new {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 400;
  margin: var(--space-xxl) 0 var(--space-md);
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin: 0 !important;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product {
  max-width: none !important;
  flex: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  text-align: left !important;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-link {
  display: block;
  text-decoration: none !important;
  color: var(--color-text) !important;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image {
  margin: 0 0 0.6em !important;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-title {
  font-family: var(--font-heading) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: var(--color-text) !important;
  margin: 0 0 0.25em !important;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  color: var(--color-text) !important;
  margin: 0 !important;
}

/* Ni prix (comme les cartes de l'accueil et de la boutique), ni bouton
   d'ajout / « Choix des options » : la carte mène à la fiche. */
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price,
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart {
  display: none !important;
}

@media (max-width: 960px) {
  .wc-block-cart__empty-cart__title {
    font-size: 30px !important;
  }

  .wp-block-woocommerce-empty-cart-block {
    padding: 0 1em;
  }

  .wp-block-woocommerce-empty-cart-block .wc-block-grid__products {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25em 0.75em;
  }

  .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-title {
    font-size: 16px !important;
  }
}

/* ============================================================================
   RESPONSIVE
   960px → tablet  |  480px → mobile
   ============================================================================ */

/* ── 960px (tablet + mobile) ─────────────────────────────────────────── */
@media (max-width: 960px) {
  /* ── Header mobile bar: [hamburger] [logo] [icons] ── */
  .site-header__logo-row {
    display: none;
  }

  .site-header__nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1em;
    gap: 0;
    position: relative;
    border: none;
  }

  .site-logo--mobile {
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .site-logo--mobile .site-logo__img {
    height: 28px;
    max-width: 152px;
    object-fit: contain;
  }

  /* Mobile nav panel — replié par défaut, déploie en fondu/glissé via .is-open */
  .site-nav--mobile {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-accent);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    box-shadow: 0 16px 32px rgba(29, 29, 27, 0.14);
    transition:
      max-height 0.4s ease,
      opacity 0.25s ease,
      visibility 0.4s;
    z-index: 60;
  }

  .site-nav--mobile.is-open {
    max-height: 80vh;
    opacity: 1;
    visibility: visible;
    overflow-y: auto;
  }

  .site-nav--mobile__list {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  /* Liens en cascade : chacun glisse/apparaît avec un léger décalage */
  .site-nav--mobile__list li {
    opacity: 0;
    transform: translateY(-6px);
    transition:
      opacity 0.3s ease,
      transform 0.3s ease;
  }

  .site-nav--mobile.is-open .site-nav--mobile__list li {
    opacity: 1;
    transform: translateY(0);
  }

  .site-nav--mobile.is-open .site-nav--mobile__list li:nth-child(1) {
    transition-delay: 0.05s;
  }
  .site-nav--mobile.is-open .site-nav--mobile__list li:nth-child(2) {
    transition-delay: 0.1s;
  }
  .site-nav--mobile.is-open .site-nav--mobile__list li:nth-child(3) {
    transition-delay: 0.15s;
  }
  .site-nav--mobile.is-open .site-nav--mobile__list li:nth-child(4) {
    transition-delay: 0.2s;
  }
  .site-nav--mobile.is-open .site-nav--mobile__list li:nth-child(5) {
    transition-delay: 0.25s;
  }
  .site-nav--mobile.is-open .site-nav--mobile__list li:nth-child(6) {
    transition-delay: 0.3s;
  }

  .site-nav--mobile__list li a {
    display: block;
    padding: 0.75em 1.5em;
    text-decoration: none;
    border-bottom: 1px solid rgba(29, 29, 27, 0.08);
    transition: background 0.2s ease;
  }

  .site-nav--mobile__list li:last-child a {
    border-bottom: none;
  }

  .site-nav--mobile__list li a:hover {
    background: rgba(29, 29, 27, 0.04);
  }

  /* Voile assombrissant derrière le panneau mobile ouvert */
  .mobile-nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(29, 29, 27, 0.5);
    opacity: 0;
    visibility: hidden;
    z-index: 55;
    transition:
      opacity 0.3s ease,
      visibility 0.3s ease;
  }

  .mobile-nav-overlay.is-open {
    opacity: 1;
    visibility: visible;
  }

  body.mobile-nav-open {
    overflow: hidden;
  }

  /* Footer: brand full width, reste en 2 colonnes */
  .site-footer__col--brand {
    padding-right: 0;
    grid-column: 1 / -1;
    text-align: left;
  }

  /* Overlay assombrissant lors de la recherche mobile — toujours présent dans
     le DOM, fondu piloté par opacity/visibility pour rester fluide (un
     ::before qui n'apparaît qu'avec la classe ne peut pas se transitionner). */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(29, 29, 27, 0.5);
    z-index: 40;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity 0.3s ease,
      visibility 0.3s ease;
  }

  body.search-open::before {
    opacity: 1;
    visibility: visible;
  }

  /* Recherche mobile — même mécanique que sur desktop (le champ s'ouvre en
     largeur, en flex, à gauche de la loupe qui reste sur place) ; en plus,
     sur mobile on efface hamburger/logo/wishlist/panier et on assombrit le
     reste du site pour laisser la place au champ. */

  /* Wishlist + cart glissent hors champ vers la droite en fondu — pas de
     rétrécissement de boîte, donc pas besoin d'overflow:hidden qui rognerait
     le count-badge (il déborde volontairement de l'icône : top:-6px/right:-8px).
     flex-shrink:0 : sans ça, le champ (qui vise ~100vw de large) réclame plus
     de place que dispo et le flex-box comprime TOUT le monde (icônes, loupe,
     hamburger) pour compenser — c'est ça le "à-coup" gauche/droite. Seul le
     champ doit pouvoir se comprimer (site-search__input garde flex-shrink:1). */
  .wishlist-header,
  .mini-cart__toggle,
  .site-search__toggle,
  .menu-toggle {
    flex-shrink: 0;
  }

  .wishlist-header,
  .mini-cart__toggle {
    transition:
      color 0.2s ease,
      opacity 0.3s ease;
  }

  body.search-open .wishlist-header,
  body.search-open .mini-cart__toggle {
    opacity: 0;
    pointer-events: none;
  }

  /* Hamburger et logo disparaissent en fondu simple — pas de glissement :
     un seul mouvement à l'écran (le champ qui s'ouvre) plutôt que plusieurs
     éléments qui filent chacun dans une direction différente en même temps. */
  .menu-toggle,
  .site-logo--mobile {
    transition: opacity 0.3s ease;
  }

  body.search-open .menu-toggle,
  body.search-open .site-logo--mobile {
    opacity: 0;
    pointer-events: none;
  }

  /* Champ : posé en absolu à gauche de la loupe, à sa taille finale dès le
     départ, et dévoilé de droite à gauche par clip-path. Contrairement au
     desktop (width/padding animés), rien ne bouge dans la mise en page
     pendant l'ouverture : pas de recalcul à chaque image, donc fluide sur
     téléphone. Largeur : de la marge gauche (1em) jusqu'à la loupe.
     font-size 16px : en dessous, Safari iOS zoome la page au focus. */
  .site-search__input,
  .site-search.is-open .site-search__input {
    position: absolute;
    top: 50%;
    right: calc(100% + 0.5em);
    width: calc(100vw - 130px);
    margin: 0;
    padding: 8px 12px;
    font-size: 16px;
    border: 1px solid var(--color-secondary);
    border-radius: var(--radius-sm);
    background: var(--color-accent);
    transform: translateY(-50%);
  }

  .site-search__input {
    clip-path: inset(0 0 0 100%);
    visibility: hidden;
    transition:
      clip-path 0.35s ease,
      opacity 0.3s ease,
      visibility 0.35s;
  }

  .site-search.is-open .site-search__input {
    width: calc(100vw - 130px + var(--search-shift, 0px));
    clip-path: inset(0);
    visibility: visible;
  }

  /* Loupe + champ glissent jusqu'au bord droit, à la place du panier masqué
     (--search-shift mesuré par search.js). transform : pas de recalcul de
     mise en page pendant le glissement. */
  .site-search {
    transition: transform 0.35s ease;
  }

  .site-search.is-open {
    transform: translateX(var(--search-shift, 0px));
  }

  /* Résultats sous le nav-row, pleine largeur (moins les marges) et calés
     sur le bord droit de la loupe, qui est au bord droit de la barre une
     fois ouverte. left/right:0 seuls les réduisaient à la largeur de la
     loupe (.site-search est leur conteneur). */
  .site-search__results {
    top: 100%;
    left: auto;
    right: 0;
    width: calc(100vw - 2em);
  }

  /* Carousel: full width, cacher flèches */
  .hero-carousel__arrow {
    display: none;
  }

  .hero-carousel-wrapper {
    max-width: 100%;
    gap: 0;
  }

  .hero-carousel {
    aspect-ratio: 4 / 5;
    max-height: none;
  }

  /* Grille produits : padding latéral + gap réduit — même valeurs que sur
     la home, y compris pour la grille boutique (le bloc desktop plus haut
     lui met padding:0 pour coller à sa colonne de grille, à réaffirmer ici). */
  .product-grid {
    padding: 0 1em;
    gap: 0.75em;
  }

  .boutique-layout__grid .product-grid {
    padding: 0 1em;
  }

  .product-card__title {
    font-size: 16px;
  }

  /* Pages : padding réduit */
  .checkout-page,
  .cart-page,
  .contact-page,
  .content-page,
  .product-view,
  .product-view__actions {
    padding-left: 1em;
    padding-right: 1em;
  }

  .product-view {
    gap: 2em;
  }

  .page-banner {
    padding: 2em 1em;
  }

  /* Barre entière au-dessus du voile mobile : elle reste claire, seul le
     contenu de la page est assombri quand le menu est ouvert. */
  .site-header__nav-row {
    z-index: 70;
    background: var(--color-accent);
  }

  /* Hamburger + icônes au-dessus du logo absolu */
  .menu-toggle {
    position: relative;
    z-index: 70;
  }

  .site-header__icons {
    position: relative;
    z-index: 70;
  }

  /* Boutons produit en colonne */
  .product-view__actions {
    flex-direction: column;
  }

  /* flex:1 1 0 (défini pour aligner les boutons en ligne sur desktop)
     s'applique à la hauteur une fois le conteneur en colonne — flex-basis:0
     écrase alors le height:48px du bouton, qui n'a pas de padding vertical
     pour compenser (tout son dimensionnement vient de height). Sans espace
     à occuper dans un conteneur non contraint en hauteur, le bouton
     s'écrase quasiment à zéro. flex:none laisse height reprendre la main. */
  .product-view__actions .btn {
    flex: none;
    width: 100%;
  }
}

/* ── 480px (mobile) ──────────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* Header */
  .site-header__logo-row {
    padding: 1em;
  }

  /* Logo desktop seulement : sans ce scope, la règle gonflait aussi le logo
     de la barre mobile (même spécificité, déclarée plus bas). */
  .site-header__logo-row .site-logo__img {
    height: 40px;
  }

  /* Barre mobile étroite (S 320, M 375) : icônes resserrées et logo
     plafonné à l'espace libre entre hamburger et icônes, pour que la loupe
     ne passe plus dessous. 220px ≈ 2 × (marge + bloc d'icônes + respiration). */
  .site-header__icons {
    gap: 0.75em;
  }

  .site-logo--mobile .site-logo__img {
    max-width: min(152px, calc(100vw - 220px));
  }

  /* Footer */
  .site-footer__columns {
    grid-template-columns: 1fr;
    gap: 2em;
  }

  .site-footer__col--brand {
    grid-column: auto;
  }

  .site-footer__payment-list {
    grid-template-columns: repeat(4, auto);
  }

  /* Typography */
  h1 {
    font-size: 32px;
  }

  /* Product grid */
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2em 1em;
  }

  /* Product single : les deux colonnes ont min-width:300px pour le desktop ;
     à 320px (288px utiles) le résumé débordait de 12px à droite. */
  .product-view__gallery,
  .product-view__summary {
    min-width: 0;
  }

  .framing {
    padding: 0 1em;
  }

  .framing-option__body,
  .framing__help {
    padding: 1.5em 1em;
  }

  .content-page__actions .btn {
    flex: 1 1 100%;
  }

  /* Checkout */
  .wc-block-components-checkout-place-order-button.wp-element-button {
    font-size: 0.9rem !important;
  }

  /* Site spacing */
  .site-main {
    padding-top: var(--space-sm);
  }

  .site-tagline {
    margin: 0 1em var(--space-xl);
  }
}

/* Consent banner (inc/tracking.php + consent.js) ---------------------------------- */

.consent-banner {
  position: fixed;
  left: 1em;
  right: 1em;
  bottom: 1em;
  z-index: 300;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1em 1.5em;
  max-width: 760px;
  margin: 0 auto;
  padding: 1.25em 1.5em;
  background: var(--color-accent);
  border: 1px solid var(--color-secondary-20);
  box-shadow: 0 12px 32px rgba(29, 29, 27, 0.16);
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.consent-banner.is-visible {
  opacity: 1;
  transform: none;
}

/* display: flex above overrides the hidden attribute: once closed, the
   transparent banner stayed over the footer and swallowed its clicks
   (Guéthary, Îles, "Gestion des cookies"). */
.consent-banner[hidden] {
  display: none;
}

.consent-banner:not(.is-visible) {
  pointer-events: none;
}

.consent-banner__text {
  flex: 1 1 320px;
  margin: 0;
  font-size: 0.9em;
  line-height: 1.5;
}

.consent-banner__text a {
  color: var(--color-primary);
}

/* Refuser reste un vrai bouton, au même format et à la même place qu'Accepter
   (CNIL : refuser doit être aussi simple qu'accepter) ; seul Accepter est plein. */
.consent-banner__actions {
  display: flex;
  gap: 0.75em;
  flex: 0 0 auto;
}

.consent-banner__btn {
  height: 40px;
  padding: 0 1.5em;
}

/* J'accepte : fond corail de la charte, texte noir pour qu'il se lise. */
.consent-banner__btn.btn--primary,
.consent-banner__btn.btn--primary:hover {
  color: var(--color-text);
}

.consent-reopen {
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

@media (max-width: 480px) {
  .consent-banner {
    left: 0.75em;
    right: 0.75em;
    bottom: 0.75em;
    padding: 1em;
  }

  .consent-banner__actions {
    flex: 1 1 100%;
  }

  .consent-banner__btn {
    flex: 1 1 0;
  }
}