/*
Theme Name: Cirque Phénix — Boutique
Theme URI: https://boutique.phenix.paris/
Template: cirque-phenix
Author: Edgar Tessier
Author URI: https://www.edgar-tessier.fr
Description: Thème enfant du Cirque Phénix pour la boutique officielle (WooCommerce). Reprend intégralement le design system du site vitrine — palette cuivre, Barlow Semi Condensed, boutons à angles vifs — et n'ajoute que la couche marchande : page boutique, fiches produit, panier, commande. Aucun token n'est redéfini ici : tout vient du thème parent.
Version: 2.0.0
Requires at least: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cirque-phenix-boutique
*/

/* ============================================================================
   CIRQUE PHÉNIX — BOUTIQUE : couche marchande
   ----------------------------------------------------------------------------
   SOMMAIRE

   § B1   Principes et variables locales
   § B2   Hero de la boutique
   § B3   Bandeau de repères (réassurance)
   § B4   Univers (catégories de produits)
   § B5   Carte produit
   § B6   Grille de produits et barre de tri
   § B7   Section éditoriale « souvenir »
   § B8   Retrait sur place
   § B9   Pagination
   § B10  Notices WooCommerce
   § B11  Fiche produit
   § B12  Panier
   § B13  Commande (tunnel)
   § B14  Mon compte
   § B15  Panier flottant (compteur dans la barre)
   § B16  Adaptatif
   § B17  Accessibilité et mouvement réduit

   CONVENTIONS — identiques au thème parent
   - Aucune couleur, police ou espacement en dur : uniquement les variables
     déclarées au § 1 du thème parent (--copper, --ink, --sp-md…).
   - Aucun !important hors réinitialisation de styles injectés par WooCommerce
     et hors prefers-reduced-motion.
   - Les surcharges se préfixent par un identifiant de section (#cpb-univers…)
     plutôt que par un !important.
   - Les classes de la boutique sont préfixées « cpb- » pour ne jamais entrer
     en collision avec le parent lors d'une mise à jour.
   ============================================================================ */

/* ==== § B1 — PRINCIPES ET VARIABLES LOCALES ==== */
/* Trois valeurs seulement, propres au commerce, et dérivées du parent.
   Tout le reste est hérité. */
:root {
  --cpb-card-gap: var(--sp-md);
  --cpb-tile-ratio: 4 / 5; /* portrait doux : le textile et l'affiche s'y logent */
  --cpb-stock: #4f8a76; /* vert sourd, même famille que la pastille « scolaires » */
  --cpb-alert: #a8557a; /* framboise du parent, réservée aux ruptures */
}

/* WooCommerce injecte des styles de liste sur ses conteneurs. On repart de zéro
   plutôt que de lutter au coup par coup. */
.woocommerce ul.products,
.woocommerce-page ul.products {
  margin: 0;
  padding: 0;
  list-style: none;
}
.woocommerce .woocommerce-breadcrumb {
  display: none; /* le fil d'Ariane du parent (§ 23) prend le relais */
}

/* ==== § B2 — HERO DE LA BOUTIQUE ==== */
/* Pas de vidéo ici, contrairement à l'accueil vitrine : une boutique se juge
   sur sa vitesse d'affichage. Une seule image, servie en priorité. */
.cpb-hero {
  position: relative;
  min-height: clamp(380px, 52vh, 560px);
  display: flex;
  align-items: flex-end;
  background: var(--night);
  overflow: hidden;
}
.cpb-hero-media {
  position: absolute;
  inset: 0;
}
.cpb-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.62;
}
.cpb-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(13, 12, 11, 0.92) 0%,
    rgba(13, 12, 11, 0.52) 45%,
    rgba(13, 12, 11, 0.28) 100%
  );
}
.cpb-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--sp-xl) clamp(22px, 5vw, 64px) var(--sp-lg);
}
.cpb-hero .eyebrow {
  color: var(--copper-lt);
}
.cpb-hero .eyebrow::after {
  background: var(--copper-lt);
}
.cpb-hero h1 {
  color: var(--white);
  max-width: 16ch;
}
.cpb-hero-lead {
  color: rgba(252, 251, 249, 0.82);
  max-width: 52ch;
  margin-top: var(--sp-sm);
}

/* ==== § B3 — BANDEAU DE REPÈRES ==== */
/* Quatre certitudes avant tout achat. Filet cuivre, pas de fond coloré :
   l'information doit se lire, pas s'annoncer. */
