/* ==========================================================================
   Étape 1 : Texte noir + liens soulignés sur la section Mon Compte
   ========================================================================== */

/* Cible uniquement le contenu principal de la page Mon Compte */
body.woocommerce-account .woocommerce-MyAccount-content {
  color: #000000; /* tout le texte en noir */
}

/* Les liens conservent le soulignement et le noir */
body.woocommerce-account .woocommerce-MyAccount-content a {
  color: #000000;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* En survol : tu peux choisir de renforcer la couleur ou épaissir le soulignement */
body.woocommerce-account .woocommerce-MyAccount-content a:hover {
  text-decoration-thickness: 2px;
}

/* ==========================================================================
   Étape 2 : Navigation Mon Compte — Suppression des puces + bordures
   ========================================================================== */

/* Retire les puces et le padding du ul */
body.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Chaque élément li */
body.woocommerce-account .woocommerce-MyAccount-navigation ul li {
  border: 1px solid #dcdcdc;   /* fine bordure grise */
  border-radius: 6px;          /* léger arrondi */
  margin-bottom: 10px;         /* espace entre les blocs */
  overflow: hidden;            /* garde les bords nets */
  transition: all 0.2s ease;
}

/* Le lien à l’intérieur : occupe tout l’espace du li */
body.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
  display: block;
  padding: 12px 16px;
  color: #000000;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s ease;
}

/* Effet au survol */
body.woocommerce-account .woocommerce-MyAccount-navigation ul li:hover {
  border-color: #999999;
  background: #f8f8f8;
}

/* Effet au clic / lien actif */
body.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
  background-color: #000000;
  color: #ffffff;
}

/* ==========================================================================
   Étape 3 : Ordre responsive — Le contenu au-dessus de la navigation sur mobile
   ========================================================================== */

/* Conteneur principal WooCommerce My Account */
body.woocommerce-account .woocommerce {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* petit espace entre les deux blocs */
}

/* Navigation et contenu : disposition par défaut (desktop) */
body.woocommerce-account .woocommerce-MyAccount-navigation {
  flex: 0 0 250px; /* largeur fixe pour la colonne gauche */
  order: 1; /* ordre normal */
}

body.woocommerce-account .woocommerce-MyAccount-content {
  flex: 1; /* prend tout l’espace restant */
  order: 2;
}

/* Sur mobile : inverser l’ordre */
@media (max-width: 768px) {
  body.woocommerce-account .woocommerce {
    flex-direction: column; /* empile les blocs */
  }

  body.woocommerce-account .woocommerce-MyAccount-content {
    order: 1; /* passe au-dessus */
  }

  body.woocommerce-account .woocommerce-MyAccount-navigation {
    order: 2; /* passe en dessous */
  }
}
/* ==========================================================================
   Étape 4 : Page Commandes — Message vide & lien "Parcourir les produits"
   ========================================================================== */

/* Style du message d'information WooCommerce */
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info {
  background: #f9f9f9;              /* fond doux */
  border: 1px solid #e1e1e1;        /* bordure légère */
  border-radius: 8px;
  padding: 20px;
  text-align: center;               /* centré */
  color: #000000;
  font-size: 15px;
  line-height: 1.6;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

/* Supprimer l’apparence de bouton sur le lien */
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info a.woocommerce-Button {
  background: none;
  border: none;
  box-shadow: none;
  color: #000000;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
  padding: 0;
  display: inline;
  transition: text-decoration-thickness 0.2s ease;
}

/* Effet au survol : plus de contraste sur le soulignement */
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info a.woocommerce-Button:hover {
  text-decoration-thickness: 2px;
}

/* --------------------------------------------------------------------------
   (Préparation) Si plus tard on veut styliser la table des commandes
   -------------------------------------------------------------------------- */

/* Tableau des commandes */
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table {
  width: 100%;
  border: 1px solid #e1e1e1;
  border-radius: 8px;
  border-collapse: collapse;
  margin-top: 20px;
  font-size: 15px;
}

body.woocommerce-account .woocommerce-MyAccount-content table.shop_table th,
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table td {
  padding: 12px 16px;
  border-bottom: 1px solid #eaeaea;
  text-align: left;
}

body.woocommerce-account .woocommerce-MyAccount-content table.shop_table th {
  background: #f5f5f5;
  font-weight: 600;
}

body.woocommerce-account .woocommerce-MyAccount-content table.shop_table tr:last-child td {
  border-bottom: none;
}

/* Lien "Voir" d'une commande */
body.woocommerce-account .woocommerce-MyAccount-content a.button.view {
  background: none;
  border: none;
  color: #000000;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 500;
  padding: 0;
}
/* ==========================================================================
   Étape 5 : Adresses — 2 colonnes symétriques, propres et alignées
   ========================================================================== */

/* Conteneur des adresses en grille (remplace la mise en page float par défaut) */
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses.col2-set.addresses {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch; /* chaque carte prend la même hauteur */
  margin-top: 16px;
}

/* Annule les largeurs/flottants hérités des classes col-1 / col-2 */
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses .u-column1.col-1,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses .u-column2.col-2 {
  width: auto;
  float: none;
  margin: 0;
}

/* Carte d’adresse (facturation & livraison) */
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address {
  background: #ffffff;
  border: 1px solid #e1e1e1;
  border-radius: 10px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

/* En-tête : titre à gauche, lien à droite, parfaitement alignés */
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address .woocommerce-Address-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  margin: 0 0 14px;
  border-bottom: 1px solid #ededed;
}

/* Titre */
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address .woocommerce-Address-title h2 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
  color: #000; /* texte en noir */
}

