/* ============================================================================================
   Pages WooCommerce classiques — kimb-native
   ============================================================================================

   POURQUOI CE FICHIER EXISTE

   Le tunnel du viseur s'arrête à la redirection vers Payrexx. Tout ce qui vient après —
   « régler la commande » au retour d'une annulation, la page de remerciement, le compte —
   est rendu par les gabarits de WooCommerce, que ce thème n'habillait pas : relevé le
   21.08.2026, `style.css` ne portait qu'UN seul sélecteur `.woocommerce`.

   Résultat pour le client : panneau blanc, bouton violet, polices système, sur un site noir
   et ambre. Et ça se produit au retour d'un paiement annulé — le moment précis où il se
   demande si son argent est parti quelque part. C'est là que le site doit ressembler le plus
   à lui-même, et c'est là qu'il y ressemblait le moins.

   CE QUE CE FICHIER NE FAIT PAS

   Il n'ajoute aucun gabarit. Surcharger `form-pay.php` reviendrait à recopier la logique de
   paiement de WooCommerce dans le thème et à la figer à la version d'aujourd'hui ; une mise à
   jour changerait le fond sans changer la copie, et la panne ne se verrait qu'à la caisse.
   On habille le balisage rendu, on ne le réécrit pas.

   Il ne touche pas non plus au panier ni au tunnel, qui passent par les BLOCS WooCommerce et
   ont leur propre habillage. Ici, seulement les gabarits classiques.

   Chargé uniquement sur les pages concernées — voir `functions.php`.
   ============================================================================================ */

/* ---- Cadre commun ------------------------------------------------------------------------ */

.woocommerce, .woocommerce-page {
  color: var(--blanc);
  font-family: var(--sans);
}
.woocommerce a:not(.button) {
  color: var(--ambre);
  text-decoration: none;
  border-bottom: 1px solid rgba(232, 199, 154, 0.35);
}
.woocommerce a:not(.button):hover { border-bottom-color: var(--ambre); }

/* ---- Messages ----------------------------------------------------------------------------
   WooCommerce empile trois familles — erreur, information, succès — et leur donne à toutes le
   même liseré violet. On les distingue par la couleur du bord, la seule chose qu'on lise du
   coin de l'œil. */

.woocommerce-error,
.woocommerce-info,
.woocommerce-message {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left-width: 3px;
  color: var(--blanc);
  font-size: 1rem;
  line-height: 1.55;
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0.95rem 1.1rem;
  border-radius: 2px;
}
.woocommerce-error   { border-left-color: var(--rouge); }
.woocommerce-info    { border-left-color: var(--gris-2); }
.woocommerce-message { border-left-color: var(--vert); }
.woocommerce-error::before,
.woocommerce-info::before,
.woocommerce-message::before { content: none; }   /* les pictogrammes de WooCommerce, hors palette */
.woocommerce-error li { list-style: none; }

/* ---- Tableaux de commande ----------------------------------------------------------------- */

.woocommerce table.shop_table {
  border: 1px solid var(--line);
  border-collapse: collapse;
  border-radius: 2px;
  width: 100%;
  margin-bottom: 1.6rem;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  border-bottom: 1px solid var(--line);
  padding: 0.8rem 0.9rem;
  text-align: left;
  vertical-align: top;
}
.woocommerce table.shop_table th {
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gris-2);
  font-weight: 400;
}
.woocommerce table.shop_table tfoot th,
.woocommerce table.shop_table tfoot td { color: var(--blanc); }
.woocommerce table.shop_table tfoot tr:last-child td,
.woocommerce table.shop_table tfoot tr:last-child th {
  border-bottom: none;
  font-size: 1.05rem;
}
.woocommerce .woocommerce-Price-amount { font-family: var(--mono); white-space: nowrap; }

/* ---- Choix du moyen de paiement (order-pay) -----------------------------------------------
   Même vocabulaire visuel que les onglets du viseur : bordure discrète, ambre à la sélection.
   Le client qui revient d'une annulation doit reconnaître l'écran qu'il vient de quitter. */

.woocommerce ul.wc_payment_methods {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 2px;
}
.woocommerce ul.wc_payment_methods li {
  border-bottom: 1px solid var(--line);
  padding: 0.85rem 1rem;
  margin: 0;
}
.woocommerce ul.wc_payment_methods li:last-child { border-bottom: none; }
.woocommerce ul.wc_payment_methods label {
  color: var(--blanc);
  cursor: pointer;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.woocommerce ul.wc_payment_methods input[type="radio"] { accent-color: var(--ambre); }
.woocommerce ul.wc_payment_methods li:has(input:checked) { background: rgba(232, 199, 154, 0.07); }
.woocommerce .payment_box {
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--gris-2);
  font-size: 0.92rem;
  line-height: 1.5;
  margin: 0.7rem 0 0;
  padding: 0.75rem 0.9rem;
  border-radius: 2px;
}
.woocommerce .payment_box::before { content: none; }   /* la flèche blanche de WooCommerce */

