.elementor-381 .elementor-element.elementor-element-0b96aea{--display:flex;}/* Start custom CSS for shortcode, class: .elementor-element-745c1d6 *//* ============================================================
   PERLE HAIR — Espace Compte WooCommerce · Fichier COMPLET v7
   Contient : page Mon Compte (connecté) + page Connexion/Inscription
   Typographie : Archivo (titres) + Space Mono (labels) + Inter (corps)
   Colle UNIQUEMENT ce fichier dans :
   Apparence > Personnaliser > CSS additionnel (efface le reste).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;600;800;900&family=Space+Mono:wght@400;700&family=Inter:wght@300;400;500;600&display=swap');

/* ============================================================
   1. CONTENEUR PRINCIPAL (header-safe via :has)
   ============================================================ */
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation){
  --p-porcelain:#FBFAF8; --p-mist:#F1ECE6; --p-panel:#F6F2EC; --p-taupe:#DCD2C6;
  --p-ink:#211E1B; --p-stone:#8B8278; --p-champ:#C9A86A; --p-champ-dk:#A8884E; --p-white:#fff;
  --p-pearl:linear-gradient(110deg,#F6E6D8 0%,#F0E0EC 30%,#E4ECF0 55%,#F3EBDD 80%,#F6E6D8 100%);
  --p-shadow:0 18px 50px rgba(33,30,27,.08);
  --p-shadow-sm:0 6px 22px rgba(33,30,27,.06);
  --p-radius:20px; --p-radius-sm:14px;

  font-family:'Inter',sans-serif; color:var(--p-ink);
  max-width:1200px; margin:0 auto;
  padding:clamp(28px,4vw,50px) clamp(14px,3vw,20px) clamp(50px,6vw,80px);
}
@media (min-width:769px){
  .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation){
    display:flex; align-items:flex-start; gap:clamp(24px,3vw,44px);
  }
  .woocommerce-account .woocommerce-MyAccount-navigation{ width:clamp(240px,22vw,290px); flex-shrink:0; position:sticky; top:30px; }
  .woocommerce-account .woocommerce-MyAccount-content{ flex:1; min-width:0; }
}
@keyframes perlePearl{ 0%,100%{ background-position:0 0; } 50%{ background-position:100% 0; } }

/* ============================================================
   2. NAVIGATION (SIDEBAR)
   ============================================================ */