/* Lien "Ajouter / Modifier" — noir souligné, sans bordure */
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address .woocommerce-Address-title a.edit {
  color: #000;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
  white-space: nowrap; /* évite le retour à la ligne */
}

/* Contenu adresse */
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address address {
  margin: 0;              /* cohérent et net */
  color: #000;            /* texte noir */
  line-height: 1.6;
  font-style: normal;     /* évite l’italique par défaut de <address> */
}

/* État vide : légère nuance pour distinguer sans alourdir */
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address address:empty::before,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address address {
  /* si vide, Woo imprime déjà un texte ; on garde juste un ton sobre */
}

/* Responsive : 1 colonne sur mobile */
@media (max-width: 768px) {
  body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses.col2-set.addresses {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* ==========================================================================
   Étape 6 : Onglet Téléchargements — Message et lien "Parcourir les produits"
   ========================================================================== */

/* Bloc d'information quand aucun téléchargement n'est disponible */
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info[role="status"] {
  background: #f9f9f9;
  border: 1px solid #e1e1e1;
  border-radius: 10px;
  padding: 22px;
  text-align: center;
  color: #000000;
  font-size: 15px;
  line-height: 1.6;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* Lien "Parcourir les produits" sans effet bouton */
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info[role="status"] a.button {
  background: none;
  border: none;
  box-shadow: none;
  color: #000000;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
  padding: 0;
  display: inline;
  transition: text-decoration-thickness 0.2s ease;
}

/* Survol : soulignement légèrement accentué */
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info[role="status"] a.button:hover {
  text-decoration-thickness: 2px;
}

/* --------------------------------------------------------------------------
   (Préparation) Si des téléchargements existent : présentation claire du tableau
   -------------------------------------------------------------------------- */

/* Tableau des téléchargements */
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table.downloads {
  width: 100%;
  border: 1px solid #e1e1e1;
  border-radius: 10px;
  border-collapse: collapse;
  margin-top: 20px;
  font-size: 15px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

/* Titres de colonnes */
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table.downloads th {
  background: #f5f5f5;
  font-weight: 600;
  padding: 14px 16px;
  color: #000;
  border-bottom: 1px solid #e1e1e1;
}

/* Cellules */
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table.downloads td {
  padding: 14px 16px;
  border-bottom: 1px solid #eeeeee;
  color: #000;
}

/* Dernière ligne sans bordure inférieure */
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table.downloads tr:last-child td {
  border-bottom: none;
}

/* Lien de téléchargement */
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table.downloads a {
  color: #000;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 500;
  transition: text-decoration-thickness 0.2s ease;
}

/* Survol du lien */
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table.downloads a:hover {
  text-decoration-thickness: 2px;
}
/* ==========================================================================
   Étape 7 : Détails du compte — Formulaire propre, 2 colonnes et responsive
   Cible : .woocommerce-EditAccountForm.edit-account
   ========================================================================== */

/* Couleur de texte par défaut (noir) dans le form */
body.woocommerce-account .woocommerce-EditAccountForm {
  color: #000;
}

/* Annule les flottants Woo par défaut et passe en grille moderne */
body.woocommerce-account .woocommerce-EditAccountForm .form-row {
  float: none !important;
  width: 100% !important;
  margin: 0;
  padding: 0;
}

/* Grille pour prénom/nom (les 2 premières colonnes) */
body.woocommerce-account .woocommerce-EditAccountForm .form-row-first,
body.woocommerce-account .woocommerce-EditAccountForm .form-row-last {
  display: block;
}

body.woocommerce-account .woocommerce-EditAccountForm {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 16px;
  row-gap: 14px;
}

/* Placement des champs sur desktop */
body.woocommerce-account .woocommerce-EditAccountForm .form-row-first { grid-column: span 6; }
body.woocommerce-account .woocommerce-EditAccountForm .form-row-last  { grid-column: span 6; }
body.woocommerce-account .woocommerce-EditAccountForm .form-row-wide  { grid-column: span 12; }

/* Fieldset (changement de mot de passe) : occupe toute la largeur */
body.woocommerce-account .woocommerce-EditAccountForm fieldset {
  grid-column: span 12;
  margin: 4px 0 0;
  padding: 16px;
  border: 1px solid #e1e1e1;
  border-radius: 10px;
  background: #fff;
}

/* Légende du fieldset */
body.woocommerce-account .woocommerce-EditAccountForm fieldset legend {
  font-weight: 700;
  color: #000;
  padding: 0 6px;
}

/* Labels */
body.woocommerce-account .woocommerce-EditAccountForm label {
  display: inline-block;
  margin-bottom: 6px;
  font-weight: 600;
  color: #000;
}

/* Astérisque requis */
body.woocommerce-account .woocommerce-EditAccountForm .required {
  color: #000; /* reste noir, pas rouge */
}

/* Inputs / selects / textarea */
body.woocommerce-account .woocommerce-EditAccountForm input[type="text"],
body.woocommerce-account .woocommerce-EditAccountForm input[type="email"],
body.woocommerce-account .woocommerce-EditAccountForm input[type="password"],
body.woocommerce-account .woocommerce-EditAccountForm input[type="tel"],
body.woocommerce-account .woocommerce-EditAccountForm select,
body.woocommerce-account .woocommerce-EditAccountForm textarea {
  width: 100%;
  border: 1px solid #e1e1e1;
  border-radius: 8px;
  padding: 10px 12px;
  background: #fff;
  color: #000;
  transition: border-color .18s ease, box-shadow .18s ease;
}

/* Focus */
body.woocommerce-account .woocommerce-EditAccountForm input:focus,
body.woocommerce-account .woocommerce-EditAccountForm select:focus,
body.woocommerce-account .woocommerce-EditAccountForm textarea:focus {
  outline: none;
  border-color: #cfcfcf;
  box-shadow: 0 0 0 3px rgba(0,0,0,.06);
}

/* Texte d’aide sous "Nom affiché" */
body.woocommerce-account .woocommerce-EditAccountForm #account_display_name_description {
  display: block;
  margin-top: 6px;
  color: #000;
}
body.woocommerce-account .woocommerce-EditAccountForm #account_display_name_description em {
  font-style: normal;                /* pas d’italique pour rester net */
  text-decoration: underline;        /* liens et textes d’aide restent soulignés si souhaité */
  text-underline-offset: 2px;
}

/* Groupes mot de passe (bouton afficher/masquer) */
body.woocommerce-account .woocommerce-EditAccountForm .password-input {
  position: relative;
  display: block;
}

body.woocommerce-account .woocommerce-EditAccountForm .password-input .show-password-input {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  opacity: .7;
  transition: opacity .18s ease, transform .18s ease;
}
body.woocommerce-account .woocommerce-EditAccountForm .password-input .show-password-input:hover {
  opacity: 1;
  transform: translateY(-50%) scale(1.02);
}

/* Bouton "Enregistrer les modifications" */
body.woocommerce-account .woocommerce-EditAccountForm .woocommerce-Button.button {
  appearance: none;
  border: 1px solid #000;
  background: #000;
  color: #fff;
  border-radius: 8px;
  padding: 10px 16px;
  font-weight: 600;
  letter-spacing: .2px;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
}

/* Hover bouton */
body.woocommerce-account .woocommerce-EditAccountForm .woocommerce-Button.button:hover {
  background: #111;
  border-color: #111;
  transform: translateY(-1px);
}

/* Alignement du groupe bouton + champs cachés */
body.woocommerce-account .woocommerce-EditAccountForm > p:last-of-type {
  grid-column: span 12;
  margin-top: 6px;
}

/* Nettoyage du .clear hérité Woo */
body.woocommerce-account .woocommerce-EditAccountForm .clear {
  display: none;
}

/* Responsive : passe prénom/nom en pile sur mobile */
@media (max-width: 768px) {
  body.woocommerce-account .woocommerce-EditAccountForm {
    grid-template-columns: 1fr;
    row-gap: 12px;
  }
  body.woocommerce-account .woocommerce-EditAccountForm .form-row-first,
  body.woocommerce-account .woocommerce-EditAccountForm .form-row-last,
  body.woocommerce-account .woocommerce-EditAccountForm .form-row-wide,
  body.woocommerce-account .woocommerce-EditAccountForm fieldset,
  body.woocommerce-account .woocommerce-EditAccountForm > p:last-of-type {
    grid-column: 1 / -1;
  }
}