/*
Theme Name: Atelier Inoly
Theme URI: https://atelierinoly.fr
Description: Thème enfant de Twenty Twenty-Five pour l'Atelier Inoly. Toute la
             charte (couleurs, typographie, espacements) vit dans theme.json.
             Ce fichier ne contient que ce que theme.json ne sait pas exprimer.
Author: Refonte 2026
Template: twentytwentyfive
Version: 0.14.5
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 7.4
Text Domain: atelier-inoly
*/

/* ------------------------------------------------------------------
   Règles hors theme.json.
   Avant d'ajouter quoi que ce soit ici, vérifier que ça ne se règle pas
   dans theme.json : ce qui vit là-bas est réutilisable par Gwen dans
   l'éditeur, ce qui vit ici ne l'est pas.
   ------------------------------------------------------------------ */

/* ------------------------------------------------------------------
   Ce que le markup du thème ajoute à celui de la maquette.

   `.label-sur-encre` et `.btn-sur-encre` ne sont plus ici : elles ont
   rejoint maquette.html, qui les définit désormais pour la maquette comme
   pour le thème. Une seule définition, un seul endroit où corriger.
   ------------------------------------------------------------------ */

/* Les sections se touchent, comme dans la maquette : chacune porte son propre
   rythme vertical avec son `padding-block`. Twenty Twenty-Five, lui, espace
   les blocs de premier niveau et les enfants du <main> de `blockGap` — ce qui
   ouvrait une bande de fond de 24 px entre l'en-tête et le bandeau vert, et
   entre chaque section.

   On neutralise cet écart ici plutôt que de mettre `blockGap` à 0 dans
   theme.json : là-bas il s'appliquerait aussi aux contenus que Gwen écrit
   dans l'éditeur (CGV, pages libres), où l'espacement entre blocs est
   légitime. Les deux sélecteurs battent ceux de WordPress, qui sont enveloppés
   dans `:where()` et pèsent donc zéro. */
.wp-site-blocks > *,
main.wp-block-group > * {
  margin-block-start: 0;
}

/* WooCommerce charge `.woocommerce img { height: auto }` sur toutes les pages
   de boutique. Ce sélecteur pèse (0,1,1) et bat le `.brand-mk` de la maquette,
   qui ne pèse que (0,1,0) : la plume de l'en-tête reprenait sa taille
   naturelle — 132 px au lieu de 78 — et débordait du bandeau. Le logo du pied
   de page y échappait déjà, `.foot .brand-mk` étant plus spécifique.

   On remonte donc la spécificité côté en-tête, et on redit la valeur mobile :
   sans elle, cette correction écraserait aussi la réduction à 64 px. Les deux
   valeurs doivent suivre celles de maquette.css si elles y changent. */
.head .brand-mk { height: 78px; }

@media (max-width: 820px) {
  .head .brand-mk { height: 64px; }
}

/* ------------------------------------------------------------------
   La fiche produit : ce que le markup du thème ajoute à la maquette.

   Dans le prototype, la quantité est un <span> que le JavaScript incrémente,
   et le choix du coloris un <button> qui recharge un objet en mémoire. Ici il
   faut un vrai champ de formulaire — l'ajout au panier doit fonctionner sans
   JavaScript — et de vrais liens vers les autres pièces du modèle.
   ------------------------------------------------------------------ */

/* Le champ prend la place et l'allure du <span> de la maquette. */
.qte .qte-val {
  width: 46px;
  height: 44px;
  border: none;
  background: none;
  text-align: center;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--ink);
  -moz-appearance: textfield;
}

.qte .qte-val::-webkit-outer-spin-button,
.qte .qte-val::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Le formulaire s'intercale entre .fiche-info et ses enfants : sans ça, ses
   deux blocs se collent, la colonne étant en flex avec un `gap`. */
