/* ====== CCX — Account Hub (Mon compte) ====== */

/* ---------- A. Intro (vue invité) ---------- */

.ccx-account-intro {
  max-width: 900px;
  margin: 0 auto 18px;
  padding: 10px 16px 0;
}

.ccx-ai-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 4px;
  color: #111827;
}

.ccx-ai-subtitle {
  margin: 0;
  font-size: 0.95rem;
  color: #4b5563;
}

/* ---------- B. Formulaires login / inscription ---------- */

/* Conteneur global des 2 formulaires (connexion + inscription) */
.woocommerce-account .u-columns.col2-set {
  max-width: 900px;
  margin: 20px auto 60px;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  gap: 24px;
}

/* Chaque carte = moitié de la largeur */
.woocommerce-account .u-columns.col2-set .u-column1,
.woocommerce-account .u-columns.col2-set .u-column2 {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  float: none !important;
}


/* Style des cartes */
.woocommerce-account #customer_login .u-column1,
.woocommerce-account #customer_login .u-column2 {
  background: #111827;
  border-radius: 14px;
  padding: 18px 20px 20px;
  border: 1px solid #1f2933;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
  color: #e5e7eb;
}

.woocommerce-account #customer_login .u-column1 h2,
.woocommerce-account #customer_login .u-column2 h2 {
  font-size: 1.15rem;
  margin: 0 0 12px;
  color: #f9fafb;
}

/* Champs */

.woocommerce-account form .form-row {
  margin-bottom: 12px;
}

.woocommerce-account form .form-row label {
  display: block;
  margin-bottom: 4px;
  font-size: 0.85rem;
  color: #d1d5db;
}

.woocommerce-account form .input-text {
  width: 100%;
  border-radius: 10px;
  border: 1px solid #374151;
  background: #020617;
  padding: 8px 10px;
  font-size: 0.95rem;
  color: #e5e7eb;
}

.woocommerce-account form .input-text:focus {
  outline: none;
  border-color: #ff8a00;
  box-shadow: 0 0 0 1px rgba(255, 138, 0, 0.45);
}

/* Checkbox "se souvenir de moi" */

.woocommerce-account .woocommerce-form-login .woocommerce-form__label.woocommerce-form__label-for-checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: #d1d5db;
}

/* Boutons login / inscription */

.woocommerce-account .woocommerce-form-login .button,
.woocommerce-account .woocommerce-form-register .button {
  border-radius: 9999px;
  border: none !important;
  background: #22c55e;
  color: #020617;
  font-weight: 600;
  padding: 8px 18px;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 6px 14px rgba(34, 197, 94, 0.35);
}

.woocommerce-account .woocommerce-form-login .button:hover,
.woocommerce-account .woocommerce-form-register .button:hover {
  background: #16a34a !important;
  box-shadow: 0 8px 18px rgba(22, 163, 74, 0.45);
}

/* Liens "Mot de passe perdu ?" etc. */

.woocommerce-account .woocommerce-LostPassword,
.woocommerce-account .woocommerce-privacy-policy-text,
.woocommerce-account .woocommerce-form-register p {
  font-size: 0.8rem;
  color: #9ca3af;
}

.woocommerce-account .woocommerce-LostPassword a,
.woocommerce-account .woocommerce-privacy-policy-text a {
  color: #22c55e;
}

/* Responsif formulaires */

@media (max-width: 900px) {
  .woocommerce-account #customer_login .u-columns {
    flex-direction: column;
    gap: 18px;
  }

  .woocommerce-account #customer_login .u-column1,
  .woocommerce-account #customer_login .u-column2,
  .woocommerce-account #customer_login .col-1,
  .woocommerce-account #customer_login .col-2 {
    width: 100%;
  }

  .ccx-account-intro {
    padding: 4px 14px 0;
  }

  .ccx-ai-title {
    font-size: 1.25rem;
  }
}

/* ---------- C. Dashboard premium (vue connectée) ---------- */

.ccx-account-hub {
  max-width: 1120px;
  margin: 0 auto 40px;
  padding: 24px 20px 10px;
}

.ccx-ah-title {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0 0 6px;
  color: #f9fafb;
}

