/* ═══════════════════════════════════════════════════════════
   CUBX THEME — theme-account.css (v2.5.207 — Sprint front V3 cont.)
   ───────────────────────────────────────────────────────────
   Charge à priority 224 (entre theme-cms 223 et fixes 225).
   Stylise le dashboard "Mon compte" et les pages customer/* (controller=
   my-account, identity, addresses, history, order-detail, etc.) avec :
     - Hero gallery hérité de customer/page.tpl (hero_type='customer')
     - Card blanche centrale (cohérent avec pages CMS, pattern .cubx-hero-cms)
     - Grille de cards de navigation pour le dashboard (.cubx-account-grid)
     - Cards visuelles fond --cubx-accent (or preset, cohérence avec chips
       FAQ + bouton accueil + reste du thème CUBX) avec Material Icon en
       haut + label en bas
     - Hover : invert (fond blanc + texte accent + lift -1px)
     - Responsive : 3 cols desktop / 2 cols tablet / 1 col mobile

   Scope : .cubx-account / .cubx-account-grid / .cubx-account-card
   Cards modules H2J (rendues par hook displayCustomerAccount) héritent
   automatiquement du styling via la classe .cubx-account-card.

   Référence visuelle : idyll.fr/votre-compte (cards mauves carrées 2 cols).

   Architecture cards :
   - 4 cards PS natives toujours présentes : Information, Adresses,
     Historique commandes, Avoirs
   - Cards modules H2J via hook displayCustomerAccount : h2jreviews,
     h2jalerts, h2jrewards, h2jevents, h2jgift, h2jquizz (à terme)
   - 2 cards toujours présentes en bas : Mot de passe, Déconnexion
   - 2 cards MASQUÉES sur iDYLL : Bons de réduction (h2jrewards), Retours
     produit (h2jsav). Pour cubx-theme commercialisable, configuration BO
     paramétrable cf IDEES.md #28.

   @author    H2J Ecosystem <info@2klove.fr>
   @copyright 2024-2026 H2J sas RCS 978391720
   @since     v2.5.207 (chantier dashboard "Mon compte CUBX")
   ═══════════════════════════════════════════════════════════ */


/* ─── 1. WRAPPER GLOBAL — Card blanche centrale (pattern PDP/sitemap/cms) ─── */

body.page-customer-account .cubx-hero-content,
body.page-my-account .cubx-hero-content,
body.page-history .cubx-hero-content,
body.page-identity .cubx-hero-content,
body.page-addresses .cubx-hero-content,
body.page-address .cubx-hero-content,
body.page-order-slip .cubx-hero-content,
body.page-discount .cubx-hero-content,
body.page-order-detail .cubx-hero-content {
  padding: 24px 24px 48px;
}

body.page-customer-account .cubx-hero-content #content-wrapper,
body.page-my-account .cubx-hero-content #content-wrapper,
body.page-history .cubx-hero-content #content-wrapper,
body.page-identity .cubx-hero-content #content-wrapper,
body.page-addresses .cubx-hero-content #content-wrapper,
body.page-address .cubx-hero-content #content-wrapper,
body.page-order-slip .cubx-hero-content #content-wrapper,
body.page-discount .cubx-hero-content #content-wrapper,
body.page-order-detail .cubx-hero-content #content-wrapper {
  background: var(--h2j-bg-card, #ffffff);
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  padding: 32px 40px;
  margin: 0 auto;
  float: none;
  width: 100%;
  max-width: 900px;
}

/* Pages form (identity, address) : card plus etroite, centree */
body.page-identity .cubx-hero-content #content-wrapper,
body.page-address .cubx-hero-content #content-wrapper {
  max-width: 600px;
}


/* ─── 2. SECTION ACCOUNT — Wrapper du dashboard ─── */

.cubx-account {
  text-align: center;
  padding: 0;
  max-width: 1100px;
  margin: 0 auto;
}

.cubx-account__title {
  margin: 0 0 32px;
  padding: 0;
  border: none;
  font-size: 2rem;
  font-weight: 700;
  color: var(--cubx-text, #1a1a1a);
  line-height: 1.2;
  text-align: center;
}


/* ─── 3. GRILLE DASHBOARD ─── */

.cubx-account-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: stretch;
}


/* ─── 4. CARDS DASHBOARD ─── */

