/*
 * Thème Blondeau — Espace client & Dropdown header (Mon compte)
 * Override du dashboard WooCommerce natif : header personnalisé +
 * navigation horizontale sticky, layout pleine largeur.
 *
 * @package Blondeau
 * @version 1.4.1 — pagination des commandes identique au calculateur (pastilles rondes 44px sans cadre) — 2026-10-27
 * @version 1.4.0 — champs de formulaire : contour au seuil 3:1, focus contour or foncé + halo or (DETTE-391) — 2026-10-23
 * @version 1.3.3 — onglet Échantillons : boutons Voir le tissu / Configurer (DETTE-318) — 2026-10-19
 * @version 1.3.2 — champs du compte : contour de focus global conservé (DETTE-98) — 2026-10-19
 * @version 1.3.1 — code mort retiré (règles sans aucun élément ciblé), rendu identique — 2026-10-14
 */

/* ============================================================
   LAYOUT GÉNÉRAL — remplace la grille sidebar/contenu native
   ============================================================ */

.woocommerce-account .woocommerce {
  display: block;
}

.woocommerce-account .woocommerce-MyAccount-content {
  float: none !important;
  width: 100% !important;
  min-width: 0;
}

/* ============================================================
   HEADER — avatar + prénom
   ============================================================ */

.account-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) 0;
}

.account-header__logout {
  margin-left: auto;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  text-decoration: none;
  opacity: 0.7;
  transition: opacity var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
}

.account-header__logout:hover {
  opacity: 1;
  color: var(--color-accent);
}

.account-header__avatar {
  border-radius: 50%;
  flex-shrink: 0;
}

.account-header__info {
  display: flex;
  flex-direction: column;
}

.account-header__greeting {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.account-header__name {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary);
}

.account-header__since {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: 0.15rem;
}

/* ============================================================
   NAVIGATION — onglets horizontaux sticky (desktop/tablette large)
   Sous 768px : menu déroulant (account-nav__toggle) — cf. media query
   ci-dessous. Onglets scrollables abandonnés en mobile : les membres ne
   percevaient pas que la barre se faisait glisser au doigt (retour Charles).
   ============================================================ */

.account-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--color-bg, #ffffff);
  margin-bottom: var(--space-5);
  /* Pas de border-bottom sur ce conteneur : le soulignement de l'onglet actif
     (.account-nav__link, ci-dessous) touche presque le même pixel qu'une
     bordure ici (liste sans padding sur toute la hauteur du conteneur) —
     les deux traits se superposaient/se floutaient l'un dans l'autre. Un
     seul trait (celui de l'onglet actif) suffit à marquer la limite. */
}

/* Bouton "menu déroulant" — masqué en desktop, affiché uniquement sous
   768px (cf. media query ci-dessous). Toujours présent dans le DOM (rendu
   PHP unique, cf. navigation.php) pour éviter deux templates à maintenir. */
.account-nav__toggle {
  display: none;
}

.account-nav__list {
  display: flex !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox : glissé JS (main.js) déjà en place, scrollbar native inutile */
  cursor: grab;
  user-select: none; /* évite de sélectionner le texte des onglets pendant le clic-glissé (main.js initAccountNavScroll) */
}

/* Chrome/Brave/Safari : sans cette règle, la scrollbar native (épaisse,
   avec flèches) s'affiche sous les onglets — cf. même pattern déjà en
   place sur .bp-tabs__nav (product.css) et .bf-scroll-area (catalog.css). */
.account-nav__list::-webkit-scrollbar {
  display: none;
}

.account-nav__list.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto; /* pas de lissage CSS pendant un glissé piloté en JS, sinon effet de retard */
}

.account-nav__item {
  flex-shrink: 0;
  list-style: none !important;
  display: block !important;
}

.account-nav__link {
  position: relative;
  display: block;
  padding: var(--space-3) var(--space-3);
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.9375rem;
  white-space: nowrap;
  transition: color var(--transition-fast);
}

/* Soulignement animé (expand depuis le centre) — même effet que .nav-primary__link
   dans le menu principal du header (cf. main.css), pour une cohérence d'interaction
   entre la nav du header et celle du compte. */
.account-nav__link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  right: 50%;
  height: 2px;
  background: var(--color-accent);
  transition: left var(--transition-base), right var(--transition-base);
  border-radius: var(--radius-full) var(--radius-full) 0 0;
}

.account-nav__link:hover {
  color: var(--color-primary);
}

.account-nav__link:hover::after {
  left: var(--space-2);
  right: var(--space-2);
}

.account-nav__item.is-active .account-nav__link {
  color: var(--color-accent-dark, var(--color-accent));
  font-weight: 600;
}

.account-nav__item.is-active .account-nav__link::after {
  left: var(--space-2);
  right: var(--space-2);
}