.ccx-ah-subtitle {
  margin: 0 0 20px;
  font-size: 0.95rem;
  color: #9ca3af;
}

.ccx-ah-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}

.ccx-ah-card {
  position: relative;
  border-radius: 14px;
  padding: 14px 16px;
  background: #111827;
  border: 1px solid #1f2933;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  color: inherit;
}

.ccx-ah-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
  border-color: #ff8a00;
}

.ccx-ah-label {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #9ca3af;
}

.ccx-ah-value {
  font-size: 1.6rem;
  font-weight: 700;
  color: #f9fafb;
}

.ccx-ah-desc {
  font-size: 0.9rem;
  color: #9ca3af;
}

/* Variantes couleur */

.ccx-ah-card--fav    { border-left: 3px solid #22c55e; }
.ccx-ah-card--profile{ border-left: 3px solid #f97316; }
.ccx-ah-card--browse { border-left: 3px solid #3b82f6; }

/* Dashboard mobile */

@media (max-width: 600px) {
  .ccx-account-hub {
    padding: 18px 12px 6px;
  }

  .ccx-ah-title {
    font-size: 1.3rem;
  }

  .ccx-ah-grid {
    gap: 10px;
  }

  .ccx-ah-card {
    padding: 12px 12px;
  }

  .ccx-ah-value {
    font-size: 1.4rem;
  }
}

/* =========================================
   FIX FINAL — Formulaires WooCommerce + Divi
   ========================================= */

/* On cible le wrapper réel (id + classes) */
.woocommerce-account #customer_login.u-columns.col2-set {
  display: flex !important;
  flex-direction: row !important;
  gap: 24px;
  max-width: 900px;
  margin: 20px auto 60px;
  padding: 0 !important;
}

/* Les 2 colonnes : col-1 et col-2 */
.woocommerce-account #customer_login.u-columns.col2-set .u-column1.col-1,
.woocommerce-account #customer_login.u-columns.col2-set .u-column2.col-2 {
  flex: 1 1 0 !important;
  width: 50% !important;
  margin: 0 !important;
  float: none !important;
  min-width: 0;
}

/* Sur mobile : empiler les cartes */
@media (max-width: 900px) {
  .woocommerce-account #customer_login.u-columns.col2-set {
    flex-direction: column !important;
    gap: 18px;
  }

  .woocommerce-account #customer_login.u-columns.col2-set .u-column1.col-1,
  .woocommerce-account #customer_login.u-columns.col2-set .u-column2.col-2 {
    width: 100% !important;
  }
}