.cpb-reperes {
  border-bottom: 1px solid var(--copper-hair);
  background: var(--paper);
}
.cpb-reperes-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--sp-sm) clamp(22px, 5vw, 64px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-md);
}
.cpb-repere {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-soft);
}
.cpb-repere svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  stroke: var(--copper);
  fill: none;
  stroke-width: 1.2;
}
.cpb-repere strong {
  display: block;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.02em;
}

/* ==== § B4 — UNIVERS (CATÉGORIES) ==== */
.cpb-univers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--cpb-card-gap);
}
.cpb-univers {
  position: relative;
  display: block;
  aspect-ratio: var(--cpb-tile-ratio);
  overflow: hidden;
  background: var(--night-2);
}
.cpb-univers img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}
.cpb-univers:hover img,
.cpb-univers:focus-visible img {
  transform: scale(1.045);
}
.cpb-univers::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(13, 12, 11, 0.88) 0%,
    rgba(13, 12, 11, 0.15) 55%,
    transparent 100%
  );
}
.cpb-univers-label {
  position: absolute;
  z-index: 1;
  left: var(--sp-sm);
  right: var(--sp-sm);
  bottom: var(--sp-sm);
}
.cpb-univers-label .name {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 19px;
  line-height: 1.2;
  color: var(--white);
}
.cpb-univers-label .count {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--copper-lt);
}
/* Le filet cuivre se déploie au survol : le seul mouvement de la grille. */
.cpb-univers-label::before {
  content: "";
  display: block;
  width: 0;
  height: 1px;
  background: var(--copper-lt);
  margin-bottom: 12px;
  transition: width 0.55s var(--ease);
}
.cpb-univers:hover .cpb-univers-label::before,
.cpb-univers:focus-visible .cpb-univers-label::before {
  width: 48px;
}

/* ==== § B5 — CARTE PRODUIT ==== */
.cpb-card {
  position: relative;
  display: flex;
  flex-direction: column;
}
.cpb-card-media {
  position: relative;
  display: block;
  aspect-ratio: var(--cpb-tile-ratio);
  overflow: hidden;
  background: var(--beige);
}
.cpb-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease), opacity 0.5s var(--ease);
}
.cpb-card:hover .cpb-card-media img {
  transform: scale(1.04);
}
/* Seconde image révélée au survol quand la galerie en contient une : on montre
   le produit porté ou de dos, ce que l'acheteur cherche vraiment. */
.cpb-card-media .alt {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.cpb-card:hover .cpb-card-media .alt {
  opacity: 1;
}
.cpb-card-flag {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  padding: 7px 12px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--night);
  background: var(--copper-lt);
}
.cpb-card-flag.is-out {
  background: var(--ink-soft);
  color: var(--paper);
}
.cpb-card-body {
  padding-top: var(--sp-sm);
}
.cpb-card-cat {
  display: block;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 8px;
}
.cpb-card-title {
  font-family: var(--font-accent);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.3;
  color: var(--ink);
  margin: 0;
}
.cpb-card-title a::after {
  /* zone cliquable étendue à toute la carte, sans imbriquer les liens */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.cpb-card-price {
  margin-top: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.cpb-card-price del {
  color: var(--ink-soft);
  font-weight: 400;
  opacity: 0.7;
  margin-right: 8px;
}
.cpb-card-price ins {
  text-decoration: none;
  color: var(--copper);
}
.cpb-card-variants {
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
/* Ajout au panier : discret, il n'apparaît qu'au survol sur grand écran, et
   reste visible en permanence au doigt (voir § B16). */
.cpb-card-add {
  position: relative;
  z-index: 2;
  margin-top: var(--sp-xs);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.cpb-card:hover .cpb-card-add,
.cpb-card:focus-within .cpb-card-add {
  opacity: 1;
  transform: none;
}

/* ==== § B6 — GRILLE ET BARRE DE TRI ==== */
.cpb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--sp-lg) var(--cpb-card-gap);
}
.cpb-toolbar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-md);
  flex-wrap: wrap;
  padding-bottom: var(--sp-sm);
  margin-bottom: var(--sp-lg);
  border-bottom: 1px solid var(--copper-hair);
}
.cpb-toolbar-count {
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.cpb-toolbar select {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--copper-hair-strong);
  border-radius: 0;
  padding: 10px 14px;
  cursor: pointer;
}
.cpb-toolbar select:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 2px;
}
/* Filtres par univers, en ligne : plus lisible qu'une colonne latérale sur une
   boutique de moins de cent références. */