.woocommerce-MyAccount-navigation{
  background:var(--p-white,#fff); border-radius:var(--p-radius,20px);
  box-shadow:var(--p-shadow,0 18px 50px rgba(33,30,27,.08)); padding:16px; position:relative; overflow:hidden;
}
.woocommerce-MyAccount-navigation::before{
  content:""; position:absolute; top:0; left:0; right:0; height:5px;
  background:var(--p-pearl); background-size:200% 100%; animation:perlePearl 9s ease-in-out infinite;
}
.woocommerce-MyAccount-navigation ul{ list-style:none; margin:6px 0 0; padding:0; }
.woocommerce-MyAccount-navigation ul li{ margin:3px 0; border:none; }
.woocommerce-MyAccount-navigation ul li a{
  display:flex; align-items:center; gap:13px; padding:15px 18px;
  border-radius:var(--p-radius-sm,14px); color:var(--p-ink,#211E1B);
  font-family:'Inter',sans-serif; font-size:15px; font-weight:400; letter-spacing:.3px; text-decoration:none;
  transition:all .25s cubic-bezier(.4,0,.2,1);
}
.woocommerce-MyAccount-navigation ul li.is-active a{
  background:var(--p-ink,#211E1B); color:var(--p-white,#fff); font-weight:500; box-shadow:0 8px 22px rgba(33,30,27,.22);
}
@media (hover:hover){
  .woocommerce-MyAccount-navigation ul li a:hover{ background:var(--p-mist,#F1ECE6); color:var(--p-champ-dk,#A8884E); padding-left:25px; }
  .woocommerce-MyAccount-navigation ul li.is-active a:hover{ color:var(--p-champ,#C9A86A); padding-left:18px; }
}
.woocommerce-MyAccount-navigation-link a::before{ font-size:17px; width:22px; text-align:center; display:inline-block; opacity:.85; }
.woocommerce-MyAccount-navigation-link--dashboard a::before     { content:"\2756"; }
.woocommerce-MyAccount-navigation-link--orders a::before        { content:"\25A3"; }
.woocommerce-MyAccount-navigation-link--downloads a::before     { content:"\2913"; }
.woocommerce-MyAccount-navigation-link--edit-address a::before  { content:"\2691"; }
.woocommerce-MyAccount-navigation-link--edit-account a::before  { content:"\263C"; }
.woocommerce-MyAccount-navigation-link--customer-logout a::before{ content:"\21AA"; }

/* ============================================================
   3. CONTENU PRINCIPAL
   ============================================================ */
.woocommerce-MyAccount-content{
  background:var(--p-white,#fff); border-radius:var(--p-radius,20px);
  box-shadow:var(--p-shadow,0 18px 50px rgba(33,30,27,.08));
  padding:clamp(28px,3.4vw,50px) clamp(22px,3.4vw,55px);
}
.woocommerce-MyAccount-content > p:first-child{
  font-family:'Archivo',sans-serif; font-size:clamp(25px,4vw,34px); font-weight:900; line-height:1.15;
  color:var(--p-ink,#211E1B); margin:0 0 6px; padding-bottom:18px; position:relative;
  letter-spacing:-.5px; text-transform:uppercase;
}
.woocommerce-MyAccount-content > p:first-child::after{
  content:""; position:absolute; bottom:0; left:0; width:80px; height:3px; border-radius:3px;
  background:var(--p-pearl); background-size:200% 100%; animation:perlePearl 9s ease-in-out infinite;
}
.woocommerce-MyAccount-content > p:first-child strong{ font-weight:900; color:var(--p-champ-dk,#A8884E); }
.woocommerce-MyAccount-content > p:nth-child(2){ font-family:'Inter',sans-serif; font-size:15px; line-height:1.8; color:var(--p-stone,#8B8278); margin-bottom:0; }
.woocommerce-MyAccount-content > p:nth-child(2) a{ color:var(--p-champ-dk,#A8884E); text-decoration:underline; }
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3{
  font-family:'Archivo',sans-serif; font-weight:800; color:var(--p-ink,#211E1B); letter-spacing:-.3px; margin-bottom:22px;
}
.woocommerce-MyAccount-content h2{ font-size:clamp(24px,3vw,30px); }
.woocommerce-MyAccount-content h3{ font-size:clamp(20px,2.4vw,24px); }

/* ============================================================
   4. TABLEAU DE BORD (cartes + stats)
   ============================================================ */
.woocommerce-MyAccount-content .perle-dash{ margin-top:clamp(24px,4vw,36px); }
.woocommerce-MyAccount-content .perle-dash__stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:clamp(10px,1.6vw,16px); margin-bottom:clamp(20px,3vw,30px);
}
.woocommerce-MyAccount-content .perle-stat{
  position:relative; background:var(--p-panel,#F6F2EC); border:1px solid var(--p-taupe,#DCD2C6);
  border-radius:14px; padding:clamp(18px,2.4vw,24px); overflow:hidden;
}
.woocommerce-MyAccount-content .perle-stat::before{ content:""; position:absolute; top:0; left:0; width:100%; height:3px; background:var(--p-pearl); opacity:.8; }
.woocommerce-MyAccount-content .perle-stat__num{
  display:block; font-family:'Archivo',sans-serif; font-weight:900; font-size:clamp(24px,3.4vw,30px); color:var(--p-champ-dk,#A8884E); line-height:1.1;
}
.woocommerce-MyAccount-content .perle-stat__label{
  display:block; margin-top:6px; font-family:'Space Mono',monospace; font-weight:400;
  font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--p-stone,#8B8278);
}
.woocommerce-MyAccount-content .perle-dash__cards{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr)); gap:clamp(12px,1.6vw,18px);
}
.woocommerce-MyAccount-content .perle-card{
  position:relative; display:flex; flex-direction:column;
  background:var(--p-white,#fff); border:1px solid var(--p-taupe,#DCD2C6); border-radius:16px;
  padding:clamp(22px,2.6vw,28px) clamp(20px,2.4vw,24px); text-decoration:none; color:var(--p-ink,#211E1B); overflow:hidden;
  transition:transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s ease, border-color .3s ease;
}
.woocommerce-MyAccount-content .perle-card::before{ content:""; position:absolute; inset:0; background:var(--p-pearl); background-size:200% 100%; opacity:0; transition:opacity .4s ease; z-index:0; }
.woocommerce-MyAccount-content .perle-card > *{ position:relative; z-index:1; }
.woocommerce-MyAccount-content .perle-card__icon{
  width:46px; height:46px; margin-bottom:16px; border-radius:12px; background:var(--p-panel,#F6F2EC);
  display:flex; align-items:center; justify-content:center; font-size:24px; color:var(--p-champ-dk,#A8884E);
}
.woocommerce-MyAccount-content .perle-card__icon svg{ width:24px; height:24px; stroke:var(--p-champ-dk,#A8884E); stroke-width:1.7; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.woocommerce-MyAccount-content .perle-card__title{ font-family:'Archivo',sans-serif; font-size:clamp(18px,2.2vw,21px); font-weight:800; margin-bottom:5px; letter-spacing:-.2px; }
.woocommerce-MyAccount-content .perle-card__desc{ font-family:'Inter',sans-serif; font-size:14px; color:var(--p-stone,#8B8278); line-height:1.5; }
.woocommerce-MyAccount-content .perle-card__arrow{ margin-top:16px; font-size:18px; color:var(--p-champ-dk,#A8884E); transition:transform .3s ease; }
@media (hover:hover){
  .woocommerce-MyAccount-content .perle-card:hover{ transform:translateY(-5px); box-shadow:var(--p-shadow-sm,0 6px 22px rgba(33,30,27,.06)); border-color:var(--p-champ,#C9A86A); }
  .woocommerce-MyAccount-content .perle-card:hover::before{ opacity:.3; }
  .woocommerce-MyAccount-content .perle-card:hover .perle-card__arrow{ transform:translateX(6px); }
}

/* ============================================================
   5. TABLEAUX
   ============================================================ */
.woocommerce-MyAccount-content table.shop_table,
.woocommerce-MyAccount-content .woocommerce-orders-table{
  border:none; border-collapse:separate; border-spacing:0; width:100%;
  border-radius:var(--p-radius-sm,14px); overflow:hidden; box-shadow:var(--p-shadow-sm,0 6px 22px rgba(33,30,27,.06));
}
.woocommerce-MyAccount-content table.shop_table thead th{
  background:var(--p-mist,#F1ECE6); color:var(--p-ink,#211E1B); font-family:'Space Mono',monospace; font-weight:700; font-size:11px;
  letter-spacing:1px; text-transform:uppercase; padding:18px 16px; border:none;
}
.woocommerce-MyAccount-content table.shop_table tbody td{
  background:var(--p-white,#fff); padding:18px 16px; font-family:'Inter',sans-serif; font-size:15px; border:none; border-bottom:1px solid var(--p-mist,#F1ECE6); vertical-align:middle;
}
.woocommerce-MyAccount-content table.shop_table tbody tr:last-child td{ border-bottom:none; }
.woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-status{ font-weight:600; color:var(--p-champ-dk,#A8884E); }
@media (hover:hover){ .woocommerce-MyAccount-content table.shop_table tbody tr:hover td{ background:var(--p-porcelain,#FBFAF8); } }

/* ============================================================
   6. BOUTONS
   ============================================================ */
.woocommerce-MyAccount-content .button,
.woocommerce-MyAccount-content button.button,
.woocommerce-MyAccount-content input.button,
.woocommerce-MyAccount-content .woocommerce-button{
  background:var(--p-ink,#211E1B) !important; color:var(--p-white,#fff) !important;
  font-family:'Space Mono',monospace; font-weight:700; font-size:12px; letter-spacing:.8px; text-transform:uppercase;
  padding:14px 30px !important; border:none !important; border-radius:50px !important; transition:all .3s ease; cursor:pointer;
}
@media (hover:hover){
  .woocommerce-MyAccount-content .button:hover,
  .woocommerce-MyAccount-content button.button:hover,
  .woocommerce-MyAccount-content input.button:hover{ background:var(--p-champ-dk,#A8884E) !important; transform:translateY(-2px); box-shadow:0 10px 24px rgba(168,136,78,.32); }
}
.woocommerce-MyAccount-content table.shop_table .button.view{ background:transparent !important; color:var(--p-ink,#211E1B) !important; border:1px solid var(--p-ink,#211E1B) !important; padding:9px 22px !important; }
.woocommerce-MyAccount-content table.shop_table .button.view:hover{ background:var(--p-ink,#211E1B) !important; color:var(--p-white,#fff) !important; }

/* ============================================================
   7. FORMULAIRES
   ============================================================ */
.woocommerce-MyAccount-content form .form-row label,
.woocommerce-MyAccount-content .woocommerce-address-fields label,
.woocommerce-MyAccount-content .woocommerce-EditAccountForm label{
  font-family:'Space Mono',monospace; font-size:11px; font-weight:400; letter-spacing:.8px; text-transform:uppercase; color:var(--p-stone,#8B8278); margin-bottom:8px; display:block;
}
.woocommerce-MyAccount-content form input[type="text"],
.woocommerce-MyAccount-content form input[type="email"],
.woocommerce-MyAccount-content form input[type="tel"],
.woocommerce-MyAccount-content form input[type="password"],
.woocommerce-MyAccount-content form select{
  background:var(--p-porcelain,#FBFAF8); border:1px solid var(--p-taupe,#DCD2C6) !important;
  border-radius:12px !important; padding:15px 16px !important;
  font-family:'Inter',sans-serif; font-size:15px; color:var(--p-ink,#211E1B); width:100%; height:auto !important; transition:all .25s ease;
}
.woocommerce-MyAccount-content form input:focus,
.woocommerce-MyAccount-content form select:focus{
  outline:none; border-color:var(--p-champ,#C9A86A) !important; background:var(--p-white,#fff); box-shadow:0 0 0 3px rgba(201,168,106,.16);
}

/* ============================================================
   8. CARTES D'ADRESSE — 2 colonnes
   ============================================================ */
.woocommerce-MyAccount-content .woocommerce-Addresses{
  display:grid !important; grid-template-columns:1fr 1fr !important;
  gap:clamp(16px,2vw,24px) !important; float:none !important; width:100% !important;
}
.woocommerce-MyAccount-content .woocommerce-Addresses .woocommerce-Address{
  width:auto !important; float:none !important; margin:0 !important;
  background:var(--p-panel,#F6F2EC); border:1px solid var(--p-taupe,#DCD2C6);
  border-radius:var(--p-radius,20px); padding:clamp(22px,3vw,32px);
}
.woocommerce-MyAccount-content .woocommerce-Address-title h3{ margin-top:0; }
.woocommerce-MyAccount-content .woocommerce-Address address{ font-family:'Inter',sans-serif; font-style:normal; line-height:1.9; color:var(--p-ink,#211E1B); }

/* ============================================================
   9. NOTICES (icône par défaut masquée)
   ============================================================ */
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) .woocommerce-message,
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) .woocommerce-info,
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) .woocommerce-notice,
.woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-MyAccount-content .woocommerce-info{
  background:var(--p-panel,#F6F2EC); border:none; border-top:3px solid var(--p-champ,#C9A86A);
  border-radius:12px; color:var(--p-ink,#211E1B); font-family:'Inter',sans-serif; font-size:15px; padding:18px 22px !important;
  display:flex !important; align-items:center !important; justify-content:space-between !important; gap:16px; flex-wrap:wrap;
}
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) .woocommerce-message::before,
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) .woocommerce-info::before,
.woocommerce-MyAccount-content .woocommerce-message::before,
.woocommerce-MyAccount-content .woocommerce-info::before{ display:none !important; content:"" !important; }

/* ============================================================
   10. BLOC PAIEMENT STRIPE harmonisé
   ============================================================ */
.woocommerce-MyAccount-content #payment,
.woocommerce-MyAccount-content #add_payment_method #payment{
  background:var(--p-panel,#F6F2EC) !important; border:1px solid var(--p-taupe,#DCD2C6) !important; border-radius:18px !important;
}
.woocommerce-MyAccount-content #payment ul.payment_methods{
  border-bottom:1px solid var(--p-taupe,#DCD2C6) !important; padding:18px 22px !important; margin:0 !important;
}
.woocommerce-MyAccount-content #payment ul.payment_methods li{ background:transparent !important; }
.woocommerce-MyAccount-content #payment div.payment_box{
  background:var(--p-white,#fff) !important; border:1px solid var(--p-taupe,#DCD2C6) !important;
  border-radius:14px !important; color:var(--p-ink,#211E1B) !important; box-shadow:none !important;
}
.woocommerce-MyAccount-content #payment div.payment_box::before{ border-bottom-color:var(--p-white,#fff) !important; }
.woocommerce-MyAccount-content #payment .form-row,
.woocommerce-MyAccount-content #payment .place-order{ background:transparent !important; padding:18px 22px !important; }

/* ============================================================
   11. RESPONSIVE
   ============================================================ */
@media (max-width:768px){
  .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation){ display:block; }

  .woocommerce-MyAccount-navigation{ padding:14px 12px; margin-bottom:22px; border-radius:var(--p-radius-sm,14px); }
  .woocommerce-MyAccount-navigation ul{
    display:flex; flex-wrap:nowrap; gap:8px; margin:8px 0 0;
    overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; scroll-snap-type:x proximity;
  }
  .woocommerce-MyAccount-navigation ul::-webkit-scrollbar{ display:none; }
  .woocommerce-MyAccount-navigation ul li{ margin:0; flex:0 0 auto; scroll-snap-align:start; }
  .woocommerce-MyAccount-navigation ul li a{ white-space:nowrap; padding:11px 18px; border:1px solid var(--p-taupe,#DCD2C6); border-radius:50px; background:var(--p-porcelain,#FBFAF8); font-size:14px; }
  .woocommerce-MyAccount-navigation ul li.is-active a{ box-shadow:none; border-color:var(--p-ink,#211E1B); }

  .woocommerce-MyAccount-content{ border-radius:var(--p-radius-sm,14px); }

  .woocommerce-MyAccount-content .woocommerce-Addresses{ grid-template-columns:1fr !important; }

  .woocommerce-MyAccount-content table.shop_table{ box-shadow:none; background:transparent; }
  .woocommerce-MyAccount-content table.shop_table thead{ display:none; }
  .woocommerce-MyAccount-content table.shop_table tbody tr{
    display:block; background:var(--p-white,#fff); border:1px solid var(--p-taupe,#DCD2C6);
    border-radius:var(--p-radius-sm,14px); margin-bottom:14px; padding:6px 4px; box-shadow:var(--p-shadow-sm,0 6px 22px rgba(33,30,27,.06));
  }
  .woocommerce-MyAccount-content table.shop_table tbody td{
    display:flex; justify-content:space-between; align-items:center; gap:16px; text-align:right; padding:12px 16px; border-bottom:1px solid var(--p-mist,#F1ECE6);
  }
  .woocommerce-MyAccount-content table.shop_table tbody tr td:last-child{ border-bottom:none; }
  .woocommerce-MyAccount-content table.shop_table tbody td::before{
    content:attr(data-title); font-family:'Space Mono',monospace; font-weight:700; text-transform:uppercase; font-size:10px; letter-spacing:.5px; color:var(--p-stone,#8B8278); text-align:left;
  }
  .woocommerce-MyAccount-content table.shop_table .button{ width:100%; text-align:center; }

  .woocommerce-MyAccount-content form input[type="text"],
  .woocommerce-MyAccount-content form input[type="email"],
  .woocommerce-MyAccount-content form input[type="tel"],
  .woocommerce-MyAccount-content form input[type="password"],
  .woocommerce-MyAccount-content form select{ font-size:16px; }

  .woocommerce-MyAccount-content .button,
  .woocommerce-MyAccount-content button.button,
  .woocommerce-MyAccount-content input.button{ width:100%; text-align:center; }
}

@media (max-width:480px){
  .woocommerce-MyAccount-content .perle-dash__stats{ grid-template-columns:1fr; }
  .woocommerce-MyAccount-navigation ul li a{ padding:10px 15px; font-size:13px; }
  .woocommerce-MyAccount-navigation-link a::before{ font-size:15px; width:18px; }
}

@media (prefers-reduced-motion:reduce){
  .woocommerce-MyAccount-navigation::before,
  .woocommerce-MyAccount-content > p:first-child::after,
  .woocommerce-MyAccount-content .perle-card::before{ animation:none; }
  .woocommerce-MyAccount-content .perle-card,
  .woocommerce-MyAccount-content .perle-card__arrow{ transition:none; }
}

/* ============================================================
   12. PAGE CONNEXION / INSCRIPTION (visiteur non connecté)
   ============================================================ */

/* ---------- Conteneur global : deux colonnes ---------- */
.woocommerce-account #customer_login{
  --p-porcelain:#FBFAF8; --p-mist:#F1ECE6; --p-panel:#F6F2EC; --p-taupe:#DCD2C6;
  --p-ink:#211E1B; --p-stone:#8B8278; --p-champ:#C9A86A; --p-champ-dk:#A8884E; --p-white:#fff;
  --p-pearl:linear-gradient(110deg,#F6E6D8 0%,#F0E0EC 30%,#E4ECF0 55%,#F3EBDD 80%,#F6E6D8 100%);

  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:start;
  gap:clamp(20px,3vw,40px);
  max-width:880px;
  margin:clamp(30px,5vw,60px) auto clamp(50px,7vw,90px);
  padding:0 clamp(14px,3vw,20px);
  font-family:'Inter',sans-serif;
}

@keyframes perlePearlLogin{ 0%,100%{ background-position:0 0; } 50%{ background-position:100% 0; } }

/* ---------- Chaque colonne devient une carte ---------- */
.woocommerce-account #customer_login > div{
  width:auto !important; float:none !important; max-width:none !important;
  margin:0 !important;
  position:relative !important; top:auto !important; left:auto !important;
  right:auto !important; transform:none !important;
  background:var(--p-white,#fff);
  border-radius:20px;
  box-shadow:0 18px 50px rgba(33,30,27,.08);
  padding:clamp(28px,3.5vw,44px) clamp(22px,3vw,40px);
  overflow:hidden;
}
/* Placement explicite : les deux cartes côte à côte sur la même ligne */
.woocommerce-account #customer_login > div:first-child{ grid-column:1; grid-row:1; }
.woocommerce-account #customer_login > div:last-child{ grid-column:2; grid-row:1; }

.woocommerce-account #customer_login > div::before{
  content:""; position:absolute; top:0; left:0; right:0; height:5px;
  background:var(--p-pearl); background-size:200% 100%;
  animation:perlePearlLogin 9s ease-in-out infinite;
}

/* Les formulaires perdent leur bordure grise par défaut */
.woocommerce-account #customer_login form.woocommerce-form-login,
.woocommerce-account #customer_login form.woocommerce-form-register{
  border:none !important; padding:0 !important; margin:0 !important;
}

/* ---------- Titres "Se connecter" / "S'inscrire" ---------- */
.woocommerce-account #customer_login h2{
  font-family:'Archivo',sans-serif !important;
  font-size:clamp(22px,3vw,28px) !important;
  font-weight:900 !important;
  text-transform:uppercase;
  letter-spacing:-.4px;
  color:var(--p-ink,#211E1B) !important;
  margin:0 0 8px !important;
  padding-bottom:16px;
  position:relative;
}
.woocommerce-account #customer_login h2::after{
  content:""; position:absolute; bottom:0; left:0;
  width:64px; height:3px; border-radius:3px;
  background:var(--p-pearl); background-size:200% 100%;
  animation:perlePearlLogin 9s ease-in-out infinite;
}

/* ---------- Labels ---------- */
.woocommerce-account #customer_login label{
  font-family:'Space Mono',monospace !important;
  font-size:11px !important; font-weight:400 !important;
  letter-spacing:.8px; text-transform:uppercase;
  color:var(--p-stone,#8B8278) !important;
  margin-bottom:8px; display:block;
}
.woocommerce-account #customer_login label .required{
  color:var(--p-champ-dk,#A8884E) !important; text-decoration:none;
}

/* ---------- Champs de saisie ---------- */
.woocommerce-account #customer_login input[type="text"],
.woocommerce-account #customer_login input[type="email"],
.woocommerce-account #customer_login input[type="password"]{
  background:var(--p-porcelain,#FBFAF8) !important;
  border:1px solid var(--p-taupe,#DCD2C6) !important;
  border-radius:12px !important;
  padding:15px 16px !important;
  font-family:'Inter',sans-serif !important;
  font-size:15px !important;
  color:var(--p-ink,#211E1B) !important;
  width:100%; height:auto !important;
  transition:all .25s ease;
  box-shadow:none !important;
}
.woocommerce-account #customer_login input:focus{
  outline:none !important;
  border-color:var(--p-champ,#C9A86A) !important;
  background:var(--p-white,#fff) !important;
  box-shadow:0 0 0 3px rgba(201,168,106,.16) !important;
}

/* Oeil du mot de passe recoloré */
.woocommerce-account #customer_login .show-password-input::after{
  color:var(--p-stone,#8B8278);
}

/* ---------- Boutons ---------- */
.woocommerce-account #customer_login button.button,
.woocommerce-account #customer_login .woocommerce-form-login__submit,
.woocommerce-account #customer_login .woocommerce-form-register__submit{
  background:var(--p-ink,#211E1B) !important;
  color:var(--p-white,#fff) !important;
  font-family:'Space Mono',monospace !important;
  font-weight:700 !important; font-size:12px !important;
  letter-spacing:.8px; text-transform:uppercase;
  padding:14px 34px !important;
  border:none !important; border-radius:50px !important;
  transition:all .3s ease; cursor:pointer;
}
@media (hover:hover){
  .woocommerce-account #customer_login button.button:hover{
    background:var(--p-champ-dk,#A8884E) !important;
    transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(168,136,78,.32);
  }
}

/* ---------- Case "Se souvenir de moi" ---------- */
.woocommerce-account #customer_login .woocommerce-form-login__rememberme{
  display:inline-flex !important; align-items:center; gap:8px;
  font-family:'Inter',sans-serif !important;
  font-size:13px !important; font-weight:400 !important;
  letter-spacing:0 !important; text-transform:none !important;
  color:var(--p-ink,#211E1B) !important;
  margin:0 0 0 14px !important;
}
.woocommerce-account #customer_login input[type="checkbox"]{
  accent-color:var(--p-champ-dk,#A8884E);
  width:16px; height:16px;
}

/* ---------- Liens (mot de passe perdu, politique) ---------- */
.woocommerce-account #customer_login a{
  color:var(--p-champ-dk,#A8884E) !important;
  font-weight:500;
  text-decoration:none !important;
  border-bottom:1px solid rgba(168,136,78,.35);
  transition:border-color .2s ease;
}
.woocommerce-account #customer_login a:hover{
  border-color:var(--p-champ-dk,#A8884E);
}
.woocommerce-account #customer_login .lost_password{
  margin-top:18px !important;
  font-size:14px;
}

/* ---------- Texte d'information (inscription) ---------- */
.woocommerce-account #customer_login .woocommerce-privacy-policy-text p,
.woocommerce-account #customer_login form.woocommerce-form-register > p:not(.form-row){
  font-family:'Inter',sans-serif;
  font-size:14px; line-height:1.75;
  color:var(--p-stone,#8B8278);
}

/* Espacement vertical des lignes de formulaire */
.woocommerce-account #customer_login .form-row{
  margin-bottom:18px !important;
}

/* ---------- Responsive : une seule colonne ---------- */
@media (max-width:820px){
  .woocommerce-account #customer_login{
    grid-template-columns:1fr;
    gap:22px;
  }
  .woocommerce-account #customer_login > div:first-child,
  .woocommerce-account #customer_login > div:last-child{
    grid-column:1; grid-row:auto;
  }
  .woocommerce-account #customer_login button.button{
    width:100%; text-align:center;
  }
  .woocommerce-account #customer_login .woocommerce-form-login__rememberme{
    margin:14px 0 0 !important;
  }
  .woocommerce-account #customer_login input[type="text"],
  .woocommerce-account #customer_login input[type="email"],
  .woocommerce-account #customer_login input[type="password"]{
    font-size:16px !important; /* évite le zoom automatique iOS */
  }
}

@media (prefers-reduced-motion:reduce){
  .woocommerce-account #customer_login .u-column1::before,
  .woocommerce-account #customer_login .u-column2::before,
  .woocommerce-account #customer_login h2::after{ animation:none; }
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-745c1d6 *//* ============================================================
   PERLE HAIR — Espace Compte WooCommerce · Fichier COMPLET v7
   Contient : page Mon Compte (connecté) + page Connexion/Inscription
   Typographie : Inter (titres, labels, corps)
   Colle UNIQUEMENT ce fichier dans :
   Apparence > Personnaliser > CSS additionnel (efface le reste).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ============================================================
   1. CONTENEUR PRINCIPAL (header-safe via :has)
   ============================================================ */
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation){
  --p-porcelain:#FBFAF8; --p-mist:#F1ECE6; --p-panel:#F6F2EC; --p-taupe:#DCD2C6;
  --p-ink:#211E1B; --p-stone:#8B8278; --p-champ:#C9A86A; --p-champ-dk:#A8884E; --p-white:#fff;
  --p-pearl:linear-gradient(110deg,#F6E6D8 0%,#F0E0EC 30%,#E4ECF0 55%,#F3EBDD 80%,#F6E6D8 100%);
  --p-shadow:0 18px 50px rgba(33,30,27,.08);
  --p-shadow-sm:0 6px 22px rgba(33,30,27,.06);
  --p-radius:20px; --p-radius-sm:14px;

  font-family:'Inter',sans-serif; color:var(--p-ink);
  max-width:1200px; margin:0 auto;
  padding:clamp(28px,4vw,50px) clamp(14px,3vw,20px) clamp(50px,6vw,80px);
}
@media (min-width:769px){
  .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation){
    display:flex; align-items:flex-start; gap:clamp(24px,3vw,44px);
  }
  .woocommerce-account .woocommerce-MyAccount-navigation{ width:clamp(240px,22vw,290px); flex-shrink:0; position:sticky; top:30px; }
  .woocommerce-account .woocommerce-MyAccount-content{ flex:1; min-width:0; }
}
@keyframes perlePearl{ 0%,100%{ background-position:0 0; } 50%{ background-position:100% 0; } }

/* ============================================================
   2. NAVIGATION (SIDEBAR)
   ============================================================ */
.woocommerce-MyAccount-navigation{
  background:var(--p-white,#fff); border-radius:var(--p-radius,20px);
  box-shadow:var(--p-shadow,0 18px 50px rgba(33,30,27,.08)); padding:16px; position:relative; overflow:hidden;
}
.woocommerce-MyAccount-navigation::before{
  content:""; position:absolute; top:0; left:0; right:0; height:5px;
  background:var(--p-pearl); background-size:200% 100%; animation:perlePearl 9s ease-in-out infinite;
}
.woocommerce-MyAccount-navigation ul{ list-style:none; margin:6px 0 0; padding:0; }
.woocommerce-MyAccount-navigation ul li{ margin:3px 0; border:none; }
.woocommerce-MyAccount-navigation ul li a{
  display:flex; align-items:center; gap:13px; padding:15px 18px;
  border-radius:var(--p-radius-sm,14px); color:var(--p-ink,#211E1B);
  font-family:'Inter',sans-serif; font-size:15px; font-weight:400; letter-spacing:.3px; text-decoration:none;
  transition:all .25s cubic-bezier(.4,0,.2,1);
}
.woocommerce-MyAccount-navigation ul li.is-active a{
  background:var(--p-ink,#211E1B); color:var(--p-white,#fff); font-weight:500; box-shadow:0 8px 22px rgba(33,30,27,.22);
}
@media (hover:hover){
  .woocommerce-MyAccount-navigation ul li a:hover{ background:var(--p-mist,#F1ECE6); color:var(--p-champ-dk,#A8884E); padding-left:25px; }
  .woocommerce-MyAccount-navigation ul li.is-active a:hover{ color:var(--p-champ,#C9A86A); padding-left:18px; }
}
.woocommerce-MyAccount-navigation-link a::before{ font-size:17px; width:22px; text-align:center; display:inline-block; opacity:.85; }
.woocommerce-MyAccount-navigation-link--dashboard a::before     { content:"\2756"; }
.woocommerce-MyAccount-navigation-link--orders a::before        { content:"\25A3"; }
.woocommerce-MyAccount-navigation-link--downloads a::before     { content:"\2913"; }
.woocommerce-MyAccount-navigation-link--edit-address a::before  { content:"\2691"; }
.woocommerce-MyAccount-navigation-link--edit-account a::before  { content:"\263C"; }
.woocommerce-MyAccount-navigation-link--customer-logout a::before{ content:"\21AA"; }

/* ============================================================
   3. CONTENU PRINCIPAL
   ============================================================ */
.woocommerce-MyAccount-content{
  background:var(--p-white,#fff); border-radius:var(--p-radius,20px);
  box-shadow:var(--p-shadow,0 18px 50px rgba(33,30,27,.08));
  padding:clamp(28px,3.4vw,50px) clamp(22px,3.4vw,55px);
}
.woocommerce-MyAccount-content > p:first-child{
  font-family:'Inter',sans-serif; font-size:clamp(25px,4vw,34px); font-weight:900; line-height:1.15;
  color:var(--p-ink,#211E1B); margin:0 0 6px; padding-bottom:18px; position:relative;
  letter-spacing:.5px; text-transform:uppercase;
}
.woocommerce-MyAccount-content > p:first-child::after{
  content:""; position:absolute; bottom:0; left:0; width:80px; height:3px; border-radius:3px;
  background:var(--p-pearl); background-size:200% 100%; animation:perlePearl 9s ease-in-out infinite;
}
.woocommerce-MyAccount-content > p:first-child strong{ font-weight:900; color:var(--p-champ-dk,#A8884E); }
.woocommerce-MyAccount-content > p:nth-child(2){ font-family:'Inter',sans-serif; font-size:15px; line-height:1.8; color:var(--p-stone,#8B8278); margin-bottom:0; }
.woocommerce-MyAccount-content > p:nth-child(2) a{ color:var(--p-champ-dk,#A8884E); text-decoration:underline; }
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3{
  font-family:'Inter',sans-serif; font-weight:800; color:var(--p-ink,#211E1B); letter-spacing:.3px; margin-bottom:22px;
}
.woocommerce-MyAccount-content h2{ font-size:clamp(24px,3vw,30px); }
.woocommerce-MyAccount-content h3{ font-size:clamp(20px,2.4vw,24px); }

/* ============================================================
   4. TABLEAU DE BORD (cartes + stats)
   ============================================================ */
.woocommerce-MyAccount-content .perle-dash{ margin-top:clamp(24px,4vw,36px); }
.woocommerce-MyAccount-content .perle-dash__stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:clamp(10px,1.6vw,16px); margin-bottom:clamp(20px,3vw,30px);
}
.woocommerce-MyAccount-content .perle-stat{
  position:relative; background:var(--p-panel,#F6F2EC); border:1px solid var(--p-taupe,#DCD2C6);
  border-radius:14px; padding:clamp(18px,2.4vw,24px); overflow:hidden;
}
.woocommerce-MyAccount-content .perle-stat::before{ content:""; position:absolute; top:0; left:0; width:100%; height:3px; background:var(--p-pearl); opacity:.8; }
.woocommerce-MyAccount-content .perle-stat__num{
  display:block; font-family:'Inter',sans-serif; font-weight:900; font-size:clamp(24px,3.4vw,30px); color:var(--p-champ-dk,#A8884E); line-height:1.1;
}
.woocommerce-MyAccount-content .perle-stat__label{
  display:block; margin-top:6px; font-family:'Inter',sans-serif; font-weight:500;
  font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--p-stone,#8B8278);
}
.woocommerce-MyAccount-content .perle-dash__cards{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr)); gap:clamp(12px,1.6vw,18px);
}
.woocommerce-MyAccount-content .perle-card{
  position:relative; display:flex; flex-direction:column;
  background:var(--p-white,#fff); border:1px solid var(--p-taupe,#DCD2C6); border-radius:16px;
  padding:clamp(22px,2.6vw,28px) clamp(20px,2.4vw,24px); text-decoration:none; color:var(--p-ink,#211E1B); overflow:hidden;
  transition:transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s ease, border-color .3s ease;
}
.woocommerce-MyAccount-content .perle-card::before{ content:""; position:absolute; inset:0; background:var(--p-pearl); background-size:200% 100%; opacity:0; transition:opacity .4s ease; z-index:0; }
.woocommerce-MyAccount-content .perle-card > *{ position:relative; z-index:1; }
.woocommerce-MyAccount-content .perle-card__icon{
  width:46px; height:46px; margin-bottom:16px; border-radius:12px; background:var(--p-panel,#F6F2EC);
  display:flex; align-items:center; justify-content:center; font-size:24px; color:var(--p-champ-dk,#A8884E);
}
.woocommerce-MyAccount-content .perle-card__icon svg{ width:24px; height:24px; stroke:var(--p-champ-dk,#A8884E); stroke-width:1.7; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.woocommerce-MyAccount-content .perle-card__title{ font-family:'Inter',sans-serif; font-size:clamp(18px,2.2vw,21px); font-weight:800; margin-bottom:5px; letter-spacing:.2px; }
.woocommerce-MyAccount-content .perle-card__desc{ font-family:'Inter',sans-serif; font-size:14px; color:var(--p-stone,#8B8278); line-height:1.5; }
.woocommerce-MyAccount-content .perle-card__arrow{ margin-top:16px; font-size:18px; color:var(--p-champ-dk,#A8884E); transition:transform .3s ease; }
@media (hover:hover){
  .woocommerce-MyAccount-content .perle-card:hover{ transform:translateY(-5px); box-shadow:var(--p-shadow-sm,0 6px 22px rgba(33,30,27,.06)); border-color:var(--p-champ,#C9A86A); }
  .woocommerce-MyAccount-content .perle-card:hover::before{ opacity:.3; }
  .woocommerce-MyAccount-content .perle-card:hover .perle-card__arrow{ transform:translateX(6px); }
}

/* ============================================================
   5. TABLEAUX
   ============================================================ */
.woocommerce-MyAccount-content table.shop_table,
.woocommerce-MyAccount-content .woocommerce-orders-table{
  border:none; border-collapse:separate; border-spacing:0; width:100%;
  border-radius:var(--p-radius-sm,14px); overflow:hidden; box-shadow:var(--p-shadow-sm,0 6px 22px rgba(33,30,27,.06));
}
.woocommerce-MyAccount-content table.shop_table thead th{
  background:var(--p-mist,#F1ECE6); color:var(--p-ink,#211E1B); font-family:'Inter',sans-serif; font-weight:700; font-size:11px;
  letter-spacing:1px; text-transform:uppercase; padding:18px 16px; border:none;
}
.woocommerce-MyAccount-content table.shop_table tbody td{
  background:var(--p-white,#fff); padding:18px 16px; font-family:'Inter',sans-serif; font-size:15px; border:none; border-bottom:1px solid var(--p-mist,#F1ECE6); vertical-align:middle;
}
.woocommerce-MyAccount-content table.shop_table tbody tr:last-child td{ border-bottom:none; }
.woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-status{ font-weight:600; color:var(--p-champ-dk,#A8884E); }
@media (hover:hover){ .woocommerce-MyAccount-content table.shop_table tbody tr:hover td{ background:var(--p-porcelain,#FBFAF8); } }

/* ============================================================
   6. BOUTONS
   ============================================================ */
.woocommerce-MyAccount-content .button,
.woocommerce-MyAccount-content button.button,
.woocommerce-MyAccount-content input.button,
.woocommerce-MyAccount-content .woocommerce-button{
  background:var(--p-ink,#211E1B) !important; color:var(--p-white,#fff) !important;
  font-family:'Inter',sans-serif; font-weight:700; font-size:12px; letter-spacing:.8px; text-transform:uppercase;
  padding:14px 30px !important; border:none !important; border-radius:50px !important; transition:all .3s ease; cursor:pointer;
}
@media (hover:hover){
  .woocommerce-MyAccount-content .button:hover,
  .woocommerce-MyAccount-content button.button:hover,
  .woocommerce-MyAccount-content input.button:hover{ background:var(--p-champ-dk,#A8884E) !important; transform:translateY(-2px); box-shadow:0 10px 24px rgba(168,136,78,.32); }
}
.woocommerce-MyAccount-content table.shop_table .button.view{ background:transparent !important; color:var(--p-ink,#211E1B) !important; border:1px solid var(--p-ink,#211E1B) !important; padding:9px 22px !important; }
.woocommerce-MyAccount-content table.shop_table .button.view:hover{ background:var(--p-ink,#211E1B) !important; color:var(--p-white,#fff) !important; }

/* ============================================================
   7. FORMULAIRES
   ============================================================ */
.woocommerce-MyAccount-content form .form-row label,
.woocommerce-MyAccount-content .woocommerce-address-fields label,
.woocommerce-MyAccount-content .woocommerce-EditAccountForm label{
  font-family:'Inter',sans-serif; font-size:11px; font-weight:500; letter-spacing:.8px; text-transform:uppercase; color:var(--p-stone,#8B8278); margin-bottom:8px; display:block;
}
.woocommerce-MyAccount-content form input[type="text"],
.woocommerce-MyAccount-content form input[type="email"],
.woocommerce-MyAccount-content form input[type="tel"],
.woocommerce-MyAccount-content form input[type="password"],
.woocommerce-MyAccount-content form select{
  background:var(--p-porcelain,#FBFAF8); border:1px solid var(--p-taupe,#DCD2C6) !important;
  border-radius:12px !important; padding:15px 16px !important;
  font-family:'Inter',sans-serif; font-size:15px; color:var(--p-ink,#211E1B); width:100%; height:auto !important; transition:all .25s ease;
}
.woocommerce-MyAccount-content form input:focus,
.woocommerce-MyAccount-content form select:focus{
  outline:none; border-color:var(--p-champ,#C9A86A) !important; background:var(--p-white,#fff); box-shadow:0 0 0 3px rgba(201,168,106,.16);
}

/* ============================================================
   8. CARTES D'ADRESSE — 2 colonnes
   ============================================================ */
.woocommerce-MyAccount-content .woocommerce-Addresses{
  display:grid !important; grid-template-columns:1fr 1fr !important;
  gap:clamp(16px,2vw,24px) !important; float:none !important; width:100% !important;
}
.woocommerce-MyAccount-content .woocommerce-Addresses .woocommerce-Address{
  width:auto !important; float:none !important; margin:0 !important;
  background:var(--p-panel,#F6F2EC); border:1px solid var(--p-taupe,#DCD2C6);
  border-radius:var(--p-radius,20px); padding:clamp(22px,3vw,32px);
}
.woocommerce-MyAccount-content .woocommerce-Address-title h3{ margin-top:0; }
.woocommerce-MyAccount-content .woocommerce-Address address{ font-family:'Inter',sans-serif; font-style:normal; line-height:1.9; color:var(--p-ink,#211E1B); }

/* ============================================================
   9. NOTICES (icône par défaut masquée)
   ============================================================ */
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) .woocommerce-message,
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) .woocommerce-info,
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) .woocommerce-notice,
.woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-MyAccount-content .woocommerce-info{
  background:var(--p-panel,#F6F2EC); border:none; border-top:3px solid var(--p-champ,#C9A86A);
  border-radius:12px; color:var(--p-ink,#211E1B); font-family:'Inter',sans-serif; font-size:15px; padding:18px 22px !important;
  display:flex !important; align-items:center !important; justify-content:space-between !important; gap:16px; flex-wrap:wrap;
}
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) .woocommerce-message::before,
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) .woocommerce-info::before,
.woocommerce-MyAccount-content .woocommerce-message::before,
.woocommerce-MyAccount-content .woocommerce-info::before{ display:none !important; content:"" !important; }

/* ============================================================
   10. BLOC PAIEMENT STRIPE harmonisé
   ============================================================ */
.woocommerce-MyAccount-content #payment,
.woocommerce-MyAccount-content #add_payment_method #payment{
  background:var(--p-panel,#F6F2EC) !important; border:1px solid var(--p-taupe,#DCD2C6) !important; border-radius:18px !important;
}
.woocommerce-MyAccount-content #payment ul.payment_methods{
  border-bottom:1px solid var(--p-taupe,#DCD2C6) !important; padding:18px 22px !important; margin:0 !important;
}
.woocommerce-MyAccount-content #payment ul.payment_methods li{ background:transparent !important; }
.woocommerce-MyAccount-content #payment div.payment_box{
  background:var(--p-white,#fff) !important; border:1px solid var(--p-taupe,#DCD2C6) !important;
  border-radius:14px !important; color:var(--p-ink,#211E1B) !important; box-shadow:none !important;
}
.woocommerce-MyAccount-content #payment div.payment_box::before{ border-bottom-color:var(--p-white,#fff) !important; }
.woocommerce-MyAccount-content #payment .form-row,
.woocommerce-MyAccount-content #payment .place-order{ background:transparent !important; padding:18px 22px !important; }

/* ============================================================
   11. RESPONSIVE
   ============================================================ */
@media (max-width:768px){
  .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation){ display:block; }

  .woocommerce-MyAccount-navigation{ padding:14px 12px; margin-bottom:22px; border-radius:var(--p-radius-sm,14px); }
  .woocommerce-MyAccount-navigation ul{
    display:flex; flex-wrap:nowrap; gap:8px; margin:8px 0 0;
    overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; scroll-snap-type:x proximity;
  }
  .woocommerce-MyAccount-navigation ul::-webkit-scrollbar{ display:none; }
  .woocommerce-MyAccount-navigation ul li{ margin:0; flex:0 0 auto; scroll-snap-align:start; }
  .woocommerce-MyAccount-navigation ul li a{ white-space:nowrap; padding:11px 18px; border:1px solid var(--p-taupe,#DCD2C6); border-radius:50px; background:var(--p-porcelain,#FBFAF8); font-size:14px; }
  .woocommerce-MyAccount-navigation ul li.is-active a{ box-shadow:none; border-color:var(--p-ink,#211E1B); }

  .woocommerce-MyAccount-content{ border-radius:var(--p-radius-sm,14px); }

  .woocommerce-MyAccount-content .woocommerce-Addresses{ grid-template-columns:1fr !important; }

  .woocommerce-MyAccount-content table.shop_table{ box-shadow:none; background:transparent; }
  .woocommerce-MyAccount-content table.shop_table thead{ display:none; }
  .woocommerce-MyAccount-content table.shop_table tbody tr{
    display:block; background:var(--p-white,#fff); border:1px solid var(--p-taupe,#DCD2C6);
    border-radius:var(--p-radius-sm,14px); margin-bottom:14px; padding:6px 4px; box-shadow:var(--p-shadow-sm,0 6px 22px rgba(33,30,27,.06));
  }
  .woocommerce-MyAccount-content table.shop_table tbody td{
    display:flex; justify-content:space-between; align-items:center; gap:16px; text-align:right; padding:12px 16px; border-bottom:1px solid var(--p-mist,#F1ECE6);
  }
  .woocommerce-MyAccount-content table.shop_table tbody tr td:last-child{ border-bottom:none; }
  .woocommerce-MyAccount-content table.shop_table tbody td::before{
    content:attr(data-title); font-family:'Inter',sans-serif; font-weight:700; text-transform:uppercase; font-size:10px; letter-spacing:.5px; color:var(--p-stone,#8B8278); text-align:left;
  }
  .woocommerce-MyAccount-content table.shop_table .button{ width:100%; text-align:center; }

  .woocommerce-MyAccount-content form input[type="text"],
  .woocommerce-MyAccount-content form input[type="email"],
  .woocommerce-MyAccount-content form input[type="tel"],
  .woocommerce-MyAccount-content form input[type="password"],
  .woocommerce-MyAccount-content form select{ font-size:16px; }

  .woocommerce-MyAccount-content .button,
  .woocommerce-MyAccount-content button.button,
  .woocommerce-MyAccount-content input.button{ width:100%; text-align:center; }
}

@media (max-width:480px){
  .woocommerce-MyAccount-content .perle-dash__stats{ grid-template-columns:1fr; }
  .woocommerce-MyAccount-navigation ul li a{ padding:10px 15px; font-size:13px; }
  .woocommerce-MyAccount-navigation-link a::before{ font-size:15px; width:18px; }
}

@media (prefers-reduced-motion:reduce){
  .woocommerce-MyAccount-navigation::before,
  .woocommerce-MyAccount-content > p:first-child::after,
  .woocommerce-MyAccount-content .perle-card::before{ animation:none; }
  .woocommerce-MyAccount-content .perle-card,
  .woocommerce-MyAccount-content .perle-card__arrow{ transition:none; }
}

/* ============================================================
   12. PAGE CONNEXION / INSCRIPTION (visiteur non connecté)
   ============================================================ */

/* ---------- Conteneur global : deux colonnes ---------- */
.woocommerce-account #customer_login{
  --p-porcelain:#FBFAF8; --p-mist:#F1ECE6; --p-panel:#F6F2EC; --p-taupe:#DCD2C6;
  --p-ink:#211E1B; --p-stone:#8B8278; --p-champ:#C9A86A; --p-champ-dk:#A8884E; --p-white:#fff;
  --p-pearl:linear-gradient(110deg,#F6E6D8 0%,#F0E0EC 30%,#E4ECF0 55%,#F3EBDD 80%,#F6E6D8 100%);

  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:start;
  gap:clamp(20px,3vw,40px);
  max-width:880px;
  margin:clamp(30px,5vw,60px) auto clamp(50px,7vw,90px);
  padding:0 clamp(14px,3vw,20px);
  font-family:'Inter',sans-serif;
}

@keyframes perlePearlLogin{ 0%,100%{ background-position:0 0; } 50%{ background-position:100% 0; } }

/* ---------- Chaque colonne devient une carte ---------- */
.woocommerce-account #customer_login > div{
  width:auto !important; float:none !important; max-width:none !important;
  margin:0 !important;
  position:relative !important; top:auto !important; left:auto !important;
  right:auto !important; transform:none !important;
  background:var(--p-white,#fff);
  border-radius:20px;
  box-shadow:0 18px 50px rgba(33,30,27,.08);
  padding:clamp(28px,3.5vw,44px) clamp(22px,3vw,40px);
  overflow:hidden;
}
/* Placement explicite : les deux cartes côte à côte sur la même ligne */
.woocommerce-account #customer_login > div:first-child{ grid-column:1; grid-row:1; }
.woocommerce-account #customer_login > div:last-child{ grid-column:2; grid-row:1; }

.woocommerce-account #customer_login > div::before{
  content:""; position:absolute; top:0; left:0; right:0; height:5px;
  background:var(--p-pearl); background-size:200% 100%;
  animation:perlePearlLogin 9s ease-in-out infinite;
}

/* Les formulaires perdent leur bordure grise par défaut */
.woocommerce-account #customer_login form.woocommerce-form-login,
.woocommerce-account #customer_login form.woocommerce-form-register{
  border:none !important; padding:0 !important; margin:0 !important;
}

/* ---------- Titres "Se connecter" / "S'inscrire" ---------- */
.woocommerce-account #customer_login h2{
  font-family:'Inter',sans-serif !important;
  font-size:clamp(22px,3vw,28px) !important;
  font-weight:900 !important;
  text-transform:uppercase;
  letter-spacing:.4px;
  color:var(--p-ink,#211E1B) !important;
  margin:0 0 8px !important;
  padding-bottom:16px;
  position:relative;
}
.woocommerce-account #customer_login h2::after{
  content:""; position:absolute; bottom:0; left:0;
  width:64px; height:3px; border-radius:3px;
  background:var(--p-pearl); background-size:200% 100%;
  animation:perlePearlLogin 9s ease-in-out infinite;
}

/* ---------- Labels ---------- */
.woocommerce-account #customer_login label{
  font-family:'Inter',sans-serif !important;
  font-size:11px !important; font-weight:500 !important;
  letter-spacing:.8px; text-transform:uppercase;
  color:var(--p-stone,#8B8278) !important;
  margin-bottom:8px; display:block;
}
.woocommerce-account #customer_login label .required{
  color:var(--p-champ-dk,#A8884E) !important; text-decoration:none;
}

/* ---------- Champs de saisie ---------- */
.woocommerce-account #customer_login input[type="text"],
.woocommerce-account #customer_login input[type="email"],
.woocommerce-account #customer_login input[type="password"]{
  background:var(--p-porcelain,#FBFAF8) !important;
  border:1px solid var(--p-taupe,#DCD2C6) !important;
  border-radius:12px !important;
  padding:15px 16px !important;
  font-family:'Inter',sans-serif !important;
  font-size:15px !important;
  color:var(--p-ink,#211E1B) !important;
  width:100%; height:auto !important;
  transition:all .25s ease;
  box-shadow:none !important;
}
.woocommerce-account #customer_login input:focus{
  outline:none !important;
  border-color:var(--p-champ,#C9A86A) !important;
  background:var(--p-white,#fff) !important;
  box-shadow:0 0 0 3px rgba(201,168,106,.16) !important;
}

/* Oeil du mot de passe recoloré */
.woocommerce-account #customer_login .show-password-input::after{
  color:var(--p-stone,#8B8278);
}

/* ---------- Boutons ---------- */
.woocommerce-account #customer_login button.button,
.woocommerce-account #customer_login .woocommerce-form-login__submit,
.woocommerce-account #customer_login .woocommerce-form-register__submit{
  background:var(--p-ink,#211E1B) !important;
  color:var(--p-white,#fff) !important;
  font-family:'Inter',sans-serif !important;
  font-weight:700 !important; font-size:12px !important;
  letter-spacing:.8px; text-transform:uppercase;
  padding:14px 34px !important;
  border:none !important; border-radius:50px !important;
  transition:all .3s ease; cursor:pointer;
}
@media (hover:hover){
  .woocommerce-account #customer_login button.button:hover{
    background:var(--p-champ-dk,#A8884E) !important;
    transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(168,136,78,.32);
  }
}

/* ---------- Case "Se souvenir de moi" ---------- */
.woocommerce-account #customer_login .woocommerce-form-login__rememberme{
  display:inline-flex !important; align-items:center; gap:8px;
  font-family:'Inter',sans-serif !important;
  font-size:13px !important; font-weight:400 !important;
  letter-spacing:0 !important; text-transform:none !important;
  color:var(--p-ink,#211E1B) !important;
  margin:0 0 0 14px !important;
}
.woocommerce-account #customer_login input[type="checkbox"]{
  accent-color:var(--p-champ-dk,#A8884E);
  width:16px; height:16px;
}

/* ---------- Liens (mot de passe perdu, politique) ---------- */
.woocommerce-account #customer_login a{
  color:var(--p-champ-dk,#A8884E) !important;
  font-weight:500;
  text-decoration:none !important;
  border-bottom:1px solid rgba(168,136,78,.35);
  transition:border-color .2s ease;
}
.woocommerce-account #customer_login a:hover{
  border-color:var(--p-champ-dk,#A8884E);
}
.woocommerce-account #customer_login .lost_password{
  margin-top:18px !important;
  font-size:14px;
}

/* ---------- Texte d'information (inscription) ---------- */
.woocommerce-account #customer_login .woocommerce-privacy-policy-text p,
.woocommerce-account #customer_login form.woocommerce-form-register > p:not(.form-row){
  font-family:'Inter',sans-serif;
  font-size:14px; line-height:1.75;
  color:var(--p-stone,#8B8278);
}

/* Espacement vertical des lignes de formulaire */
.woocommerce-account #customer_login .form-row{
  margin-bottom:18px !important;
}

/* ---------- Responsive : une seule colonne ---------- */
@media (max-width:820px){
  .woocommerce-account #customer_login{
    grid-template-columns:1fr;
    gap:22px;
  }
  .woocommerce-account #customer_login > div:first-child,
  .woocommerce-account #customer_login > div:last-child{
    grid-column:1; grid-row:auto;
  }
  .woocommerce-account #customer_login button.button{
    width:100%; text-align:center;
  }
  .woocommerce-account #customer_login .woocommerce-form-login__rememberme{
    margin:14px 0 0 !important;
  }
  .woocommerce-account #customer_login input[type="text"],
  .woocommerce-account #customer_login input[type="email"],
  .woocommerce-account #customer_login input[type="password"]{
    font-size:16px !important; /* évite le zoom automatique iOS */
  }
}

@media (prefers-reduced-motion:reduce){
  .woocommerce-account #customer_login .u-column1::before,
  .woocommerce-account #customer_login .u-column2::before,
  .woocommerce-account #customer_login h2::after{ animation:none; }
}/* End custom CSS */