@media (max-width: 768px) {
  .account-header {
    padding: var(--space-3) 0;
  }

  /* Bouton du menu déroulant — remplace la barre d'onglets horizontale */
  .account-nav__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: var(--color-bg, #fff);
    border: 1.5px solid var(--color-primary);
    border-radius: var(--radius-md, 8px);
    padding: var(--space-3) var(--space-4);
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-primary);
    cursor: pointer;
  }

  .account-nav__chevron {
    color: var(--color-accent-dark, var(--color-accent));
    font-size: 0.7rem;
    transition: transform var(--transition-fast);
    flex-shrink: 0;
    margin-left: var(--space-2);
  }

  .account-nav__toggle[aria-expanded="true"] .account-nav__chevron {
    transform: rotate(180deg);
  }

  /* Liste : repliée par défaut, dépliée en panneau sous le bouton
     (main.js initAccountNavDropdown pilote .is-open + aria-expanded) */
  .account-nav__list {
    flex-direction: column !important;
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 0;
    right: 0;
    background: var(--color-bg, #fff);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 8px);
    box-shadow: 0 8px 20px -6px rgba(28, 31, 59, 0.18);
    max-height: 0;
    overflow: hidden !important;
    opacity: 0;
    cursor: auto;
    transition: max-height var(--transition-fast), opacity var(--transition-fast);
  }

  .account-nav.is-open .account-nav__list {
    max-height: 70vh;
    opacity: 1;
    overflow-y: auto !important;
  }

  .account-nav__item {
    width: 100%;
  }

  .account-nav__link {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    border-left: 3px solid transparent; /* réserve la place : évite un décalage de padding au clic sur is-active, cf. règle suivante */
  }

  /* Soulignement animé désactivé : liste verticale, l'état actif est déjà
     porté par le liseré gauche + fond (règle is-active ci-dessous) — même
     logique que .nav-primary__link::after masqué en mobile (main.css). */
  .account-nav__link::after {
    display: none;
  }

  .account-nav__item:last-child .account-nav__link {
    border-bottom: none;
  }

  /* État actif : surlignage + liseré gauche plutôt que le soulignement
     horizontal (hérité des onglets desktop) qui n'a pas de sens dans une
     liste verticale */
  .account-nav__item.is-active .account-nav__link {
    background: var(--color-bg-alt);
    border-bottom-color: var(--color-border);
    border-left-color: var(--color-accent);
  }
}

/* ============================================================
   COMMANDES — liste en cartes (Phase 11.3)
   ============================================================ */

.orders-filter {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.orders-filter__tab {
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.orders-filter__tab:hover {
  color: var(--color-text);
}

.orders-filter__tab--active {
  color: var(--color-primary);
  border-bottom-color: var(--color-accent, #CCA63B);
}

.orders-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.order-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--color-bg, #ffffff);
}

.order-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  background: var(--color-bg-alt, #f5f5f3);
  border-bottom: 1px solid var(--color-border);
}

.order-card__number {
  font-weight: 600;
  color: var(--color-primary);
}

/* Badges de statut */
.order-card__badge {
  display: inline-block;
  padding: 0.2em 0.75em;
  border-radius: 999px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.order-card__badge--processing {
  background: rgba(204, 166, 59, 0.18);
  color: var(--color-primary, #1C1F3B);
}

.order-card__badge--completed {
  background: #dcfce7;
  color: #15803d;
}

.order-card__badge--pending {
  background: #fef9c3;
  color: #a16207;
}

.order-card__badge--on-hold {
  background: #ffedd5;
  color: #c2410c;
}

.order-card__badge--cancelled,
.order-card__badge--failed {
  background: #fee2e2;
  color: #b91c1c;
}

.order-card__badge--refunded {
  background: #f3e8ff;
  color: #7e22ce;
}

.order-card__badge--en-confection {
  background: #e0e7ff;
  color: #3730a3;
}

.order-card__badge--expediee {
  background: #cffafe;
  color: #0e7490;
}

.order-card__body {
  padding: var(--space-3) var(--space-5);
}

.order-card__meta {
  display: flex;
  gap: var(--space-5);
  margin: 0;
  flex-wrap: wrap;
}

.order-card__meta-item {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.order-card__meta-item dt {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.order-card__meta-item dd {
  margin: 0;
  font-weight: 600;
  color: var(--color-primary);
}

.order-card__footer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--color-border);
  flex-wrap: wrap;
}

/* Pagination commandes — puces rondes + flèches (harmonisé avec Catalogue et Calculateur) */
.orders-pagination {
  display: flex;
  justify-content: center;
  margin-top: var(--space-5);
}

/* Valeurs exactes de la pagination du calculateur (.blc-fabrics-page-btn,
   Blondeau-textile/.../calculator.css) : pastilles rondes 44px sans bordure,
   chiffres gris, flèches marine, page courante or. La liste <ul> porte aussi
   la classe .page-numbers : la règle générique de main.css (bordure, fond,
   44px) est neutralisée sur elle. Toute évolution est à répercuter dans le
   calculateur et dans le catalogue (.blondeau-catalog__pagination, catalog.css). */
.orders-pagination ul.page-numbers {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  min-width: 0;
  height: auto;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
}

.orders-pagination .page-numbers li {
  display: flex;
}

.orders-pagination .page-numbers li a,
.orders-pagination .page-numbers li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.orders-pagination .page-numbers li a:hover {
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  color: var(--color-primary);
}

.orders-pagination .page-numbers li span.current {
  background: var(--color-accent);
  color: var(--color-primary);
}

.orders-pagination .page-numbers li span.dots {
  width: 1.25rem;
  min-width: 1.25rem;
  background: none;
}

.orders-pagination .page-numbers li a.prev,
.orders-pagination .page-numbers li a.next {
  font-size: 1.1rem;
  color: var(--color-primary);
}

/* État vide */
.orders-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-8, 3rem) 0;
}

.orders-empty__text {
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
}

/* ============================================================
   DÉTAIL COMMANDE (Phase 11.3)
   ============================================================ */

.order-detail__header {
  margin-bottom: var(--space-5);
}

.order-detail__back {
  display: inline-block;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-decoration: none;
  margin-bottom: var(--space-3);
  transition: color var(--transition-fast);
}

.order-detail__back:hover {
  color: var(--color-accent);
}

.order-detail__title-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.order-detail__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0;
}

.order-detail__date {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin: 0.375rem 0 0;
}

.order-detail__notes {
  margin-bottom: var(--space-5);
}

@media (max-width: 768px) {
  .order-card__meta {
    gap: var(--space-3);
  }

  .order-card__footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ============================================================
   FORMULAIRE PROFIL (Phase 11.4)
   ============================================================ */

.btn--danger {
  border-color: #b91c1c;
  color: #b91c1c;
}

.btn--danger:hover {
  background: #b91c1c;
  border-color: #b91c1c;
  color: #fff;
}

.profile-section__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}

.profile-section__desc {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  margin-bottom: var(--space-3);
  /* Annule le "p { max-width: 70ch }" global (main.css) qui coupait le
     texte avant le bord du conteneur de l'accordéon Confidentialité. */
  max-width: none;
}

.profile-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.profile-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-bottom: var(--space-3);
}

