/*
Theme Name: cssexperiences
Template: kadence
Author: Moi
Version: 1.0
Description: Thème enfant pour personnaliser WooCommerce (cartouches, boutons, commandes)

======================================================================
TABLE DES MATIÈRES / MODE D’EMPLOI (commentaires)
======================================================================

0) RÈGLES GÉNÉRALES (IMPORTANT)
   - Ce fichier modifie principalement :
     A) La page "Mes commandes" (WooCommerce) → affichage en cartouches + boutons
     B) La page "Mon compte" → menu en tuiles + icônes + cartes + responsive
     C) Les formulaires Woo (Mon compte) → correction position icône "œil" sur champs mot de passe
   - Tout ce qui suit est du CSS : ça change l’apparence, pas les données.
   - Les blocs @media(...) servent au responsive :
       • @media (max-width: 768px)  => mobile
       • @media (min-width: 769px)  => desktop / tablette large

1) SECTION "COMMANDES" (Mes commandes WooCommerce)
   - Objectif : rendre les commandes lisibles sous forme de cartes ("cartouches")
   - Où changer ?
       • Espace entre commandes : .wc-my-orders-wrapper { gap: ... }
       • Style carte : .commande-wrapper { padding, border-radius, box-shadow, background }
       • Alignements header : .commande-header { justify-content, font-weight }
       • Taille image produit : .wc-order-product-img { width }
       • Espace entre produits : .commande-products { gap }
       • Bouton rose : .wc-my-orders-wrapper a.btn-produit (background, padding, radius, font-size)
       • Bouton "Détails" : .commande-actions a.button.view (border, color, padding)

2) SECTION "MON COMPTE" (WooCommerce My Account)
   - Objectifs :
       • Layout propre : menu au-dessus + contenu dessous
       • Menu avec icônes (Dashicons) + texte
       • Mobile : menu en tuiles (grille) avec icône au-dessus, texte dessous
       • Desktop : cartes ombrées, plus d’espace, hover, actif bien visible
       • Corriger le "trait bleu" (souvent un underline simulé par Kadence/Woo)
   - Pourquoi autant de "anti-trait bleu" ?
       • Certains thèmes ne font pas un simple underline (text-decoration),
         mais un underline simulé via ::after, border-bottom, background-image, etc.
       • Donc on neutralise ces techniques (sans toucher à l’icône ::before).

3) SECTION "FIX FORMULAIRES" (WooCommerce - Mon compte)
   - Objectif :
       • Corriger l’alignement de l’icône "œil" (show password) sur les champs mot de passe.
   - Pourquoi le bug arrive ?
       • Kadence (ou un CSS global) peut modifier la hauteur / padding / line-height des <input>.
       • WooCommerce positionne l’icône en overlay (position:absolute) : si la hauteur change,
         l’icône n’est plus centrée (différent mobile vs desktop).
   - Où changer ?
       • Position de l’icône : right / top / transform sur .show-password-input
       • Place à droite dans le champ : padding-right sur input
       • Hauteur mini mobile : min-height (si besoin) sur input dans @media (max-width: 768px)

4) PARAMÈTRES À MODIFIER RAPIDEMENT (cheat sheet)
   - Couleur rose utilisée : #F162BA et rgba(241, 98, 186, X)
       • Plus visible = augmenter X (ex: 0.25 -> 0.30)
       • Plus discret  = diminuer X (ex: 0.25 -> 0.12)
   - Taille icônes menu :
       • Desktop : .woocommerce-MyAccount-navigation a::before { font-size: 50px; }
       • Mobile  : .woocommerce-MyAccount-navigation li > a::before { font-size: 50px; }
   - Taille/hauteur des tuiles mobile :
       • min-height: 96px
       • padding: 16px 10px
   - Nombre de colonnes sur mobile :
       • grid-template-columns: repeat(2, 1fr);
         (ex: repeat(3, 1fr) si tu veux 3 colonnes)
   - Espace entre tuiles :
       • Mobile : gap: 14px
       • Desktop: gap: 16px
   - Ombres :
       • Mobile : box-shadow sur LI (carte)
       • Desktop: box-shadow sur A (carte)
   - Actif (tuile sélectionnée) :
       • Mobile : li.is-active (fond + ombre)
       • Desktop: li.is-active a (fond + ombre)
   - FIX icône "œil" (mot de passe) :
       • Position icône : right: 12px (ajuste au besoin)
       • Centrage vertical : top: 50% + transform: translateY(-50%)
       • Réserve dans l’input : padding-right: 46px (augmente si l’icône touche le texte)
       • Mobile : min-height: 44px (si l’icône reste trop haut/bas)
======================================================================
FIN TABLE DES MATIÈRES
======================================================================
*/