.cpb-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: var(--sp-md);
}
.cpb-filter {
  padding: 9px 18px;
  border: 1px solid var(--copper-hair-strong);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: 0.35s var(--ease);
}
.cpb-filter:hover {
  border-color: var(--copper);
  color: var(--copper);
}
.cpb-filter.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

/* ==== § B7 — SECTION ÉDITORIALE « SOUVENIR » ==== */
.cpb-souvenir {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(32px, 6vw, 88px);
}
.cpb-souvenir-media img {
  width: 100%;
  aspect-ratio: 5 / 6;
  object-fit: cover;
}
.cpb-souvenir-text p + p {
  margin-top: var(--sp-sm);
}
.cpb-souvenir-text .btn {
  margin-top: var(--sp-md);
}

/* ==== § B8 — RETRAIT SUR PLACE ==== */
.cpb-retrait {
  background: var(--night);
  color: var(--paper);
}
.cpb-retrait .h2 {
  color: var(--white);
}
.cpb-retrait .body {
  color: rgba(252, 251, 249, 0.74);
}
.cpb-retrait-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-lg);
  margin-top: var(--sp-xl);
}
.cpb-step {
  padding-top: var(--sp-sm);
  border-top: 1px solid rgba(183, 154, 114, 0.32);
}
/* La numérotation est ici légitime : c'est une séquence réelle, dans l'ordre
   où l'acheteur la vit. */
.cpb-step-n {
  display: block;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.24em;
  color: var(--copper-lt);
  margin-bottom: 14px;
}
.cpb-step h3 {
  font-size: 20px;
  color: var(--white);
  margin: 0 0 10px;
}
.cpb-step p {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(252, 251, 249, 0.7);
  margin: 0;
}

/* ==== § B9 — PAGINATION ==== */
.cpb-pagination {
  margin-top: var(--sp-xl);
  display: flex;
  justify-content: center;
  gap: 6px;
}
.cpb-pagination .page-numbers {
  min-width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  font-size: 13.5px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  transition: 0.35s var(--ease);
}
.cpb-pagination .page-numbers:hover {
  border-color: var(--copper-hair-strong);
  color: var(--copper);
}
.cpb-pagination .page-numbers.current {
  background: var(--ink);
  color: var(--paper);
}

/* ==== § B10 — NOTICES WOOCOMMERCE ==== */
/* WooCommerce livre des bandeaux verts arrondis. On les réaligne sur le
   vocabulaire du site : angles vifs, filet à gauche, pas de fond criard. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-radius: 0 !important;
  border: 1px solid var(--copper-hair) !important;
  border-left: 3px solid var(--copper) !important;
  background: var(--white) !important;
  color: var(--ink) !important;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  padding: 18px 22px !important;
  margin: 0 0 var(--sp-md) !important;
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  flex-wrap: wrap;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
  display: none !important;
}
.woocommerce-error {
  border-left-color: var(--cpb-alert) !important;
}
.woocommerce-message .button,
.woocommerce-info .button {
  margin-left: auto;
}

/* ==== § B11 — FICHE PRODUIT ==== */
.cpb-product {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.cpb-product-gallery {
  display: grid;
  gap: 10px;
}
.cpb-product-gallery img {
  width: 100%;
  aspect-ratio: var(--cpb-tile-ratio);
  object-fit: cover;
  background: var(--beige);
}
.cpb-product-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.cpb-product-thumbs button {
  padding: 0;
  border: 1px solid transparent;
  background: none;
  cursor: pointer;
}
.cpb-product-thumbs button[aria-current="true"] {
  border-color: var(--copper);
}
.cpb-product-thumbs img {
  aspect-ratio: 1;
}
.cpb-product-info {
  position: sticky;
  top: 110px;
}
.cpb-product-info .h1 {
  font-size: clamp(30px, 3.6vw, 46px);
}
.cpb-product-price {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: 0.03em;
  color: var(--ink);
  margin: var(--sp-sm) 0;
}
.cpb-product-price del {
  font-weight: 400;
  opacity: 0.55;
  margin-right: 12px;
}
.cpb-product-price ins {
  text-decoration: none;
  color: var(--copper);
}
.cpb-product-excerpt {
  color: var(--ink-soft);
  font-size: 16.5px;
  line-height: 1.75;
  padding-bottom: var(--sp-md);
  border-bottom: 1px solid var(--copper-hair);
}
.cpb-stock-line {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cpb-stock);
  margin-top: var(--sp-sm);
}
.cpb-stock-line::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.cpb-stock-line.is-out {
  color: var(--cpb-alert);
}
/* Variations et quantité : WooCommerce sort un tableau, on le remet à plat. */
.woocommerce div.product form.cart .variations {
  width: 100%;
  margin: var(--sp-md) 0 0;
  border: 0;
}
.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td {
  display: block;
  padding: 0;
  border: 0;
  text-align: left;
}
.woocommerce div.product form.cart .variations th label {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 10px;
  display: block;
}
.woocommerce div.product form.cart .variations td.value {
  margin-bottom: var(--sp-sm);
}
.woocommerce div.product form.cart .variations select {
  width: 100%;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--copper-hair-strong);
  border-radius: 0;
  padding: 14px 16px;
}
.woocommerce .quantity input.qty {
  width: 82px;
  height: 54px;
  text-align: center;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink);
  border: 1px solid var(--copper-hair-strong);
  border-radius: 0;
  background: var(--white);
}
.cpb-cart-row {
  display: flex;
  gap: 12px;
  align-items: stretch;
  margin-top: var(--sp-md);
}
.cpb-cart-row .single_add_to_cart_button {
  flex: 1;
}
/* Le bouton principal réutilise le balayage cuivre du parent (§ 19) : même
   geste sur tout le site, du « Réserver » au « Ajouter au panier ». */
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce input.button.alt,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: 0 !important;
  border: 1px solid var(--copper);
  background: transparent;
  color: var(--copper);
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 12.5px;
  line-height: 1;
  padding: 19px 30px;
  transition: color 0.5s var(--ease);
}
.woocommerce .button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--copper);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
  z-index: 0;
}
.woocommerce .button > * {
  position: relative;
  z-index: 1;
}
.woocommerce .button:hover {
  color: var(--white);
  background: transparent;
}
.woocommerce .button:hover::before {
  transform: scaleX(1);
}
/* Le bouton d'achat, lui, est plein : c'est le seul de la page qui l'est. */
.woocommerce .single_add_to_cart_button,
.woocommerce .checkout-button,
.woocommerce #place_order {
  background: var(--copper) !important;
  color: var(--white) !important;
  border-color: var(--copper) !important;
}
.woocommerce .single_add_to_cart_button::before,
.woocommerce .checkout-button::before,
.woocommerce #place_order::before {
  background: var(--ink);
}
.woocommerce .button:disabled,
.woocommerce .button.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
/* Onglets : description, livraison, matière. En accordéon plutôt qu'en
   onglets — la lecture reste linéaire au doigt. */
