/* Tertium — Panier, commande, compte client (bloc 8)

   WooCommerce sert le panier et la commande en blocs Gutenberg, rendus côté
   client ; « Mon compte » reste en gabarits PHP classiques. Les trois écrans
   sont habillés ici, sans être remplacés : on ne surcharge pas des blocs qui
   se mettent à jour tout seuls, on leur donne la typographie, les filets et
   les boutons du site.

   Toutes les valeurs viennent de tokens.css. Les rares mesures sans jeton sont
   en rem et signalées, comme dans base.css.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   1. Largeur et rythme communs aux trois écrans

   Les trois pages passent par page.php, dont la colonne de lecture fait 800 px.
   C'est la bonne largeur pour un texte, pas pour un panier qui porte une
   colonne de récapitulatif à droite : on l'élargit ici, et seulement ici.
   -------------------------------------------------------------------------- */

.woocommerce-cart .tt-page__corps,
.woocommerce-checkout .tt-page__corps,
.woocommerce-account .tt-page__corps {
  max-width: none;
  padding-top: var(--tt-bloc);
  line-height: var(--tt-lh-corps);
}

.woocommerce-cart .tt-page__tete,
.woocommerce-checkout .tt-page__tete,
.woocommerce-account .tt-page__tete {
  padding-bottom: var(--tt-bloc);
  border-bottom: var(--tt-filet-or);
}

/* Message aux clients (refonte du site) : encart beige a filet brique, comme
   les encarts d'information du theme. */
.tt-boutique__annonce {
  margin: 0 0 var(--tt-gap);
  padding: var(--tt-gap-s) var(--tt-gap);
  border-left: var(--tt-filet-accent);
  background: var(--tt-papier-alt);
  font-size: var(--tt-fs-corps-s);
  line-height: 1.6;
  color: var(--tt-encre);
}

.tt-boutique__annonce p { margin: 0; }
.tt-boutique__annonce p + p { margin-top: calc(var(--tt-gap-s) / 1.4); }

.tt-boutique__annonce-titre {
  font-family: var(--tt-serif);
  font-size: var(--tt-fs-carte);
  line-height: var(--tt-lh-titre);
}

.tt-boutique__annonce a { color: var(--tt-brique); text-decoration: underline; text-underline-offset: .2em; }

/* Le rappel fiscal, repris de la fiche livre : même phrase, même endroit. */
.tt-boutique__mention {
  margin: var(--tt-gap-s) 0 0;
  font-size: var(--tt-fs-meta);
  color: var(--tt-texte-3);
}

.tt-boutique__mention a { color: var(--tt-encre); text-decoration: underline; text-underline-offset: .2em; }
.tt-boutique__mention a:hover { color: var(--tt-brique); }

/* --------------------------------------------------------------------------
   2. Boutons — les blocs WooCommerce prennent l'apparence du site
   -------------------------------------------------------------------------- */

.wc-block-components-button:not(.is-link),
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce-MyAccount-content .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tt-touch);
  padding: 0 var(--tt-bloc);
  font-family: var(--tt-sans);
  font-size: var(--tt-fs-corps-s);
  font-weight: 600;
  letter-spacing: var(--tt-ls-micro);
  text-transform: uppercase;
  color: var(--tt-papier);
  background: var(--tt-encre);
  border: 1px solid var(--tt-encre);
  border-radius: var(--tt-radius);
  transition: background var(--tt-t-rapide), color var(--tt-t-rapide), border-color var(--tt-t-rapide);
}

.wc-block-components-button:not(.is-link):hover,
.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce input.button:hover,
.woocommerce-MyAccount-content .button:hover {
  color: var(--tt-encre);
  background: var(--tt-or);
  border-color: var(--tt-or);
}

.wc-block-components-button:not(.is-link):active,
.woocommerce button.button:active { transform: translateY(var(--tt-press)); }

/* Les liens-boutons de WooCommerce (« Retirer », « Modifier ») restent des liens. */
.wc-block-components-button.is-link,
.woocommerce a.remove {
  color: var(--tt-texte-2);
  font-size: var(--tt-fs-meta);
  text-decoration: underline;
  text-underline-offset: .2em;
  background: none;
  border: 0;
}

.wc-block-components-button.is-link:hover,
.woocommerce a.remove:hover { color: var(--tt-brique); background: none; }

/* --------------------------------------------------------------------------
   3. Champs de formulaire — panier, commande et compte
   -------------------------------------------------------------------------- */

.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-select__container select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-MyAccount-content input[type="text"],
.woocommerce-MyAccount-content input[type="email"],
.woocommerce-MyAccount-content input[type="password"] {
  width: 100%;
  min-height: var(--tt-touch);
  padding: calc(var(--tt-gap-s) / 2) var(--tt-gap-s);
  font-family: var(--tt-sans);
  font-size: var(--tt-fs-corps-s);
  color: var(--tt-encre);
  background: var(--tt-papier);
  border: 1px solid var(--tt-bord-champ);
  border-radius: var(--tt-radius);
  box-shadow: none;
}