.fiche-achat {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Les pastilles de coloris sont des liens et non des boutons : un lien est
   `inline`, la mise en grille de .teinte-btn ne suffit pas à lui donner ses
   dimensions. */
a.teinte-btn {
  display: grid;
  text-decoration: none;
}

/* Le nom de la teinte, pour les lecteurs d'écran : la pastille seule ne dit
   rien, et `title` n'est pas restitué de façon fiable. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Les avis de WooCommerce arrivent avec leur propre habillage — barre verte,
   coins arrondis, bouton bleu. On les ramène à la charte sans toucher à leur
   markup, qui est produit par WooCommerce. */
/* Les modificateurs `.is-success` / `.is-info` / `.is-error` de WooCommerce
   pèsent deux classes : viser le seul nom de base laissait le vert d'origine.
   Même piège que `.woocommerce img` sur le logo de l'en-tête. */
.wc-block-components-notice-banner.is-success,
.wc-block-components-notice-banner.is-info,
.wc-block-components-notice-banner,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  background: var(--accent-wash);
  border: 1px solid var(--accent);
  border-radius: 0;
  color: var(--ink);
  padding: 14px 18px;
  margin: 0 0 22px;
  font-size: 14.5px;
  list-style: none;
}

.wc-block-components-notice-banner.is-error,
.wc-block-components-notice-banner.is-warning,
.woocommerce-error {
  background: var(--corail-wash);
  border-color: var(--corail);
}

/* WooCommerce sert désormais ses avis dans le markup des blocs
   (.wc-block-components-notice-banner), pas dans l'ancien .woocommerce-message :
   viser le seul ancien nom laissait la barre verte d'origine à l'écran. Les
   deux sont ciblés, les installations n'ayant pas toutes basculé. */
.wc-block-components-notice-banner > svg {
  display: none;
}

.wc-block-components-notice-banner .wc-forward {
  float: right;
  margin-left: 16px;
}

.woocommerce-message .button,
.woocommerce-info .button {
  float: right;
  margin-left: 16px;
  font-size: 13px;
}

/* ------------------------------------------------------------------
   Le panier : ce que le markup du thème ajoute à celui de la maquette.

   Le prototype recalculait tout en JavaScript et n'avait ni formulaire, ni
   champ de quantité par ligne, ni bouton de mise à jour. Ces règles habillent
   ce que WooCommerce impose d'ajouter pour que le panier fonctionne sans
   script.
   ------------------------------------------------------------------ */

.panier-tete {
  padding-block: 20px 4px;
}

.panier-tete h1 {
  font-size: clamp(26px, 3vw, 34px);
}

/* La quantité par ligne : le prototype affichait un simple « Quantité : 2 ». */
.ligne-qte {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}

.ligne-qte label {
  font-size: 13px;
  color: var(--muted);
}

.ligne-qte .qte button {
  width: 32px;
  height: 36px;
}

.ligne-qte .qte-val {
  height: 36px;
  width: 40px;
}

.panier-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 18px;
}

.panier-aide {
  font-size: 12.5px;
  color: var(--muted);
}

/* Le retrait est un lien : `.del` était pensé pour un <button>, qui n'a ni
   soulignement ni couleur héritée. */
a.del {
  display: inline-block;
}

/* Le bouton du récapitulatif prend toute la largeur de la colonne. */
.recap-cta {
  width: 100%;
}

.recap-note {
  font-size: 12.5px;
  color: var(--muted);
}

.titre-croix {
  font-size: 24px;
}

/* « Calculée à l'étape suivante » n'est pas un montant : il ne doit pas porter
   la fonte à chasse fixe des chiffres du récapitulatif. */
.port-attente {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--muted);
}

/* Dans le panier vide, le bouton a besoin d'air sous le message. */
.panier .empty .btn {
  margin-top: 18px;
}

/* ------------------------------------------------------------------
   Sur mesure : la maquette portait ces réglages en style inline, ce qu'un
   pattern ne doit pas faire. Ils deviennent des classes.
   ------------------------------------------------------------------ */

