/* ============================================================
   RHABILLAGE DE STOREFRONT — écrit à la main, versionné.
   Ne contient QUE des surcharges de sélecteurs Storefront et
   WooCommerce. Les valeurs viennent de tokens.css : aucune
   couleur en dur ici (invariant 3).
   Chargé en DERNIER, après storefront/style.css.
   ============================================================ */

body,
button,
input,
select,
textarea {
  font-family: 'Montserrat', system-ui, sans-serif;
  color: var(--txt);
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.woocommerce-checkout h3 {
  font-family: 'Montserrat', system-ui, sans-serif;
  color: var(--marine);
  font-weight: 800;
  letter-spacing: -.01em;
}

/* Le bouton de Storefront est un rectangle gris ; celui du site est une
   pilule dorée. C'est le signal de marque le plus visible du parcours.

   Les VALEURS viennent de `components.css` (`--btn-*`), pas d'une recopie :
   le balisage diffère — `.btn` sur le front, `.button` posé par Storefront
   ici — mais un bouton qui ne se ressemblerait plus d'un système à l'autre
   est exactement ce que le socle partagé doit empêcher. C'était l'écart
   relevé en revue finale (I4) : padding, rayon, graisse, transition et ombre
   écrits à l'identique dans les deux fichiers, libres de diverger. */
.button,
button.button,
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce .button.alt {
  background: var(--or);
  color: var(--marine);
  border: 0;
  border-radius: var(--btn-radius);
  font-weight: var(--btn-weight);
  padding: var(--btn-padding);
  transition: var(--btn-transition);
}

.button:hover,
button.button:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .button.alt:hover {
  background: var(--or);
  color: var(--marine);
  transform: var(--btn-lift);
  /* L'ombre dorée vit dans `components.css` (`--btn-ombre-or`), avec le
     commentaire du RULING T6-a sur sa couleur en dur : elle n'est plus
     écrite qu'une fois pour les deux systèmes. */
  box-shadow: var(--btn-ombre-or);
}

/* Bandeau et pied de Storefront aux couleurs du site. */
.site-header,
.site-footer {
  background: var(--marine-d);
  color: #fff;
}

.site-header a,
.site-footer a {
  color: #fff;
}

/* Récapitulatif de commande et blocs de confirmation. */
.woocommerce-checkout-review-order,
.woocommerce-order-details,
.woocommerce-customer-details {
  background: var(--sable);
  border-radius: 14px;
  padding: 22px;
}

.woocommerce-info,
.woocommerce-message {
  border-top-color: var(--bleu);
}

/* ─── Espace client ───────────────────────────────────────── */

.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation a {
  display: block;
  padding: 12px 16px;
  border-radius: 10px;
  color: var(--marine);
  font-weight: 600;
  text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation .is-active a {
  background: var(--marine);
  color: #fff;
}

.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-account form.login,
.woocommerce-account form.register {
  background: var(--sable);
  border: 0;
  border-radius: 14px;
  padding: 26px;
}

/* Pas de règle d'annulation : l'arbitrage du 2026-08-24 est « consultation
   seule ». Il n'y a rien à styliser parce qu'il n'y a rien à proposer. Le
   bouton natif de Bookings n'apparaît déjà pas ici : le réglage « le client
   peut annuler » est désactivé au niveau du produit — un réglage relayé,
   jamais réimplémenté (invariant 2). Voir tests/theme/compte.spec.js. */

.pd-contact {
  margin-top: 18px;
  padding: 14px 18px;
  background: var(--creme);
  border-radius: 10px;
  font-size: 14px;
}

/* Accessibilité : le contour de focus est DÉFINI dans
   `shared/design/components.css`, où la spec de phase §4.2 l'annonçait depuis
   le début — et d'où il profite aussi aux 28 pages du front, qui n'avaient
   aucune règle de focus (revue finale, I4).

   Ce qui suit ne le redéfinit pas : il le REPOSE là où Storefront l'emporte.
   Storefront imprime une feuille en ligne (`wp_add_inline_style`, donc APRÈS
   nos deux feuilles du socle) posant `outline-color:#7f54b3` sur
   `.button.alt:focus` — spécificité 0-2-1 contre 0-1-1 pour
   `button:focus-visible`. Mesuré : le bouton de paiement recevait un contour
   qui n'était pas le nôtre. La VALEUR reste celle du socle
   (`--focus-contour`) : un seul endroit à changer. */
.button:focus-visible,
button.button:focus-visible,
input[type="submit"]:focus-visible,
.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce #respond input#submit:focus-visible,
.woocommerce .button.alt:focus-visible {
  outline: var(--focus-contour);
  outline-offset: var(--focus-decalage);
}

/* Tableaux de commande sur mobile — paiement, confirmation, commande vue.
   Signalé et mesuré le 2026-09-14 à 390 px : le tableau faisait 411 px (444 sur la
   confirmation) dans un conteneur de 345, et `#page` (`overflow-x: hidden`) rognait la
   colonne des totaux. Cause : Storefront pose `1.41575em` de marge intérieure de chaque
   côté de chaque cellule — 136 px sur trois colonnes — et ni l'encadré de réservation,
   ni le prix, ni la quantité ne se coupent.
   On rend la largeur aux contenus plutôt que de faire défiler le tableau : un total
   qu'il faut aller chercher sur le côté est un total que le client ne voit pas. */
@media (max-width: 600px) {
  .woocommerce table.shop_table th,
  .woocommerce table.shop_table td {
    padding-left: .5em;
    padding-right: .5em;
  }

  /* Le badge de statut (« Non payé ») flotte à droite du numéro de réservation. Dans
     une colonne étroite, la ligne suivante (la date) n'avait plus que quelques pixels
     à côté de lui, et le `overflow-wrap: break-word` de Storefront coupait le mot :
     « se / ptembre », mesuré à 360 px. Sur mobile, il passe sous le numéro. */
  .woocommerce table.shop_table .wc-booking-summary-number span {
    float: none;
    display: inline-block;
    margin: .4em 0 0;
  }

  /* Boutons « Payer » / « Annuler » de la confirmation : la pilule du site garde sa
     forme, mais ses 28 px de marge latérale fixaient à 123 px la colonne des totaux,
     et la confirmation débordait encore à 320 px. */
  .woocommerce table.shop_table .order-actions-button {
    padding-left: 1em;
    padding-right: 1em;
  }
}