.wc-block-components-text-input input:focus,
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  border-color: var(--tt-encre);
  outline: var(--tt-focus);
  outline-offset: var(--tt-focus-offset);
}

.wc-block-components-text-input label,
.woocommerce form .form-row label {
  font-size: var(--tt-fs-micro);
  letter-spacing: var(--tt-ls-micro);
  text-transform: uppercase;
  color: var(--tt-texte-2);
}

.woocommerce form .form-row { margin-bottom: var(--tt-gap-s); }

.required { color: var(--tt-brique); }

/* --------------------------------------------------------------------------
   4. Panier et commande — les blocs
   -------------------------------------------------------------------------- */

.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
  font-family: var(--tt-sans);
  color: var(--tt-encre);
}

.wc-block-cart-items,
.wc-block-cart-items th,
.wc-block-cart-items td { border-color: var(--tt-bord); }

.wc-block-cart-items__header {
  font-size: var(--tt-fs-micro);
  letter-spacing: var(--tt-ls-micro);
  text-transform: uppercase;
  color: var(--tt-texte-2);
  border-bottom: var(--tt-filet);
}

.wc-block-cart-item__wrap,
.wc-block-cart-items__row { border-bottom: var(--tt-filet); }

/* Le titre d'un livre dans le panier se lit comme le titre d'une carte. */
.wc-block-components-product-name {
  font-family: var(--tt-serif);
  font-size: var(--tt-fs-carte);
  font-weight: 400;
  line-height: var(--tt-lh-titre);
  color: var(--tt-encre);
  text-decoration: none;
}

.wc-block-components-product-name:hover { color: var(--tt-brique); }

.wc-block-components-product-metadata,
.wc-block-components-product-metadata__description {
  font-size: var(--tt-fs-meta);
  color: var(--tt-texte-2);
}

.wc-block-components-product-price__value,
.wc-block-components-totals-item__value {
  font-family: var(--tt-sans);
  font-weight: 600;
  color: var(--tt-encre);
}

/* Les lignes du panier, à l'échelle du site (Marie, 17/09 : « beaucoup trop
   petit »). WooCommerce fixe la vignette à 80 px et le texte à 14 px avec des
   sélecteurs plus précis : on reprend la main au même niveau. */
.wc-block-cart .wc-block-cart-items td.wc-block-cart-item__image { width: 132px; }

.wc-block-cart .wc-block-cart-items .wc-block-cart-item__image img {
  width: 100%;
  max-width: 132px;
  height: auto;
}

.wc-block-cart .wc-block-cart-items .wc-block-cart-item__product .wc-block-components-product-name {
  font-size: var(--tt-fs-h3);
  line-height: var(--tt-lh-titre);
}

.wc-block-cart .wc-block-cart-items .wc-block-cart-item__prices,
.wc-block-cart .wc-block-cart-items .wc-block-components-product-price__value,
.wc-block-cart .wc-block-cart-items .wc-block-cart-item__total {
  font-size: var(--tt-fs-corps);
}

.wc-block-cart .wc-block-cart-items .wc-block-components-product-metadata {
  font-size: var(--tt-fs-corps-s);
}

/* Téléphone : la ligne passe en grille, vignette à gauche. */
.wc-block-cart.is-mobile .wc-block-cart-items .wc-block-cart-items__row,
.wc-block-cart.is-small .wc-block-cart-items .wc-block-cart-items__row { grid-template-columns: 96px 1fr; }

.wc-block-cart.is-mobile .wc-block-cart-items td.wc-block-cart-item__image,
.wc-block-cart.is-small .wc-block-cart-items td.wc-block-cart-item__image { width: auto; }

.wc-block-cart.is-mobile .wc-block-cart-items .wc-block-cart-item__product .wc-block-components-product-name,
.wc-block-cart.is-small .wc-block-cart-items .wc-block-cart-item__product .wc-block-components-product-name { font-size: var(--tt-fs-carte); }

.wc-block-components-quantity-selector {
  border: 1px solid var(--tt-bord-champ);
  border-radius: var(--tt-radius);
}

.wc-block-components-quantity-selector__button {
  color: var(--tt-encre);
  background: var(--tt-papier);
  border: 0;
}

.wc-block-components-quantity-selector__button:hover { background: var(--tt-papier-gris); }

/* Le récapitulatif : encart beige, comme les blocs d'accent du site. */
.wp-block-woocommerce-cart-totals-block,
.wc-block-components-sidebar {
  padding: var(--tt-bloc);
  background: var(--tt-papier-alt);
  border: 1px solid var(--tt-bord-beige);
}