.cpb-accordion {
  margin-top: var(--sp-lg);
  border-top: 1px solid var(--copper-hair);
}
.cpb-accordion details {
  border-bottom: 1px solid var(--copper-hair);
}
.cpb-accordion summary {
  list-style: none;
  cursor: pointer;
  padding: var(--sp-sm) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}
.cpb-accordion summary::-webkit-details-marker {
  display: none;
}
.cpb-accordion summary::after {
  content: "+";
  font-size: 18px;
  font-weight: 400;
  color: var(--copper);
  transition: transform 0.35s var(--ease);
}
.cpb-accordion details[open] summary::after {
  content: "–";
}
.cpb-accordion .cpb-panel {
  padding: 0 0 var(--sp-md);
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.75;
}

/* ==== § B12 — PANIER ==== */
.woocommerce table.shop_table {
  border: 0;
  border-radius: 0;
  border-collapse: collapse;
  width: 100%;
}
.woocommerce table.shop_table th {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 0 0 var(--sp-sm);
  border-bottom: 1px solid var(--copper-hair-strong);
  text-align: left;
}
.woocommerce table.shop_table td {
  padding: var(--sp-sm) 0;
  border-bottom: 1px solid var(--copper-hair);
  vertical-align: middle;
  font-size: 15.5px;
  color: var(--ink);
}
.woocommerce table.shop_table .product-thumbnail img {
  width: 88px;
  height: auto;
  aspect-ratio: var(--cpb-tile-ratio);
  object-fit: cover;
}
.woocommerce a.remove {
  color: var(--ink-soft) !important;
  font-size: 20px;
  line-height: 1;
  border-radius: 0;
}
.woocommerce a.remove:hover {
  background: transparent !important;
  color: var(--cpb-alert) !important;
}
.cart-collaterals .cart_totals {
  background: var(--beige);
  padding: var(--sp-md);
}
.cart_totals h2 {
  font-size: 15px !important;
  letter-spacing: 0.18em !important;
}

/* ==== § B13 — COMMANDE (TUNNEL) ==== */
/* Une colonne pour saisir, une colonne récapitulative qui suit le défilement.
   Aucune distraction : le menu principal se réduit au logo (voir woo-setup). */