/* ---- Boutons ------------------------------------------------------------------------------
   `#place_order` est l'équivalent du bouton « Payer » du viseur : il porte le même poids et
   doit avoir la même présence. Les autres boutons restent en retrait. */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  background: transparent;
  border: 1px solid var(--gris);
  border-radius: 2px;
  color: var(--blanc);
  font-family: var(--mono);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.75rem 1.2rem;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover { border-color: var(--ambre); color: var(--ambre); }
.woocommerce button.button.alt,
.woocommerce #place_order {
  background: var(--ambre);
  border-color: var(--ambre);
  color: var(--noir);
  font-weight: 500;
  width: 100%;
}
.woocommerce button.button.alt:hover,
.woocommerce #place_order:hover { background: var(--blanc); border-color: var(--blanc); color: var(--noir); }
.woocommerce button.button:disabled,
.woocommerce #place_order:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---- Page de remerciement ------------------------------------------------------------------ */

.woocommerce .woocommerce-thankyou-order-received {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 3vw, 2rem);
  line-height: 1.2;
  color: var(--blanc);
  margin-bottom: 1.4rem;
}
.woocommerce ul.woocommerce-order-overview {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  margin: 0 0 1.8rem;
  padding: 1.1rem 1.2rem;
}
.woocommerce ul.woocommerce-order-overview li {
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gris-2);
  border: none;
  padding: 0;
  margin: 0;
}
.woocommerce ul.woocommerce-order-overview li strong {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--sans);
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--blanc);
  font-weight: 400;
}
.woocommerce .woocommerce-column__title,
.woocommerce h2, .woocommerce h3 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--blanc);
  margin: 1.6rem 0 0.9rem;
}
.woocommerce address {
  font-style: normal;
  line-height: 1.6;
  color: var(--gris-2);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 0.9rem 1rem;
}

/* ---- Formulaires -------------------------------------------------------------------------- */

.woocommerce form .form-row label { font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.12em;
                                    text-transform: uppercase; color: var(--gris-2); display: block; margin-bottom: 0.35rem; }
/* 16 px minimum : sous ce seuil, Safari sur iPhone zoome au premier appui et la page saute.
   Même règle que dans le viseur, même raison. Ne pas redescendre. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--blanc);
  font-family: var(--sans);
  font-size: 1rem;
  padding: 0.7rem 0.8rem;
  width: 100%;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus { outline: none; border-color: var(--ambre); }

/* ── Édition close ────────────────────────────────────────────────────────────────────────────
   Le bouton d'achat a disparu — c'est `gneiz-portfolio-manager` qui le retire. Ce bloc occupe
   sa place : sans lui, la fiche d'une œuvre close se termine sur un prix et rien à faire. */
.kimb-edition-close {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  align-items: flex-start;
  margin: 1.5rem 0 0;
}
.kimb-edition-close__note {
  color: var(--encre-douce, #9a978f);
  font-size: .85rem;
  line-height: 1.5;
  max-width: 34rem;
}
.woocommerce .gneiz-pm-close,
.woocommerce p.stock.gneiz-pm-close {
  color: var(--ambre);
  font-weight: 500;
}

/* ---- La boutique n'a pas de gabarit « page », donc personne ne lui donnait de marge ----------
   `page.php` pose `.page`, avec ses marges et sa largeur maximale — mais la boutique, les fiches
   et les archives de série passent par `main.site-main`, qui n'avait aucun rembourrage. Le fil
   d'Ariane et les titres touchaient le bord de l'écran, ce qui se voit surtout sur un téléphone.
   Les pages du tunnel ne sont PAS visées : elles sont dans `.page`, et cumuleraient. (21.08.2026) */
.woocommerce main.site-main,
.woocommerce-page main.site-main {
  padding-inline: clamp(1rem, 4vw, 2rem);
  padding-block: clamp(1.5rem, 4vw, 3rem);
  max-width: 1240px;
  margin-inline: auto;
}

/* ================================================================================================
   LA FICHE D'UNE ŒUVRE — 21.08.2026

   Cette feuille n'était chargée que dans le tunnel. Le jour où on l'a étendue à la boutique, la
   fiche produit est apparue telle qu'elle était depuis la mise en ligne : sélecteurs de variation
   en tableau qui déborde, liste EXIF qui tombe mot par mot, champ de quantité blanc, et surtout
   un « Ajouter au panier » **violet** — `#7f54b3`, la couleur d'usine de WooCommerce.

   ⚠️ LA SPÉCIFICITÉ, PAS LA COULEUR, ÉTAIT LE PROBLÈME. `.woocommerce button.button.alt` existait
   déjà plus haut, en ambre. WooCommerce déclare EXACTEMENT le même sélecteur, et sa feuille est
   chargée après la nôtre : à spécificité égale, le dernier gagne. Dans le tunnel le défaut ne se
   voyait pas — le bouton de commande s'y appelle `#place_order`, un identifiant, qui l'emportait.
   D'où le préfixe `body` ici : il ne décore rien, il tranche l'égalité.
   ============================================================================================= */

body.woocommerce div.product .product_title { font-family: var(--serif); font-weight: 400; }
body.woocommerce div.product p.price,
body.woocommerce div.product span.price { font-family: var(--mono); color: var(--ambre); }

/* Les données de prise de vue : deux colonnes, alignées. En liste de définition brute, « ISO »
   et « 100 » tombaient l'un sous l'autre — dix lignes pour cinq informations. */
.kimb-exif {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.3rem 1.4rem;
  margin: 1.4rem 0;
  padding: 1rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.kimb-exif dt {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gris); align-self: center;
}
.kimb-exif dd { margin: 0; color: var(--gris-2); font-size: 0.95rem; }

/* Le choix du format et du support. Un `<table>` de 375 px de large n'existe pas : on le rend
   en blocs, ce qui donne la même chose en grand et une colonne lisible en petit. */
body.woocommerce div.product form.cart table.variations { display: block; border: 0; margin: 1.5rem 0; }
body.woocommerce div.product form.cart table.variations tbody,
body.woocommerce div.product form.cart table.variations tr,
body.woocommerce div.product form.cart table.variations th,
body.woocommerce div.product form.cart table.variations td { display: block; width: 100%; padding: 0; text-align: left; }
body.woocommerce div.product form.cart table.variations tr { margin-bottom: 1.1rem; }
body.woocommerce div.product form.cart table.variations th.label {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gris-2); margin-bottom: 0.4rem;
}
body.woocommerce div.product form.cart table.variations select {
  width: 100%; background: var(--surface); color: var(--blanc);
  border: 1px solid var(--line); border-radius: 2px; padding: 0.75rem 0.9rem;
  font-family: var(--sans); font-size: 0.95rem;
}
body.woocommerce div.product form.cart .reset_variations { color: var(--gris); font-size: 0.8rem; }