.profile-field label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
}

/* Supprime le * généré par WooCommerce CSS sur .required (évite le double astérisque) */
.blondeau-profile-form .required::before,
.blondeau-profile-form .required::after {
  content: none !important;
}

/* Supprime le * ajouté par accessibility.css sur label::after (label:has(+ [aria-required])) */
.blondeau-profile-form label::after {
  content: none !important;
}

.profile-field .woocommerce-Input,
.profile-field input.input-text {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--color-field-border);
  border-radius: var(--radius-md);
  font-size: 0.9375rem;
  color: var(--color-text);
  background: var(--color-bg, #fff);
  transition: border-color var(--transition-fast);
}

/* DETTE-98 [OK] — corrigé le 2026-08-06 : :focus (souris + clavier) tuait
   l'outline global sans halo de remplacement suffisant (WCAG 2.4.7 AA) —
   :focus-visible (clavier uniquement) + halo doré, même recette que
   .header-topbar__search .search-form:focus-within (main.css). */
.profile-field .woocommerce-Input:focus-visible,
.profile-field input.input-text:focus-visible {
  /* 2026-10-23 (DETTE-391) : le contour or foncé du champ (3,5:1) porte
     l'indicateur (accessibility.css) ; le halo or reste décoratif. */
  border-color: var(--color-field-focus);
  box-shadow: 0 0 0 3px var(--color-field-halo);
}

.profile-field__hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin: 0;
}

.profile-field__optional {
  font-weight: 400;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  margin-left: 0.25rem;
}

.profile-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.9375rem;
}

.profile-checkbox input[type="checkbox"] {
  flex-shrink: 0;
  margin-top: 3px;
  accent-color: var(--color-accent);
}

.profile-actions {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}

@media (max-width: 600px) {
  .profile-row {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   ACCORDÉONS PROFIL — Informations personnelles / Sécurité /
   Préférences / Adresses / Confidentialité, repliés par défaut
   ============================================================ */

.profile-accordion {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 0 var(--space-5);
  margin-bottom: var(--space-3);
}

.profile-accordion .profile-accordion__summary {
  padding: var(--space-4) 0;
}

.profile-accordion[open] .profile-accordion__summary {
  border-bottom: 1px solid var(--color-border);
}

.profile-accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  cursor: pointer;
  list-style: none;
}

.profile-accordion__summary::-webkit-details-marker {
  display: none;
}

.profile-accordion .profile-section__title {
  margin-bottom: 0;
}

.profile-accordion__summary::after {
  content: '';
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--color-text-muted);
  border-bottom: 2px solid var(--color-text-muted);
  transform: rotate(45deg);
  transition: transform var(--transition-fast);
}

.profile-accordion[open] .profile-accordion__summary::after {
  transform: rotate(-135deg);
}

.profile-accordion__body {
  padding: var(--space-5) 0;
}

.profile-accordion--danger .profile-section__title {
  color: #b91c1c;
}