.cpb-checkout {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.cpb-checkout-aside {
  position: sticky;
  top: 110px;
  background: var(--beige);
  padding: var(--sp-md);
}
.woocommerce form .form-row {
  padding: 0;
  margin: 0 0 var(--sp-sm);
}
.woocommerce form .form-row label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.woocommerce form .form-row .required {
  color: var(--copper);
  text-decoration: none;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single {
  width: 100%;
  font-family: var(--font-body);
  font-size: 15.5px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--copper-hair-strong);
  border-radius: 0 !important;
  padding: 14px 16px;
  height: auto;
  transition: border-color 0.35s var(--ease);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  border-color: var(--copper);
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px rgba(133, 104, 74, 0.16);
}
.woocommerce form .form-row.woocommerce-invalid input.input-text {
  border-color: var(--cpb-alert);
}
#payment,
.woocommerce-checkout #payment {
  background: transparent !important;
  border-radius: 0 !important;
}
#payment ul.payment_methods {
  border-bottom: 1px solid var(--copper-hair) !important;
  padding: 0 0 var(--sp-sm) !important;
}
#payment ul.payment_methods li {
  list-style: none;
  padding: 14px 0;
}
#payment div.payment_box {
  background: var(--beige) !important;
  border-radius: 0 !important;
  font-size: 14.5px;
  color: var(--ink-soft);
}
#payment div.payment_box::before {
  display: none !important;
}
.woocommerce-checkout #payment div.form-row.place-order {
  padding: var(--sp-md) 0 0;
}

/* ==== § B14 — MON COMPTE ==== */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--copper-hair);
}
.woocommerce-account .woocommerce-MyAccount-navigation li {
  border-bottom: 1px solid var(--copper-hair);
}
.woocommerce-account .woocommerce-MyAccount-navigation a {
  display: block;
  padding: 15px 0;
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: color 0.35s var(--ease);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation a:hover {
  color: var(--copper);
}

/* ==== § B15 — PANIER DANS LA BARRE DE NAVIGATION ==== */
/* Le compteur se greffe sur la barre du parent sans la modifier : il se pose
   juste avant le bouton « Réserver » existant. */
.cpb-navcart {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 4px;
  color: var(--copper-lt);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.nav.solid .cpb-navcart,
.nav-locked .cpb-navcart {
  color: var(--copper-lt);
}
.cpb-navcart svg {
  width: 21px;
  height: 21px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.3;
}
.cpb-navcart-count {
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--copper);
  color: var(--white);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0;
}
.cpb-navcart-count:empty,
.cpb-navcart[data-count="0"] .cpb-navcart-count {
  display: none;
}

/* ==== § B16 — ADAPTATIF ==== */
@media (max-width: 1024px) {
  .cpb-product,
  .cpb-checkout,
  .cpb-souvenir {
    grid-template-columns: 1fr;
  }
  .cpb-product-info,
  .cpb-checkout-aside {
    position: static;
  }
  .cpb-reperes-inner {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-sm);
  }
  .cpb-retrait-steps {
    grid-template-columns: 1fr;
    gap: var(--sp-md);
  }
  /* Au doigt, il n'y a pas de survol : l'ajout au panier reste affiché. */
  .cpb-card-add {
    opacity: 1;
    transform: none;
  }
  .cpb-card-media .alt {
    display: none;
  }
}
@media (max-width: 640px) {
  .cpb-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-md) var(--sp-sm);
  }
  .cpb-card-title {
    font-size: 15.5px;
  }
  .cpb-card-add {
    display: none; /* la fiche produit prend le relais : moins d'erreurs de taille */
  }
  .cpb-reperes-inner {
    grid-template-columns: 1fr;
  }
  .cpb-univers-grid {
    grid-template-columns: 1fr;
  }
}

/* ==== § B17 — ACCESSIBILITÉ ET MOUVEMENT RÉDUIT ==== */
.cpb-card a:focus-visible,
.cpb-univers:focus-visible,
.cpb-filter:focus-visible,
.woocommerce .button:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 3px;
}
/* Le survol d'image ne doit jamais masquer le focus clavier. */
.cpb-card:focus-within .cpb-card-media img {
  transform: scale(1.04);
}
@media (prefers-reduced-motion: reduce) {
  .cpb-card-media img,
  .cpb-univers img,
  .cpb-univers-label::before,
  .cpb-card-add,
  .woocommerce .button::before {
    transition: none !important;
    transform: none !important;
  }
}