/* =========================================================
   1) COMMANDES WOO : MISE EN PAGE EN "CARTOUCHES"
   Objectif :
   - rendre la liste des commandes plus lisible
   - une commande = une "carte" (fond blanc + ombre + arrondis)
========================================================= */


/* Wrapper global : espace garanti entre commandes
   - display:flex + flex-direction:column => empile verticalement
   - gap => espace constant entre les commandes */
.wc-my-orders-wrapper{
  display:flex;
  flex-direction:column;
  gap:24px; /* ✅ espace entre chaque commande */
}

/* Cartouche (la carte d’une commande)
   - background blanc, padding, arrondis, ombre légère */
.commande-wrapper{
  background:#fff;
  padding:20px;
  border-radius:12px;
  box-shadow:0 3px 15px rgba(0,0,0,0.05);
}

/* Header de la cartouche (haut : infos commande)
   - flex pour mettre 2 zones (gauche/droite)
   - space-between pour les écarter
   - marge en bas pour respirer
   - font-weight pour renforcer la lisibilité */
.commande-header{
  display:flex;
  justify-content:space-between;
  margin-bottom:15px;
  font-weight:600;
}

/* Produits : conteneur de toutes les lignes produit
   - colonne + gap pour espacer les lignes */
.commande-products{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* Ligne produit : image + texte
   - flex + align-items:flex-start = aligné en haut */
.wc-order-product-line{
  display:flex;
  align-items:flex-start;
  gap:15px;
}

/* Image produit : largeur fixe (hauteur auto) */
.wc-order-product-img{
  width:60px;
  height:auto;
}

/* Texte produit : empilé (titre, infos, bouton, etc.) */
.wc-order-product-content{
  display:flex;
  flex-direction:column;
  gap:6px;
}

/* Bouton "Accéder au contenu" (par produit)
   - inline-flex pour centrer facilement
   - align-self:flex-start : évite que le bouton prenne toute la largeur */
.wc-my-orders-wrapper a.btn-produit{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  padding: 8px 8px;    /* ↑ plus haut / ↓ moins large */
  font-size: 14px;
  line-height: 1.25;   /* hauteur visuelle sans élargir */

  background: #F162BA;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;

  align-self: flex-start; /* empêche l’étirement en largeur */
}

/* Bouton "Détails de la commande"
   - style outline : bordure rose, fond transparent */
.commande-actions a.button.view{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.25;

  background: transparent;
  border: 1px solid #F162BA;
  color: #F162BA;

  border-radius: 6px;
  text-decoration: none;
}

/* Conteneur des actions
   - flex + center => centre le bouton horizontalement */
.commande-actions{
  display: flex;
  justify-content: center;   /* centrage horizontal */
}




/* =========================================================
   2) WOO "MON COMPTE" – MENU ICÔNES + CARTES (UPDATED)
   Objectif global :
   - Menu au-dessus du contenu (pas en sidebar)
   - Icônes (Dashicons) + texte
   - Mobile : menu en tuiles (grille), icône au-dessus, texte dessous
   - Desktop : cartes ombrées + hover + tuile active bien visible
   - Fix "trait bleu" : certains thèmes ajoutent un underline simulé
========================================================= */


/* =========================
   LAYOUT GENERAL
   But : forcer un layout "menu au-dessus + contenu dessous"
========================= */
.woocommerce-account .woocommerce{
  display: flex;                 /* active un layout flexible */
  flex-direction: column;        /* empile les blocs verticalement */
  gap: 18px;                     /* espace entre menu et contenu */
}


/* =========================
   LARGEUR + CENTRAGE (DESKTOP)
   But :
   - éviter le fullwidth sur PC
   - garder une largeur confortable et cohérente
   - ne PAS réduire 2x (un seul conteneur porte la largeur)
========================= */
@media (min-width: 769px){
  .woocommerce-account .woocommerce{
    width: 75%;
    max-width: 1200px;   /* ajuste (1100/1200/1300) selon ton design */
    margin-left: auto;
    margin-right: auto;

    padding-left: 16px;  /* petit confort visuel, optionnel */
    padding-right: 16px;
    box-sizing: border-box;
  }
}


/* Navigation + contenu : pleine largeur (évite 2 colonnes) */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content{
  width: 100%;
  max-width: 100%;
  float: none;                   /* neutralise les anciens layouts Woo en float */
}

/* =========================
   FIX TRAIT BLEU (tous écrans)
   Pourquoi ?
   - Kadence/Woo peuvent créer un trait bleu non pas via text-decoration,
     mais via pseudo-élément (::after) / border-bottom / background-image / etc.
   But :
   - supprimer ce trait sans casser l’icône (::before).
========================= */
.woocommerce-account .woocommerce-MyAccount-navigation a{
  text-decoration: none !important;  /* retire underline classique */
  border-bottom: 0 !important;       /* retire underline via border */
  background-image: none !important; /* retire underline via gradient/background */
}

/* Si le thème dessine un trait via ::after */
.woocommerce-account .woocommerce-MyAccount-navigation a::after{
  content: none !important;
  display: none !important;
}

/* Sécurité : si le trait est appliqué sur un élément interne du lien */
.woocommerce-account .woocommerce-MyAccount-navigation a *{
  text-decoration: none !important;
  border-bottom: 0 !important;
  background-image: none !important;
}

/* =========================
   MENU DESKTOP : icône + texte côte à côte
   - inline-flex => icône et texte sur la même ligne
   - gap => espace entre les deux
========================= */
.woocommerce-account .woocommerce-MyAccount-navigation a{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* Icône Dashicons via ::before
   - NE PAS supprimer ::before : c’est l’icône !
   - font-size contrôle la taille de l’icône */
.woocommerce-account .woocommerce-MyAccount-navigation a::before{
  font-family: Dashicons;
  font-size: 50px;
  line-height: 1;
  display: inline-block;
}

/* Mapping des icônes (un code Dashicons par item du menu)
   - Ce sont les classes Woo générées sur les items du menu */
.woocommerce-account .woocommerce-MyAccount-navigation-link--orders a::before{ content: "\f174"; }
.woocommerce-account .woocommerce-MyAccount-navigation-link--downloads a::before{ content: "\f316"; }
.woocommerce-account .woocommerce-MyAccount-navigation-link--edit-account a::before{ content: "\f110"; }
.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a::before{ content: "\f310"; }


/* =========================
   CARTES DESKTOP (ombrage) — Base
   - s’applique à partir de 769px (desktop)
========================= */
@media (min-width: 769px){

  /* Carte par défaut sur desktop */
  .woocommerce-account .woocommerce-MyAccount-navigation a{
    padding: 10px 14px;                 /* respiration interne */
    border-radius: 12px;                /* arrondis */
    background: #fff;                   /* fond blanc */
    box-shadow: 0 6px 18px rgba(0,0,0,0.06); /* ombre douce */
  }

  /* Carte active sur desktop */
  .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{
    background: rgba(241, 98, 186, 0.10);      /* fond rose léger */
    box-shadow: 0 8px 22px rgba(241, 98, 186, 0.18); /* ombre rosée */
    font-weight: 700;                          /* texte plus visible */
  }
}


/* =========================
   MOBILE : grille + cartes SUR <li> (anti-trait bleu robuste)
   Pourquoi mettre la carte sur <li> ?
   - sur mobile, certains thèmes arrivent encore à "dessiner" un trait sur <a>.
   - en portant fond + ombre sur <li> et en gardant <a> neutre,
     on évite que le lien puisse être souligné.
========================= */
@media (max-width: 768px){

  /* Grille 2 colonnes (tuiles) */
  .woocommerce-account .woocommerce-MyAccount-navigation ul{
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 tuiles par ligne */
    gap: 14px;                             /* espace entre tuiles */
    padding: 10px 0;
    margin: 0;
  }

  /* LA CARTE = LI (fond + ombre) */
  .woocommerce-account .woocommerce-MyAccount-navigation li{
    list-style: none;
    margin: 0;

    background: #fff;                          /* fond de la carte */
    border-radius: 14px;                       /* arrondi */
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);   /* ombre carte */

    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }

  /* CARTE ACTIVE = LI : on colore la tuile active */
  .woocommerce-account .woocommerce-MyAccount-navigation li.is-active{
    background: rgba(241, 98, 186, 0.14);
    box-shadow: 0 8px 22px rgba(241, 98, 186, 0.25);
  }

  /* Le lien remplit la carte, mais reste "neutre"
     - icône au-dessus + texte dessous
     - centrage horizontal + vertical
     - white-space normal : retour à la ligne possible */
  .woocommerce-account .woocommerce-MyAccount-navigation li > a{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100%;
    min-height: 96px;

    gap: 8px;
    padding: 16px 10px;

    text-align: center !important;
    white-space: normal !important;
    line-height: 1.2;
    font-size: 13px;

    /* anti-trait bleu définitif sur le lien */
    text-decoration: none !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
  }

  /* Kill pseudo underline si appliqué au lien */
  .woocommerce-account .woocommerce-MyAccount-navigation li > a::after{
    content: none !important;
    display: none !important;
  }

  /* Icône (mobile) */
  .woocommerce-account .woocommerce-MyAccount-navigation li > a::before{
    font-size: 50px;
    line-height: 1;
  }

  /* Feedback au tap : légère réduction de la carte */
  .woocommerce-account .woocommerce-MyAccount-navigation li:active{
    transform: scale(0.98);
  }

  /* Supprime le flash bleu au tap (certains navigateurs mobiles) */
  .woocommerce-account .woocommerce-MyAccount-navigation li > a{
    -webkit-tap-highlight-color: transparent;
  }
}


/* =========================================================
   3) DESKTOP – AMÉLIORATION COSMÉTIQUE (lecture + contraste)
   Objectif :
   - plus d’espace entre tuiles
   - cartes plus contrastées (ombres plus marquées)
   - effet premium au hover
========================================================= */
@media (min-width: 769px){

  /* Espacement entre items du menu (tuiles)
     - flex-wrap => passe à la ligne si besoin
     - gap => espacement simple et propre */
  .woocommerce-account .woocommerce-MyAccount-navigation ul{
    display: flex;
    flex-wrap: wrap;
    gap: 16px;                 /* espace entre tuiles */
    justify-content: center;   /* centrage des tuiles */
  }

  /* Cartes plus aérées : padding et ombres plus riches */
  .woocommerce-account .woocommerce-MyAccount-navigation a{
    padding: 14px 18px;        /* respiration interne */
    border-radius: 14px;

    background: #ffffff;

    /* Ombre en 2 couches :
       - 1) profondeur globale
       - 2) petite ombre proche pour rendre la carte plus "réelle" */
    box-shadow:
      0 8px 24px rgba(0,0,0,0.08),
      0 2px 6px rgba(0,0,0,0.04);

    transition: transform .15s ease, box-shadow .15s ease;
  }

  /* Tuile active (desktop) : plus rose pour le contraste */
  .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{
    background: rgba(241, 98, 186, 0.25);
    box-shadow:
      0 10px 28px rgba(241, 98, 186, 0.30),
      0 4px 10px rgba(0,0,0,0.06);
  }

  /* Hover : légère "élévation" visuelle */
  .woocommerce-account .woocommerce-MyAccount-navigation a:hover{
    transform: translateY(-2px);
    box-shadow:
      0 10px 30px rgba(0,0,0,0.12),
      0 4px 12px rgba(0,0,0,0.06);
  }
}



/* =========================================================
   4) FIX FORMULAIRES – WooCommerce (icône "œil" mot de passe)
   Objectif :
   - Recentrer et stabiliser le bouton "œil" (show password)
     dans les champs mot de passe (Mon compte / edit account /
     changement de mot de passe / formulaires Woo).
   Contexte :
   - Certains styles Kadence (ou CSS global) modifient padding/line-height/
     min-height des <input>. L’icône WooCommerce étant superposée
     (position:absolute), elle peut se retrouver décalée (mobile vs desktop).
   Principe du fix :
   A) On force le conteneur .password-input à être un repère (position:relative)
   B) On centre verticalement l’icône via top:50% + translateY(-50%)
   C) On réserve de la place à droite dans l’input (padding-right) pour que
      le texte ne passe pas sous l’icône.
   D) Option mobile : min-height pour garder une hauteur stable si nécessaire.
========================================================= */

.woocommerce form .password-input,
.woocommerce-account form .password-input{
  position: relative; /* ✅ repère de positionnement pour l’icône */
}

.woocommerce form .password-input .show-password-input,
.woocommerce-account form .password-input .show-password-input{
  position: absolute;              /* ✅ icône superposée dans le champ */
  right: 12px;                     /* ✅ placement horizontal (à ajuster si besoin) */
  top: 50%;                        /* ✅ ancre au milieu vertical */
  transform: translateY(-50%);     /* ✅ centrage vertical réel */
  margin: 0;
  line-height: 1;
  display: flex;                   /* ✅ centrage interne (utile si l’icône a une box) */
  align-items: center;
  justify-content: center;
  z-index: 2;                      /* ✅ passe devant l’input si besoin */
}

/* Laisse de la place à droite pour éviter que le texte passe sous l'icône */
.woocommerce form .password-input input[type="password"],
.woocommerce form .password-input input[type="text"],
.woocommerce-account form .password-input input[type="password"],
.woocommerce-account form .password-input input[type="text"]{
  padding-right: 46px;             /* ✅ réserve l’espace de l’icône */
  box-sizing: border-box;
}

/* Mobile : si Kadence réduit/augmente la hauteur des champs, on stabilise */
@media (max-width: 768px){
  .woocommerce-account form .password-input input{
    min-height: 44px; /* ajuste si tes champs sont plus grands */
  }
}


/* =========================================================
   DESKTOP : centrage + largeur cohérente des zones WooCommerce
   - Objectif : éviter le fullwidth, améliorer la lisibilité
   - Reco : width: 75% + max-width pour grands écrans
========================================================= */

@media (min-width: 769px){

  /* Conteneur principal WooCommerce (Mon compte / Commandes / etc.) */
  .woocommerce-account .woocommerce,
  .woocommerce-account .woocommerce-MyAccount-content,
  .woocommerce-account .woocommerce-MyAccount-navigation{
    width: 75%;
    max-width: 1200px;   /* ajuste (1100/1200/1300) selon ton design */
    margin-left: auto;
    margin-right: auto;
  }

  /* Variante utile si d'autres pages Woo (hors "account") sont concernées :
     ex: page commandes si elle n'est pas sous /my-account/ */
  .woocommerce .wc-my-orders-wrapper{
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }
}