.sm-colonne {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.sm-texte {
  margin-top: 16px;
  color: var(--ink-2);
  font-size: 15px;
  max-width: 56ch;
}

.sm-form-titre {
  font-size: 26px;
}

.sm-qui {
  border-bottom: 1px solid var(--line);
  padding-bottom: 16px;
}

/* Les erreurs de saisie, dans le ton du corail — la couleur d'alerte de la
   charte, restée en réserve jusqu'ici. */
.sm-erreurs {
  background: var(--corail-wash);
  border: 1px solid var(--corail);
  padding: 13px 16px;
  font-size: 14px;
}

.sm-erreurs p + p {
  margin-top: 6px;
}

.sm-merci {
  gap: 16px;
}

/* Le champ leurre anti-robot : hors de l'écran plutôt que `display:none`,
   que certains robots savent détecter. */
.sm-leurre {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* La maquette terminait ses pages par une cale : `<div style="height:80px">`.
   Un pattern n'a pas a poser de div vide, et sans elle la derniere rangee de
   vignettes vient toucher le pied de page — visible des qu'une page est courte,
   une categorie a deux pieces par exemple. */
.page-fin {
  padding-bottom: clamp(48px, 6vw, 80px);
}

/* Le titre de la vignette produit ne se souligne pas : la vignette entière
   est déjà cliquable, un soulignement de plus surcharge la grille. */
.card-lien { text-decoration: none; }

/* La mention « Épuisé » du pied de vignette, plus discrète que le prix. */
.card-epuise { font-size: 10px; }

/* L'étiquette et le titre qu'elle annonce se touchent presque.
   Volontairement limité aux sections claires : .atelier gère son propre
   rythme avec un `gap` de flex, un margin l'y décalerait. */
:where(.sec, .bande) .label + h2 { margin-top: 10px; }

/* Mesure de lecture : theme.json ne sait pas cibler « les paragraphes
   d'un contenu long sans toucher aux blocs de mise en page ». */
.entry-content > p,
.entry-content > ul,
.entry-content > ol {
  max-width: var(--wp--custom--mesure-texte);
}

/* Les titres respirent : text-wrap n'est pas exposé par theme.json. */
h1, h2, h3, .wp-block-heading {
  text-wrap: balance;
}

/* Chiffres alignés partout où ils se comparent (prix, totaux, stock). */
.woocommerce-Price-amount,
.wc-block-components-totals-item__value,
.wc-block-formatted-money-amount {
  font-variant-numeric: tabular-nums;
}

/* Focus visible conservé au clavier, y compris sur les blocs WooCommerce
   qui remettent parfois outline:none. */
:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--wp--preset--color--turquoise);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ------------------------------------------------------------------
   La commande
   ------------------------------------------------------------------
   La maquette ne comportait pas cet écran. Ces règles habillent le
   markup du code court `[woocommerce_checkout]` avec le vocabulaire
   des autres pages — elles ne peuvent donc pas vivre dans
   maquette.html, qui ne contient pas ce markup.

   Principe tenu partout ici : viser les identifiants et les classes
   composées de WooCommerce, jamais un sélecteur d'élément nu. Une
   règle sur `input` ou `select` seul finirait par frapper le reste du
   site — c'est exactement ce que faisait LWS Affiliation avec son
   `select { height: 36px }`, qui rognait le texte de la page sur
   mesure.
   ------------------------------------------------------------------ */

.cmd-lede {
  margin-top: 8px;
  max-width: 56ch;
  color: var(--muted);
  font-size: 15px;
}

/* Les repères de confiance, juste avant le formulaire. */
.cmd-rassure {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding: 14px 0 22px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.cmd-rassure b { color: var(--accent-2); }

/* Deux colonnes : la saisie à gauche, le récapitulatif collant à droite.
   En dessous de 880px tout s'empile, comme le panier. */
.cmd .woocommerce { padding-top: 30px; }

@media (min-width: 880px) {
  .cmd form.checkout {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    /* La rangee du titre prend la hauteur de son texte, le recapitulatif
       prend le reste. Sans ca, la colonne de gauche etant plus haute, la
       grille etirait la rangee du titre et laissait 192 px de vide sous
       « Votre commande ». */
    grid-template-rows: auto 1fr;
    align-items: start;
    gap: clamp(24px, 3.5vw, 44px);
  }

  .cmd #customer_details { grid-column: 1; grid-row: 1 / span 2; }
  .cmd #order_review_heading { grid-column: 2; grid-row: 1; }
  .cmd #order_review { grid-column: 2; grid-row: 2; position: sticky; top: 88px; }
}

/* WooCommerce range facturation et livraison dans `.col2-set`, deux
   sous-colonnes flottees a 50%. Dans notre grille, ca faisait trois colonnes
   ecrasees au lieu de deux. On les remet l'une sous l'autre : la colonne de
   gauche est deja assez etroite. */
.cmd #customer_details.col2-set { display: block; }

.cmd #customer_details .col-1,
.cmd #customer_details .col-2 {
  float: none;
  width: 100%;
}

.cmd #customer_details .col-2 { margin-top: 28px; }

/* Les intertitres du formulaire, dans la typographie de la maquette. */
.cmd .woocommerce-billing-fields h3,
.cmd .woocommerce-shipping-fields h3,
.cmd .woocommerce-additional-fields h3,
.cmd #order_review_heading {
  margin-bottom: 14px;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 400;
}