body.woocommerce div.product form.cart .quantity input.qty {
  background: var(--surface); color: var(--blanc); border: 1px solid var(--line);
  border-radius: 2px; padding: 0.7rem 0.5rem; width: 4.5rem; text-align: center;
  font-family: var(--mono);
}

/* Le bouton principal, repris à WooCommerce. */
body.woocommerce a.button.alt,
body.woocommerce button.button.alt,
body.woocommerce input.button.alt {
  background: var(--ambre); border: 1px solid var(--ambre); color: var(--noir);
  font-family: var(--mono); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500;
}
body.woocommerce a.button.alt:hover,
body.woocommerce button.button.alt:hover,
body.woocommerce input.button.alt:hover { background: var(--blanc); border-color: var(--blanc); color: var(--noir); }
/* Tant qu'aucune combinaison n'est choisie, le bouton existe mais n'agit pas : il doit le dire. */
body.woocommerce button.button.alt.disabled,
body.woocommerce button.button.alt:disabled {
  background: transparent; border-color: var(--line); color: var(--gris); opacity: 1;
}

body.woocommerce div.product .woocommerce-variation-price { margin-bottom: 1rem; }
body.woocommerce div.product .woocommerce-variation-availability p { color: var(--ambre); font-family: var(--mono); font-size: 0.8rem; }
body.woocommerce div.product .product_meta { border-top: 1px solid var(--line); padding-top: 1rem; font-size: 0.85rem; color: var(--gris); }

/* ---- LA PHOTOGRAPHIE DU VISEUR REPREND SA HAUTEUR — 30.08.2026 -----------------------------
   MESURÉ AU NAVIGATEUR, sur `/tirage/elle-me-rappelle-le-versant/` en 494 × 700 : `.viewfinder`
   et `.stage` faisaient bien 494 × 700, mais `.stage__img` ne faisait que **494 × 259** — la
   hauteur de l'image était retombée sur ses proportions naturelles.

   La cause n'est pas dans le thème. `woocommerce-layout.css` pose

       .woocommerce img, .woocommerce-page img { height:auto; max-width:100% }

   soit une classe ET un type, quand `.stage__img` n'a qu'une classe : WooCommerce l'emporte, et
   `height:100%` ne s'applique jamais. Le `<body>` d'une fiche d'œuvre porte les deux classes.

   POURQUOI PERSONNE NE L'AVAIT VU. Le prototype ne charge pas les feuilles de WooCommerce : le
   défaut n'existe QUE sur le site réel, et seulement sur les œuvres en PAYSAGE. En portrait,
   l'image calculée sur sa largeur dépassait la hauteur de la fenêtre et paraissait la remplir ;
   en paysage elle s'arrêtait au tiers, et le reste du cadre restait noir sous la mire.

   `.viewfinder .stage__img` porte deux classes : il repasse devant sans `!important`. */
.viewfinder .stage__img { width:100%; height:100%; }