/* poche.css — « Atelier de poche », The Painting Studio (DESIGN-MOBILE-APP-001, D-019).
   Registre mobile ≤767px uniquement, habillage « Galerie dorée » sur les jetons du thème
   (--c-ink, --c-gold, --c-white, --c-border, --font-serif). Chargé après mobile-pro.css.
   Sans JS : la bande promo, l'en-tête et le tiroir du menu restent ceux du thème. */
.tps-dock { display: none; }

@media (max-width: 767px) {

  /* ---------- 1. Capsule haute (56 px) ---------- */
  :root { --header-h: 56px; --tps-dock-h: 66px; }
  .tps-poche-js #cf-promo-bar { display: none; } /* son message passe en tête du menu (poche.js) */
  #cf-site-top {
    background: color-mix(in srgb, var(--c-white) 88%, transparent);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    transition: transform .28s cubic-bezier(.2, .7, .2, 1), opacity .2s;
  }
  #cf-site-top.tps-capsule-cachee { transform: translateY(-100%); opacity: 0; pointer-events: none; }
  #cf-header { background: transparent !important; height: var(--header-h) !important; }
  .cf-header-inner { padding: 0 12px !important; gap: 8px !important; }
  .cf-header-inner > .cf-logo .cf-logo-svg { width: 160px !important; max-height: 30px !important; }
  .cf-header-actions { gap: 6px; }
  /* Les commandes gardent la cible tactile de 44 px imposée par mobile-pro.css. */
  .cf-header-actions .cf-header-icon,
  .cf-header-actions .cf-hamburger {
    flex: 0 0 44px; width: 44px; height: 44px; border-radius: 11px;
    border: 1px solid var(--c-border); background: var(--c-white);
  }
  .cf-header-actions .cf-hamburger { flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0; }
  .cf-header-actions .cf-hamburger span { width: 18px; margin: 0; }
  /* le panier vit dans le dock ; son bouton d'en-tête reste dans le DOM (il ouvre le tiroir) */
  .tps-poche-js .cf-header-actions #cf-cart-btn { display: none !important; }
  /* langue : la bascule EN/FR du thème redevient visible, en puce */
  .cf-header-actions .cf-lang-switch { display: inline-flex !important; margin: 0; height: 44px; align-items: center; border-radius: 10px; border-color: var(--c-border); background: var(--c-white); padding: 3px; }
  .cf-header-actions .cf-lang-switch__item { padding: 8px 7px; border-radius: 7px; font-size: .68rem; }

  /* ---------- 2. Menu en feuille du bas ---------- */
  #cf-mobile-menu {
    top: auto; bottom: 0; left: 0; width: 100%; height: auto; max-height: 84dvh; overflow-y: auto;
    border-radius: 22px 22px 0 0; padding: 10px 20px calc(26px + env(safe-area-inset-bottom, 0px));
    transform: translateY(105%); transition: transform .32s cubic-bezier(.2, .7, .2, 1);
    box-shadow: 0 -10px 40px rgba(35, 33, 30, .25); z-index: 2000;
  }
  #cf-mobile-menu.open { transform: none; }
  #cf-mobile-menu::before { content: ""; display: block; width: 40px; height: 5px; border-radius: 3px; background: var(--c-border-dark); margin: 0 auto 6px; }
  #cf-mobile-menu .tps-feuille-promo { margin: 0 0 4px; padding: 10px 0; border-bottom: 1px solid var(--c-border); font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--c-gold); }
  #cf-mobile-menu .cf-lang-switch--drawer { margin: 18px 0 0; }

  /* ---------- 3. Dock flottant ---------- */
  body { padding-bottom: calc(var(--tps-dock-h) + 28px + env(safe-area-inset-bottom, 0px)); }
  .tps-dock {
    position: fixed; left: 12px; right: 12px; bottom: max(14px, env(safe-area-inset-bottom, 0px)); z-index: 1500;
    display: flex; align-items: center; gap: 2px; height: var(--tps-dock-h); padding: 0 8px;
    border-radius: 18px; border: 1px solid var(--c-border);
    background: color-mix(in srgb, var(--c-white) 90%, transparent);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    box-shadow: 0 12px 30px -12px rgba(60, 40, 10, .38);
    font-family: var(--font-sans);
    transition: height .28s cubic-bezier(.2, .7, .2, 1), transform .28s;
  }
  .tps-dock__item {
    flex: 1 1 0; min-width: 0; height: 100%; display: grid; justify-items: center; align-content: center; gap: 3px;
    position: relative; overflow: hidden; color: var(--c-muted); text-decoration: none; white-space: nowrap;
    transition: flex .32s cubic-bezier(.2, .7, .2, 1), opacity .2s, color .2s;
    -webkit-tap-highlight-color: transparent;
  }
  .tps-dock__item b { font-size: 10.5px; font-weight: 700; letter-spacing: .02em; line-height: 1; }
  .tps-dock__item svg { width: 23px; height: 23px; }
  .tps-dock__item[aria-current="page"] { color: var(--c-ink); }
  .tps-dock__item[aria-current="page"]::after { content: ""; position: absolute; bottom: 7px; width: 4px; height: 4px; border-radius: 50%; background: var(--c-gold); }
  .tps-dock__wa { color: #1FAF54; }
  .tps-dock__wa svg { width: 25px; height: 25px; }
  .tps-dock__badge { position: absolute; top: 9px; left: calc(50% + 4px); min-width: 17px; height: 17px; border-radius: 9px; padding: 0 4px; background: var(--c-gold); color: #fff; font-size: 10px; font-weight: 800; display: grid; place-items: center; line-height: 1; }
  .tps-dock__badge[hidden] { display: none; }
  .tps-dock__badge.tps-rebond { animation: tps-rebond .5s cubic-bezier(.3, 1.6, .5, 1); }
  @keyframes tps-rebond { 0% { transform: scale(1); } 40% { transform: scale(1.5); } 100% { transform: scale(1); } }
  .tps-dock__centre { flex: 1.15 1 0; min-width: 0; height: 100%; display: flex; align-items: center; justify-content: center; transition: flex .32s cubic-bezier(.2, .7, .2, 1); }
  .tps-dock__fab {
    height: 50px; min-width: 50px; padding: 0 15px; border: 0; border-radius: 13px; cursor: pointer;
    background: var(--c-gold); color: #fff; text-decoration: none;
    display: inline-flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 8px;
    font: 700 12.5px/1 var(--font-sans); letter-spacing: .02em; white-space: nowrap;
    box-shadow: 0 8px 20px -8px var(--c-gold); transition: transform .15s;
  }
  .tps-dock__fab:active { transform: scale(.96); }
  .tps-dock__fab svg { width: 21px; height: 21px; flex: none; }
  .tps-dock__fab-prix:not(:empty)::before { content: "·"; margin-right: 6px; opacity: .75; }
  /* fiche produit : le centre devient le bouton d'achat */
  .tps-dock--achat [data-poche="accueil"], .tps-dock--achat [data-poche="catalogue"] { flex: 0 0 0; opacity: 0; pointer-events: none; }
  .tps-dock--achat .tps-dock__centre { flex: 4 1 0; }
  .tps-dock--achat .tps-dock__fab { width: 100%; }
  .tps-dock--achat .tps-dock__fab-texte { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .tps-dock--achat .tps-dock__fab-prix { flex: none; }
  /* dock réduit pendant la lecture */
  .tps-dock.tps-dock--mini { height: 54px; transform: translateY(4px); }
  .tps-dock--mini .tps-dock__item b { display: none; }
  .tps-dock--mini .tps-dock__item[aria-current="page"]::after { bottom: 5px; }
  .tps-dock--mini .tps-dock__badge { top: 6px; }
  .tps-dock--mini .tps-dock__fab { height: 42px; }
  /* un tiroir ou la recherche ouverts : le dock s'efface */
  .tps-poche-feuille .tps-dock { transform: translateY(140%); }

  /* ---------- 4. Éléments flottants remplacés ou déplacés ---------- */
  .tps-poche-js .cf-sticky-atc, .tps-poche-js #cf-back-top { display: none !important; }
  #cf-toast-wrap { bottom: calc(var(--tps-dock-h) + 30px); }
  /* pastille de rappel du consentement (CookieYes) : remontée au-dessus du dock */
  .cky-btn-revisit-wrapper { bottom: calc(var(--tps-dock-h) + 28px + env(safe-area-inset-bottom, 0px)) !important; transform: scale(.82); transform-origin: bottom left; }
  .tps-vol { position: fixed; left: 0; top: 0; z-index: 1501; width: 60px; height: 60px; border-radius: 10px; object-fit: cover; pointer-events: none; box-shadow: 0 10px 30px rgba(35, 33, 30, .4); }

  /* ---------- 7. Installation sur l'écran d'accueil (2026-10-09) ---------- */
  #cf-mobile-menu .tps-app-ligne { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 54px; padding: 8px 0; border: 0; border-bottom: 1px solid var(--c-border); background: transparent; color: var(--c-ink); font-family: var(--font-sans); font-size: 15px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; text-align: left; cursor: pointer; }
  #cf-mobile-menu .tps-app-ligne[hidden] { display: none; }
  #cf-mobile-menu .tps-app-ligne img { width: 28px; height: 28px; border-radius: 8px; flex: none; }
  #cf-mobile-menu .tps-app-ligne span { flex: 1; }
  #cf-mobile-menu .tps-app-ligne em { font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--c-gold); }
  .tps-app-voile { position: fixed; inset: 0; z-index: 2100; background: rgba(35, 33, 30, .45); opacity: 0; pointer-events: none; transition: opacity .25s; }
  .tps-app-voile.on { opacity: 1; pointer-events: auto; }
  .tps-app-notice { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2101; background: var(--c-white); color: var(--c-ink); border-radius: 22px 22px 0 0; padding: 18px 20px calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateY(105%); transition: transform .32s cubic-bezier(.2, .7, .2, 1); box-shadow: 0 -10px 40px rgba(35, 33, 30, .3); font-family: var(--font-sans); }
  .tps-app-notice.on { transform: none; }
  .tps-app-notice h5 { margin: 0 0 10px; font-family: var(--font-serif); font-size: 22px; font-weight: 600; }
  .tps-app-notice ol { margin: 0; padding-left: 20px; font-size: 15px; line-height: 1.5; color: var(--c-muted); display: grid; gap: 6px; }
  .tps-app-compris { display: block; width: 100%; margin-top: 16px; padding: 14px; border: 0; border-radius: 12px; background: var(--c-gold); color: #fff; font-weight: 800; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }

  /* ---------- 6. Fiche produit : image plafonnée, options tout de suite (2026-10-03) ----------
     Ordre visuel du résumé : titre, configurateur (Type / Cadre / Taille, prix et bouton), puis
     prix « à partir de », encart livraison, ligne artiste, description. Balisage intact. */
  /* Hauteur calée sur l'écran réellement visible (svh), repli en vh. */
  .single-product .woocommerce-product-gallery__image img { max-height: min(28vh, 240px) !important; width: auto !important; max-width: 100% !important; margin: 0 auto; display: block; }
  .single-product .woocommerce-product-gallery__image img { max-height: clamp(130px, 28svh, 240px) !important; }
  .single-product .summary > .product_title { font-size: 21px !important; line-height: 1.18 !important; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
  /* marges de la fiche : 100 px séparaient l'en-tête de l'image */
  .single-product .cf-shop-wrap { padding: 8px 12px 24px !important; }
  .single-product div.product { padding: 6px 6px 16px !important; }
  .single-product .woocommerce-product-gallery { margin-bottom: 10px !important; }
  .single-product .cf-config__group { margin-top: 10px !important; }
  .single-product .cf-config__label { margin-bottom: 6px !important; }
  .single-product .cf-type-cards { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; }
  .single-product .cf-type-card { padding: 9px 10px !important; min-height: 0 !important; }
  .single-product .cf-type-card__name { font-size: 14px !important; }
  .single-product .cf-type-card__sub { font-size: 11.5px !important; line-height: 1.25 !important; }
  .single-product .cf-type-card__from { font-size: 11.5px !important; }
  .single-product .woocommerce-product-gallery .flex-viewport { height: auto !important; }
  .single-product .summary { display: flex; flex-direction: column; }
  .single-product .summary > .product_title { order: 1; margin-bottom: 10px !important; }
  .single-product .summary > form.cart { order: 2; }
  .single-product .summary > .price { order: 3; }
  .single-product .summary > .cf-delivery-info { order: 4; }
  .single-product .summary > .cf-by-artist { order: 5; }
  .single-product .summary > .woocommerce-product-details__short-description { order: 6; }
  .single-product .summary > .product_meta { order: 7; }
  .single-product .summary > * { order: 8; } /* tout élément inconnu reste en fin */
  /* Taille : chips plus grasses, dimension et prix bien centrés ; CM / INCH plus lisibles */
  .single-product .cf-size-chip { font-weight: 700 !important; display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; padding: 8px 4px !important; }
  .single-product .cf-size-chip .cf-dim { font-size: 14px !important; font-weight: 700 !important; letter-spacing: .01em; }
  .single-product .cf-unit { font-weight: 800 !important; font-size: 11.5px !important; min-height: 28px; padding: 0 12px !important; display: inline-flex; align-items: center; }

  /* ---------- 5. Bannière de consentement (CookieYes) compacte ----------
     Feuille du bas pleine largeur au lieu d'une boîte de ~344 px. « Refuser » et « Accepter »
     côte à côte, même taille (refus aussi simple que l'acceptation) ; « Personnaliser » en
     lien dessous. Le texte du consentement n'est ni tronqué ni masqué. !important : l'extension
     pose ses dimensions en ligne et dans une feuille injectée après celle-ci. */
  .cky-consent-container { left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; max-width: none !important; }
  .cky-consent-container .cky-consent-bar { padding: 14px 16px calc(12px + env(safe-area-inset-bottom, 0px)) !important; border-radius: 18px 18px 0 0 !important; box-shadow: 0 -10px 40px rgba(35, 33, 30, .22) !important; }
  .cky-consent-container .cky-title { font-size: 17px !important; line-height: 1.2 !important; margin: 0 0 6px !important; }
  .cky-consent-container .cky-notice-des, .cky-consent-container .cky-notice-des p { font-size: 12.5px !important; line-height: 1.45 !important; margin: 0 !important; }
  .cky-consent-container .cky-notice-btn-wrapper { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 0 !important; padding: 0 !important; }
  .cky-consent-container .cky-notice-btn-wrapper .cky-btn { width: 100% !important; min-height: 44px; margin: 0 !important; padding: 10px 8px !important; font-size: 11.5px !important; letter-spacing: .06em !important; line-height: 1.15 !important; }
  /* placement explicite dans la grille : l'extension impose son propre ordre des boutons */
  .cky-consent-container .cky-notice-btn-wrapper .cky-btn-reject { order: 1 !important; grid-column: 1 !important; grid-row: 1 !important; }
  .cky-consent-container .cky-notice-btn-wrapper .cky-btn-accept { order: 2 !important; grid-column: 2 !important; grid-row: 1 !important; }
  .cky-consent-container .cky-notice-btn-wrapper .cky-btn-customize { order: 3 !important; grid-column: 1 / -1 !important; grid-row: 2 !important; min-height: 36px; padding: 6px 8px !important; background: transparent !important; border-color: transparent !important; color: var(--c-muted) !important; text-decoration: underline; text-transform: none !important; letter-spacing: 0 !important; font-size: 12.5px !important; font-weight: 500 !important; }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  #cf-site-top, #cf-mobile-menu, .tps-dock, .tps-dock__item, .tps-dock__centre, .tps-dock__fab { transition: none !important; }
  .tps-dock__badge.tps-rebond { animation: none; }
}