.ccx-ah-card--fav    { border-left: 3px solid #22c55e; }
.ccx-ah-card--profile{ border-left: 3px solid #f97316; }
.ccx-ah-card--browse { border-left: 3px solid #3b82f6; }
.ccx-ah-card--logout { border-left: 3px solid #ef4444; } /* rouge déconnexion */

/* ====== Override final des boutons login / inscription ====== */

.woocommerce-account .woocommerce-form-login .button,
.woocommerce-account .woocommerce-form-register .button,
.woocommerce-account .woocommerce-form-login .woocommerce-Button,
.woocommerce-account .woocommerce-form-register .woocommerce-Button {
  border-radius: 9999px !important;
  border: none !important;
  background: #22c55e !important;
  color: #020617 !important;
  font-weight: 600;
  padding: 8px 18px;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(34, 197, 94, 0.35);
  text-decoration: none !important;
  transform: none !important;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.woocommerce-account .woocommerce-form-login .button:hover,
.woocommerce-account .woocommerce-form-register .button:hover,
.woocommerce-account .woocommerce-form-login .woocommerce-Button:hover,
.woocommerce-account .woocommerce-form-register .woocommerce-Button:hover {
  background: #16a34a !important;
  box-shadow: 0 8px 18px rgba(22, 163, 74, 0.45);
  transform: none !important;
}

/* état focus / active propres */
.woocommerce-account .woocommerce-form-login .button:focus,
.woocommerce-account .woocommerce-form-register .button:focus,
.woocommerce-account .woocommerce-form-login .woocommerce-Button:focus,
.woocommerce-account .woocommerce-form-register .woocommerce-Button:focus {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.6);
}


/* ====== Boutons compte Cmonchoix (orange -> vert) ====== */

.woocommerce-account .woocommerce-form-login .button,
.woocommerce-account .woocommerce-form-register .button,
.woocommerce-account .woocommerce-form-login .woocommerce-Button,
.woocommerce-account .woocommerce-form-register .woocommerce-Button {
  border-radius: 9999px !important;
  border: none !important;
  background: #ff8a00 !important;          /* orange thème */
  color: #020617 !important;
  font-weight: 600;
  padding: 8px 22px;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(255, 138, 0, 0.35);
  text-decoration: none !important;
  transform: none !important;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

/* Hover vert */
.woocommerce-account .woocommerce-form-login .button:hover,
.woocommerce-account .woocommerce-form-register .button:hover,
.woocommerce-account .woocommerce-form-login .woocommerce-Button:hover,
.woocommerce-account .woocommerce-form-register .woocommerce-Button:hover {
  background: #22c55e !important;          /* vert */
  box-shadow: 0 8px 18px rgba(34, 197, 94, 0.45);
  transform: none !important;
}

/* Enlever la flèche ajoutée par le thème */
.woocommerce-account .woocommerce-form-login .button::after,
.woocommerce-account .woocommerce-form-register .button::after,
.woocommerce-account .woocommerce-form-login .woocommerce-Button::after,
.woocommerce-account .woocommerce-form-register .woocommerce-Button::after {
  content: none !important;
}

/* ====== Boutons compte Cmonchoix (orange -> vert, texte bien centré) ====== */

.woocommerce-account .woocommerce-form-login .button,
.woocommerce-account .woocommerce-form-register .button,
.woocommerce-account .woocommerce-form-login .woocommerce-Button,
.woocommerce-account .woocommerce-form-register .woocommerce-Button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 9999px !important;
  border: none !important;
  background: #ff8a00 !important;          /* orange thème */
  color: #020617 !important;
  font-weight: 600;
  padding: 8px 22px !important;
  font-size: 0.95rem;
  line-height: 1.2 !important;

  cursor: pointer;
  box-shadow: 0 6px 14px rgba(255, 138, 0, 0.35);
  text-decoration: none !important;
  transform: none !important;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

/* Hover vert */
.woocommerce-account .woocommerce-form-login .button:hover,
.woocommerce-account .woocommerce-form-register .button:hover,
.woocommerce-account .woocommerce-form-login .woocommerce-Button:hover,
.woocommerce-account .woocommerce-form-register .woocommerce-Button:hover {
  background: #22c55e !important;          /* vert */
  box-shadow: 0 8px 18px rgba(34, 197, 94, 0.45);
  transform: none !important;
}

/* Enlever flèches/icônes du thème */
.woocommerce-account .woocommerce-form-login .button::after,
.woocommerce-account .woocommerce-form-register .button::after,
.woocommerce-account .woocommerce-form-login .woocommerce-Button::after,
.woocommerce-account .woocommerce-form-register .woocommerce-Button::after {
  content: none !important;
}

.ccx-register-privacy {
  margin-top: 8px;
  font-size: 0.8rem;
  color: #9ca3af;
}

.ccx-register-privacy a {
  color: #22c55e;
  text-decoration: underline;
}


/* Cache le texte privacy Woo par défaut sur la zone inscription */
.woocommerce-account .u-column2 .woocommerce-privacy-policy-text {
  display: none;
}


/* ====== Page "Mot de passe perdu" WooCommerce ====== */

body.woocommerce-lost-password .woocommerce {
  max-width: 480px;
  margin: 40px auto 80px;
  padding: 0 16px;
}

body.woocommerce-lost-password .woocommerce form.lost_reset_password {
  background: #111827;
  border-radius: 14px;
  border: 1px solid #1f2933;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
  padding: 20px 22px 22px;
}

body.woocommerce-lost-password .woocommerce form.lost_reset_password p {
  color: #d1d5db;
  font-size: 0.9rem;
}

body.woocommerce-lost-password .woocommerce form.lost_reset_password label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.85rem;
  color: #e5e7eb;
}

body.woocommerce-lost-password .woocommerce form.lost_reset_password .input-text {
  width: 100%;
  border-radius: 10px;
  border: 1px solid #374151;
  background: #020617;
  padding: 8px 10px;
  font-size: 0.95rem;
  color: #e5e7eb;
}

body.woocommerce-lost-password .woocommerce form.lost_reset_password .input-text:focus {
  outline: none;
  border-color: #ff8a00;
  box-shadow: 0 0 0 1px rgba(255, 138, 0, 0.45);
}

/* Bouton "Réinitialiser" aligné avec notre style orange -> vert */
body.woocommerce-lost-password .woocommerce form.lost_reset_password button.button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 9999px !important;
  border: none !important;
  background: #ff8a00 !important;
  color: #020617 !important;
  font-weight: 600;
  padding: 8px 22px !important;
  font-size: 0.95rem;
  box-shadow: 0 6px 14px rgba(255, 138, 0, 0.35);
  cursor: pointer;
  transform: none !important;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

body.woocommerce-lost-password .woocommerce form.lost_reset_password button.button:hover {
  background: #22c55e !important;
  box-shadow: 0 8px 18px rgba(34, 197, 94, 0.45);
}

body.woocommerce-lost-password .woocommerce form.lost_reset_password button.button::after {
  content: none !important; /* pas de flèche moche */
}



/* ============================================================
   PAGE : Mot de passe perdu WooCommerce (lost-password)
   Style premium cohérent avec connexion / inscription
   ============================================================ */

/* Conteneur centré */
body.woocommerce-lost-password .woocommerce {
    max-width: 520px;
    margin: 40px auto 80px;
    padding: 0 18px;
}

/* Titre centré */
body.woocommerce-lost-password .woocommerce h2 {
    text-align: center;
    font-size: 1.6rem;
    margin-bottom: 20px;
    color: #111827;
}

/* Carte */
body.woocommerce-lost-password .woocommerce form.lost_reset_password {
    background: #111827;
    border-radius: 14px;
    border: 1px solid #1f2933;
    padding: 24px 24px 28px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.35);
}

/* Texte d’explication */
body.woocommerce-lost-password .woocommerce form.lost_reset_password p:first-of-type {
    font-size: 0.92rem;
    color: #d1d5db;
    line-height: 1.45;
    margin-bottom: 14px;
}

/* Label */
body.woocommerce-lost-password .woocommerce form.lost_reset_password label {
    display: block;
    font-size: 0.85rem;
    color: #e5e7eb;
    margin-bottom: 6px;
}

/* Champ input */
body.woocommerce-lost-password .woocommerce form.lost_reset_password .input-text {
    width: 100%;
    border-radius: 10px;
    background: #020617;
    border: 1px solid #374151;
    padding: 9px 10px;
    color: #e5e7eb;
    font-size: 0.95rem;
}

body.woocommerce-lost-password .woocommerce form.lost_reset_password .input-text:focus {
    border-color: #ff8a00;
    box-shadow: 0 0 0 1px rgba(255,138,0,0.45);
    outline: none;
}

/* Bouton reset = style Cmonchoix */
body.woocommerce-lost-password .woocommerce form.lost_reset_password button.button {
    width: 100%;
    margin-top: 14px;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    border-radius: 9999px !important;
    background: #ff8a00 !important;
    color: #020617 !important;

    padding: 10px 22px !important;
    font-weight: 600;
    font-size: 0.95rem;

    border: none !important;
    cursor: pointer;
    box-shadow: 0 6px 14px rgba(255,138,0,0.35);
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

/* Hover vert */
body.woocommerce-lost-password .woocommerce form.lost_reset_password button.button:hover {
    background: #22c55e !important;
    box-shadow: 0 8px 18px rgba(34,197,94,0.45);
}

/* Supprimer la flèche moche Woo */
body.woocommerce-lost-password .woocommerce form.lost_reset_password button.button::after {
    display: none !important;
}


/* ====== Notices WooCommerce (mot de passe perdu / reset) ====== */

/* Conteneur centré */
body.woocommerce-lost-password .woocommerce-notices-wrapper,
body.woocommerce-reset-password .woocommerce-notices-wrapper {
  max-width: 520px;
  margin: 30px auto 0;
  padding: 0 18px;
}

/* Message de succès */
body.woocommerce-lost-password .woocommerce-notices-wrapper .woocommerce-message,
body.woocommerce-reset-password .woocommerce-notices-wrapper .woocommerce-message {
  background: #022c22;              /* vert très sombre */
  border-radius: 10px;
  border: 1px solid #22c55e;
  padding: 12px 14px;
  color: #d1fae5;
  font-size: 0.9rem;
  box-shadow: 0 8px 20px rgba(0,0,0,0.35);
}

/* On enlève l’icône par défaut si ton thème en met une */
body.woocommerce-lost-password .woocommerce-notices-wrapper .woocommerce-message::before,
body.woocommerce-reset-password .woocommerce-notices-wrapper .woocommerce-message::before {
  display: none !important;
}

/* ============================================================
   PAGE : Réinitialisation du mot de passe (nouveau mot de passe)
   ============================================================ */

body.woocommerce-reset-password .woocommerce {
  max-width: 520px;
  margin: 40px auto 80px;
  padding: 0 18px;
}

/* Titre centré */
body.woocommerce-reset-password .woocommerce h2 {
  text-align: center;
  font-size: 1.6rem;
  margin-bottom: 20px;
  color: #111827;
}

/* Carte */
body.woocommerce-reset-password .woocommerce form.reset_password {
  background: #111827;
  border-radius: 14px;
  border: 1px solid #1f2933;
  padding: 24px 24px 28px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.35);
}

/* Labels + champs */
body.woocommerce-reset-password .woocommerce form.reset_password p {
  margin-bottom: 12px;
}

body.woocommerce-reset-password .woocommerce form.reset_password label {
  display: block;
  font-size: 0.85rem;
  color: #e5e7eb;
  margin-bottom: 6px;
}

body.woocommerce-reset-password .woocommerce form.reset_password .input-text {
  width: 100%;
  border-radius: 10px;
  background: #020617;
  border: 1px solid #374151;
  padding: 9px 10px;
  color: #e5e7eb;
  font-size: 0.95rem;
}

body.woocommerce-reset-password .woocommerce form.reset_password .input-text:focus {
  border-color: #ff8a00;
  box-shadow: 0 0 0 1px rgba(255,138,0,0.45);
  outline: none;
}

/* Bouton “Enregistrer” */
body.woocommerce-reset-password .woocommerce form.reset_password button.button {
  width: 100%;
  margin-top: 6px;

  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  border-radius: 9999px !important;
  background: #ff8a00 !important;
  color: #020617 !important;

  padding: 10px 22px !important;
  font-weight: 600;
  font-size: 0.95rem;

  border: none !important;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(255,138,0,0.35);
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

body.woocommerce-reset-password .woocommerce form.reset_password button.button:hover {
  background: #22c55e !important;
  box-shadow: 0 8px 18px rgba(34,197,94,0.45);
}

body.woocommerce-reset-password .woocommerce form.reset_password button.button::after {
  display: none !important;
}

/* ====== Override notices "Mot de passe perdu" (forcé) ====== */

body.woocommerce-lost-password .woocommerce-message,
body.woocommerce-reset-password .woocommerce-message {
  max-width: 520px;
  margin: 30px auto 0 !important;

  background: #022c22 !important;          /* vert très sombre */
  border-radius: 10px !important;
  border: 1px solid #22c55e !important;
  color: #d1fae5 !important;

  padding: 12px 14px !important;
  font-size: 0.9rem !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.35);
}

/* enlever éventuelle icône du thème */
body.woocommerce-lost-password .woocommerce-message::before,
body.woocommerce-reset-password .woocommerce-message::before {
  display: none !important;
}

/* ===== Réinit mot de passe : champs l'un sous l'autre ===== */
.woocommerce form.lost_reset_password .form-row-first,
.woocommerce form.lost_reset_password .form-row-last {
  width: 100% !important;
  float: none !important;
  clear: both !important;
  display: block !important;
}

/* Fix : rendre le "Bonjour xxx 👋" visible sur fond blanc */
.woocommerce-account .ccx-account-hub .ccx-ah-title {
  color: #111827 !important;  /* gris très foncé */
}