/* ============================================================
   ADRESSES — contenu natif WooCommerce (myaccount/my-address.php)
   embarqué tel quel dans l'accordéon Adresses, restylé pour
   correspondre au reste du Profil (surcharge des styles WC par
   défaut — toujours actifs sur ce site, cf. note ci-dessous)
   ============================================================ */

.profile-accordion__body > p:first-child {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  margin-bottom: var(--space-4);
}

.woocommerce-Addresses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

/* .col2-set::before/::after (woocommerce-layout.css) : clearfix "content:' '"
   prévu pour l'ancien layout en float — une fois le conteneur en display:grid,
   ces pseudo-éléments deviennent eux-mêmes des items de la grille et décalent
   Facturation/Livraison sur des lignes différentes. Neutralisés. */
.woocommerce-Addresses::before,
.woocommerce-Addresses::after {
  content: none !important;
  display: none !important;
}

.woocommerce-Address {
  /* Neutralise .u-column1/.u-column2 (woocommerce-layout.css) : float +
     largeur figée en % qui entraient en conflit avec la grille ci-dessus.
     !important nécessaire : même spécificité (0,1,0) que la règle WC native
     et ordre d'enqueue non garanti entre les deux feuilles de styles.
     blondeau_wc_disable_default_styles() (inc/woocommerce.php) — malgré son
     nom — ne désactive rien actuellement (unset() commentés) : les styles
     WooCommerce par défaut restent chargés sur tout le site. */
  float: none !important;
  width: auto !important;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-alt, #F7F5F0);
}

.woocommerce-Address-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.woocommerce-Address-title h2 {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0;
}

.woocommerce-Address-title .edit {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-accent, #CCA63B);
  text-decoration: none;
  white-space: nowrap;
}

.woocommerce-Address-title .edit:hover {
  text-decoration: underline;
}

.woocommerce-Address address {
  font-style: normal;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text);
}

@media (max-width: 600px) {
  .woocommerce-Addresses {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   CARTE ESPACE CLIENT — panneau image + formulaire
   (connexion, inscription, mot de passe oublié, réinitialisation — Phase 11.11)
   ============================================================ */

.account-card {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.account-card__visual {
  position: relative;
  min-height: 420px;
  background-size: cover;
  background-position: center;
  background-color: var(--color-bg-alt);
}

.account-card__visual-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(28, 31, 59, 0.55) 0%, rgba(28, 31, 59, 0) 45%);
}

.account-card__body {
  padding: var(--space-12);
}

@media (max-width: 768px) {
  .account-card {
    grid-template-columns: 1fr;
  }

  .account-card__visual {
    min-height: 180px;
  }

  .account-card__body {
    padding: var(--space-6) var(--space-5);
  }
}

/* ============================================================
   PAGE DE CONNEXION (Phase 11.9)
   PAGE MOT DE PASSE OUBLIÉ / RÉINITIALISATION (Phase 11.11)
   ============================================================ */

.login-page--single {
  max-width: 480px;
}

.login-page__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 1.5rem;
}

.login-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-bottom: var(--space-3);
}

.login-field label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
}

.login-field .woocommerce-Input,
.login-field input.input-text {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--color-field-border);
  border-radius: var(--radius-md);
  font-size: 0.9375rem;
  transition: border-color var(--transition-fast);
}

/* DETTE-98 [OK] — corrigé le 2026-08-06, même correctif que .profile-field ci-dessus. */
.login-field .woocommerce-Input:focus-visible,
.login-field input.input-text:focus-visible {
  /* 2026-10-23 (DETTE-391) : le contour or foncé du champ (3,5:1) porte
     l'indicateur (accessibility.css) ; le halo or reste décoratif. */
  border-color: var(--color-field-focus);
  box-shadow: 0 0 0 3px var(--color-field-halo);
}

.login-field__hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3);
}

.login-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-3);
  flex-wrap: wrap;
}

.login-remember {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  cursor: pointer;
}

.login-remember input[type="checkbox"] {
  accent-color: var(--color-accent);
}

.login-lost-password {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-decoration: none;
}

.login-lost-password:hover {
  color: var(--color-accent);
}

.login-page__register-cta {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.login-page__register-cta a {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

.login-page__register-cta a:hover {
  color: var(--color-accent);
}

/* ============================================================
   SUIVI DE LIVRAISON (Phase 11.5)
   ============================================================ */

.tracking-page__title,
.samples-page__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--space-5);
}

.tracking-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.tracking-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.tracking-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  background: var(--color-bg-alt, #f5f5f3);
  border-bottom: 1px solid var(--color-border);
}

.tracking-card__order {
  font-weight: 600;
  color: var(--color-primary);
}

/* Timeline des étapes de livraison */
.tracking-timeline {
  display: flex;
  align-items: flex-start;
  list-style: none;
  margin: 0;
  padding: var(--space-4) var(--space-5) var(--space-2);
}

.tracking-timeline__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
  position: relative;
  text-align: center;
}

.tracking-timeline__step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 6px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: var(--color-border);
  z-index: 0;
}