.wp-block-woocommerce-cart-totals-block .wc-block-components-totals-item,
.wc-block-components-sidebar .wc-block-components-totals-item { border-color: var(--tt-bord-beige); }

.wc-block-components-totals-footer-item {
  font-family: var(--tt-serif);
  font-size: var(--tt-fs-h3);
  border-top: 1px solid var(--tt-bord-beige);
}

.wc-block-components-title,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-title {
  font-family: var(--tt-serif);
  font-weight: 400;
  letter-spacing: var(--tt-ls-titre);
}

/* Panier vide : le message respire, la grille de suggestions reste au thème. */
.wp-block-woocommerce-empty-cart-block {
  padding-top: var(--tt-bloc);
  text-align: left;
}

.wp-block-woocommerce-empty-cart-block > h2 {
  font-family: var(--tt-serif);
  font-size: var(--tt-fs-h2);
  font-weight: 400;
}

.wc-block-components-notice-banner {
  border-radius: var(--tt-radius);
  font-size: var(--tt-fs-corps-s);
}

.wc-block-components-notice-banner.is-error { border-color: var(--tt-brique); }
.wc-block-components-notice-banner.is-success { border-color: var(--tt-stock); }

/* --------------------------------------------------------------------------
   5. Mon compte
   -------------------------------------------------------------------------- */

.woocommerce-account .woocommerce {
  display: grid;
  grid-template-columns: minmax(0, 15rem) 1fr;   /* 240px : colonne de navigation */
  gap: var(--tt-section);
  align-items: start;
}

/* Connexion et création de compte : une seule colonne, formulaire encadré. */
.woocommerce-account:not(.logged-in) .woocommerce { display: block; }

.woocommerce-MyAccount-navigation ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--tt-filet);
}

.woocommerce-MyAccount-navigation li { border-bottom: var(--tt-filet); }

.woocommerce-MyAccount-navigation a {
  display: block;
  padding: var(--tt-gap-s) 0;
  font-size: var(--tt-fs-corps-s);
  color: var(--tt-encre);
  text-decoration: none;
  transition: color var(--tt-t-rapide);
}

.woocommerce-MyAccount-navigation a:hover { color: var(--tt-brique); }

.woocommerce-MyAccount-navigation li.is-active a {
  font-weight: 600;
  color: var(--tt-brique);
}

.woocommerce-MyAccount-content { min-width: 0; }

.woocommerce-MyAccount-content p,
.woocommerce-MyAccount-content address { font-size: var(--tt-fs-corps-s); }

.woocommerce form.login,
.woocommerce form.register,
.woocommerce-ResetPassword {
  max-width: 26rem;   /* 416px : un formulaire de connexion ne s'étale pas */
  margin: var(--tt-bloc) 0 0;
  padding: var(--tt-bloc);
  border: var(--tt-filet);
}

.woocommerce form.login h2,
.woocommerce form.register h2 { margin-top: 0; }

.woocommerce-form-login__rememberme { font-size: var(--tt-fs-meta); color: var(--tt-texte-2); }

.woocommerce table.shop_table {
  width: 100%;
  border: 0;
  border-collapse: collapse;
  font-size: var(--tt-fs-corps-s);
}

.woocommerce table.shop_table th {
  padding: var(--tt-gap-s) var(--tt-gap-s) var(--tt-gap-s) 0;
  font-size: var(--tt-fs-micro);
  font-weight: 600;
  letter-spacing: var(--tt-ls-micro);
  text-transform: uppercase;
  color: var(--tt-texte-2);
  text-align: left;
  border-bottom: var(--tt-filet);
}

.woocommerce table.shop_table td {
  padding: var(--tt-gap-s) var(--tt-gap-s) var(--tt-gap-s) 0;
  border-bottom: var(--tt-filet);
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  margin: 0 0 var(--tt-bloc);
  padding: var(--tt-gap-s) var(--tt-bloc);
  font-size: var(--tt-fs-corps-s);
  background: var(--tt-papier-alt);
  border: 0;
  border-left: var(--tt-filet-accent);
  list-style: none;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { content: none; }

/* --------------------------------------------------------------------------
   6. Points de rupture
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .woocommerce-account .woocommerce { grid-template-columns: 1fr; gap: var(--tt-bloc); }
}

@media (max-width: 600px) {
  .tt-boutique__titre { font-size: var(--tt-fs-h2); }

  .wp-block-woocommerce-cart-totals-block,
  .wc-block-components-sidebar { padding: var(--tt-gap-s); }

  .woocommerce form.login,
  .woocommerce form.register,
  .woocommerce-ResetPassword { padding: var(--tt-gap-s); }
}