/* =====================================================================
   Braillard — Page « Mon compte » /my-account/ (issue #24). CSS DÉDIÉ
   (chargé sur is_account_page() ; ne touche pas au Woo global).
   ===================================================================== */

/* ---------- Dashboard connecté : 2 colonnes (nav | contenu) ---------- */
.br-account{
  display: grid;
  /* colonne nav à la largeur de la colonne gauche des autres pages (~cols 1-3). */
  grid-template-columns: clamp(280px, 26%, 411px) minmax(0, 1fr);
  column-gap: clamp(48px, 4.5vw, 96px);
  align-items: start;
  width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); box-sizing: border-box;
  padding: clamp(20px,3vw,40px) clamp(20px,4vw,56px) clamp(40px,6vw,96px);
  font-family: var(--br-font-body); color: var(--br-black);
}
@media (max-width: 900px){
  .br-account{ grid-template-columns: 1fr; column-gap: 0; row-gap: clamp(24px,5vw,40px); }
  .woocommerce-MyAccount-navigation{ position: static !important; }
}

/* Navigation de compte (colonne gauche, façon sous-menu) */
.woocommerce-MyAccount-navigation{ position: sticky; top: 210px; }
.woocommerce-MyAccount-navigation ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.woocommerce-MyAccount-navigation li{ margin: 0; }
.woocommerce-MyAccount-navigation li a{
  display: inline-block; text-decoration: none;
  font-family: var(--br-font-body); font-size: clamp(16px,1.2vw,20px); line-height: 1.2;
  font-weight: 400; color: #8a857e; transition: color .2s ease;
}
.woocommerce-MyAccount-navigation li a:hover{ color: var(--br-black); }
.woocommerce-MyAccount-navigation li.is-active a{ color: var(--br-black); font-weight: 500; }

/* WooCommerce met float+width:35%/65% sur nav & contenu -> ils ne remplissent que
   35%/65% de leur colonne de grille. On annule pour qu'ils occupent toute la colonne. */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content{
  float: none !important; width: 100% !important; margin: 0 !important;
}
.br-account__content{ min-width: 0; width: 100% !important; }
.br-account__content > p:first-child,
.br-account__content > h3:first-child{ margin-top: 0; }
.br-account__content h3{ font-family: var(--br-font-body); font-weight: 500; font-size: clamp(18px,1.35vw,22px); margin: 0 0 16px; }

/* ---------- Formulaires connexion / inscription (visiteur non connecté) ---------- */
.woocommerce-account .woocommerce > .u-columns,
.woocommerce-account .u-columns{
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(40px,5vw,96px);
  max-width: 1100px;
}
@media (max-width: 760px){ .woocommerce-account .u-columns{ grid-template-columns: 1fr; } }
.woocommerce-account h2{
  font-family: var(--br-font-body) !important; font-weight: 500 !important; font-style: normal !important;
  font-size: clamp(20px,1.6vw,26px); margin: 0 0 clamp(16px,1.8vw,24px);
}