.cubx-account-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 28px 18px;
  background: var(--cubx-accent, #d4af37);
  color: #ffffff;
  text-decoration: none;
  border: 2px solid var(--cubx-accent, #d4af37);
  border-radius: 12px;
  min-height: 140px;
  text-align: center;
  transition: background-color 0.18s ease,
              color 0.18s ease,
              border-color 0.18s ease,
              transform 0.15s ease,
              box-shadow 0.18s ease;
  cursor: pointer;
}

.cubx-account-card:hover,
.cubx-account-card:focus {
  background: #ffffff;
  color: var(--cubx-accent, #d4af37);
  border-color: var(--cubx-accent, #d4af37);
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(212, 175, 55, 0.25);
}

.cubx-account-card:active {
  transform: translateY(0);
}

.cubx-account-card__icon {
  font-size: 40px;
  line-height: 1;
  flex-shrink: 0;
  color: #ffffff;
  transition: color 0.18s ease;
}

.cubx-account-card:hover .cubx-account-card__icon,
.cubx-account-card:focus .cubx-account-card__icon {
  color: var(--cubx-accent, #d4af37);
}

.cubx-account-card__label {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.02em;
  display: block;
  width: 100%;
}


/* ─── 5. VARIANTES DE CARDS ───
   Cards spéciales avec accent visuel différent :
   - Logout : fond plus sombre pour signaler une action distincte
   - Cards bonus modules H2J : héritent du styling de base sans override */

.cubx-account-card--logout {
  background: var(--cubx-text, #1a1a1a);
  border-color: var(--cubx-text, #1a1a1a);
}

.cubx-account-card--logout:hover,
.cubx-account-card--logout:focus {
  background: #ffffff;
  color: var(--cubx-text, #1a1a1a);
  border-color: var(--cubx-text, #1a1a1a);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.20);
}

.cubx-account-card--logout:hover .cubx-account-card__icon,
.cubx-account-card--logout:focus .cubx-account-card__icon {
  color: var(--cubx-text, #1a1a1a);
}


/* ─── 5b. ABSORPTION DES CARDS MODULES NON-COMPLIANTS ───
   Certains modules tiers (ex: psgdpr) s'enregistrent sur le hook
   displayCustomerAccount avec leur propre markup Bootstrap legacy
   `<a class="col-lg-4 col-md-6 ..." id="...-link"><span class="link-item">
   <i class="material-icons">XX</i> Label</span></a>`. Plutôt que d'override
   le template du module (invasif, casse l'isolation), on transforme
   visuellement le markup au niveau CSS pour qu'il ressemble à une card CUBX.

   Cible : les <a> enfants directs de .cubx-account-grid qui ne sont PAS
   déjà .cubx-account-card (= les cards rendues par hook avec markup Classic).

   Tous les futurs modules H2J (h2jreviews, h2jrewards, etc.) qui rendront
   leur card avec class="cubx-account-card" seront pris par les règles
   normales et n'auront pas besoin de cette absorption. */

.cubx-account-grid > a:not(.cubx-account-card) {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 28px 18px;
  background: var(--cubx-accent, #d4af37);
  color: #ffffff;
  text-decoration: none;
  border: 2px solid var(--cubx-accent, #d4af37);
  border-radius: 12px;
  min-height: 140px;
  text-align: center;
  width: auto;        /* neutralise le grid Bootstrap col-lg-4 etc */
  max-width: none;
  flex: 0 1 auto;
  transition: background-color 0.18s ease,
              color 0.18s ease,
              border-color 0.18s ease,
              transform 0.15s ease,
              box-shadow 0.18s ease;
  cursor: pointer;
}

.cubx-account-grid > a:not(.cubx-account-card):hover,
.cubx-account-grid > a:not(.cubx-account-card):focus {
  background: #ffffff;
  color: var(--cubx-accent, #d4af37);
  border-color: var(--cubx-accent, #d4af37);
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(212, 175, 55, 0.25);
}

.cubx-account-grid > a:not(.cubx-account-card):active {
  transform: translateY(0);
}

/* Le contenu Classic est wrappé dans <span class="link-item"> avec
   <i class="material-icons">XX</i> + texte libre. On transforme :
     - .link-item devient un flex column (icône + label) comme nos cards
     - .material-icons inside hérite de la taille / couleur de notre design
     - le texte libre devient le label (font-size 14px bold blanc) */

.cubx-account-grid > a:not(.cubx-account-card) > .link-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: inherit;
}

.cubx-account-grid > a:not(.cubx-account-card) > .link-item > .material-icons,
.cubx-account-grid > a:not(.cubx-account-card) > .link-item > i.material-icons {
  font-size: 40px;
  line-height: 1;
  flex-shrink: 0;
  color: inherit;
  transition: color 0.18s ease;
}


/* ─── 6. NEUTRALISATION DU MARKUP CLASSIC PS ───
   Le template Classic my-account.tpl qu'on remplace contient sa propre
   grille de liens. Notre extends parent: + override block content
   neutralise normalement ce markup, mais on ajoute une ceinture-bretelles
   au cas où PS rendrait du markup parent legacy via les blocs hérités.

   Si jamais des liens Classic legacy apparaissent (links-list, etc.),
   les masquer sur le scope page-my-account. */

body.page-my-account .cubx-hero-content .links {
  display: none !important;
}

body.page-my-account .cubx-hero-content .page-content--my-account .links,
body.page-my-account .cubx-hero-content #links {
  display: none !important;
}


/* ─── 7. RESPONSIVE — Tablet (≤991px) : 2 cols ─── */

@media (max-width: 991px) {
  .cubx-account-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
}


/* ─── 8. RESPONSIVE — Mobile (≤767px) : 1 col + ajustements ─── */

@media (max-width: 767px) {
  body.page-customer-account .cubx-hero-content,
  body.page-my-account .cubx-hero-content,
  body.page-history .cubx-hero-content,
  body.page-identity .cubx-hero-content,
  body.page-addresses .cubx-hero-content,
  body.page-address .cubx-hero-content,
  body.page-order-slip .cubx-hero-content,
  body.page-discount .cubx-hero-content,
  body.page-order-detail .cubx-hero-content {
    padding: 16px 12px 32px;
  }

  body.page-customer-account .cubx-hero-content #content-wrapper,
  body.page-my-account .cubx-hero-content #content-wrapper,
  body.page-history .cubx-hero-content #content-wrapper,
  body.page-identity .cubx-hero-content #content-wrapper,
  body.page-addresses .cubx-hero-content #content-wrapper,
  body.page-address .cubx-hero-content #content-wrapper,
  body.page-order-slip .cubx-hero-content #content-wrapper,
  body.page-discount .cubx-hero-content #content-wrapper,
  body.page-order-detail .cubx-hero-content #content-wrapper {
    padding: 20px 16px;
    border-radius: 12px;
  }

  .cubx-account__title {
    font-size: 1.5rem;
    margin-bottom: 24px;
  }

  .cubx-account-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .cubx-account-card {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 18px;
    padding: 18px 20px;
    min-height: 0;
    text-align: left;
  }

  .cubx-account-card__icon {
    font-size: 32px;
  }

  .cubx-account-card__label {
    font-size: 14px;
    flex: 1;
  }

  /* Cards modules non-compliants (psgdpr etc) : même layout flex-row mobile */
  .cubx-account-grid > a:not(.cubx-account-card) {
    flex-direction: row !important;
    justify-content: flex-start;
    align-items: center;
    gap: 18px;
    padding: 18px 20px;
    min-height: 0;
    text-align: left;
  }

  .cubx-account-grid > a:not(.cubx-account-card) > .link-item {
    flex-direction: row;
    justify-content: flex-start;
    gap: 18px;
    text-align: left;
  }

  .cubx-account-grid > a:not(.cubx-account-card) > .link-item > .material-icons,
  .cubx-account-grid > a:not(.cubx-account-card) > .link-item > i.material-icons {
    font-size: 32px;
  }
}


/* ─── 9. RESPONSIVE — Très petit mobile (≤375px) ─── */

@media (max-width: 375px) {
  .cubx-account-card {
    padding: 14px 16px;
    gap: 14px;
  }

  .cubx-account-card__icon {
    font-size: 28px;
  }

  .cubx-account-card__label {
    font-size: 13px;
  }
}


/* ─── 10. PAGES CUSTOMER SUB-PAGES (identity, addresses, history, etc.) ───
   Pour les sous-pages du compte (form Identité, liste Adresses, Historique
   commandes, Détail commande, Avoirs), on hérite du même wrapper card
   blanche centrale (section 1) sans grille de cards. Le contenu PS Classic
   est rendu tel quel dans la card.

   À terme, h2jforms reprendra les pages identity, addresses, password avec
   ses propres formulaires. Pour l'instant, le styling du wrapper suffit. */

body.page-identity .cubx-hero-content #content-wrapper h1,
body.page-addresses .cubx-hero-content #content-wrapper h1,
body.page-address .cubx-hero-content #content-wrapper h1,
body.page-history .cubx-hero-content #content-wrapper h1,
body.page-order-slip .cubx-hero-content #content-wrapper h1,
body.page-discount .cubx-hero-content #content-wrapper h1,
body.page-order-detail .cubx-hero-content #content-wrapper h1 {
  margin: 0 0 24px;
  padding: 0;
  border: none;
  background: none;
  font-size: 2rem;
  font-weight: 700;
  color: var(--cubx-text, #1a1a1a);
  line-height: 1.2;
  text-align: left;
}

/* Exception : le H1 de /order-detail est centre (decision David v2.5.253).
   v2.5.255 : FIX -- /order-detail n'a PAS de hero gallery (decision actee :
   page dense de consultation). Le H1 n'est donc PAS dans .cubx-hero-content,
   il est genere par la chaine d'heritage parent dans <header class="page-header">
   directement sous #content-wrapper. Les selecteurs de la regle commune
   ci-dessus (.cubx-hero-content #content-wrapper h1) ne le matchaient JAMAIS
   -> le H1 restait en text-align par defaut, colle a gauche, tronque sous le
   burger. On cible ici le VRAI chemin du H1 sur cette page : sans dependance
   a .cubx-hero-content. Les 6 autres pages customer (identity/addresses/...)
   ont bien un hero, leur regle commune reste correcte -- on ne la touche pas. */
body.page-order-detail #content-wrapper .page-header h1,
body.page-order-detail #content-wrapper > h1,
body.page-order-detail .page-header h1 {
  margin: 0 0 24px;
  padding: 0;
  border: none;
  background: none;
  font-size: 2rem;
  font-weight: 700;
  color: var(--cubx-text, #1a1a1a);
  line-height: 1.2;
  text-align: center;
}

/* Le <header class="page-header"> wrapper du H1 : pas de marge/padding
   parasite, prend toute la largeur de la card. */
body.page-order-detail #content-wrapper .page-header {
  margin: 0;
  padding: 0;
  width: 100%;
}

@media (max-width: 767px) {
  body.page-identity .cubx-hero-content #content-wrapper h1,
  body.page-addresses .cubx-hero-content #content-wrapper h1,
  body.page-address .cubx-hero-content #content-wrapper h1,
  body.page-history .cubx-hero-content #content-wrapper h1,
  body.page-order-slip .cubx-hero-content #content-wrapper h1,
  body.page-discount .cubx-hero-content #content-wrapper h1,
  body.page-order-detail .cubx-hero-content #content-wrapper h1,
  body.page-order-detail #content-wrapper .page-header h1,
  body.page-order-detail #content-wrapper > h1,
  body.page-order-detail .page-header h1 {
    font-size: 1.4rem;
  }
}


/* ─── 11. MASQUAGE BREADCRUMB NATIF PS SUR PAGES CUSTOMER ───
   Pattern P-071 : sur toutes les pages customer/* (dashboard "Mon compte"
   et sub-pages), le breadcrumb natif PS Classic ("Accueil > Votre compte >
   Adresses") fait redondant avec le H1 CUBX bien visible ("Mettre à jour
   votre adresse"), surtout sur mobile où il prend une ligne entière en
   haut au-dessus du hero gallery.

   Même approche que pages CMS (P-071, theme-cms.css) : on masque le
   breadcrumb sur le scope page-* customer. Le hero gallery + H1 + bouton
   Accueil en bas (le cas échéant) sont suffisants pour la navigation.

   Capture iPhone v2.5.207 sur /fr/adresses : breadcrumb "Accueil > Votre
   compte > Adresses" visible en haut, pris dans la marge entre le menu
   burger et la corbeille du panier, au-dessus du hero. Après ce fix le
   breadcrumb disparaît, le hero gallery occupe toute la zone haut. */

body.page-customer-account nav[aria-label="Breadcrumb"],
body.page-customer-account .breadcrumb,
body.page-my-account nav[aria-label="Breadcrumb"],
body.page-my-account .breadcrumb,
body.page-identity nav[aria-label="Breadcrumb"],
body.page-identity .breadcrumb,
body.page-addresses nav[aria-label="Breadcrumb"],
body.page-addresses .breadcrumb,
body.page-address nav[aria-label="Breadcrumb"],
body.page-address .breadcrumb,
body.page-history nav[aria-label="Breadcrumb"],
body.page-history .breadcrumb,
body.page-order-slip nav[aria-label="Breadcrumb"],
body.page-order-slip .breadcrumb,
body.page-discount nav[aria-label="Breadcrumb"],
body.page-discount .breadcrumb,
body.page-order-detail nav[aria-label="Breadcrumb"],
body.page-order-detail .breadcrumb {
  display: none !important;
}


/* ============================================================
   ADDRESSES PAGE -- cubx-addresses-grid
   ============================================================ */

.cubx-addresses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}

.cubx-address-card {
  background: var(--cubx-bg, #fef8e9);
  border: 1px solid color-mix(in srgb, var(--cubx-accent, #c9a84c) 25%, transparent);
  border-radius: var(--cubx-radius, 12px);
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: box-shadow 0.2s, transform 0.2s;
}

.cubx-address-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}

.cubx-address-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cubx-address-card__icon {
  color: var(--cubx-accent, #c9a84c);
  font-size: 22px;
}

.cubx-address-card__alias {
  font-size: 15px;
  font-weight: 700;
  color: var(--cubx-text, #1e293b);
  margin: 0;
}

.cubx-address-card__body {
  font-size: 13px;
  line-height: 1.6;
  color: var(--cubx-text-light, #64748b);
  font-style: normal;
  flex: 1;
}

.cubx-address-card__footer {
  display: flex;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--cubx-accent, #c9a84c) 15%, transparent);
}

.cubx-address-card__action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}

.cubx-address-card__action .material-icons {
  font-size: 16px;
}

.cubx-address-card__action--edit {
  color: var(--cubx-accent, #c9a84c);
  background: color-mix(in srgb, var(--cubx-accent, #c9a84c) 10%, transparent);
}

.cubx-address-card__action--edit:hover {
  background: color-mix(in srgb, var(--cubx-accent, #c9a84c) 20%, transparent);
}

.cubx-address-card__action--delete {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.08);
}

.cubx-address-card__action--delete:hover {
  background: rgba(239, 68, 68, 0.15);
}

/* Empty state */
.cubx-addresses-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--cubx-text-light, #94a3b8);
}

.cubx-addresses-empty__icon {
  font-size: 48px;
  display: block;
  margin-bottom: 12px;
  color: color-mix(in srgb, var(--cubx-accent, #c9a84c) 40%, transparent);
}

/* Add button */
.cubx-addresses-add {
  text-align: center;
  margin-top: 8px;
}

/* Responsive */
@media (max-width: 576px) {
  .cubx-addresses-grid {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   MY ACCOUNT FOOTER LINKS (Back to account + Home)
   Applique sur toutes les pages customer/* via customer/page.tpl
   Partial : customer/_partials/my-account-links.tpl
   ============================================================ */

.page-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid color-mix(in srgb, var(--cubx-accent, #c9a84c) 20%, transparent);
  flex-wrap: wrap;
}

.page-footer .account-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--cubx-accent, #c9a84c);
  text-decoration: none;
  padding: 8px 16px;
  border-radius: var(--cubx-radius, 8px);
  border: 1px solid color-mix(in srgb, var(--cubx-accent, #c9a84c) 35%, transparent);
  background: color-mix(in srgb, var(--cubx-accent, #c9a84c) 8%, transparent);
  transition: background 0.15s, border-color 0.15s;
}

.page-footer .account-link .material-icons {
  font-size: 16px;
  color: var(--cubx-accent, #c9a84c);
}

.page-footer .account-link:hover {
  background: color-mix(in srgb, var(--cubx-accent, #c9a84c) 18%, transparent);
  border-color: var(--cubx-accent, #c9a84c);
}

@media (max-width: 576px) {
  .page-footer {
    flex-direction: column;
    gap: 8px;
  }
}


/* ============================================================
   ORDER HISTORY + ORDER FOLLOW -- cubx-orders-list
   Shared by history.tpl and order-follow.tpl
   ============================================================ */

.cubx-orders-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cubx-order-row {
  display: grid;
  grid-template-columns: 2fr 1.5fr 1fr 1.5fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--cubx-bg, #fef8e9);
  border: 1px solid color-mix(in srgb, var(--cubx-accent, #c9a84c) 20%, transparent);
  border-radius: var(--cubx-radius, 12px);
  transition: box-shadow 0.2s;
}

/* Responsive -- stack progressivement */
@media (max-width: 1100px) {
  .cubx-order-row {
    grid-template-columns: 2fr 1.2fr 1fr 1.2fr auto;
    gap: 10px;
  }
}

/* --- Variante AVOIRS (credit-slip) : 4 colonnes au lieu de 5 ---
   Un avoir n'a pas de total ni de statut comme une commande. Colonnes :
   numero d'avoir (ref) / commande liee (order) / date / actions.
   La colonne __order reutilise le style de __ref (lien accentue). */
.cubx-order-row--slip {
  grid-template-columns: 1.6fr 1.6fr 1.2fr auto;
}

@media (max-width: 1100px) {
  .cubx-order-row--slip {
    grid-template-columns: 1.4fr 1.4fr 1fr auto;
  }
}

/* --- Variante 2 LIGNES (order history v2.5.254) ---
   history.tpl rend chaque commande sur 2 rangees au lieu d'une seule :
     Ligne 1 = ref / date / total / statut (4 cellules d'info)
     Ligne 2 = boutons d'action (pleine largeur sous la ligne 1)
   On reutilise les 5 memes <div> enfants que .cubx-order-row standard ;
   seul le placement grille change. order-follow.tpl partage
   .cubx-order-row de base et n'est PAS affecte (il n'a pas la classe
   modificatrice --2lines).

   Grille : 2 rangees explicites. Les 4 cellules d'info se placent en
   rangee 1 ; __actions est force en rangee 2 sur toute la largeur via
   grid-column: 1 / -1. */
.cubx-order-row--2lines {
  grid-template-columns: 2fr 1.3fr 1fr 1.4fr;
  grid-template-rows: auto auto;
  row-gap: 12px;
}

.cubx-order-row--2lines .cubx-order-row__ref    { grid-row: 1; grid-column: 1; }
.cubx-order-row--2lines .cubx-order-row__date   { grid-row: 1; grid-column: 2; }
.cubx-order-row--2lines .cubx-order-row__total  { grid-row: 1; grid-column: 3; }
.cubx-order-row--2lines .cubx-order-row__status { grid-row: 1; grid-column: 4; }

/* Ligne 2 : actions sur toute la largeur, separees par un filet discret */
.cubx-order-row--2lines .cubx-order-row__actions {
  grid-row: 2;
  grid-column: 1 / -1;
  justify-content: flex-start;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--cubx-accent, #c9a84c) 15%, transparent);
}

@media (max-width: 1100px) {
  .cubx-order-row--2lines {
    grid-template-columns: 2fr 1.2fr 1fr 1.2fr;
  }
}

.cubx-order-row__order a {
  font-weight: 600;
  color: var(--cubx-text, #1e293b);
  text-decoration: none;
}

.cubx-order-row__order a:hover {
  color: var(--cubx-accent, #c9a84c);
}


.cubx-order-row:hover {
  box-shadow: 0 3px 12px rgba(0,0,0,0.07);
}

.cubx-order-row > div {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
}

.cubx-order-row .material-icons {
  font-size: 16px;
  color: var(--cubx-accent, #c9a84c);
  flex-shrink: 0;
}

.cubx-order-row__ref a {
  font-weight: 700;
  color: var(--cubx-text, #1e293b);
  text-decoration: none;
}

.cubx-order-row__ref a:hover {
  color: var(--cubx-accent, #c9a84c);
}

.cubx-order-row__date,
.cubx-order-row__total {
  color: var(--cubx-text-light, #64748b);
}

.cubx-order-row__total {
  font-weight: 600;
  color: var(--cubx-text, #1e293b);
}

/* Status badge -- uses PS order status color inline */
.cubx-order-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.cubx-order-badge--neutral {
  background: color-mix(in srgb, var(--cubx-accent, #c9a84c) 12%, transparent);
  color: var(--cubx-accent, #c9a84c);
}

/* Action buttons */
.cubx-order-row__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.cubx-order-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: var(--cubx-radius, 8px);
  background: color-mix(in srgb, var(--cubx-accent, #c9a84c) 12%, transparent);
  color: var(--cubx-accent, #c9a84c);
  border: 1px solid color-mix(in srgb, var(--cubx-accent, #c9a84c) 30%, transparent);
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.cubx-order-btn .material-icons {
  font-size: 15px;
  color: var(--cubx-accent, #c9a84c);
}

.cubx-order-btn:hover {
  background: color-mix(in srgb, var(--cubx-accent, #c9a84c) 22%, transparent);
  border-color: var(--cubx-accent, #c9a84c);
}

.cubx-order-btn--ghost {
  background: transparent;
  color: var(--cubx-text-light, #64748b);
  border-color: var(--cubx-border, #e2e8f0);
}

.cubx-order-btn--ghost .material-icons {
  color: var(--cubx-text-light, #64748b);
}

.cubx-order-btn--ghost:hover {
  background: color-mix(in srgb, var(--cubx-accent, #c9a84c) 8%, transparent);
  color: var(--cubx-accent, #c9a84c);
  border-color: var(--cubx-accent, #c9a84c);
}

.cubx-order-btn--ghost:hover .material-icons {
  color: var(--cubx-accent, #c9a84c);
}

/* Empty state (shared) */
.cubx-account-empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--cubx-text-light, #94a3b8);
}

.cubx-account-empty .material-icons {
  font-size: 52px;
  display: block;
  margin-bottom: 12px;
  color: color-mix(in srgb, var(--cubx-accent, #c9a84c) 35%, transparent);
}

/* Responsive -- stack en colonnes sur mobile */
@media (max-width: 900px) {
  .cubx-order-row {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .cubx-order-row__actions { grid-column: 1 / 4; justify-content: flex-start; flex-direction: row; flex-wrap: wrap; }
  .cubx-order-row--slip {
    grid-template-columns: 1fr 1fr;
  }
  .cubx-order-row--slip .cubx-order-row__ref,
  .cubx-order-row--slip .cubx-order-row__actions { grid-column: 1 / 3; }

  /* Variante 2 lignes : ligne 1 passe en 2 colonnes (ref+date / total+statut),
     actions toujours en pleine largeur dessous. On reaffecte les grid-row
     pour que ref/date soient en rangee 1 et total/statut en rangee 2,
     puis les actions en rangee 3. */
  .cubx-order-row--2lines {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
  }
  .cubx-order-row--2lines .cubx-order-row__ref    { grid-row: 1; grid-column: 1; }
  .cubx-order-row--2lines .cubx-order-row__date   { grid-row: 1; grid-column: 2; }
  .cubx-order-row--2lines .cubx-order-row__total  { grid-row: 2; grid-column: 1; }
  .cubx-order-row--2lines .cubx-order-row__status { grid-row: 2; grid-column: 2; }
  .cubx-order-row--2lines .cubx-order-row__actions { grid-row: 3; grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .cubx-order-row {
    grid-template-columns: 1fr 1fr;
  }
  .cubx-order-row__ref   { grid-column: 1 / 3; }
  .cubx-order-row__actions { grid-column: 1 / 3; justify-content: flex-start; flex-direction: row; flex-wrap: wrap; }
}

@media (max-width: 480px) {
  .cubx-order-row {
    grid-template-columns: 1fr;
  }
  .cubx-order-row__ref,
  .cubx-order-row__actions { grid-column: 1; }
  .cubx-order-row__actions { flex-direction: row; flex-wrap: wrap; }
  .cubx-order-row--slip {
    grid-template-columns: 1fr;
  }
  .cubx-order-row--slip .cubx-order-row__ref,
  .cubx-order-row--slip .cubx-order-row__actions { grid-column: 1; }

  /* Variante 2 lignes : tout en 1 colonne, chaque cellule sur sa rangee,
     actions en derniere rangee pleine largeur. */
  .cubx-order-row--2lines {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto auto;
  }
  .cubx-order-row--2lines .cubx-order-row__ref    { grid-row: 1; grid-column: 1; }
  .cubx-order-row--2lines .cubx-order-row__date   { grid-row: 2; grid-column: 1; }
  .cubx-order-row--2lines .cubx-order-row__total  { grid-row: 3; grid-column: 1; }
  .cubx-order-row--2lines .cubx-order-row__status { grid-row: 4; grid-column: 1; }
  .cubx-order-row--2lines .cubx-order-row__actions { grid-row: 5; grid-column: 1; }
}


/* Pagination JS client-side */
.cubx-orders-pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.cubx-pager {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}

.cubx-pager__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: var(--cubx-radius, 8px);
  border: 1px solid color-mix(in srgb, var(--cubx-accent, #c9a84c) 30%, transparent);
  background: transparent;
  color: var(--cubx-text-light, #64748b);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.cubx-pager__btn .material-icons { font-size: 18px; }

.cubx-pager__btn:hover:not([disabled]) {
  background: color-mix(in srgb, var(--cubx-accent, #c9a84c) 12%, transparent);
  color: var(--cubx-accent, #c9a84c);
  border-color: var(--cubx-accent, #c9a84c);
}

.cubx-pager__btn--active {
  background: var(--cubx-accent, #c9a84c);
  color: #fff !important;
  border-color: var(--cubx-accent, #c9a84c);
  font-weight: 700;
}

.cubx-pager__btn[disabled] {
  opacity: 0.35;
  cursor: default;
}


/* ============================================================
   IDENTITY PAGE -- customer/identity.tpl
   Le form natif PS (_partials/customer-form.tpl) utilise Bootstrap.
   On harmonise les inputs avec le design system CUBX.
   ============================================================ */

/* --- Wrapper form en flex pour reordonner via CSS order ---
   v2.5.238 : EXCLUSION critique. #customer-form > div a une specificite
   (1,1,1) a cause de l'#id, ce qui ECRASAIT .cubx-identity-pwd-notice
   (0,2,1) et la forcait en display:flex + flex-direction:column ->
   l'icone lock se retrouvait empilee seule au-dessus du texte (LE bug
   "icone qui se balade" traine depuis ~15 versions).
   Le form n'a qu'UN seul vrai <div> wrapper de champs (sans classe) ;
   la notice et l'agegate error sont aussi des <div> enfants directs mais
   ne doivent PAS etre flexes. On les exclut explicitement. */
body.page-identity #customer-form > div:not(.cubx-identity-pwd-notice):not(.cubx-agegate-error):not(.cubx-pwd-legend) {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Cacher tous les labels PS (on utilise les placeholders) */
body.page-identity .form-group label,
body.page-identity .form-group .label {
  display: none;
}

/* Exception : les gender cards sont des <label> -- ne pas masquer */
body.page-identity .cubx-identity-gender-card {
  display: block !important;
}

/* --- Inputs style CUBX --- */
body.page-identity .form-control {
  background: var(--cubx-bg, #fef8e9) !important;
  border: 1px solid color-mix(in srgb, var(--cubx-accent, #c9a84c) 30%, transparent);
  border-radius: var(--cubx-radius, 8px);
  font-size: 14px;
  padding: 10px 14px;
  color: var(--cubx-text, #1e293b);
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
  box-sizing: border-box;
}

body.page-identity .form-control:focus {
  border-color: var(--cubx-accent, #c9a84c);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cubx-accent, #c9a84c) 15%, transparent);
  outline: none;
}

/* --- Gender cards (Social title) --- */
body.page-identity .form-group--id_gender {
  order: 1;
}

/* Masquer les radios natifs PS et leur wrapper col-md -- SEULEMENT dans gender group */
body.page-identity .form-group--id_gender .radio-inline,
body.page-identity .form-group--id_gender .js-input-column,
body.page-identity .form-group--id_gender .col-md-6,
body.page-identity .form-group--id_gender .form-control-valign {
  display: none !important;
}

/* Masquer les textes de commentaire sous les champs (.form-control-comment) */
body.page-identity .form-group:not(.form-group--id_gender) .form-control-comment,
body.page-identity .form-group--id_gender .col-md-3.form-control-comment {
  display: none !important;
}

/* Forcer la visibilite des form-group dans field-password-policy */
body.page-identity .field-password-policy > .form-group {
  display: block !important;
}

/* v2.5.236 : les boutons natifs sont reclasses CUBX, on garde seulement le
   masquage des residuels via la regle plus bas (section IDENTITY PASSWORD). */

body.page-identity .cubx-identity-gender-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

body.page-identity .cubx-identity-gender-card {
  position: relative;
  cursor: pointer;
  display: block;
}

body.page-identity .cubx-identity-gender-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

body.page-identity .cubx-identity-gender-card-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 12px;
  background: var(--cubx-bg, #fef8e9);
  border: 1px solid color-mix(in srgb, var(--cubx-accent, #c9a84c) 25%, transparent);
  border-radius: var(--cubx-radius, 8px);
  transition: border-color 0.15s, background 0.15s;
  min-height: 44px;
  box-sizing: border-box;
}

body.page-identity .cubx-identity-gender-card .material-icons {
  font-size: 22px;
  line-height: 1;
}

body.page-identity .cubx-identity-gender-card:nth-child(1) .material-icons { color: #3b82f6; }
body.page-identity .cubx-identity-gender-card:nth-child(2) .material-icons { color: #ec4899; }

body.page-identity .cubx-identity-gender-label {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--cubx-text, #1e293b);
}

body.page-identity .cubx-identity-gender-card input[type="radio"]:checked + .cubx-identity-gender-card-inner {
  border-color: var(--cubx-accent, #c9a84c);
  background: color-mix(in srgb, var(--cubx-accent, #c9a84c) 8%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cubx-accent, #c9a84c) 20%, transparent);
}

body.page-identity .cubx-identity-gender-card:nth-child(1) input[type="radio"]:checked + .cubx-identity-gender-card-inner {
  border-color: #3b82f6;
  background: rgba(59,130,246,0.08);
  box-shadow: 0 0 0 2px rgba(59,130,246,0.20);
}

body.page-identity .cubx-identity-gender-card:nth-child(2) input[type="radio"]:checked + .cubx-identity-gender-card-inner {
  border-color: #ec4899;
  background: rgba(236,72,153,0.08);
  box-shadow: 0 0 0 2px rgba(236,72,153,0.20);
}

/* --- Ordre des champs via CSS order ---
   Gender(1) -> Names grid(2) -> Birthday(3) -> Phone(4) -> Email(5)
   -> Password actuel(6) -> New password(7) -> optin(8) -> psgdpr masque -> Save
*/
body.page-identity .form-group--id_gender      { order: 1; }
body.page-identity .cubx-identity-names-grid   { order: 2; }
body.page-identity .form-group--birthday       { order: 3; }
body.page-identity .form-group--phone          { order: 4; }
body.page-identity .form-group--email          { order: 5; }
body.page-identity .form-group--password       { order: 6; }
body.page-identity .field-password-policy.form-group--password { order: 6; }
body.page-identity .form-group--new_password   { order: 7; }
body.page-identity .field-password-policy.form-group--new_password { order: 7; }
body.page-identity .form-group--optin          { order: 8; }
body.page-identity .form-group--psgdpr         { order: 9; }
body.page-identity .form-footer                { order: 10; }

/* Names en grid 2 cols */
body.page-identity .cubx-identity-names-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 480px) {
  body.page-identity .cubx-identity-names-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Birthday + Phone : fond creme + virer label --- */
body.page-identity .form-group--birthday .h2j-datepicker,
body.page-identity .form-group--birthday .h2j-datepicker input,
body.page-identity .form-group--birthday input[type="text"] {
  background: var(--cubx-bg, #fef8e9) !important;
  border: 1px solid color-mix(in srgb, var(--cubx-accent, #c9a84c) 30%, transparent) !important;
  border-radius: var(--cubx-radius, 8px) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: 44px;
}

body.page-identity .form-group--phone .h2jphone-flag-btn,
body.page-identity .form-group--phone .h2jphone-flag-btn:hover,
body.page-identity .form-group--phone .h2jphone-flag-btn:focus,
body.page-identity .form-group--phone .h2jphone-input,
body.page-identity .form-group--phone .h2jphone-wrap {
  background: var(--cubx-bg, #fef8e9) !important;
}

/* --- Password actuel : v2.5.236 le JS cache directement les boutons inutiles --- */

/* --- psgdpr : consentement RGPD -- DOIT rester visible et cochable ---
   v2.5.243 : BUG CRITIQUE corrige. L input psgdpr est `required` (PS le
   genere ainsi). On le masquait avec `display:none` -> le navigateur
   refusait de soumettre le form (validation HTML5 sur champ invisible)
   avec l erreur console "An invalid form control with name='psgdpr' is
   not focusable" -> le bouton ENREGISTRER ne reagissait plus du tout.
   Le consentement RGPD est legalement obligatoire : on le RE-AFFICHE et
   on le style en checkbox CUBX, exactement comme l optin. */
body.page-identity .form-group--psgdpr {
  order: 9;
  display: block;
}

/* Markup PS psgdpr identique a l optin :
   <span class="custom-checkbox"><label><input type="checkbox" required>
   <span><i class="checkbox-checked"></i></span> Texte + lien politique
   confidentialite</label></span>.
   On cache la coche custom PS et on style l input natif. */
body.page-identity .form-group--psgdpr .custom-checkbox > label > span {
  display: none !important;
}

body.page-identity .form-group--psgdpr label {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.5;
  color: var(--cubx-text-light, #6b7280);
}

body.page-identity .form-group--psgdpr input[type="checkbox"] {
  position: static !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--cubx-accent, #c9a84c);
  cursor: pointer;
  appearance: auto;
  -webkit-appearance: auto;
}

body.page-identity .form-group--psgdpr a {
  color: var(--cubx-accent, #c9a84c);
  text-decoration: underline;
}

/* --- Honeypot h2jforms (anti-spam) : champ cache, ne jamais afficher.
   v2.5.239 : sans cette regle le champ texte honeypot s affichait en
   haut du form (order:0). Le JS ajoute .cubx-identity-honeypot + le
   masque inline, mais on double par CSS au cas ou le JS tarde. --- */
body.page-identity .cubx-identity-honeypot,
body.page-identity [name="h2jforms_hp_field"] {
  display: none !important;
}
body.page-identity #customer-form > div .form-group:has(> [name="h2jforms_hp_field"]) {
  display: none !important;
}

/* --- Checkbox optin style CUBX ---
   v2.5.240 : le markup PS Classic est
     <span class="custom-checkbox"><label>
       <input type="checkbox"><span><i class="checkbox-checked"></i></span> Texte
     </label></span>
   PS dessine sa propre coche via le <i class="checkbox-checked"> et masque
   normalement l input. Notre ancienne regle rendait l input natif visible
   (width:18px + accent-color) EN PLUS de la coche PS -> DOUBLE COCHE.
   Fix : on cache la coche custom PS (le <span> qui contient le <i>) et on
   style proprement l input natif checkbox. */
body.page-identity .form-group--optin .custom-checkbox > label > span {
  display: none !important;
}

body.page-identity .form-group--optin label {
  display: flex !important;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  color: var(--cubx-text, #1e293b);
}

body.page-identity .form-group--optin input[type="checkbox"] {
  /* Re-affiche l input natif (PS le mettait en position absolute hors ecran) */
  position: static !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--cubx-accent, #c9a84c);
  cursor: pointer;
  appearance: auto;
  -webkit-appearance: auto;
}

/* --- Submit button CUBX --- */
body.page-identity .btn.btn-primary,
body.page-identity button[type="submit"] {
  background: var(--cubx-accent, #c9a84c);
  border: none;
  border-radius: var(--cubx-radius, 8px);
  color: #fff;
  font-weight: 700;
  padding: 12px 28px;
  font-size: 14px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: opacity 0.15s;
  float: none !important;
  width: 100%;
  margin-top: 8px;
}

body.page-identity .btn.btn-primary:hover,
body.page-identity button[type="submit"]:hover {
  opacity: 0.88;
}

/* --- Masquer hint texte sous les champs ("Only letters...") --- */
body.page-identity .form-group .help-block {
  display: none;
}

/* --- Masquer les indications "Optional" et "E.g." du datepicker --- */
body.page-identity .form-group--birthday .js-datepicker-help,
body.page-identity .form-group--birthday small,
body.page-identity .form-group--birthday .form-text {
  display: none;
}


/* ============================================================
   IDENTITY PASSWORD CUBX COMPONENTS  (v2.5.236 -- Opus refacto)
   Architecture :
   - .input-group.js-parent-focus est le wrap natif PS, on le passe
     en position:relative pour positionner les boutons en absolute
   - Les boutons h2jforms-pwd-generate (lock + visibility) sont
     reclasses .cubx-pwd-btn--generate et .cubx-pwd-btn--eye par le JS
   - .h2jforms-pwd-strength / __label / requirements sont DEJA hors
     du wrap natif PS (freres de .form-group.row dans .field-password-policy)
     -> on les style directement sans deplacement
   - Le bouton Show natif PS (.input-group-btn) est masque via JS
   ============================================================ */

/* 1. Wrapper natif PS = base relative pour les boutons en absolute */
body.page-identity .field-password-policy .input-group.js-parent-focus {
  position: relative;
  display: block;
}

/* 2. Input password : padding-right pour laisser place aux boutons */
body.page-identity .field-password-policy input[type="password"],
body.page-identity .field-password-policy input.js-visible-password {
  padding-right: 76px !important;
}

/* 3. Boutons CUBX positionnes en absolute dans le wrap PS natif */
body.page-identity .cubx-pwd-btn {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  padding: 6px 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--cubx-text-light, #6b7280);
  border-radius: 6px;
  transition: color 0.12s, background 0.12s;
  z-index: 2;
  margin: 0 !important;
  /* Override des styles inline poses par h2jforms-password.js */
  line-height: 1 !important;
  font-size: 0 !important;
}

body.page-identity .cubx-pwd-btn:hover {
  color: var(--cubx-accent, #c9a84c);
  background: color-mix(in srgb, var(--cubx-accent, #c9a84c) 10%, transparent);
}

body.page-identity .cubx-pwd-btn .material-icons {
  font-size: 20px !important;
  line-height: 1 !important;
  color: inherit;
}

body.page-identity .cubx-pwd-btn--eye      { right: 6px !important; }
body.page-identity .cubx-pwd-btn--generate { right: 40px !important; }
body.page-identity .cubx-pwd-btn--generate .material-icons { color: var(--cubx-accent, #c9a84c) !important; }

/* 4. Boutons h2jforms NON reclasses (= residuels) : on les masque par defense */
body.page-identity .field-password-policy .h2jforms-pwd-generate:not(.cubx-pwd-btn) {
  display: none !important;
}

/* 4b. Bouton "Show" natif PS Classic : <button class="btn" data-action="show-password">
   et son wrapper <span class="input-group-btn">. Masques par defense CSS
   en plus du JS (le JS peut echouer si h2jforms tarde au-dela du polling). */
body.page-identity .field-password-policy .input-group-btn,
body.page-identity .field-password-policy button[data-action="show-password"],
body.page-identity .field-password-policy .btn[data-action="show-password"] {
  display: none !important;
}

/* 5. Strength bar H2JPasswordTools : positionnee sous le champ */
body.page-identity .field-password-policy .h2jforms-pwd-strength {
  height: 6px;
  background: var(--cubx-border, #e5e7eb);
  border-radius: 3px;
  overflow: hidden;
  margin: 8px 0 0;
  width: 100%;
  position: relative;
}

body.page-identity .field-password-policy .h2jforms-pwd-strength__fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.24s, background-color 0.24s;
  width: 0%;
  background: transparent;
}

/* h2jforms-password.js ajoute .h2jforms-pwd-strength--N (1 a 5) sur le parent */
body.page-identity .h2jforms-pwd-strength--1 .h2jforms-pwd-strength__fill { width: 20%;  background: #ef4444; }
body.page-identity .h2jforms-pwd-strength--2 .h2jforms-pwd-strength__fill { width: 40%;  background: #f97316; }
body.page-identity .h2jforms-pwd-strength--3 .h2jforms-pwd-strength__fill { width: 60%;  background: #eab308; }
body.page-identity .h2jforms-pwd-strength--4 .h2jforms-pwd-strength__fill { width: 80%;  background: #84cc16; }
body.page-identity .h2jforms-pwd-strength--5 .h2jforms-pwd-strength__fill { width: 100%; background: #10b981; }

body.page-identity .field-password-policy .h2jforms-pwd-strength__label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--cubx-text-light, #6b7280);
  margin-top: 4px;
  text-align: right;
  display: block;
}

/* 6. Requirements list : grille 3 colonnes */
body.page-identity .field-password-policy .h2jforms-pwd-requirements {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
}

@media (min-width: 500px) {
  body.page-identity .field-password-policy .h2jforms-pwd-requirements {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

body.page-identity .field-password-policy .h2jforms-pwd-requirements li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--cubx-text-light, #6b7280);
  transition: color 0.2s;
}

/* v2.5.240 : icones en RONDS (comme /inscription-h2j) au lieu des croix.
   h2jforms-password.js ecrit 'close' puis 'check_circle' dans le <i>.
   On ne peut pas changer le glyphe en CSS, MAIS on peut neutraliser le
   glyphe natif (font-size:0 sur le <i>) et dessiner notre propre glyphe
   Material via ::before. Le ::before lit la classe --ok/--fail du <li>
   parent -> survit aux reecritures JS de h2jforms a chaque frappe.
   - fail  : radio_button_unchecked (cercle vide gris)
   - ok    : check_circle (cercle coche vert) */
body.page-identity .field-password-policy .h2jforms-pwd-requirements li i.material-icons,
body.page-identity .field-password-policy .h2jforms-pwd-requirements li .material-icons {
  font-size: 0 !important; /* masque le glyphe 'close'/'check_circle' natif */
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color 0.2s;
}

body.page-identity .field-password-policy .h2jforms-pwd-requirements li i.material-icons::before,
body.page-identity .field-password-policy .h2jforms-pwd-requirements li .material-icons::before {
  font-family: 'Material Icons';
  font-size: 16px;
  line-height: 1;
  content: 'radio_button_unchecked'; /* etat par defaut = fail */
  color: var(--cubx-text-light, #9ca3af);
}

/* h2jforms-password.js applique --ok / --fail sur le <li> */
body.page-identity .field-password-policy .h2jforms-req--ok {
  color: #10b981;
}
body.page-identity .field-password-policy .h2jforms-req--ok i.material-icons::before,
body.page-identity .field-password-policy .h2jforms-req--ok .material-icons::before {
  content: 'check_circle';
  color: #10b981;
}

/* 7. Legend sparkle CUBX : meme style que /inscription-h2j */
body.page-identity .cubx-pwd-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0;
  padding: 6px 10px;
  background: color-mix(in srgb, var(--cubx-accent, #c9a84c) 6%, transparent);
  border-left: 2px solid var(--cubx-accent, #c9a84c);
  border-radius: 4px;
  font-size: 0.78rem;
  color: var(--cubx-text-light, #6b7280);
  font-style: italic;
  line-height: 1.4;
}

body.page-identity .cubx-pwd-legend .material-icons {
  font-size: 15px;
  color: var(--cubx-accent, #c9a84c);
  flex-shrink: 0;
  line-height: 1;
}

/* 8. Notice lock au-dessus du Save : meme pattern visuel que la legend.
   IMPORTANT : on n'utilise PAS flex ici. Le texte fait souvent 2 lignes ;
   avec flex + align-items:center l'icone "flotte" au milieu des 2 lignes.
   On veut l'icone collee a la 1ere ligne -> display block + icone en
   inline-flex avec vertical-align:text-bottom dans le flux du texte. */
body.page-identity .cubx-identity-pwd-notice {
  display: block !important;
  padding: 8px 12px;
  background: color-mix(in srgb, var(--cubx-accent, #c9a84c) 6%, transparent);
  border-left: 2px solid var(--cubx-accent, #c9a84c);
  border-radius: 4px;
  font-size: 0.82rem;
  color: var(--cubx-text-light, #6b7280);
  font-style: italic;
  margin-bottom: 8px;
  line-height: 1.5;
}

body.page-identity .cubx-identity-pwd-notice .material-icons {
  font-size: 16px;
  color: var(--cubx-accent, #c9a84c);
  vertical-align: text-bottom;
  margin-right: 6px;
}

body.page-identity .cubx-identity-pwd-notice strong {
  color: var(--cubx-text, #1e293b);
  font-weight: 600;
  font-style: normal;
}

/* 9. AgeGate error : alerte rouge en haut du form */
body.page-identity .cubx-agegate-error {
  padding: 10px 14px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-left-width: 4px;
  border-radius: var(--cubx-radius, 8px);
  color: #b91c1c;
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 500;
}

/* 10. Flash notification CUBX (v2.5.244)
   ---------------------------------------------------------------
   Le #notifications natif PS (bandeau "Information successfully
   updated" en haut de page) est invisible sur smartphone : il est
   au-dessus du hero, hors ecran apres scroll, et pas dans le design
   system CUBX. La section 9 du TPL l intercepte, en extrait le
   message + le type (succes/erreur), cree ce bloc dans la card et
   scrolle dessus. Style calque sur .h2jforms-forgot-success :
   icone Material dans un cercle colore, message centre.
   Pattern visuel identique aux 4 surfaces h2jforms autonomes. */
body.page-identity .cubx-identity-flash {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--cubx-radius, 12px);
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 1.45;
  animation: cubxFlashIn 0.35s ease;
}

@keyframes cubxFlashIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Icone dans un cercle colore (52px, calque sur h2jforms mais un peu
   plus compact car ici le bloc est en ligne, pas centre plein ecran) */
body.page-identity .cubx-identity-flash__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

body.page-identity .cubx-identity-flash__icon .material-icons {
  font-size: 26px;
  line-height: 1;
}

body.page-identity .cubx-identity-flash__body {
  flex: 1 1 auto;
}

body.page-identity .cubx-identity-flash__title {
  margin: 0 0 2px;
  font-size: 15px;
  font-weight: 700;
}

body.page-identity .cubx-identity-flash__message {
  margin: 0;
  font-size: 13.5px;
}

/* --- Variante SUCCES : vert (semantique universelle, hors preset) --- */
body.page-identity .cubx-identity-flash--success {
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.28);
}
body.page-identity .cubx-identity-flash--success .cubx-identity-flash__icon {
  background: rgba(16, 185, 129, 0.14);
  color: #10b981;
}
body.page-identity .cubx-identity-flash--success .cubx-identity-flash__title {
  color: #047857;
}
body.page-identity .cubx-identity-flash--success .cubx-identity-flash__message {
  color: var(--cubx-text-light, #6b7280);
}

/* --- Variante ERREUR : rouge (semantique universelle, hors preset) --- */
body.page-identity .cubx-identity-flash--error {
  background: rgba(239, 68, 68, 0.07);
  border: 1px solid rgba(239, 68, 68, 0.28);
}
body.page-identity .cubx-identity-flash--error .cubx-identity-flash__icon {
  background: rgba(239, 68, 68, 0.13);
  color: #ef4444;
}
body.page-identity .cubx-identity-flash--error .cubx-identity-flash__title {
  color: #b91c1c;
}
body.page-identity .cubx-identity-flash--error .cubx-identity-flash__message {
  color: var(--cubx-text-light, #6b7280);
}

/* On masque le conteneur de notifications natif PS : la section 9 du TPL
   en a deja extrait le contenu vers .cubx-identity-flash. Defense CSS au
   cas ou le JS tarderait (evite le flash du bandeau natif moche).
   v2.5.246 : structure reelle = .notifications-container (pas #notifications,
   qui n existe pas sur 2klove.fr). */
body.page-identity .notifications-container {
  display: none !important;
}


/* ============================================================
   ADDRESS PAGE -- customer/address.tpl  (v2.5.250)
   Formulaire d'adresse (ajout / edition). Le form natif PS Classic
   (.address-form) utilise Bootstrap. On harmonise avec le design
   system CUBX, meme approche que la section IDENTITY ci-dessus.

   Le TPL address.tpl post-traite le form en JS : placeholders,
   classes form-group--<name>, grilles densifiees conditionnelles,
   cablages H2J (phone / text-transform / logistik).

   NB : contrairement a #customer-form (identity), .address-form n'a
   pas d'#id -> pas de piege de specificite, selecteurs simples OK.
   ============================================================ */

/* --- Wrapper du form en flex pour reordonner via CSS order ---
   .form-fields est le conteneur direct des .form-group dans le form
   natif PS adresse. On le passe en flex column. */
body.page-address .address-form .form-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Cacher tous les labels PS (on utilise les placeholders dans la box) */
body.page-address .address-form .form-group label,
body.page-address .address-form .form-group .label {
  display: none;
}

/* --- Inputs + select style CUBX --- */
body.page-address .address-form .form-control,
body.page-address .address-form input[type="text"],
body.page-address .address-form input[type="tel"],
body.page-address .address-form select {
  background: var(--cubx-bg, #fef8e9) !important;
  border: 1px solid color-mix(in srgb, var(--cubx-accent, #c9a84c) 30%, transparent);
  border-radius: var(--cubx-radius, 8px);
  font-size: 14px;
  padding: 10px 14px;
  color: var(--cubx-text, #1e293b);
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
  box-sizing: border-box;
}

body.page-address .address-form .form-control:focus,
body.page-address .address-form input:focus,
body.page-address .address-form select:focus {
  border-color: var(--cubx-accent, #c9a84c);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cubx-accent, #c9a84c) 15%, transparent);
  outline: none;
}

/* Le markup PS enveloppe souvent l'input dans .col-md-6 / .js-input-column ;
   on neutralise la grille Bootstrap interne pour que l'input prenne 100%. */
body.page-address .address-form .form-group .row,
body.page-address .address-form .form-group [class*="col-md"],
body.page-address .address-form .form-group .js-input-column {
  display: block;
  width: 100%;
  max-width: 100%;
  flex: none;
  padding-left: 0;
  padding-right: 0;
  margin: 0;
}

/* --- Ordre des champs via CSS order ---
   Alias(1) -> Names grid(2) -> B2B grid(3) -> Adresse(4) -> Complement(5)
   -> Geo grid CP+Ville(6) -> Pays(7) -> Telephone(8) -> footer(10).
   Les grilles sont des <div> crees par le JS, les form-group restants
   gardent leur ordre naturel via leur classe form-group--<name>.
   Si une grille n'existe pas (ex: B2B off), son order est juste inutilise. */
body.page-address .address-form .form-group--alias   { order: 1; }
body.page-address .address-form .cubx-address-names-grid { order: 2; }
body.page-address .address-form .cubx-address-b2b-grid   { order: 3; }
body.page-address .address-form .form-group--company    { order: 3; } /* fallback si grille B2B non construite */
body.page-address .address-form .form-group--vat_number { order: 3; }
body.page-address .address-form .form-group--address1   { order: 4; }
body.page-address .address-form .form-group--address2   { order: 5; }
body.page-address .address-form .cubx-address-geo-grid  { order: 6; }
body.page-address .address-form .form-group--postcode   { order: 6; } /* fallback si grille geo non construite */
body.page-address .address-form .form-group--city       { order: 6; }
body.page-address .address-form .form-group--id_country { order: 7; }
body.page-address .address-form .form-group--phone      { order: 8; }
body.page-address .address-form .form-footer            { order: 10; }

/* --- Grilles densifiees : 2 colonnes desktop, 1 colonne mobile ---
   Construites par le JS UNIQUEMENT si les 2 champs existent (defensif).
   La grille B2B (company + vat_number) n'apparait que si le mode B2B
   est active cote PS (reglage PS_B2B_ENABLE) -- ce ne sont pas des
   champs H2J. */
body.page-address .address-form .cubx-address-names-grid,
body.page-address .address-form .cubx-address-b2b-grid,
body.page-address .address-form .cubx-address-geo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* Les form-group a l'interieur d'une grille ne reprennent pas la marge
   verticale du flex parent (la grille gere son propre gap). */
body.page-address .address-form .cubx-address-names-grid .form-group,
body.page-address .address-form .cubx-address-b2b-grid .form-group,
body.page-address .address-form .cubx-address-geo-grid .form-group {
  margin: 0;
}

@media (max-width: 480px) {
  body.page-address .address-form .cubx-address-names-grid,
  body.page-address .address-form .cubx-address-b2b-grid,
  body.page-address .address-form .cubx-address-geo-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Widget h2jphone : fond creme coherent ---
   L'input name=phone est auto-wrappe par h2jphone-front.js (drapeau +
   dial code + champ local). Meme override que sur identity / inscription. */
body.page-address .address-form .form-group--phone .h2jphone-flag-btn,
body.page-address .address-form .form-group--phone .h2jphone-flag-btn:hover,
body.page-address .address-form .form-group--phone .h2jphone-flag-btn:focus,
body.page-address .address-form .form-group--phone .h2jphone-input,
body.page-address .address-form .form-group--phone .h2jphone-wrap {
  background: var(--cubx-bg, #fef8e9) !important;
}

/* --- Honeypot h2jforms (anti-spam) : champ cache, ne jamais afficher --- */
body.page-address .cubx-address-honeypot,
body.page-address [name="h2jforms_hp_field"] {
  display: none !important;
}

/* --- Erreur de validation h2jlogistik (code postal <-> pays) ---
   Affichee par le JS du TPL SI le module h2jlogistik est present et
   renvoie une erreur. Module pas encore developpe (cf IDEES.md #35) :
   ces regles sont pretes, inertes tant que h2jlogistik n'expose pas
   window.H2JLogistik.validatePostalCode. */
body.page-address .address-form .cubx-address-field--error input {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12) !important;
}

body.page-address .address-form .cubx-address-logistik-error {
  margin-top: 6px;
  font-size: 12.5px;
  color: #b91c1c;
  line-height: 1.4;
}

/* --- Submit button CUBX --- */
body.page-address .address-form .btn.btn-primary,
body.page-address .address-form button[type="submit"],
body.page-address .address-form .form-control-submit {
  background: var(--cubx-accent, #c9a84c);
  border: none;
  border-radius: var(--cubx-radius, 8px);
  color: #fff;
  font-weight: 700;
  padding: 12px 28px;
  font-size: 14px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: opacity 0.15s;
  float: none !important;
  width: 100%;
  margin-top: 8px;
}

body.page-address .address-form .btn.btn-primary:hover,
body.page-address .address-form button[type="submit"]:hover,
body.page-address .address-form .form-control-submit:hover {
  opacity: 0.88;
}

/* --- form-footer : pas de float Bootstrap, pleine largeur --- */
body.page-address .address-form .form-footer {
  display: block;
  margin-top: 8px;
}

body.page-address .address-form .form-footer::after {
  content: none;
}

/* --- Masquer hints / textes "Optionnel" residuels --- */
body.page-address .address-form .help-block,
body.page-address .address-form .form-control-comment,
body.page-address .address-form .form-text {
  display: none;
}


/* ============================================================
   ORDER DETAIL PAGE -- customer/order-detail.tpl  (v2.5.252)
   Detail d'une commande client. VRAI override Smarty (pas de
   post-traitement JS) : le TPL reecrit chaque bloc nomme en
   cartes CUBX. Une seule version responsive par section (le
   Classic en rendait 2-3 via .hidden-* Bootstrap -> doublon
   visible depuis que CUBX a coupe les assets Bootstrap).

   Sections :
     .cubx-od-card            carte creme generique
     .cubx-od-card--infos     infos commande (ref, date, reorder, paiement)
     .cubx-od-card--history   suivi statut
     .cubx-od-card--followup  lien tracking conditionnel
     .cubx-od-addresses       grille 2 cartes adresses (reutilise
                              .cubx-address-card de la section ADDRESSES)
     .cubx-od-hook            conteneur neutre du hook displayOrderDetail
                              (Colissimo / SystemPay -- styling defensif)
     .cubx-od-card--products  produits + totaux
     .cubx-od-card--shipping  transporteurs / expeditions
     .cubx-od-card--sav       card SAV -- Reclamations -> /contact-h2j

   body.page-order-detail est deja scope sections 1/10/11 :
   wrapper card blanche, H1, masquage breadcrumb.
   ============================================================ */

/* --- Carte creme generique (base commune a toutes les sections) --- */
body.page-order-detail .cubx-od-card {
  background: var(--cubx-bg, #fef8e9);
  border: 1px solid color-mix(in srgb, var(--cubx-accent, #c9a84c) 20%, transparent);
  border-radius: var(--cubx-radius, 12px);
  padding: 20px 24px;
  margin-bottom: 18px;
}

body.page-order-detail .cubx-od-card__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--cubx-text, #1e293b);
  margin: 0 0 14px;
}

/* --- Bouton CUBX scope order-detail (Reorder, Open a request) ---
   Pattern identique a .cubx-order-btn (section ORDER HISTORY) mais
   en version pleine / accent solide pour les CTA principaux. */
body.page-order-detail .cubx-od-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  padding: 9px 18px;
  border-radius: var(--cubx-radius, 8px);
  background: var(--cubx-accent, #c9a84c);
  color: #fff;
  border: 1px solid var(--cubx-accent, #c9a84c);
  transition: opacity 0.15s;
  white-space: nowrap;
  cursor: pointer;
}

body.page-order-detail .cubx-od-btn .material-icons {
  font-size: 17px;
  color: #fff;
}

body.page-order-detail .cubx-od-btn:hover {
  opacity: 0.88;
  text-decoration: none;
}

/* --- 1. INFOS COMMANDE --- */
body.page-order-detail .cubx-od-infos__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

body.page-order-detail .cubx-od-infos__ref {
  font-size: 15px;
  font-weight: 700;
  color: var(--cubx-text, #1e293b);
  margin: 0;
  line-height: 1.4;
}

body.page-order-detail .cubx-od-infos__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.page-order-detail .cubx-od-infos__list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--cubx-text-light, #64748b);
  line-height: 1.5;
}

body.page-order-detail .cubx-od-infos__list .material-icons {
  font-size: 17px;
  color: var(--cubx-accent, #c9a84c);
  flex-shrink: 0;
  margin-top: 1px;
}

body.page-order-detail .cubx-od-infos__list strong {
  color: var(--cubx-text, #1e293b);
  font-weight: 600;
}

body.page-order-detail .cubx-od-infos__list a {
  color: var(--cubx-accent, #c9a84c);
  text-decoration: none;
  font-weight: 600;
}

body.page-order-detail .cubx-od-infos__list a:hover {
  text-decoration: underline;
}

/* --- 2. SUIVI STATUT (une seule version responsive) --- */
body.page-order-detail .cubx-od-history {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.page-order-detail .cubx-od-history__line {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: color-mix(in srgb, var(--cubx-accent, #c9a84c) 6%, transparent);
  border-radius: var(--cubx-radius, 8px);
}

body.page-order-detail .cubx-od-history__date {
  font-size: 12.5px;
  color: var(--cubx-text-light, #64748b);
  flex-shrink: 0;
  min-width: 90px;
}

/* Badge statut : la couleur de fond vient du style inline PS
   (background-color:{$state.color}) -- on ne fait que la forme. */
body.page-order-detail .cubx-od-history__badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #fff;
  white-space: nowrap;
}

/* --- 3. LIEN SUIVI (conditionnel) --- */
body.page-order-detail .cubx-od-card--followup p {
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--cubx-text-light, #64748b);
}

body.page-order-detail .cubx-od-followup__link {
  font-size: 13px;
  font-weight: 600;
  color: var(--cubx-accent, #c9a84c);
  text-decoration: none;
  word-break: break-all;
}

body.page-order-detail .cubx-od-followup__link:hover {
  text-decoration: underline;
}

/* --- 4. ADRESSES (grille 2 cartes) ---
   Les <article> portent .cubx-address-card -> heritent du style
   defini dans la section ADDRESSES PAGE. Ici on ne fait que la
   grille + neutraliser la marge basse de carte (.cubx-od-card
   gere l'espacement via .cubx-od-addresses). */
body.page-order-detail .cubx-od-addresses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 18px;
}

body.page-order-detail .cubx-od-address {
  margin-bottom: 0;
}

@media (max-width: 640px) {
  body.page-order-detail .cubx-od-addresses {
    grid-template-columns: 1fr;
  }
}

/* --- 5. HOOK MODULES (Colissimo / SystemPay) ---
   Conteneur neutre. Styling DEFENSIF MINIMAL : on ne presume pas
   du markup interne des modules tiers. On donne juste une marge si
   le hook produit quelque chose ; vide, le conteneur est invisible
   (pas de padding/bordure qui creerait une carte fantome). */
body.page-order-detail .cubx-od-hook:not(:empty) {
  margin-bottom: 18px;
}

/* --- 6. PRODUITS + TOTAUX (une seule version responsive) --- */
body.page-order-detail .cubx-od-products {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

body.page-order-detail .cubx-od-product {
  display: grid;
  grid-template-columns: 2.5fr 0.8fr 1fr 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--cubx-accent, #c9a84c) 5%, transparent);
  border-radius: var(--cubx-radius, 8px);
}

body.page-order-detail .cubx-od-product__desc {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

body.page-order-detail .cubx-od-product__name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--cubx-text, #1e293b);
  text-decoration: none;
  line-height: 1.4;
}

body.page-order-detail .cubx-od-product__name:hover {
  color: var(--cubx-accent, #c9a84c);
}

body.page-order-detail .cubx-od-product__ref {
  font-size: 11.5px;
  color: var(--cubx-text-light, #94a3b8);
}

body.page-order-detail .cubx-od-product__download {
  font-size: 12px;
  font-weight: 600;
  color: var(--cubx-accent, #c9a84c);
  text-decoration: none;
  margin-top: 2px;
}

body.page-order-detail .cubx-od-product__download:hover {
  text-decoration: underline;
}

body.page-order-detail .cubx-od-product__qty,
body.page-order-detail .cubx-od-product__price,
body.page-order-detail .cubx-od-product__total {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  color: var(--cubx-text, #1e293b);
}

/* Label des cellules : masque en desktop (l'alignement en colonnes
   suffit), reaffiche en mobile quand les cellules se stackent. */
body.page-order-detail .cubx-od-product__label {
  display: none;
  font-size: 11px;
  font-weight: 600;
  color: var(--cubx-text-light, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

body.page-order-detail .cubx-od-product__value {
  font-size: 13px;
}

body.page-order-detail .cubx-od-product__value--strong {
  font-weight: 700;
}

/* Totaux : lignes alignees a droite, ligne grand total accentuee */
body.page-order-detail .cubx-od-totals {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--cubx-accent, #c9a84c) 20%, transparent);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

body.page-order-detail .cubx-od-totals__line {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 24px;
  font-size: 13px;
  color: var(--cubx-text-light, #64748b);
}

body.page-order-detail .cubx-od-totals__label {
  text-align: right;
}

body.page-order-detail .cubx-od-totals__value {
  min-width: 90px;
  text-align: right;
  font-weight: 600;
  color: var(--cubx-text, #1e293b);
}

body.page-order-detail .cubx-od-totals__line--grand {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px dashed color-mix(in srgb, var(--cubx-accent, #c9a84c) 30%, transparent);
  font-size: 15px;
}

body.page-order-detail .cubx-od-totals__line--grand .cubx-od-totals__label {
  font-weight: 700;
  color: var(--cubx-text, #1e293b);
}

body.page-order-detail .cubx-od-totals__line--grand .cubx-od-totals__value {
  font-weight: 800;
  color: var(--cubx-accent, #c9a84c);
}

/* --- 7. TRANSPORTEURS / EXPEDITIONS (une seule version responsive) --- */
body.page-order-detail .cubx-od-shipping {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

body.page-order-detail .cubx-od-shipping__line {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--cubx-accent, #c9a84c) 5%, transparent);
  border-radius: var(--cubx-radius, 8px);
}

body.page-order-detail .cubx-od-shipping__cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

body.page-order-detail .cubx-od-shipping__label {
  font-size: 11px;
  font-weight: 600;
  color: var(--cubx-text-light, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

body.page-order-detail .cubx-od-shipping__value {
  font-size: 12.5px;
  color: var(--cubx-text, #1e293b);
  word-break: break-word;
}

body.page-order-detail .cubx-od-shipping__cell--tracking .cubx-od-shipping__value a {
  color: var(--cubx-accent, #c9a84c);
  text-decoration: none;
  font-weight: 600;
}

body.page-order-detail .cubx-od-shipping__cell--tracking .cubx-od-shipping__value a:hover {
  text-decoration: underline;
}

/* --- 8. CARD SAV -- RECLAMATIONS ---
   Remplace les messages PS natifs. Oriente vers /contact-h2j.
   Layout : icone ronde + corps texte + bouton CTA. */
body.page-order-detail .cubx-od-card--sav {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

body.page-order-detail .cubx-od-sav__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--cubx-accent, #c9a84c) 14%, transparent);
}

body.page-order-detail .cubx-od-sav__icon .material-icons {
  font-size: 26px;
  color: var(--cubx-accent, #c9a84c);
}

body.page-order-detail .cubx-od-sav__body {
  flex: 1 1 240px;
}

body.page-order-detail .cubx-od-sav__title {
  margin: 0 0 3px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--cubx-text, #1e293b);
}

body.page-order-detail .cubx-od-sav__text {
  margin: 0;
  font-size: 13px;
  color: var(--cubx-text-light, #64748b);
  line-height: 1.5;
}

body.page-order-detail .cubx-od-sav__btn {
  flex-shrink: 0;
}

/* --- RESPONSIVE ORDER DETAIL --- */
@media (max-width: 768px) {
  /* Produits : les 4 colonnes se stackent, on reaffiche les labels */
  body.page-order-detail .cubx-od-product {
    grid-template-columns: 1fr 1fr;
    gap: 10px 14px;
  }
  body.page-order-detail .cubx-od-product__desc {
    grid-column: 1 / 3;
  }
  body.page-order-detail .cubx-od-product__label {
    display: block;
  }

  /* Transporteurs : passage en 2 colonnes */
  body.page-order-detail .cubx-od-shipping__line {
    grid-template-columns: 1fr 1fr;
    gap: 10px 14px;
  }
  body.page-order-detail .cubx-od-shipping__cell--tracking {
    grid-column: 1 / 3;
  }

  /* Card SAV : bouton pleine largeur sous le texte */
  body.page-order-detail .cubx-od-sav__btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  body.page-order-detail .cubx-od-card {
    padding: 16px 16px;
  }

  /* Produits : tout en 1 colonne */
  body.page-order-detail .cubx-od-product {
    grid-template-columns: 1fr;
  }
  body.page-order-detail .cubx-od-product__desc {
    grid-column: 1;
  }
  body.page-order-detail .cubx-od-product__qty,
  body.page-order-detail .cubx-od-product__price,
  body.page-order-detail .cubx-od-product__total {
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
  }

  /* Transporteurs : 1 colonne */
  body.page-order-detail .cubx-od-shipping__line {
    grid-template-columns: 1fr;
  }
  body.page-order-detail .cubx-od-shipping__cell--tracking {
    grid-column: 1;
  }

  /* Infos commande : ref + bouton reorder empiles */
  body.page-order-detail .cubx-od-infos__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  body.page-order-detail .cubx-od-reorder {
    width: 100%;
    justify-content: center;
  }

  /* Suivi statut : date au-dessus du badge */
  body.page-order-detail .cubx-od-history__line {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  /* Totaux : labels et valeurs gardent l'alignement droite */
  body.page-order-detail .cubx-od-totals__line {
    gap: 16px;
  }
}