/* ==== § B18 — EN-TÊTE DE LA BOUTIQUE ==== */
/* Les classes .nav, .topbar, .cp-mbar viennent du parent : on n'ajoute ici
   que les deux éléments qui n'existent pas sur le site vitrine, le compte et
   le panier. Tout le reste est hérité, donc identique au pixel près. */
.cpb-nav-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}
.cpb-nav-account {
  display: inline-flex;
  align-items: center;
  color: var(--copper-lt);
  transition: color 0.35s var(--ease);
}
.cpb-nav-account svg {
  width: 22px;
  height: 22px;
}
.cpb-nav-account:hover {
  color: var(--copper);
}
.cpb-nav-account:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 4px;
}
/* Le compteur se pose dans le bouton « Panier », qui est un .navcta du
   parent : il hérite donc du balayage cuivre au survol. */
.cpb-nav-cart .cpb-navcart-count {
  margin-left: 9px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--copper);
  color: var(--white);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0;
  vertical-align: middle;
}
.cpb-nav-cart:hover .cpb-navcart-count {
  background: var(--white);
  color: var(--copper);
}
.cpb-nav-cart[data-count="0"] .cpb-navcart-count,
.cpb-navcart-count:empty {
  display: none;
}
/* Barre mobile : le panier remplace la billetterie, avec sa pastille. */
.cp-mbar-ticket {
  position: relative;
}
.cp-mbar-ticket .cpb-navcart-count {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--copper);
  color: var(--white);
  font-size: 10px;
  font-weight: 600;
}
.cp-mbar-ticket[data-count="0"] .cpb-navcart-count {
  display: none;
}
@media (max-width: 1024px) {
  .cpb-nav-actions {
    display: none; /* la barre mobile prend le relais */
  }
}

/* ==== § B20 — LISTES DE NAVIGATION ==== */
/* Le parent ne réinitialise pas les listes globalement : il le fait
   composant par composant. Comme la boutique affiche un menu simple là où le
   parent affiche un menu à panneaux, la règle correspondante n'existe pas
   chez lui. On l'ajoute ici, pour notre balisage seulement. */
.nav .links,
.cp-mmenu-sub {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav .links > li {
  margin: 0;
}
.nav .links a {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--copper-lt);
  text-decoration: none;
  padding: 10px 0;
  position: relative;
  transition: color 0.35s var(--ease);
}
/* Filet cuivre au survol, comme sur le reste du site. */
.nav .links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 4px;
  height: 1px;
  background: var(--copper);
  transition: right 0.4s var(--ease);
}
.nav .links a:hover,
.nav .links a[aria-current] {
  color: var(--copper);
}
.nav .links a:hover::after {
  right: 0;
}
.cp-mmenu-sub {
  margin-top: var(--sp-md);
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
}
.cp-mmenu-sub a {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(252, 251, 249, 0.62);
}
.cp-mmenu-sub a:hover {
  color: var(--copper-lt);
}
.cp-mmenu-foot {
  margin-top: auto;
  padding-top: var(--sp-lg);
}

/* ==== § B21 — DÉCALAGE SOUS L'EN-TÊTE FIXE ==== */
/* Le site vitrine n'a jamais eu besoin de ce décalage : son bandeau occupe
   toute la hauteur de l'écran et son contenu est aligné en bas, sous la barre.
   La boutique, elle, commence son titre en haut de page — il passait donc
   sous le menu fixe.

   Hauteurs mesurées dans le thème parent :
     barre utilitaire  40 px  (.topbar-inner)
     menu principal    66 px  (16 + 34 de logo + 16, état .solid)
     ------------------------
     total            106 px, arrondi à 112 pour respirer

   Sous 900 px la barre utilitaire disparaît (§ du parent) et le menu remonte
   à zéro : le décalage se réduit d'autant. */
:root {
  --cpb-header: 112px;
}
@media (max-width: 900px) {
  :root {
    --cpb-header: 74px;
  }
}

/* Le bandeau compact démarre sous l'en-tête. */
.cpb-hero.is-compact .cpb-hero-inner {
  padding-top: calc(var(--cpb-header) + var(--sp-md));
}

/* Le grand bandeau image, lui, passe volontairement SOUS la barre : le menu
   se pose dessus, comme sur le site vitrine. On garde seulement de quoi ne
   pas coller le texte au menu. */
.cpb-hero:not(.is-compact) {
  padding-top: var(--cpb-header);
}

/* Ancres : un lien vers #produits ne doit pas s'arrêter sous le menu. */
[id] {
  scroll-margin-top: calc(var(--cpb-header) + 16px);
}

/* Pages sans bandeau (panier, commande, compte, page simple) : le contenu
   doit lui aussi démarrer sous l'en-tête. */