.tracking-timeline__step--done:not(:last-child)::after {
  background: var(--color-accent, #CCA63B);
}

.tracking-timeline__dot {
  position: relative;
  z-index: 1;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-bg, #fff);
  border: 2px solid var(--color-border);
}

.tracking-timeline__step--done .tracking-timeline__dot,
.tracking-timeline__step--active .tracking-timeline__dot {
  border-color: var(--color-accent, #CCA63B);
  background: var(--color-accent, #CCA63B);
}

.tracking-timeline__label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.tracking-timeline__step--active .tracking-timeline__label {
  color: var(--color-primary);
  font-weight: 600;
}

.tracking-card__meta {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin: 0;
  padding: var(--space-3) var(--space-5);
}

.tracking-card__meta-item {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.tracking-card__meta-item dt {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tracking-card__meta-item dd {
  margin: 0;
  font-weight: 600;
  color: var(--color-primary);
}

.tracking-link {
  color: var(--color-accent-dark, var(--color-accent));
  text-decoration: none;
}

.tracking-link:hover {
  text-decoration: underline;
}

.tracking-card__footer {
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--color-border);
}

.tracking-help {
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border);
}

.tracking-empty,
.samples-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-8, 3rem) 0;
  color: var(--color-text-muted);
}

.tracking-empty__hint,
.samples-empty__hint {
  font-size: var(--font-size-xs);
  margin-bottom: var(--space-5);
}

/* ============================================================
   ECHANTILLONS (Phase 11.6)
   ============================================================ */

.samples-table {
  width: 100%;
  border-collapse: collapse;
}

.samples-table th,
.samples-table td {
  padding: 0.625rem var(--space-3);
  border-bottom: 1px solid var(--color-border);
  font-size: 0.9375rem;
  text-align: left;
  vertical-align: middle;
}

.samples-table th {
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.samples-table__product {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.samples-table__thumb {
  border-radius: var(--radius-md);
  flex-shrink: 0;
  object-fit: cover;
}

.samples-table__product span {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.samples-table__sku {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.samples-table__actions {
  /* Passerelle vers l'achat (DETTE-318) : boutons compacts sous le tissu */
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.samples-table__actions .sr-only {
  font-weight: inherit;
}

.samples-table__hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-style: italic;
}

/* ============================================================
   DROPDOWN PROFIL HEADER (Phase 11.10)
   ============================================================ */

.header-account-wrapper {
  position: relative;
}

.header-account-dropdown {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  width: 320px;
  background: var(--color-bg, #ffffff);
  border: 1px solid rgba(229, 225, 216, 0.8);
  border-radius: 16px;
  box-shadow:
    0 8px 32px rgba(15, 28, 53, 0.12),
    0 2px 8px rgba(15, 28, 53, 0.06);
  padding: var(--space-5);
  /* 200 → 9000 (2026-10-01) : même valeur que .favorites-dropdown (main.css).
     À 200, le bouton menu mobile (☰) passait par-dessus le menu compte. */
  z-index: 9000;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.header-account-dropdown[hidden] {
  display: none;
}

.header-account-dropdown.is-open {
  opacity: 1;
  transform: translateY(0);
}

/* Petite flèche décorative — même traitement visuel que .favorites-dropdown__arrow */
.account-dropdown__arrow {
  position: absolute;
  top: -7px;
  right: 20px;
  width: 14px;
  height: 14px;
  background: var(--color-bg, #fff);
  border-left: 1px solid rgba(229, 225, 216, 0.8);
  border-top: 1px solid rgba(229, 225, 216, 0.8);
  transform: rotate(45deg);
  border-radius: 2px 0 0 0;
}

/* ---- État connecté ---- */

/* Ligne d'accueil : avatar (initiale) + salutation (Phase 11.11) */
.account-dropdown__greeting-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.account-dropdown__avatar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-accent);
  font-size: 0.75rem;
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.account-dropdown__greeting {
  font-size: 0.9375rem;
  line-height: var(--line-height-snug);
  color: var(--color-text-muted);
  margin: 0;
}

.account-dropdown__greeting strong {
  color: var(--color-primary);
}

.account-dropdown__links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.account-dropdown__links li + li {
  margin-top: 0.25rem;
}

.account-dropdown__links a {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  border-radius: var(--radius-md);
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.9375rem;
  transition: background var(--transition-fast), color var(--transition-fast);
}

/* Icônes de repère devant chaque lien — muettes au repos, reprennent la
   couleur du texte au survol (même logique que le libellé). */
.account-dropdown__links a svg {
  flex-shrink: 0;
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
}

.account-dropdown__links a:hover {
  background: var(--color-bg-alt, #f5f5f3);
  color: var(--color-primary);
}

.account-dropdown__links a:hover svg {
  color: var(--color-primary);
}

.account-dropdown__links-sep {
  margin-top: var(--space-3) !important;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

/* Déconnexion : même gabarit que les autres liens (icône + texte pleine
   taille) plutôt qu'un texte gris minuscule qui le faisait passer pour
   désactivé — reste secondaire par la couleur muted, pas par la taille. */
.account-dropdown__logout {
  color: var(--color-text-muted);
}

/* ---- État non connecté ---- */

.account-dropdown__intro {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.account-dropdown__title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  margin: 0 0 0.375rem;
}

.account-dropdown__intro .account-dropdown__greeting {
  font-size: 0.8125rem;
  line-height: var(--line-height-base);
  margin: 0;
  padding: 0;
  border: none;
}

.account-dropdown__register {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.account-dropdown__register-text {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.account-dropdown__register .btn {
  flex-shrink: 0;
}

.quick-login__field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 0.625rem;
}

.quick-login__field label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-text);
}

.quick-login__field input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-field-border);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  transition: border-color var(--transition-fast);
  box-sizing: border-box;
}

/* DETTE-98 [OK] — corrigé le 2026-08-06, même correctif que .profile-field ci-dessus. */
.quick-login__field input:focus-visible {
  /* 2026-10-23 (DETTE-391) : le contour or foncé du champ (3,5:1) porte
     l'indicateur (accessibility.css) ; le halo or reste décoratif. */
  border-color: var(--color-field-focus);
  box-shadow: 0 0 0 3px var(--color-field-halo);
}

.quick-login__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: 0.375rem;
  margin-bottom: var(--space-3);
}

.quick-login__remember {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--font-size-xs);
  cursor: pointer;
  color: var(--color-text-muted);
}

.quick-login__remember input[type="checkbox"] {
  accent-color: var(--color-accent);
}

.quick-login__forgot {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-decoration: none;
  white-space: nowrap;
}

.quick-login__forgot:hover {
  color: var(--color-accent);
}

.quick-login__submit {
  width: 100%;
  justify-content: center;
}

.quick-login__message {
  font-size: var(--font-size-xs);
  padding: 0.375rem 0.625rem;
  border-radius: var(--radius-md);
  margin-bottom: 0.625rem;
  background: var(--color-bg-alt, #f5f5f3);
}

@media (max-width: 480px) {
  .header-account-dropdown {
    right: -4rem;
    width: 280px;
  }

  /* Le décalage du dropdown (right: -4rem) doit être compensé pour que
     la pointe reste alignée sous le bouton compte. */
  .account-dropdown__arrow {
    right: calc(20px + 4rem);
  }

  .account-dropdown__register {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .header-account-dropdown {
    transition: none;
  }
}

/* ============================================================
   ONGLET FAVORIS — grille avec cartes blondeau-card
   ============================================================ */

/* ============================================================
   SÉLECTION MULTIPLE — case à cocher + barre d'actions groupées
   ============================================================ */

/* Case de sélection — toujours visible, coin haut-gauche de la media.
   Sibling de .blondeau-card__media-link (pas imbriquée dedans) : aucun
   stopPropagation() nécessaire, le clic sur la case ne déclenche jamais
   la navigation du lien en dessous. Checkbox native masquée (appearance:none)
   et redessinée en rond plein/coche, même langage visuel que le bouton
   cœur (accent doré, ombre douce) plutôt qu'un carré navigateur brut. */
.blondeau-card__select {
  position: absolute;
  top: var(--space-2, 8px);
  left: var(--space-2, 8px);
  z-index: 3;
  display: flex;
  padding: 4px;
  cursor: pointer;
}

.blondeau-card__select-input {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  margin: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  border: 1.5px solid rgba(26, 43, 76, 0.25);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  position: relative;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.blondeau-card__select-input:hover {
  border-color: var(--color-accent, #CCA63B);
  transform: scale(1.06);
}

.blondeau-card__select-input:checked {
  background: var(--color-accent, #CCA63B);
  border-color: var(--color-accent, #CCA63B);
}

.blondeau-card__select-input:checked::after {
  content: '';
  position: absolute;
  left: 7px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.blondeau-card.is-selected .blondeau-card__media {
  outline: 2px solid var(--color-accent, #CCA63B);
  outline-offset: -2px;
}

/* Ombre + passage au-dessus au survol — même effet que le catalogue
   (cards.css : `ul.products > li.product:hover`), scopé ici pour la
   grille favoris qui n'utilise pas la classe `li.product`. Le z-index
   est indispensable dès qu'il y a plusieurs rangées (mobile, 2 colonnes) :
   sans lui, le panneau mini-variantes (position absolute, déborde sous
   la carte) de la rangée du haut passe SOUS la rangée suivante — même
   z-index (1) pour toutes les cartes, donc la dernière peinte dans le
   DOM (rangée du bas) gagne visuellement. */
.fav-page__grid > li:hover .blondeau-card,
.fav-page__grid > li.is-touch-open .blondeau-card,
.fav-page__grid > li:focus-within .blondeau-card {
  background: var(--color-bg);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.14);
}

.fav-page__grid > li:hover,
.fav-page__grid > li.is-touch-open,
.fav-page__grid > li:focus-within {
  z-index: 10;
}

/* Barre d'actions groupées — au-dessus de la grille, masquée par défaut */
.fav-page__bulkbar {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-alt, #f5f5f3);
  border: 1px solid var(--color-border, #E5E1D8);
  border-radius: var(--radius-md, 8px);
}

.fav-page__bulkbar[hidden] { display: none; }

.fav-page__bulkbar-count {
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text-muted, #6B7280);
}

.fav-page__bulkbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.fav-page__bulkbar-clear {
  background: none;
  border: none;
  padding: 0;
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text-muted, #6B7280);
  text-decoration: underline;
  cursor: pointer;
}

.fav-page__bulkbar-delete {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.55rem 1rem;
  background: transparent;
  border: 1px solid rgba(238, 0, 85, 0.5);
  border-radius: var(--radius-md, 8px);
  color: var(--color-heart, #ee0055);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.fav-page__bulkbar-delete:hover {
  background: rgba(238, 0, 85, 0.08);
}

.fav-page__bulkbar-delete:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Aligne le gap sur le catalogue (padding interne de .blondeau-card fait l'espacement) */
.woocommerce-account .fav-page__grid {
  gap: 0;
}

/* Même comportement que li.product dans le catalogue */
.woocommerce-account .fav-page__grid > li {
  list-style: none !important;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;    /* nécessaire pour que .blondeau-card::after { z-index:-1 } soit visible */
  padding: 0;
}

.woocommerce-account .fav-page__grid > li > .blondeau-card {
  flex: 1 1 0%;
}

/* ============================================================
   TABLEAU DE BORD (Phase 11.1, complément)
   ============================================================ */

.dashboard-page__title {
  margin-bottom: var(--space-5);
}

.dashboard-page__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3);
}

/* Neutralise la fuite de « .entry-content ul » (main.css : list-style revert,
   padding-left, margin-bottom) — spécificité supérieure requise */
.entry-content .dashboard-page__grid {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.entry-content .dashboard-page__grid .dashboard-card {
  margin-bottom: 0;
}

/* Même fuite (.entry-content ul, main.css) sur toutes les listes de l'espace
   client — orders-list, tracking-list, dashboard-fav-preview__grid,
   fav-page__grid — reset générique plutôt qu'un correctif par liste */
.woocommerce-account .entry-content ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.woocommerce-account .entry-content ul li {
  margin-bottom: 0;
  /* Autre fuite du même générique global (main.css, "p, li, figcaption {
     max-width: 70ch }", pensé pour du texte de prose) : plafonne à ~650px
     n'importe quelle carte construite sur un <li> (order-card, tracking-card,
     dashboard-card…), sans rapport avec sa largeur réelle voulue — déjà
     rencontré et corrigé au cas par cas ailleurs (.profile-section__desc) ;
     reset générique ici plutôt qu'un correctif par carte, cohérent avec le
     reset ci-dessus. Repéré sur Mon compte > Commandes (2026-08-19), mais
     touche toute liste de l'espace client construite en <li>. */
  max-width: none;
}

/* ============================================================
   DERNIÈRE COMMANDE — bandeau au-dessus de la grille de raccourcis
   ============================================================ */

.dashboard-last-order {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-bg-alt, #F7F5F0);
}

.dashboard-last-order__info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-right: auto;
}

.dashboard-last-order__label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.dashboard-last-order__number {
  font-weight: 600;
  color: var(--color-text);
}

.dashboard-last-order__date {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* ============================================================
   APERÇU DES FAVORIS — sous la grille de raccourcis
   ============================================================ */

.dashboard-fav-preview {
  margin-top: var(--space-6);
}

.dashboard-fav-preview__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.dashboard-fav-preview__title {
  font-size: var(--font-size-lg, 1.125rem);
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}

.dashboard-fav-preview__link {
  font-size: var(--font-size-sm);
  color: var(--color-accent, #CCA63B);
  text-decoration: none;
  white-space: nowrap;
}

.dashboard-fav-preview__link:hover {
  text-decoration: underline;
}

/* Grille + cartes : réutilise .fav-page__grid / .blondeau-card (cf.
   template-parts/favoris/card-readonly.php) — même présentation que le
   catalogue et la page de partage, aucune règle dédiée nécessaire ici. */

/* ============================================================
   NOTIFICATIONS (Phase 11.7) — sous la grille de raccourcis,
   même structure de header que .dashboard-fav-preview
   ============================================================ */

.dashboard-notifications {
  margin-top: var(--space-6);
}

.dashboard-notifications__header {
  margin-bottom: var(--space-3);
}

.dashboard-notifications__title {
  font-size: var(--font-size-lg, 1.125rem);
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}

.dashboard-notifications__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ------------------------------------------------------------------------
   Notifications — refonte 2026-08-28 (retour atelier : présentation
   "grossière, presque pas lisible", validée sur maquette avant implémentation)
   ------------------------------------------------------------------------
   Grille rail / vignette / contenu / actions. Le distinguo lu/non-lu passe
   par le liseré `.notification-item__rail` + un fond teinté — jamais par un
   `opacity` réduit sur le texte : l'ancien `.is-read { opacity: 0.6 }` sur
   du texte déjà --color-text-muted tombait à ~3,3:1, sous le seuil WCAG AA
   (4,5:1) — illisible, pas juste discret. Le texte reste ici à pleine
   lisibilité dans les deux états. */

.notification-item {
  position: relative;
  display: grid;
  grid-template-columns: 3px 52px 1fr auto;
  align-items: center;
  gap: 0 var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  /* --radius-xl : même arrondi que .dashboard-last-order et .dashboard-card,
     les deux autres encarts du tableau de bord. */
  border-radius: var(--radius-xl);
  background: var(--color-bg);
}

.notification-item__rail {
  align-self: stretch;
  border-radius: var(--radius-sm);
  background: transparent;
}

.notification-item.is-unread {
  background: var(--color-bg-alt);
}

.notification-item.is-unread .notification-item__rail {
  background: var(--color-accent);
}

.notification-item__thumb,
.notification-item__thumb--empty {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-base);
  overflow: hidden;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
}

.notification-item__thumb--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
}

.notification-item__thumb--empty svg {
  width: 20px;
  height: 20px;
  opacity: 0.6;
}

.notification-item__thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.notification-item__main {
  min-width: 0;
}

.notification-item__top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.notification-item__product {
  font-weight: var(--font-weight-bold, 700);
  font-size: var(--font-size-sm);
  color: var(--color-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

/* Pastille de statut — la couleur seule ne porte jamais l'information
   (WCAG 1.4.1), le libellé texte ("Baisse"/"Hausse"/"Retiré") l'accompagne
   toujours. Teintes distinctes de --color-success/--color-error (fond très
   clair, texte assombri) pour rester lisibles en petit corps sur fond clair. */
.notification-item__chip {
  display: inline-flex;
  align-items: center;
  font-size: 0.68rem;
  font-weight: var(--font-weight-bold, 700);
  letter-spacing: 0.02em;
  padding: 0.18rem 0.55rem;
  border-radius: var(--radius-full);
  line-height: 1.4;
  white-space: nowrap;
}

.notification-item__chip--baisse {
  background: #F0F9F3;
  color: #1E7A43;
}

.notification-item__chip--hausse {
  background: #FDF2F2;
  color: #9F2D2D;
}

.notification-item__chip--retire {
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
}

/* Prix comparés visuellement (ancien barré → nouveau en gras) plutôt que
   racontés dans une phrase à reconstituer mentalement ("X € au lieu de Y €"). */
.notification-item__price {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
}

.notification-item__price-old {
  text-decoration: line-through;
  color: var(--color-text-muted);
}

.notification-item__price-arrow {
  margin: 0 var(--space-1);
  color: var(--color-text-muted);
}

.notification-item__price-new {
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-text);
}

/* Pas de règle CSS pour la flèche de tendance (↗/↘) dans .notification-item__message
   ci-dessous : son style est en attribut `style=""` inline, généré par
   blondeau_notifications_trend_icon() (plugin Blondeau-textile) — seul moyen
   qu'elle survive identique au rendu on-site (wp_kses_post()) ET dans
   l'email (aucune feuille de style externe dans un client mail). */

.notification-item__message {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

.notification-item__date {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.notification-item__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  flex-shrink: 0;
}

.notification-item__actions .btn {
  white-space: nowrap;
}

@media (max-width: 768px) {
  /* Rail + vignette restent sur la première ligne avec le contenu ; les
     actions passent en pleine largeur en dessous, côte à côte (plus de
     colonne étroite qui écrase le texte ou déborde). */
  .notification-item {
    grid-template-columns: 3px 44px 1fr;
    grid-template-areas:
      "rail thumb main"
      "rail actions actions";
    row-gap: var(--space-3);
  }

  .notification-item__rail { grid-area: rail; }

  .notification-item__thumb,
  .notification-item__thumb--empty {
    grid-area: thumb;
    width: 44px;
    height: 44px;
  }

  .notification-item__main { grid-area: main; }

  .notification-item__actions {
    grid-area: actions;
    flex-direction: row;
  }

  .notification-item__actions .btn {
    flex: 1 1 0;
    min-width: 0;
    white-space: normal;
    text-align: center;
  }

  .notification-item__product {
    max-width: none;
  }
}

.dashboard-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dashboard-card:hover,
.dashboard-card:focus-within {
  border-color: var(--color-accent, #CCA63B);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.dashboard-card__link {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  color: inherit;
  text-decoration: none;
  height: 100%;
}

.dashboard-card__icon {
  position: relative;
  flex: 0 0 auto;
  color: var(--color-primary);
}

.dashboard-card__badge {
  position: absolute;
  top: -6px;
  right: -10px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--color-accent, #CCA63B);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
}

.dashboard-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 0.25rem);
}

.dashboard-card__label {
  font-weight: 600;
  color: var(--color-text);
}

.dashboard-card__desc {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}