/*
Theme Name: Hello Elementor Child
Theme URI: https://abk-agence-digitale.com/
Description: Thème enfant pour Hello Elementor - Personnalisations WooCommerce et UI
Author: ABK Agence Digitale
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
*/


/* =========================================================
   STYLE MON COMPTE WooCommerce (Hello Elementor)
   Version adaptée aux classes visibles sur ton site
   Couleurs : #f15bb5 (rose) / #00bbf9 (hover/actif)
   ========================================================= */

/* === Structure générale === */

.woocommerce-account,
.woocommerce-MyAccount-navigation,
.woocommerce-MyAccount-content {
  all: revert;
}


/* =========================
   PAW — Mon compte (clean)
   Liens rose, hover bleu (texte uniquement)
   ========================= */
:root{
  --paw-rose:#f15bb5;
  --paw-blue:#00bbf9;
  --paw-border:#ececec;
  --paw-shadow:0 6px 16px rgba(0,0,0,.06);
}

/* NAV gauche — look “pill” propre */
.woocommerce-MyAccount-navigation ul{
  list-style:none; margin:0; padding:0;
}
.woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link{
  position:relative;
  border:1px solid var(--paw-border);
  border-radius:16px;
  margin:0 0 14px;
  background:#fff;
  transition:border-color .2s ease, box-shadow .2s ease, transform .1s ease;
}
.woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link:hover{
  border-color:#e2e2e2; box-shadow:var(--paw-shadow); transform:translateY(-1px);
}

/* Lien interne : texte rose, hover bleu (pas de fond) */
.woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link a{
  display:block; padding:12px 18px;
  font-weight:800; letter-spacing:.2px;
  color:var(--paw-rose); text-decoration:none;
  transition:color .2s ease;
}
.woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link a:hover{
  color:var(--paw-blue);                       /* ← hover = texte bleu uniquement */
}

/* État actif : trait discret + texte bleu (pas de fond) */
.woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link.is-active{
  border-color:var(--paw-blue);
}
.woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link.is-active::before{
  content:""; position:absolute; left:10px; top:50%; width:8px; height:8px;
  transform:translateY(-50%); border-radius:999px; background:var(--paw-blue);
}
.woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link.is-active a{
  color:var(--paw-blue);
  padding-left:30px;                            /* décale un peu pour laisser la pastille */
}

/* Zone de contenu — carte douce */
.woocommerce-MyAccount-content{
  background:#fff; border:1px solid var(--paw-border);
  border-radius:18px; padding:24px 26px;
  box-shadow:var(--paw-shadow);
}

/* Liens dans le contenu */
.woocommerce-MyAccount-content a{
  color:var(--paw-rose); font-weight:800; text-decoration:none;
  transition:color .2s ease;
}
.woocommerce-MyAccount-content a:hover{ color:var(--paw-blue); }

/* Boutons dans le contenu */
.woocommerce-MyAccount-content .button,
.woocommerce-MyAccount-content .woocommerce-Button,
.woocommerce-MyAccount-content button,
.woocommerce-MyAccount-content input[type="submit"]{
  background:var(--paw-rose); color:#fff!important;
  border:none; border-radius:14px; padding:12px 18px;
  font-weight:800; letter-spacing:.2px;
  transition:background .2s ease, transform .08s ease;
}
.woocommerce-MyAccount-content .button:hover,
.woocommerce-MyAccount-content .woocommerce-Button:hover,
.woocommerce-MyAccount-content button:hover,
.woocommerce-MyAccount-content input[type="submit"]:hover{
  background:var(--paw-blue); transform:translateY(-1px);
}

/* Inputs & tableaux (léger) */
.woocommerce-MyAccount-content input.input-text,
.woocommerce-MyAccount-content select,
.woocommerce-MyAccount-content textarea{
  border:1px solid var(--paw-border); border-radius:12px; padding:10px 12px;
}
.woocommerce-MyAccount-content input.input-text:focus,
.woocommerce-MyAccount-content select:focus,
.woocommerce-MyAccount-content textarea:focus{
  border-color:var(--paw-blue);
  box-shadow:0 0 0 3px rgba(0,187,249,.12); outline:none;
}
.woocommerce-MyAccount-content table.shop_table{
  border:1px solid var(--paw-border); border-radius:14px; overflow:hidden;
}
.woocommerce-MyAccount-content table.shop_table th{
  background:#f8fbff; font-weight:800;
}
.woocommerce-MyAccount-content table.shop_table th,
.woocommerce-MyAccount-content table.shop_table td{
  padding:12px 14px; border-top:1px solid var(--paw-border);
}

/* Notices Woo */
.woocommerce-message,.woocommerce-info,.woocommerce-error{
  border-radius:14px; border:1px solid var(--paw-border);
}

/* Mobile */
@media (max-width: 992px){
  .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link a{ padding:12px 16px 12px 24px; }
  .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link.is-active::before{ left:8px; }
}

/* =========================
   PAW — My Account en 2 colonnes (Flex)
   ========================= */

/* Le parent direct qui contient NAV + CONTENT */
.woocommerce-account .woocommerce{
  display: flex;
  align-items: flex-start;
  gap: 32px;                 /* espace entre les colonnes */
}

/* Colonne gauche (menu) : largeur fixe */
.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation{
  flex: 0 0 280px;           /* fixe à 280px, ne rétrécit pas */
}

/* Colonne droite (contenu) : prend tout l’espace restant */
.woocommerce-account .woocommerce .woocommerce-MyAccount-content{
  flex: 1 1 auto;            /* grandit et rétrécit si besoin */
  min-width: 0;              /* évite les débordements horizontaux */
}

/* Sécurité : on s’assure qu’aucun float ne traîne */
.woocommerce-MyAccount-navigation,
.woocommerce-MyAccount-content{
  float: none !important;
  width: auto !important;
}

/* Responsive : repasse en pile sur mobile */
@media (max-width: 992px){
  .woocommerce-account .woocommerce{
    display: block;
  }
  .woocommerce-account .woocommerce .woocommerce-MyAccount-navigation{
    margin-bottom: 20px;
    flex: none;
  }
}


/* =========================
   PAW — Police générale (Open Sans)
   ========================= */

/* Import de la police Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap');

/* Application globale */
body,
.woocommerce-MyAccount-content,
.woocommerce-MyAccount-content p,
.woocommerce-MyAccount-content td,
.woocommerce-MyAccount-content th,
.woocommerce-MyAccount-content input,
.woocommerce-MyAccount-content select,
.woocommerce-MyAccount-content textarea {
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 400;
  color: #333;
}

/* Pour les titres internes (optionnel, si tu veux qu’ils soient aussi en Open Sans bold) */
.woocommerce-MyAccount-content h1,
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 700;
}