.cmd .woocommerce-shipping-fields,
.cmd .woocommerce-additional-fields { margin-top: 28px; }

/* Les champs : mêmes proportions que `.champ` de la page sur mesure. */
.cmd .form-row {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0 0 14px;
  padding: 0;
}

.cmd .form-row label {
  font-size: 13.5px;
  font-weight: 600;
}

.cmd .form-row .required {
  color: var(--accent-2);
  text-decoration: none;
}

.cmd .form-row .input-text,
.cmd .form-row select,
.cmd .form-row textarea {
  width: 100%;
  height: auto;
  max-width: none;
  padding: 11px 13px;
  border: 1px solid var(--line-2);
  background: var(--ground);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
}

.cmd .form-row textarea { min-height: 110px; resize: vertical; }

/* WooCommerce pose `.woocommerce-invalid` sur la ligne, pas sur le champ. */
.cmd .form-row.woocommerce-invalid .input-text,
.cmd .form-row.woocommerce-invalid select {
  border-color: var(--corail);
}

/* Deux champs sur une ligne quand WooCommerce le demande (prénom / nom). */
@media (min-width: 560px) {
  .cmd .form-row-first,
  .cmd .form-row-last {
    display: inline-flex;
    width: calc(50% - 7px);
    vertical-align: top;
  }

  .cmd .form-row-first { margin-right: 14px; }
}

/* Le récapitulatif reprend l'encadré `.recap` du panier. */
.cmd #order_review {
  padding: 22px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.cmd .woocommerce-checkout-review-order-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
}

.cmd .woocommerce-checkout-review-order-table th,
.cmd .woocommerce-checkout-review-order-table td {
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-weight: 400;
}

/* Le chiffre s'aligne a droite en chasse fixe ; la prose non. La ligne
   « Expedition » affiche « Saisissez votre adresse pour voir les options »
   tant que le pays n'est pas renseigne — en mono et ferre a droite, c'etait
   illisible. */
.cmd .woocommerce-checkout-review-order-table .product-total,
.cmd .woocommerce-checkout-review-order-table .cart-subtotal td,
.cmd .woocommerce-checkout-review-order-table .order-total td,
.cmd .woocommerce-checkout-review-order-table th:last-child {
  text-align: right;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.cmd .woocommerce-checkout-review-order-table .woocommerce-shipping-totals td {
  color: var(--muted);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
}

.cmd .woocommerce-checkout-review-order-table .order-total th,
.cmd .woocommerce-checkout-review-order-table .order-total td {
  border-bottom: none;
  font-size: 17px;
}

.cmd .woocommerce-checkout-review-order-table .order-total td { font-size: 19px; }

/* Le bloc de paiement et son bouton. */
.cmd #payment { margin-top: 18px; }

.cmd #payment .wc_payment_methods {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.cmd #payment .wc_payment_method label {
  display: inline;
  font-size: 14.5px;
  font-weight: 600;
}

.cmd #payment .payment_box {
  margin: 8px 0 14px;
  padding: 12px 14px;
  background: var(--accent-wash);
  color: var(--ink-2);
  font-size: 13.5px;
}

.cmd #payment .place-order { margin: 0; }

.cmd #place_order { width: 100%; }