/* Champs (⚠️ !important : le reset global redessine bordure/fond des inputs) */
.woocommerce-account .woocommerce form label,
.br-account__content form label{ display: block; margin: 0 0 6px; font-size: clamp(13px,.95vw,15px); color: #6b6660; }
.woocommerce-account .woocommerce form input.input-text,
.woocommerce-account .woocommerce form input[type="text"],
.woocommerce-account .woocommerce form input[type="email"],
.woocommerce-account .woocommerce form input[type="password"],
.woocommerce-account .woocommerce form input[type="tel"],
.woocommerce-account .woocommerce form select,
.br-account__content form input.input-text,
.br-account__content form input[type="text"],
.br-account__content form input[type="email"],
.br-account__content form input[type="password"],
.br-account__content form select{
  width: 100% !important; height: 52px !important; box-sizing: border-box !important; padding: 0 16px !important;
  border: 1px solid rgba(0,0,0,.35) !important; border-radius: 0 !important; background: #fff !important;
  font-family: var(--br-font-body) !important; font-size: clamp(15px,1.05vw,17px) !important; color: var(--br-black) !important;
}
.woocommerce-account .woocommerce form p.form-row,
.br-account__content form p.form-row{ margin: 0 0 clamp(14px,1.4vw,20px); }
.woocommerce-account .woocommerce-form-login__rememberme{ display: inline-flex; align-items: center; gap: 8px; margin: 8px 0; }
.woocommerce-account .woocommerce input[type="checkbox"]{ width: 18px !important; height: 18px !important; accent-color: #000; }

/* Boutons à la charte (⚠️ !important pour battre le reset + Woo) */
.woocommerce-account .woocommerce .button,
.woocommerce-account .woocommerce button.button,
.woocommerce-account .woocommerce input.button,
.br-account__content .button,
.br-account__content button{
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 24px !important; background: var(--br-black) !important; color: var(--br-white) !important;
  border: 1px solid var(--br-black) !important; border-radius: 0 !important; text-transform: none !important;
  font-family: var(--br-font-body) !important; font-size: clamp(14px,1vw,16px) !important; cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.woocommerce-account .woocommerce .button:hover,
.br-account__content .button:hover,
.br-account__content button:hover{ background: transparent !important; color: var(--br-black) !important; }
.woocommerce-account .lost_password a,
.br-account__content a{ color: var(--br-black); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Tableaux (commandes) ---------- */
.br-account__content table.shop_table,
.br-account__content table.woocommerce-orders-table,
.br-account__content table.woocommerce-MyAccount-orders{
  width: 100%; border-collapse: collapse; font-family: var(--br-font-body); border: 0; margin: 0;
}
.br-account__content table.shop_table th{
  text-align: left; font-weight: 400; font-size: clamp(13px,.95vw,15px); color: #6b6660;
  padding: 12px 12px 12px 0; border-bottom: 1px solid rgba(0,0,0,.2); background: none;
}
.br-account__content table.shop_table td{
  padding: 16px 12px 16px 0; border-bottom: 1px solid rgba(0,0,0,.12);
  font-size: clamp(14px,1vw,16px); color: var(--br-black); background: none;
}
.br-account__content table.shop_table td.woocommerce-orders-table__cell-order-actions{ text-align: right; }
.br-account__content table.shop_table .button{ padding: 8px 16px !important; font-size: 14px !important; }

/* ---------- Adresses (2 blocs : facturation | livraison) ---------- */
/* WooCommerce met float+width:47% sur .u-column1/2 → casse la grille. On force
   une grille propre + on annule float/width des colonnes. */
.woocommerce-account .woocommerce-Addresses{
  display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: clamp(40px, 4vw, 80px); max-width: none; margin-top: clamp(16px,1.8vw,24px);
}
/* WooCommerce ajoute un clearfix ::before/::after (content:" ") : en grille, ces
   pseudo-éléments deviennent des cases fantômes qui décalent les blocs en diagonale. */
.woocommerce-account .woocommerce-Addresses::before,
.woocommerce-account .woocommerce-Addresses::after{ content: none !important; display: none !important; }
@media (max-width: 700px){ .woocommerce-account .woocommerce-Addresses{ grid-template-columns: 1fr !important; } }
.woocommerce-account .woocommerce-Addresses > div,
.woocommerce-account .woocommerce-Address,
.woocommerce-account .u-column1,
.woocommerce-account .u-column2{ float: none !important; width: auto !important; max-width: none !important; margin: 0 !important; }
.woocommerce-Address address{ font-style: normal; line-height: 1.7; color: var(--br-black); }
.woocommerce-Address-title.title,
.woocommerce-Address header{ display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
/* même clearfix fantôme que sur .woocommerce-Addresses : en flex, le ::before de
   Woo devient un 1er item qui décale le titre de la valeur du gap (16px) et
   empêche « Modifier » d'aller à droite. */
.woocommerce-Address-title.title::before,
.woocommerce-Address-title.title::after,
.woocommerce-Address header::before,
.woocommerce-Address header::after{ content: none !important; display: none !important; }
.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3{ margin: 0 !important; font-size: clamp(18px, 1.3vw, 22px) !important; }
/* « Modifier / Ajouter » = bouton outline charte (secondaire), plus un lien souligné */
.woocommerce-Address header a.edit,
.woocommerce-Address-title a.edit{
  display: inline-block; padding: 8px 16px;
  border: 1px solid var(--br-black); border-radius: 0;
  background: transparent; color: var(--br-black);
  text-decoration: none; white-space: nowrap; font-size: clamp(13px,.95vw,15px);
  transition: background .2s ease, color .2s ease;
}
.woocommerce-Address header a.edit:hover,
.woocommerce-Address-title a.edit:hover{ background: var(--br-black); color: var(--br-white); }

/* Notifications Woo (adresse modifiée, etc.) : à la charte — pas de bleu.
   Couvre les notices legacy ET les bannières wc-blocks (succès/info/erreur). */
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info,
.woocommerce-account .wc-block-components-notice-banner,
.woocommerce-account .wc-block-components-notice-banner.is-info,
.woocommerce-account .wc-block-components-notice-banner.is-success{
  background: #f6f5f3 !important; border: 0 !important; border-left: 2px solid var(--br-black) !important;
  border-radius: 0 !important; color: var(--br-black) !important;
  padding: 14px 20px !important; font-family: var(--br-font-body);
}
.woocommerce-account .woocommerce-message::before,
.woocommerce-account .woocommerce-info::before{ color: var(--br-black); }
.woocommerce-account .wc-block-components-notice-banner svg{ fill: var(--br-black) !important; }

/* Toggle « afficher le mot de passe » : discret (pas un gros bouton noir). */
.woocommerce-account .show-password-input,
.br-account__content .show-password-input{
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  width: 24px !important; height: 24px !important; padding: 0 !important;
  background: none !important; border: 0 !important; box-shadow: none !important;
  color: #6b6660 !important; cursor: pointer;
}
.woocommerce-account .password-input,
.br-account__content .password-input{ position: relative; display: block; }
.woocommerce-account .password-input input,
.br-account__content .password-input input{ padding-right: 46px !important; }

/* messages/notices : hérités du restyle global (shop.css) */