/* Espace compte.
   Enfilée par `inc/assets.php` sous `ubayd_est_compte()` : la racine
   `.ub-compte` ne correspondrait à rien ailleurs, et les autres pages n'ont pas
   à payer un style inutilisé.

   Tous les sélecteurs partent de `.ub-compte` ou de `body.woocommerce-account`.
   Kadence enfile son CSS inline APRÈS les feuilles du thème enfant : un
   sélecteur de même spécificité perdrait l'arbitrage. Cette racine suffit à
   reprendre la main sans `!important`, comme `.ub-tunnel` sur le tunnel. */

.ub-compte {
  --ub-compte-bloc: 440px;

  color: var(--ub-encre);
  font-family: var(--ub-sans);
}

/* En-tête de page de Kadence, masqué sur tout l'espace compte : chaque écran
   porte déjà son titre, et la hauteur du héros poussait le contenu sous la ligne
   de flottaison. */
body.ub-compte-page .entry-hero {
  display: none;
}

/* Cadre que WooCommerce pose sur ses formulaires de connexion et d'inscription.
   Le bloc porte déjà sa propre mise en page ; ce cadre bleuté n'appartient à
   aucune charte du site.

   Deux classes sur le formulaire, pas une : la règle d'origine est
   `.woocommerce form.login` — à égalité de spécificité, elle gagnerait,
   puisqu'elle est enfilée après cette feuille. */
.ub-compte form.login.woocommerce-form-login,
.ub-compte form.register.woocommerce-form-register {
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 0;
}

/* ---- Écran d'accueil : connexion et inscription ---- */

/* Le retrait vertical reste discret : Kadence pose déjà le sien autour du
   contenu, et les deux cumulés poussaient le formulaire sous la ligne de
   flottaison. */
.ub-compte--accueil {
  display: flex;
  justify-content: center;
  padding: 0 var(--ub-gouttiere-page) 2rem;
}

.ub-compte__bloc {
  inline-size: 100%;
  max-inline-size: var(--ub-compte-bloc);
}

/* Même dessin que les titres de page du site — le serif de la marque en
   capitales espacées, tel que `kadence-integration.css` l'impose à
   `.entry-hero .entry-title` (32 px, poids 400, 0.06em). Ce bloc porte son
   propre titre puisque l'en-tête de Kadence est masqué ici : à défaut de
   reprendre ce dessin, l'écran serait le seul du site à annoncer sa page en
   petites capitales sans empattement. */
.ub-compte__titre {
  color: var(--ub-encre);
  font-family: var(--ub-serif);
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.5;
  margin: 0;
  text-align: center;
  text-transform: uppercase;
}

.ub-compte__chapeau {
  color: var(--ub-gris);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0.9rem 0 2.25rem;
  text-align: center;
}