body.woocommerce-cart #contenu > .sec:first-child,
body.woocommerce-checkout #contenu > .sec:first-child,
body.woocommerce-account #contenu > .sec:first-child,
body.page #contenu > .sec:first-child,
body.single #contenu > .sec:first-child,
body.error404 #contenu > .sec:first-child {
  padding-top: calc(var(--cpb-header) + var(--sp-lg));
}

/* ==== § B22 — BARRE DES PUBLICS ==== */
/* La barre utilitaire affiche les rubriques communes au réseau Phénix. Le
   style de base (.tb-links) vient du parent ; on ajoute seulement le retour
   vers le spectacle, détaché du reste par un filet vertical. */
.topbar .tb-links .tb-retour {
  margin-left: auto;
  padding-left: 22px;
  position: relative;
}
.topbar .tb-links .tb-retour::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 13px;
  background: rgba(183, 154, 114, 0.32);
}
/* La barre utilitaire disparaît sous 900 px (règle du parent) : les rubriques
   du réseau se retrouvent dans le menu mobile, où elles restent atteignables. */
.cp-mmenu-publics .tb-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.cp-mmenu-publics .tb-links a {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(252, 251, 249, 0.62);
}
.cp-mmenu-publics .tb-links a:hover,
.cp-mmenu-publics .tb-links .current-menu-item > a {
  color: var(--copper-lt);
}
.cp-mmenu-publics .tb-retour {
  margin-left: 0;
  padding-left: 0;
}
.cp-mmenu-publics .tb-retour::before {
  display: none;
}

/* ==== § B23 — BANDEAU D'ANNONCE ==== */
/* Fine bande au-dessus de tout, refermable. Elle pousse la page vers le bas
   plutôt que de la recouvrir : superposer une annonce à un menu déjà fixe
   donnerait trois épaisseurs empilées. */
.cpb-topin {
  position: relative;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-sm);
  padding: 11px clamp(48px, 6vw, 72px) 11px clamp(22px, 5vw, 64px);
  background: var(--copper);
  color: var(--white);
}
.cpb-topin[hidden] {
  display: none;
}
.cpb-topin-text {
  margin: 0;
  font-family: var(--font-body);
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
}
.cpb-topin-text strong {
  font-weight: 600;
}
.cpb-topin-close {
  position: absolute;
  right: clamp(14px, 3vw, 28px);
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  transition: color 0.3s var(--ease);
}
.cpb-topin-close svg {
  width: 17px;
  height: 17px;
}
.cpb-topin-close:hover {
  color: var(--white);
}
.cpb-topin-close:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
}
/* La barre utilitaire et le menu descendent d'autant. La hauteur est mesurée
   par le JavaScript et écrite dans --cpb-topin-h : elle varie si le texte
   passe sur deux lignes au téléphone. */
body.has-topin .topbar {
  top: var(--cpb-topin-h, 44px);
}
body.has-topin .nav {
  top: calc(40px + var(--cpb-topin-h, 44px));
}
body.has-topin.admin-bar .topbar {
  top: calc(32px + var(--cpb-topin-h, 44px));
}
body.has-topin.admin-bar .nav {
  top: calc(72px + var(--cpb-topin-h, 44px));
}
@media (max-width: 900px) {
  body.has-topin .nav {
    top: var(--cpb-topin-h, 44px);
  }
  body.has-topin.admin-bar .nav {
    top: calc(46px + var(--cpb-topin-h, 44px));
  }
  .cpb-topin-text {
    font-size: 11.5px;
    letter-spacing: 0.08em;
  }
}

/* ==== § B24 — BANDEAU PLEIN ÉCRAN ==== */
/* 80 vh, pleine largeur, le menu posé dessus comme sur le site vitrine.
   dvh plutôt que vh : sur mobile, vh ignore la barre d'adresse du navigateur
   et le bandeau déborde de l'écran. */