.cmd .woocommerce-terms-and-conditions-wrapper {
  margin-bottom: 14px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

/* Les moyens de paiement et la mention légale, sous le formulaire. */
.cmd-paiements { margin-top: 26px; }

.cmd-legal {
  margin-top: 12px;
  max-width: 72ch;
}

/* Le bandeau du code promo, sur la page de commande.
   ---------------------------------------------------
   WooCommerce le sert dans le markup d'un avis système
   (`.wc-block-components-notice-banner.is-info`), et notre règle générale sur
   les avis lui donnait donc le lavis clair — froid, et lu comme une alerte
   alors que c'est une offre.

   Ici c'est un bandeau, pas un avis : la charte donne le vert plein à cette
   fonction, avec le doré pour ce qui se clique. Le ciblage est volontairement
   étroit — `.cmd` puis le conteneur du basculement — pour que les vrais avis
   (erreur de saisie, panier mis à jour) gardent leur habillage clair. */
.cmd .woocommerce-form-coupon-toggle .wc-block-components-notice-banner.is-info {
  align-items: center;
  gap: 10px;
  padding: 15px 20px;
  border: none;
  background: var(--encre);
  color: var(--ground);
  font-size: 14.5px;
}

.cmd .woocommerce-form-coupon-toggle .wc-block-components-notice-banner.is-info a {
  color: var(--accent-sur-encre);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Le formulaire qui se déplie sous le bandeau. */
.cmd form.checkout_coupon {
  margin: 0 0 22px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.cmd form.checkout_coupon p:first-child {
  margin-bottom: 12px;
  color: var(--ink-2);
  font-size: 14px;
}

/* Le champ et son bouton sur une seule ligne, plutôt que les deux moitiés
   flottées de WooCommerce qui laissent un décrochage au milieu. */
@media (min-width: 560px) {
  .cmd form.checkout_coupon .form-row-first,
  .cmd form.checkout_coupon .form-row-last {
    display: inline-flex;
    width: auto;
    margin: 0;
    vertical-align: bottom;
  }

  .cmd form.checkout_coupon .form-row-first { width: calc(100% - 210px); margin-right: 10px; }
  .cmd form.checkout_coupon .form-row-last  { width: 200px; }
}

.cmd form.checkout_coupon .button { width: 100%; }

/* ------------------------------------------------------------------
   La page « commande reçue »
   ------------------------------------------------------------------
   Le dernier écran que voit la cliente, et celui qu'elle relit en
   attendant son colis. WooCommerce le rend avec ses propres blocs
   (`wc-block-order-confirmation-*`), et notre composition ne s'y
   substitue pas : le garde `is_wc_endpoint_url()` de inc/commande.php
   laisse volontairement WooCommerce faire, pour que les crochets des
   passerelles qui s'y greffent restent tous appelés. On l'habille
   donc, on ne le remplace pas.
   ------------------------------------------------------------------ */

.wc-block-order-confirmation-status h1 {
  font-family: var(--display);
  font-size: clamp(30px, 4vw, 42px);
  font-weight: 400;
}

.wc-block-order-confirmation-status p {
  margin-top: 8px;
  max-width: 56ch;
  color: var(--ink-2);
  font-size: 16px;
}

/* Le bandeau de résumé : numéro, date, total, e-mail, paiement.
   La liste de WooCommerce arrive à plat ; on lui donne la même
   typographie que les repères de la page de commande. */
.wc-block-order-confirmation-summary {
  margin-top: 26px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.wc-block-order-confirmation-summary-list {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 36px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wc-block-order-confirmation-summary-list-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
}

.wc-block-order-confirmation-summary-list-item__key {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.wc-block-order-confirmation-summary-list-item__value {
  font-size: 15px;
}

/* Les intertitres « Détails de la commande », « Adresse de livraison »… */
.wc-block-order-confirmation-totals-wrapper > h2,
.wc-block-order-confirmation-shipping-wrapper > h2,
.wc-block-order-confirmation-billing-wrapper > h2,
.wc-block-order-confirmation-additional-fields-wrapper > h2 {
  margin: 34px 0 12px;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 400;
}

/* Le tableau du récapitulatif reprend celui de la page de commande :
   filets fins, montants en chasse fixe alignés à droite. */
.wc-block-order-confirmation-totals__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
}

.wc-block-order-confirmation-totals__table th,
.wc-block-order-confirmation-totals__table td {
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  background: none;
  text-align: left;
  font-weight: 400;
}

.wc-block-order-confirmation-totals__table thead th {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.wc-block-order-confirmation-totals__table td:last-child,
.wc-block-order-confirmation-totals__table th:last-child {
  text-align: right;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.wc-block-order-confirmation-totals__table tfoot tr:last-child th,
.wc-block-order-confirmation-totals__table tfoot tr:last-child td {
  border-bottom: none;
  font-size: 17px;
}

.wc-block-order-confirmation-totals__table tfoot tr:last-child td { font-size: 19px; }

/* Les deux adresses, côte à côte.
   Le cadre porte sur le bloc, pas sur `<address>` : WooCommerce sort le
   téléphone dans un `<p>` frère, qui restait sinon en dehors de l'encadré. */
.wc-block-order-confirmation-shipping-address,
.wc-block-order-confirmation-billing-address {
  padding: 16px 18px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.6;
}

.wc-block-order-confirmation-shipping-address address,
.wc-block-order-confirmation-billing-address address {
  font-style: normal;
}

.woocommerce-customer-details--phone {
  margin-top: 6px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 13px;
}

/* NOTE — les intertitres h2 de cette page portent un `style=` en ligne, posé
   par WooCommerce (`font-size:clamp(15.7px … 24px)`). Un attribut en ligne bat
   toute règle de feuille de style : notre `font-size: 22px` ci-dessus reste
   sans effet sur eux, et ils s'affichent à 24 px. La famille, elle, passe —
   ils sont bien en serif. On laisse : 24 px est cohérent, et forcer la taille
   demanderait un `!important` qu'on paierait à la prochaine mise à jour. */

/* Les coordonnées bancaires du virement, quand la passerelle en fournit.
   Sans elles la cliente ne peut pas payer : on les met en évidence
   plutôt que de les laisser en note de bas de page. */
.wc-block-order-confirmation-additional-information .wc-bacs-bank-details-heading,
.woocommerce-bacs-bank-details h2 {
  margin: 34px 0 12px;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 400;
}

.wc-bacs-bank-details {
  margin: 0;
  padding: 16px 18px;
  border: 1px solid var(--accent);
  background: var(--accent-wash);
  list-style: none;
  font-size: 14.5px;
}

.wc-bacs-bank-details li + li { margin-top: 5px; }

/* ------------------------------------------------------------------
   Mon compte
   ------------------------------------------------------------------
   Les écrans du compte client : connexion, inscription, tableau de
   bord, commandes, adresses. WooCommerce les rend avec ses gabarits
   classiques ; on les habille, comme la page de commande.

   Portée : on ne vise jamais `.form-row` ni `.button` seuls — ces
   noms existent aussi sur le checkout, qui a ses propres règles sous
   `.cmd`. Tout est donc accroché à `#customer_login`, à
   `.woocommerce-MyAccount-*` ou aux classes composées de WooCommerce.
   ------------------------------------------------------------------ */

/* --- Connexion et inscription, côte à côte --- */

/* Même piège que sur le checkout : `.col2-set` flotte ses deux colonnes
   à 50 %. On repasse en grille, qui gère seule le repli en mobile. */
#customer_login.col2-set {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 44px);
  margin-top: 8px;
}

@media (min-width: 720px) {
  #customer_login.col2-set { grid-template-columns: 1fr 1fr; }

  /* Placement explicite. Laissé à l'auto-placement, WooCommerce envoyait la
     connexion en colonne 2 ligne 1 et l'inscription en colonne 1 ligne 2 —
     mesuré : connexion à x=654 y=236, inscription à x=132 y=784. Je n'ai pas
     identifié la règle responsable (ni `order`, ni `float`, ni `direction`,
     ni `grid-column` ne l'expliquaient). Plutôt que de deviner, on nomme la
     place de chaque colonne : le résultat ne dépend alors plus de personne. */
  #customer_login .col-1 { grid-column: 1; grid-row: 1; }
  #customer_login .col-2 { grid-column: 2; grid-row: 1; }
}

#customer_login .col-1,
#customer_login .col-2 {
  float: none;
  width: 100%;
}

#customer_login h2 {
  margin-bottom: 14px;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 400;
}

.woocommerce-form-login,
.woocommerce-form-register {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid var(--line);
  background: var(--surface);
}

#customer_login .woocommerce-form-row,
.woocommerce-EditAccountForm .woocommerce-form-row {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
  padding: 0;
}

#customer_login .woocommerce-form-row label,
.woocommerce-EditAccountForm .woocommerce-form-row > label {
  font-size: 13.5px;
  font-weight: 600;
}

#customer_login .required,
.woocommerce-EditAccountForm .required {
  color: var(--accent-2);
  text-decoration: none;
}

#customer_login .woocommerce-Input--text,
.woocommerce-EditAccountForm .woocommerce-Input--text,
.woocommerce-EditAccountForm .input-text {
  width: 100%;
  height: auto;
  max-width: none;
  padding: 11px 13px;
  border: 1px solid var(--line-2);
  background: var(--ground);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
}

/* « Se souvenir de moi » : la case et son intitulé sur une seule ligne. */
.woocommerce-form-login__rememberme {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 400;
}

.woocommerce-form-login__rememberme input { margin: 0; }

#customer_login .woocommerce-button,
.woocommerce-EditAccountForm .woocommerce-Button {
  width: 100%;
}

.woocommerce-LostPassword {
  margin: 0;
  font-size: 13px;
}

.woocommerce-privacy-policy-text p {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

/* --- Une fois connectée : menu latéral et contenu --- */

/* PORTEE — tout ce bloc est prefixe par `.woocommerce-account`.
   WooCommerce sert `woocommerce-blocktheme.css`, qui pose
   `.woocommerce-account .woocommerce-MyAccount-navigation li { padding: 1em 0 }`
   — deux classes, donc plus specifique que notre
   `.woocommerce-MyAccount-navigation li`. Nos regles perdaient en silence :
   mesure a l'appui, les lignes faisaient 77 px au lieu de 43. Ajouter une
   classe suffit ; un `!important` aurait masque le probleme sans le regler.
   C'est le meme piege que `.woocommerce img` sur le logo.

   Le menu du compte est une LISTE VERTICALE, pas une barre d'onglets.
   Première version : des onglets horizontaux, comme les filtres de la
   boutique. Erreur — WooCommerce place ce menu dans une colonne de 300 px,
   où six onglets de largeurs inégales (172, 125, 176, 121, 298, 298 px
   mesurés) s'empilaient en pavé irrégulier. La colonne étroite impose la
   verticale ; on la suit, avec les filets fins employés partout ailleurs. */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  display: block;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.woocommerce-account .woocommerce-MyAccount-navigation li:last-child {
  border-bottom: 1px solid var(--line);
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 13px 2px 13px 0;
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color .18s, padding .18s;
}

/* Le décalage au survol remplace un fond plein : plus discret, et il ne
   fait pas sauter la hauteur de la ligne. */
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
  padding-left: 6px;
  color: var(--ink);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
  text-decoration: none;
}

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

/* `li:first-child { padding-top: 0 }` de WooCommerce decalerait la premiere
   ligne : on rend la hauteur uniforme. */
.woocommerce-account .woocommerce-MyAccount-navigation li:first-child {
  padding-top: 0;
}

/* La déconnexion n'est pas une rubrique : elle s'efface. */
.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a {
  color: var(--muted);
}

.woocommerce-MyAccount-content p { font-size: 15px; }

.woocommerce-MyAccount-content > h2,
.woocommerce-MyAccount-content > h3 {
  margin: 28px 0 12px;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 400;
}

/* Le tableau des commandes passées. */
.woocommerce-orders-table,
.woocommerce-table--order-details {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
}

.woocommerce-orders-table th,
.woocommerce-orders-table td,
.woocommerce-table--order-details th,
.woocommerce-table--order-details td {
  padding: 12px 10px 12px 0;
  border-bottom: 1px solid var(--line);
  background: none;
  text-align: left;
  font-weight: 400;
}

.woocommerce-orders-table thead th,
.woocommerce-table--order-details thead th {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.woocommerce-orders-table__cell-order-total,
.woocommerce-table--order-details td:last-child {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* Les deux adresses enregistrées. */
.woocommerce-account .woocommerce-Addresses.col2-set {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 34px);
}

@media (min-width: 720px) {
  .woocommerce-account .woocommerce-Addresses.col2-set { grid-template-columns: 1fr 1fr; }

  /* Placement explicite, comme pour #customer_login. Sans lui, WooCommerce
     envoie la facturation en colonne 2 ligne 1 et la livraison en colonne 1
     ligne 2 : les deux cartes se retrouvent en quinconce. Le defaut est le
     meme sur tous les `.col2-set` de WooCommerce places en grille — on nomme
     donc la place plutot que de la laisser deduire. */
  .woocommerce-account .woocommerce-Addresses .col-1 { grid-column: 1; grid-row: 1; }
  .woocommerce-account .woocommerce-Addresses .col-2 { grid-column: 2; grid-row: 1; }
}

.woocommerce-account .woocommerce-Addresses .col-1,
.woocommerce-account .woocommerce-Addresses .col-2 {
  float: none;
  width: 100%;
}

/* Le titre et son lien « Modifier » : le lien passe sous le titre, discret. */
.woocommerce-Address-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
}

.woocommerce-Address-title .edit {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.woocommerce-Address-title h2,
.woocommerce-Address-title h3 {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 400;
}

.woocommerce-Address address {
  margin-top: 10px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 14.5px;
  font-style: normal;
  line-height: 1.6;
}

/* Le choix du compte, à la fin des coordonnées. Encadré pour cesser d'être
   une case perdue au milieu du formulaire — voir inc/commande.php. */
.cmd .woocommerce-account-fields {
  margin: 6px 0 4px;
  padding: 16px 18px;
  border: 1px solid var(--line-2);
  background: var(--surface);
}

.cmd .woocommerce-account-fields .create-account {
  margin: 0;
}

.cmd .woocommerce-account-fields .create-account label {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 600;
}

.cmd .woocommerce-account-fields .create-account input { margin: 0; }

.cmd-compte-note {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

/* Le mot de passe n'apparaît que si la case est cochée. */
.cmd .woocommerce-account-fields .form-row { margin-top: 14px; }

/* Le bouton « Voir » du tableau des commandes.
   Par défaut il hérite du bouton principal du site : 105 × 50 px en encre
   pleine, deux fois par ligne. Dans un tableau, ça écrase tout le reste —
   la donnée compte plus que l'action. On le ramène à un filet fin, dans la
   même langue que les étiquettes en chasse fixe du reste du site. */
.woocommerce-account .woocommerce-orders-table__cell-order-actions .button {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid var(--line-2);
  border-radius: 0;
  background: none;
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: background .18s, color .18s;
}

.woocommerce-account .woocommerce-orders-table__cell-order-actions .button:hover {
  background: var(--ink);
  color: var(--ground);
}

/* Les cellules du tableau des commandes respirent un peu plus que celles du
   récapitulatif : ce sont des lignes cliquables, pas une addition. */
.woocommerce-account .woocommerce-orders-table th,
.woocommerce-account .woocommerce-orders-table td {
  padding: 14px 12px 14px 0;
  vertical-align: middle;
}

/* Le formulaire « Détails du compte ».
   Le <fieldset> du changement de mot de passe arrivait avec la bordure par
   défaut du navigateur — `1.6px groove #f0f0f0`, un biseau des années 90 que
   personne ne dessine volontairement. */
.woocommerce-account .woocommerce-EditAccountForm fieldset {
  margin: 26px 0 0;
  padding: 20px 22px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.woocommerce-account .woocommerce-EditAccountForm legend {
  margin-left: -8px;
  padding: 0 8px;
  font-family: var(--display);
  font-size: 19px;
  font-weight: 400;
}

/* « Enregistrer les modifications » ne mérite pas 680 px de large : c'est une
   action ponctuelle, pas la validation d'une commande. */
.woocommerce-account .woocommerce-EditAccountForm .woocommerce-Button {
  width: auto;
  padding: 13px 26px;
}

/* Les indications sous les champs (« Indique comment votre nom apparaîtra… »)
   arrivent en <em> : en italique, elles se lisent comme une insistance. */
.woocommerce-account .woocommerce-EditAccountForm em {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12.5px;
  font-style: normal;
}

/* ------------------------------------------------------------------
   L'en-tête collant.

   `.head` porte `position:sticky` depuis la maquette, et ça marchait dans
   maquette.html — mais pas dans le thème. WordPress enveloppe la composition
   de la partie de gabarit dans un élément à lui :

       <div class="wp-site-blocks">
         <header class="wp-block-template-part">   <-- l'enveloppe
           <div class="topbar">…</div>
           <header class="head">…</header>          <-- le collant
         </header>
         <main>…</main>

   Un élément collant ne voyage que dans les limites de son parent. Ici le
   parent s'arrête juste sous l'en-tête : `.head` n'avait aucune course, et
   partait avec le reste de la page dès le premier défilement.

   `display:contents` efface l'enveloppe de la mise en page sans toucher au
   markup : `.topbar` et `.head` deviennent enfants directs de
   `.wp-site-blocks`, dont la hauteur est celle de la page entière. Le bandeau
   d'annonce défile et s'en va, l'en-tête reste. Le sélecteur vise l'élément
   `header` : l'enveloppe du pied de page est un `footer`, elle n'est pas
   concernée.

   Effet de bord voulu : l'enveloppe et `.head` étaient deux `banner`
   imbriqués pour les lecteurs d'écran. Il n'en reste qu'un.
   ------------------------------------------------------------------ */
header.wp-block-template-part { display: contents; }