.ub-compte__formulaire {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

/* ---- Espace connecté ---- */

/* Plus large que le bloc de connexion : les six rubriques doivent tenir sur une
   seule ligne sans qu'aucune ne sorte du cadre sur ordinateur. */
.ub-compte--connecte {
  margin-inline: auto;
  max-inline-size: 1080px;
  padding: 0 var(--ub-gouttiere-page) 3rem;
}

.ub-compte--connecte .ub-compte__titre {
  margin-block-end: 2rem;
}

/* Kadence range le compte en deux colonnes flottantes — navigation à droite sur
   un quart, contenu à gauche sur deux tiers. Le rang d'onglets demande la pleine
   largeur : les deux flottants sont annulés.

   Trois niveaux de sélecteur, la classe de `body` comprise : les règles de
   Kadence en portent deux et sont enfilées après cette feuille. */
body.ub-compte-page .ub-compte--connecte .account-navigation-wrap,
body.ub-compte-page .ub-compte--connecte .ub-compte__contenu,
body.ub-compte-page .ub-compte--connecte .ub-compte__onglets {
  /* `border: 0` aussi : au-delà de 768 px, Kadence borde la colonne de
     navigation d'un filet gris sur toute sa hauteur. */
  border: 0;
  float: none;
  inline-size: 100%;
  max-inline-size: none;
}

/* La marge basse est portée par le `nav`, non par la liste : Kadence cible
   `.woocommerce-account .woocommerce-MyAccount-navigation ul` et gagnerait
   l'arbitrage sur la liste elle-même. */
.ub-compte__onglets {
  display: block;
  margin-block-end: 2.5rem;
}

.ub-compte .ub-compte__rang {
  border-block-end: 1px solid var(--ub-ligne);
  display: flex;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  overflow-x: auto;
  padding: 0;
  /* Le rang défile plutôt qu'il ne se replie : sur mobile, six rubriques sur
     deux lignes lisaient comme deux rangs distincts. */
  scrollbar-width: none;
}

.ub-compte .ub-compte__rang::-webkit-scrollbar {
  display: none;
}

.ub-compte .ub-compte__rang li {
  list-style: none;
  margin: 0;
  flex: 0 0 auto;
}

/* Quatre classes, `li` et `a` compris : la règle de Kadence sur ce lien
   (`.woocommerce-account .account-navigation-wrap li.is-active a`) pèse trois
   classes et deux éléments. Elle dessine une colonne verticale — trait bleu à
   gauche, retrait interne, marge négative — dont rien ne subsiste dans un rang.
   Une règle plus légère laissait le trait en place. */
body.ub-compte-page .ub-compte--connecte .ub-compte__rang li a.ub-compte__onglet {
  border: 0;
  border-block-end: 2px solid transparent;
  color: var(--ub-gris);
  display: block;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: var(--ub-titre-espace);
  margin: 0;
  padding: 0 0 0.85rem;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

body.ub-compte-page .ub-compte--connecte .ub-compte__rang li a.ub-compte__onglet:hover {
  border-block-end-color: var(--ub-ligne);
  color: var(--ub-encre);
}

.ub-compte .ub-compte__onglet:focus-visible {
  outline: 2px solid var(--ub-camel);
  outline-offset: 2px;
}

/* La rubrique courante, marquée du filet camel. `aria-current` plutôt que la
   classe `is-active` de WooCommerce : le repère visuel et le repère annoncé aux
   lecteurs d'écran ne peuvent alors pas se contredire. */
body.ub-compte-page .ub-compte--connecte .ub-compte__rang li a.ub-compte__onglet[aria-current='page'] {
  border-block-end-color: var(--ub-camel);
  color: var(--ub-encre);
}

/* ---- Tableau de bord ---- */

.ub-bord__salut {
  font-family: var(--ub-serif);
  font-size: 1.35rem;
  margin: 0 0 2rem;
}

.ub-bord__commande {
  border: 1px solid var(--ub-ligne);
  border-radius: var(--ub-rayon-bande);
  padding: 1.5rem;
}

.ub-bord .ub-section-titre {
  color: var(--ub-gris);
  margin: 0 0 1rem;
}

.ub-bord__reference {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin: 0 0 0.75rem;
}

.ub-bord__numero {
  font-size: 1rem;
}

.ub-bord__date {
  color: var(--ub-gris);
  font-size: 0.85rem;
}

.ub-bord__etat {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  justify-content: space-between;
  margin: 0 0 1.25rem;
}

.ub-bord__pastille {
  background: var(--ub-creme);
  border-radius: var(--ub-rayon-bouton);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  padding: 0.35rem 0.9rem;
  text-transform: uppercase;
}

.ub-bord__total {
  font-size: 1rem;
}

.ub-bord__lien {
  color: var(--ub-encre);
  font-size: 0.85rem;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.ub-bord__lien:hover,
.ub-bord__lien:focus-visible {
  color: var(--ub-camel);
}

.ub-compte .ub-bord__cartes {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
}

.ub-compte .ub-bord__cartes li {
  list-style: none;
  margin: 0;
}

.ub-bord__carte-lien {
  align-items: center;
  border: 1px solid var(--ub-ligne);
  border-radius: var(--ub-rayon-bande);
  color: var(--ub-encre);
  display: flex;
  font-size: 0.78rem;
  justify-content: space-between;
  letter-spacing: var(--ub-titre-espace);
  min-block-size: 4rem;
  padding: 0 1.5rem;
  text-decoration: none;
  text-transform: uppercase;
  transition: border-color 0.2s ease;
}

.ub-bord__carte-lien::after {
  content: '→';
  color: var(--ub-gris);
  letter-spacing: normal;
}

.ub-bord__carte-lien:hover,
.ub-bord__carte-lien:focus-visible {
  border-color: var(--ub-encre);
}

/* ---- Commandes ---- */

.ub-compte .ub-commandes {
  border-block-start: 1px solid var(--ub-ligne);
  list-style: none;
  margin: 0;
  padding: 0;
}

.ub-compte .ub-commandes__ligne {
  align-items: center;
  border-block-end: 1px solid var(--ub-ligne);
  display: grid;
  gap: 0.6rem;
  grid-template-columns: 1fr;
  list-style: none;
  margin: 0;
  padding-block: 1.25rem;
}

.ub-commandes__identite {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.ub-commandes__numero {
  color: var(--ub-encre);
  font-size: 0.95rem;
  text-decoration: none;
}

.ub-commandes__numero:hover,
.ub-commandes__numero:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.ub-commandes__date {
  color: var(--ub-gris);
  font-size: 0.82rem;
}

/* La pastille garde sa largeur de contenu : en cellule de grille, elle
   s'étirerait sur toute la colonne. */
.ub-commandes__etat {
  justify-self: start;
}

.ub-commandes__montant {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.ub-commandes__total {
  font-size: 0.95rem;
}

.ub-commandes__articles {
  color: var(--ub-gris);
  font-size: 0.82rem;
}

.ub-commandes__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.ub-commandes__pages {
  display: flex;
  gap: 1rem;
  margin-block-start: 2rem;
}

.ub-compte .ub-commandes__pages .ub-bouton {
  inline-size: auto;
  min-block-size: 2.75rem;
  padding-inline: 1.75rem;
}

/* ---- Adresses ---- */

.ub-adresses {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin-block-start: 1.5rem;
}

.ub-adresses__carte {
  border: 1px solid var(--ub-ligne);
  border-radius: var(--ub-rayon-bande);
  padding: 1.5rem;
}

.ub-compte .ub-adresses__carte .ub-section-titre {
  color: var(--ub-gris);
  margin: 0 0 1rem;
}

.ub-adresses__texte {
  font-size: 0.92rem;
  font-style: normal;
  line-height: 1.7;
  margin: 0 0 1.25rem;
}

.ub-compte .ub-adresses__carte .ub-compte__attente {
  margin-block-end: 1.25rem;
}

/* ---- Mes informations ---- */

.ub-infos {
  margin-block-start: 1.5rem;
  max-inline-size: 560px;
}

.ub-infos__paire {
  display: grid;
  gap: 1.15rem;
  grid-template-columns: 1fr;
}

.ub-compte .ub-infos__secret {
  border: 0;
  border-block-start: 1px solid var(--ub-ligne);
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  margin: 0.5rem 0 0;
  padding: 1.75rem 0 0;
}

/* La légende d'un `fieldset` se place sur sa bordure supérieure, où le filet la
   traversait. Le flottant la remet dans le flux, sous le filet. */
.ub-compte .ub-infos__secret .ub-section-titre {
  color: var(--ub-gris);
  float: left;
  inline-size: 100%;
  margin: 0 0 0.35rem;
  padding: 0;
}

.ub-champ__aide {
  color: var(--ub-gris);
  font-size: 0.78rem;
  line-height: 1.5;
}

/* ---- Modification d'une adresse ---- */

/* Ces champs sont rendus par `woocommerce_form_field()`, qui porte la validation
   par pays : on les habille au lieu de les réécrire. Le dessin est celui de
   `.ub-champ__saisie`, tenu ici par les mêmes variables plutôt que recopié en
   valeurs. */
.ub-adresse-form {
  margin-block-start: 1.5rem;
  max-inline-size: 560px;
}

.ub-adresse-form__titre {
  color: var(--ub-gris);
  margin: 0 0 1.5rem;
}

.ub-compte .ub-adresse-form .form-row {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin: 0 0 1.15rem;
  padding: 0;
}

/* Trois niveaux : Kadence met ces étiquettes en gras sur son gris-bleu, où les
   autres écrans du compte les portent légères et en encre. */
body.ub-compte-page .ub-compte .ub-adresse-form label {
  color: var(--ub-encre);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.04em;
}

/* L'astérisque des champs obligatoires : gris comme ailleurs sur le compte, non
   le rouge d'alerte de Kadence — rien n'est en erreur à l'ouverture du
   formulaire. Le soulignement d'`abbr` est retiré : il faisait lire l'astérisque
   comme un lien. */
body.ub-compte-page .ub-compte .ub-adresse-form .required,
body.ub-compte-page .ub-compte .ub-adresse-form abbr.required {
  border: 0;
  color: var(--ub-gris);
  text-decoration: none;
}

.ub-compte .ub-adresse-form .input-text,
.ub-compte .ub-adresse-form select,
.ub-compte .ub-adresse-form .select2-selection--single {
  background: #fff;
  block-size: 3.25rem;
  border: 1px solid var(--ub-ligne);
  border-radius: var(--ub-rayon-bouton);
  color: var(--ub-encre);
  font-family: inherit;
  font-size: 0.95rem;
  inline-size: 100%;
  padding: 0 1.4rem;
}

.ub-compte .ub-adresse-form .input-text:focus,
.ub-compte .ub-adresse-form select:focus {
  border-color: var(--ub-camel);
  outline: 2px solid var(--ub-camel);
  outline-offset: 2px;
}

/* Le champ pays est un `select2` : sa hauteur vient d'un élément interne, que la
   règle ci-dessus n'atteint pas. */
.ub-compte .ub-adresse-form .select2-selection--single .select2-selection__rendered {
  line-height: 3.25rem;
  padding: 0;
}

.ub-compte .ub-adresse-form .select2-selection--single .select2-selection__arrow {
  inset-block-start: 50%;
  transform: translateY(-50%);
}

.ub-adresse-form__envoi {
  margin-block-start: 0.5rem;
}

/* ---- Champs ---- */

/* Trois classes : les paragraphes du contenu reçoivent de Kadence une marge
   basse que deux niveaux ne suffisaient pas à reprendre. Le rythme du formulaire
   vient de son seul `gap`. */
.ub-compte .ub-compte__formulaire .ub-champ,
.ub-compte .ub-compte__formulaire .ub-compte__envoi,
.ub-compte .ub-compte__formulaire .ub-compte__memoire,
.ub-compte .ub-compte__formulaire .ub-compte__attente {
  margin: 0;
}

/* Champs d'attribution de commande de WooCommerce : invisibles, mais enfants du
   formulaire, ils y creusaient un intervalle vide de la hauteur du `gap`. */
.ub-compte__formulaire wc-order-attribution-inputs {
  display: none;
}

.ub-champ {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

/* Étiquette à gauche, lien de mot de passe oublié à droite, sur une seule
   ligne de fond comme la maquette. */
.ub-champ__ligne {
  align-items: baseline;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.ub-champ__etiquette {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

.ub-champ__requis {
  color: var(--ub-gris);
}

.ub-compte__oubli {
  color: var(--ub-encre);
  font-size: 0.78rem;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.ub-compte__oubli:hover,
.ub-compte__oubli:focus-visible {
  color: var(--ub-camel);
}

.ub-compte .ub-champ__saisie {
  background: #fff;
  block-size: 3.25rem;
  border: 1px solid var(--ub-ligne);
  border-radius: var(--ub-rayon-bouton);
  color: var(--ub-encre);
  font-family: inherit;
  font-size: 0.95rem;
  inline-size: 100%;
  padding: 0 1.4rem;
}

.ub-compte .ub-champ__saisie::placeholder {
  color: var(--ub-gris);
  opacity: 1;
}

.ub-compte .ub-champ__saisie:focus {
  border-color: var(--ub-camel);
  outline: 2px solid var(--ub-camel);
  outline-offset: 2px;
}

/* Gaine du champ secret : elle reçoit le bouton de révélation que le script de
   WooCommerce insère à côté du champ, et lui sert de repère de position. */
.ub-champ__gaine {
  display: block;
  position: relative;
}

.ub-champ__gaine .ub-champ__saisie--secret {
  padding-inline-end: 3.4rem;
}

/* Bouton de WooCommerce, habillé plutôt que remplacé : son script gère déjà la
   bascule du `type` et son intitulé accessible. Un œil maison en plus lui
   volait les clics. */
.ub-compte .show-password-input {
  align-items: center;
  background: none;
  border: 0;
  border-radius: 50%;
  color: var(--ub-gris);
  cursor: pointer;
  display: flex;
  inset-block-start: 50%;
  inset-inline-end: 0.9rem;
  justify-content: center;
  padding: 0.4rem;
  position: absolute;
  transform: translateY(-50%);
}

/* La couleur est reposée sur le pseudo-élément qui porte le glyphe : Kadence
   colore les boutons de son bleu de liens, et l'héritage seul ne suffisait pas à
   le reprendre. */
.ub-compte .ub-champ__gaine .show-password-input::after {
  color: var(--ub-gris);
  font-size: 1.05rem;
  line-height: 1;
}

.ub-compte .ub-champ__gaine .show-password-input:hover::after,
.ub-compte .ub-champ__gaine .show-password-input.display-password::after {
  color: var(--ub-encre);
}

.ub-compte .show-password-input:hover,
.ub-compte .show-password-input.display-password {
  color: var(--ub-encre);
}

.ub-compte .show-password-input:focus-visible {
  outline: 2px solid var(--ub-camel);
  outline-offset: 1px;
}

/* ---- Commandes ---- */

.ub-compte .ub-bouton {
  align-items: center;
  border-radius: var(--ub-rayon-bouton);
  display: flex;
  font-family: inherit;
  font-size: 0.85rem;
  inline-size: 100%;
  justify-content: center;
  letter-spacing: 0.08em;
  min-block-size: 3.25rem;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.ub-compte .ub-bouton--plein {
  background: var(--ub-encre);
  border: 1px solid var(--ub-encre);
  color: var(--ub-creme);
  cursor: pointer;
}

.ub-compte .ub-bouton--plein:hover,
.ub-compte .ub-bouton--plein:focus-visible {
  background: var(--ub-camel);
  border-color: var(--ub-camel);
}

.ub-compte .ub-bouton--contour {
  background: #fff;
  border: 1px solid var(--ub-encre);
  color: var(--ub-encre);
}

.ub-compte .ub-bouton--contour:hover,
.ub-compte .ub-bouton--contour:focus-visible {
  background: var(--ub-encre);
  color: var(--ub-creme);
}

.ub-compte .ub-bouton:focus-visible {
  outline: 2px solid var(--ub-camel);
  outline-offset: 2px;
}

/* ---- Se souvenir de moi ---- */

.ub-case {
  align-items: center;
  color: var(--ub-gris);
  cursor: pointer;
  display: flex;
  font-size: 0.8rem;
  gap: 0.55rem;
}

.ub-compte .ub-case__saisie {
  accent-color: var(--ub-encre);
  block-size: 1rem;
  inline-size: 1rem;
  margin: 0;
}

/* ---- Pied du bloc : passage vers l'autre écran ---- */

.ub-compte__pied {
  border-block-start: 1px solid var(--ub-ligne);
  margin-block-start: 2.5rem;
  padding-block-start: 2.5rem;
  text-align: center;
}

.ub-compte__invite {
  font-size: 1rem;
  margin: 0 0 1.15rem;
}

.ub-compte__attente {
  color: var(--ub-gris);
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0;
}

/* Mention de confidentialité que WooCommerce insère dans le formulaire
   d'inscription. Elle arrivait au corps du texte courant, où elle pesait plus
   que le formulaire lui-même. */
.ub-compte .ub-compte__formulaire .woocommerce-privacy-policy-text {
  color: var(--ub-gris);
  margin: 0;
}

.ub-compte .woocommerce-privacy-policy-text p {
  font-size: 0.8rem;
  line-height: 1.6;
  margin: 0;
}

.ub-compte .woocommerce-privacy-policy-text a {
  color: var(--ub-encre);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ---- Messages de WooCommerce ----
   Le shortcode les imprime avant notre enveloppe : ils se stylent depuis le
   body, non depuis `.ub-compte`. */

body.woocommerce-account .woocommerce-notices-wrapper {
  margin-inline: auto;
  max-inline-size: var(--ub-compte-bloc, 440px);
  padding-inline: var(--ub-gouttiere-page);
}

body.woocommerce-account .woocommerce-notices-wrapper .woocommerce-error,
body.woocommerce-account .woocommerce-notices-wrapper .woocommerce-message,
body.woocommerce-account .woocommerce-notices-wrapper .woocommerce-info {
  background: var(--ub-creme);
  border: 1px solid var(--ub-camel);
  border-radius: 8px;
  color: var(--ub-encre);
  font-size: 0.88rem;
  line-height: 1.5;
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0.9rem 1.15rem;
}

body.woocommerce-account .woocommerce-notices-wrapper li {
  list-style: none;
  margin: 0;
}

/* Avis imprimés à l'intérieur d'une rubrique, hors de l'enveloppe des notices —
   ainsi celui qui invite à confirmer son adresse au-dessus des commandes. Ils
   arrivent au bleu de Kadence, avec un bouton plein de la même couleur. */
body.ub-compte-page .ub-compte .woocommerce-info,
body.ub-compte-page .ub-compte .woocommerce-message,
body.ub-compte-page .ub-compte .woocommerce-error {
  background: var(--ub-creme);
  border: 1px solid var(--ub-camel);
  border-radius: 8px;
  color: var(--ub-encre);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.88rem;
  line-height: 1.5;
  list-style: none;
  margin: 0 0 2rem;
  padding: 1rem 1.25rem;
}

body.ub-compte-page .ub-compte .woocommerce-info .button,
body.ub-compte-page .ub-compte .woocommerce-message .button {
  background: var(--ub-encre);
  border: 1px solid var(--ub-encre);
  border-radius: var(--ub-rayon-bouton);
  color: var(--ub-creme);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  padding: 0.7rem 1.5rem;
  text-decoration: none;
}

body.ub-compte-page .ub-compte .woocommerce-info .button:hover,
body.ub-compte-page .ub-compte .woocommerce-message .button:hover {
  background: var(--ub-camel);
  border-color: var(--ub-camel);
}

@media (min-width: 768px) {
  .ub-compte--accueil {
    padding-block-end: 4rem;
  }

  .ub-compte--connecte {
    padding-block-end: 5rem;
  }

  .ub-compte .ub-bord__cartes,
  .ub-adresses,
  .ub-infos__paire {
    grid-template-columns: 1fr 1fr;
  }

  /* Une commande tient sur une ligne : identité, état, montant, actions. Sous
     cette largeur, chaque commande reste une carte empilée — un tableau qui
     défile horizontalement était le défaut de l'original. */
  .ub-compte .ub-commandes__ligne {
    gap: 1.5rem;
    grid-template-columns: 2fr auto 1fr auto;
  }
}