.cpb-hero {
  position: relative;
  min-height: 80vh;
  min-height: 80dvh;
  display: flex;
  align-items: flex-end;
  background: var(--night);
  overflow: hidden;
  padding-top: var(--cpb-header);
}
.cpb-hero-media {
  position: absolute;
  inset: 0;
}
.cpb-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.72;
}
.cpb-hero-scrim {
  position: absolute;
  inset: 0;
  /* Deux dégradés : l'un pour asseoir le texte en bas, l'autre pour que le
     menu reste lisible en haut. */
  background:
    linear-gradient(to top, rgba(13, 12, 11, 0.9) 0%, rgba(13, 12, 11, 0.35) 42%, transparent 68%),
    linear-gradient(to bottom, rgba(13, 12, 11, 0.55) 0%, transparent 28%);
}
.cpb-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(22px, 5vw, 64px) clamp(52px, 8vh, 96px);
}
.cpb-hero .eyebrow {
  color: var(--copper-lt);
}
.cpb-hero .eyebrow::after {
  background: var(--copper-lt);
}
.cpb-hero h1 {
  color: var(--white);
  max-width: 14ch;
  font-size: clamp(42px, 7vw, 92px);
  line-height: 1.02;
}
.cpb-hero-lead {
  color: rgba(252, 251, 249, 0.84);
  max-width: 46ch;
  margin-top: var(--sp-sm);
}
.cpb-hero-cta {
  margin-top: var(--sp-md);
}
@media (max-width: 640px) {
  .cpb-hero {
    min-height: 70vh;
    min-height: 70dvh;
  }
}

/* ==== § B25 — BOUTON DE FIN DE SECTION ==== */
.cpb-sec-cta {
  margin-top: var(--sp-xl);
  display: flex;
  justify-content: center;
}

/* ==== § B26 — SECTION COLLECTION ==== */
/* Texte à gauche, image à droite, sur fond nuit pleine largeur. */
.cpb-collection {
  background: var(--night);
  color: var(--paper);
  overflow: hidden;
}
.cpb-collection-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  align-items: center;
  gap: clamp(36px, 6vw, 88px);
}
.cpb-collection .eyebrow {
  color: var(--copper-lt);
}
.cpb-collection .eyebrow::after {
  background: var(--copper-lt);
}
.cpb-collection .h2 {
  color: var(--white);
}
.cpb-collection .body {
  color: rgba(252, 251, 249, 0.76);
  max-width: 44ch;
  margin-top: var(--sp-sm);
}
.cpb-collection .btn {
  margin-top: var(--sp-md);
}
.cpb-collection-media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  /* Filet cuivre en léger décalage : le seul ornement de la section. */
  box-shadow: 18px 18px 0 -1px rgba(133, 104, 74, 0.42);
}
@media (max-width: 900px) {
  .cpb-collection-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-lg);
  }
  .cpb-collection-media img {
    box-shadow: 12px 12px 0 -1px rgba(133, 104, 74, 0.42);
  }
}

/* ==== § B27 — PRÉ-PIED DE PAGE : RÉSEAUX SOCIAUX ==== */
.cpb-social-band {
  background: var(--beige);
  text-align: center;
}
.cpb-socials {
  display: flex;
  justify-content: center;
  gap: 14px;
  list-style: none;
  margin: var(--sp-lg) 0 0;
  padding: 0;
}
.cpb-socials a {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--copper-hair-strong);
  color: var(--ink-soft);
  transition: 0.4s var(--ease);
}
.cpb-socials a:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.cpb-socials a:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 3px;
}
.cpb-socials svg {
  width: 19px;
  height: 19px;
}

/* ==== § B28 — PIED DE PAGE ==== */
.cpb-foot-baseline {
  margin-top: var(--sp-sm);
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(252, 251, 249, 0.62);
  max-width: 30ch;
}
.cpb-foot-mail {
  display: inline-block;
  margin-top: 12px;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--copper-lt);
  border-bottom: 1px solid transparent;
  transition: border-color 0.35s var(--ease);
}
.cpb-foot-mail:hover {
  border-bottom-color: var(--copper-lt);
}
.cpb-foot-legal {
  margin: 0;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: rgba(252, 251, 249, 0.48);
}

/* ==== § B29 — ICÔNES DE L'EN-TÊTE ==== */
/* Deux icônes seulement : compte et panier. Le bouton texte a disparu, la
   place revient au menu, qui est centré. */
.cpb-nav-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--copper-lt);
  transition: color 0.35s var(--ease);
}
.cpb-nav-icon svg {
  width: 22px;
  height: 22px;
}
.cpb-nav-icon:hover {
  color: var(--white);
}
.cpb-nav-icon:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 2px;
}
.cpb-nav-cart .cpb-navcart-count {
  position: absolute;
  top: 2px;
  right: 1px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--copper);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
}
.cpb-nav-cart[data-count="0"] .cpb-navcart-count,
.cpb-navcart-count:empty {
  display: none;
}
/* Menu centré : le logo à gauche, les icônes à droite, les liens au milieu.
   La marge automatique de chaque côté fait le centrage sans calcul. */
.nav .links {
  margin-left: auto;
  margin-right: auto;
}