/**
 * Styles pour la page Mon Compte - Design La Mémée
 * Couleurs: #142451 (bleu), #F0B9F0 (rose), #F2E2D0 (crème)
 */

/* Masquer le titre "Mon compte" sur la page */
.woocommerce-account:not(.logged-in) .entry-title,
.woocommerce-account:not(.logged-in) .page-title,
.woocommerce-account:not(.logged-in) h1.entry-title {
    display: none !important;
}
.woocommerce-EditAccountForm{
    width: 100%!important;
}

#fdlm-content-inner{
    padding:20px!important;
}
h1.entry-title {
    display: none;
}
/* ========================================
   WRAPPER PRINCIPAL
   ======================================== */
.wgb-myaccount-wrapper {
    display: flex;
    gap: 40px;
    max-width: 1000px;
    margin: 40px auto;
    padding: 20px;
    align-items: stretch;
}

@media (max-width: 768px) {
    .wgb-myaccount-wrapper {
        flex-direction: column;
        gap: 30px;
        padding: 15px;
        margin: 20px auto;
    }
}

/* ========================================
   SECTIONS
   ======================================== */
.wgb-myaccount-section {
    flex: 1;
    display: flex;
}

.wgb-myaccount-card {
    background: #fff;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 10px 40px rgba(20, 36, 81, 0.1);
    width: 100%;
    display: flex;
    flex-direction: column;
}

@media (max-width: 768px) {
    .wgb-myaccount-card {
        padding: 25px;
        border-radius: 15px;
    }
}

/* Card d'inscription avec fond crème */
.wgb-register-card {
    background: #F2E2D0;
    border: 2px solid #F0B9F0;
}

/* ========================================
   HEADER DE SECTION
   ======================================== */
.wgb-myaccount-header {
    text-align: center;
    margin-bottom: 30px;
}

.wgb-myaccount-icon {
    width: 80px;
    height: 80px;
    background: #F2E2D0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.wgb-myaccount-icon:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 20px rgba(240, 185, 240, 0.4);
}

.wgb-icon-pink {
    background: #F0B9F0;
}

.wgb-myaccount-header h2 {
    color: #142451;
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 10px 0;
    font-family: inherit;
}

.wgb-subtitle {
    color: #142451;
    font-size: 14px;
    margin: 0;
    opacity: 0.7;
}

/* ========================================
   SÉPARATEUR
   ======================================== */
.wgb-myaccount-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
}

.wgb-myaccount-separator span {
    background: #F0B9F0;
    color: #142451;
    font-weight: 600;
    padding: 15px 20px;
    border-radius: 50%;
    font-size: 14px;
    text-transform: uppercase;
}

@media (max-width: 768px) {
    .wgb-myaccount-separator {
        padding: 10px 0;
    }

    .wgb-myaccount-separator span {
        padding: 12px 16px;
    }
}

/* ========================================
   FORMULAIRE (scopé pour Mon Compte uniquement)
   ======================================== */
.wgb-myaccount-wrapper .wgb-form {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.wgb-myaccount-wrapper .wgb-form-group {
    margin-bottom: 20px;
}

.wgb-myaccount-wrapper .wgb-form-group label {
    display: block;
    color: #142451!important;
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 14px;
}

.wgb-myaccount-wrapper .wgb-form-group label .required {
    color: #c77dc7;
}

.wgb-myaccount-wrapper .wgb-input {
    width: 100%;
    padding: 14px 18px;
    border: 2px solid #142451;
    border-radius: 12px;
    font-size: 16px;
    transition: all 0.3s ease;
    background: #fff;
    box-sizing: border-box;
    color: #142451;
}

.wgb-myaccount-wrapper .wgb-input:focus {
    outline: none;
    border-color: #142451;
    box-shadow: 0 0 0 4px rgba(20, 36, 81, 0.1);
}

.wgb-myaccount-wrapper .wgb-input::placeholder {
    color: #142451;
    opacity: 0.5;
}
.wgb-myaccount-wrapper .wgb-form-group input[type="text"],
.wgb-myaccount-wrapper .wgb-form-group input[type="password"]{
    border: 1px solid #142451!important;
}
.wgb-myaccount-wrapper .wgb-input::placeholder {
    color: #142451!important;
}
/* ========================================
   CHECKBOX PERSONNALISÉ (scopé pour Mon Compte uniquement)
   ======================================== */
.wgb-myaccount-wrapper .wgb-remember-row {
    margin-bottom: 25px;
}

.wgb-myaccount-wrapper .wgb-checkbox-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
    color: #142451;
}

.wgb-myaccount-wrapper .wgb-checkbox-label input[type="checkbox"] {
    display: none;
}

.wgb-myaccount-wrapper .wgb-checkbox-custom {
    width: 20px;
    height: 20px;
    border: 2px solid #142451;
    border-radius: 5px;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
    padding-left:0px!important;
}

.wgb-myaccount-wrapper .wgb-checkbox-label input[type="checkbox"]:checked + .wgb-checkbox-custom {
    background: #F0B9F0;
    border-color: #F0B9F0;
}

.wgb-myaccount-wrapper .wgb-checkbox-label input[type="checkbox"]:checked + .wgb-checkbox-custom::after {
    /* 28/10 : coche faite main (plus de caractère « coche », qui fait émoticône). */
    content: "";
    width: 10px;
    height: 13px;
    background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2014.622%2019.812%22%3E%3Cpath%20d%3D%22M14.468.255%2C13.885%2C0H12.2l-.039.066L11.494%2C1.19c-.17.328-.324.527-.517.845-.085.138-.289.571-.357.649-.043.048-.132.027-.168.085-.157.251.039.668-.431.842a.79.79%2C0%2C0%2C0-.427.233c-.05.045-.318.268-.329.286-.125.214-.058.358-.109.574a2.436%2C2.436%2C0%2C0%2C1-.439.719c-.058.083-.428.555-.448.6-.043.092-.024.231-.1.307a2.643%2C2.643%2C0%2C0%2C0-.494.227c-.091.092-.075.193-.123.267-.025.039-.093.014-.111.049a3.225%2C3.225%2C0%2C0%2C0-.187.52%2C1.591%2C1.591%2C0%2C0%2C1-.374.75c-.048.042-.136.03-.178.071-.241.235-.224.975-.334%2C1.219-.053.117-.161.07-.188.121-.117.224-.068.524-.291.8-.036.045-.373.274-.385.3-.045.088-.118.669-.362.426-.009-.009-.114-.208-.118-.223-.128-.471-.035-1-.147-1.47C4.865%2C9.32%2C4.8%2C9.3%2C4.79%2C9.224a1.746%2C1.746%2C0%2C0%2C1%2C.087-.506.359.359%2C0%2C0%2C0%2C.005-.1c-.005-.048-.264-.258-.294-.366s.015-.237-.007-.325-.123-.1-.142-.178.03-.183.018-.2-.119-.015-.153-.043c-.383-.319-.462-.22-.86-.365-.125-.045-.1-.161-.136-.179-.157-.074-.414-.07-.585-.142-.073-.017-.327.229-.376.228-.373-.006-.908-.277-1.317-.293a2.366%2C2.366%2C0%2C0%2C0-.756.368.351.351%2C0%2C0%2C0-.09.108h0L0%2C7.611v.326l.23.314v.87l.241.169.157.688v.411l.27.541h0c.056.081.033.208.062.326a8.253%2C8.253%2C0%2C0%2C0%2C.485%2C1.626c.052.09.189.13.235.193a6.679%2C6.679%2C0%2C0%2C1%2C.673%2C1.647c.06.151.063.514.114.68.066.213.378.423.415.676.016.11-.037.237-.007.343a4.053%2C4.053%2C0%2C0%2C0%2C.438.573c.027.087-.039.188-.031.275a6.83%2C6.83%2C0%2C0%2C0%2C.4.889c.033.1-.015.233%2C0%2C.273s.182.1.24.19c.021.035.152.345.182.416.077.18.046.472.307.466.006-.279.174-.172.247-.216.047-.028.071-.174.123-.233.037-.042.105-.018.155-.1a2.87%2C2.87%2C0%2C0%2C0%2C.248-.731c.392-.012.258.393.667.356a2.562%2C2.562%2C0%2C0%2C0%2C.61-.514c.145-.259.264-.534.418-.817.023-.043.118-.005.175-.136.147-.334.2-.55.368-.856.142-.258.179-.788.288-.96.037-.058.126-.032.167-.086s.105-.315.144-.336l.134.02a1.583%2C1.583%2C0%2C0%2C1%2C.239-.526c.041-.06.208-.069.2-.311l.2-.035c.1-.206.174-.765.272-.917.02-.031.378-.319.425-.368.524-.541.7-1.148%2C1.155-1.705.039-.047.119-.033.163-.093a5.548%2C5.548%2C0%2C0%2C0%2C.2-.538c.024-.021.121.005.168-.019.133-.069.268-.194.41-.254l.336-1.213.153%2C0a1.327%2C1.327%2C0%2C0%2C1%2C.149-.412c.081-.106.2-.092.243-.155.077-.126.121-.46.206-.611.025-.044.1-.018.136-.069.067-.1.071-.256.137-.323.042-.042.154-.022.2-.092.065-.106.06-.292.153-.434.042-.063.113-.045.13-.077.138-.281-.014-.325-.016-.367-.009-.185.119-.138.142-.18.133-.234.306-.628.41-.841.078-.161.123-.512.218-.664.039-.063.136-.03.168-.083.111-.185.193-.6.291-.8.026-.05.13-.02.169-.081.09-.141.081-.493.217-.66l.079-.775V.838Z%22%20fill%3D%22%23142451%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

/* ========================================
   BOUTONS (scopé pour Mon Compte uniquement)
   ======================================== */
.wgb-myaccount-wrapper .wgb-btn {
    display: inline-block;
    padding: 16px 30px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    width: 100%;
    box-sizing: border-box;
}

.wgb-myaccount-wrapper .wgb-btn-primary {
    background: #142451!important;
    color: #fff!important;
}

.wgb-myaccount-wrapper .wgb-btn-primary:hover {
    background: #F0B9F0!important;
    color: #142451!important;
    transform: translateY(-2px)!important;
    box-shadow: 0 5px 20px rgba(240, 185, 240, 0.4)!important;
}

.wgb-myaccount-wrapper .wgb-btn-secondary {
    background: #142451!important;
    color: #fff!important;
}

.wgb-myaccount-wrapper .wgb-btn-secondary:hover {
    background: #F0B9F0!important;
    color: #142451!important;
    transform: translateY(-2px)!important;
    box-shadow: 0 5px 20px rgba(240, 185, 240, 0.4)!important;
}

/* ========================================
   LIEN MOT DE PASSE OUBLIÉ (scopé pour Mon Compte uniquement)
   ======================================== */
.wgb-myaccount-wrapper .wgb-lost-password {
    text-align: center;
    margin-top: 20px;
}

.wgb-myaccount-wrapper .wgb-lost-password a {
    color: #142451;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease;
}

.wgb-myaccount-wrapper .wgb-lost-password a:hover {
    color: #F0B9F0;
    text-decoration: underline;
}

/* ========================================
   BÉNÉFICES INSCRIPTION (scopé pour Mon Compte uniquement)
   ======================================== */
.wgb-myaccount-wrapper .wgb-register-benefits {
    margin: 20px 0 30px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 12px;
}

.wgb-myaccount-wrapper .wgb-benefit {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    color: #142451;
    font-size: 15px;
    font-weight: 500;
}

.wgb-myaccount-wrapper .wgb-benefit:not(:last-child) {
    border-bottom: 1px solid rgba(20, 36, 81, 0.1);
}

.wgb-myaccount-wrapper .wgb-benefit-icon {
    width: 24px;
    height: 24px;
    background: #142451;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    flex-shrink: 0;
}

/* ========================================
   MESSAGES WOOCOMMERCE
   ======================================== */
.woocommerce-message,
.woocommerce-info {
    background: #F2E2D0 !important;
    border-color: #F0B9F0 !important;
    color: #142451 !important;
    border-radius: 12px !important;
    padding: 15px 20px !important;
    margin-bottom: 20px !important;
}

.woocommerce-error {
    background: #fff5f5 !important;
    border-color: #e74c3c !important;
    border-radius: 12px !important;
    padding: 15px 20px !important;
    margin-bottom: 20px !important;
}

/* Masquer l'icône native des notices WooCommerce.
   Elle est positionnée en absolu et WooCommerce réserve normalement ~3,5em de
   padding à gauche pour l'accueillir. Ici le padding est ramené à 15px/20px :
   l'icône se superposait donc au texte (« Erreur : … » illisible).
   Plutôt que de réintroduire un grand padding, on retire l'icône : le fond
   coloré et la bordure suffisent à distinguer erreur / succès / info. */
.woocommerce-error::before,
.woocommerce-message::before,
.woocommerce-info::before {
    content: none !important;
    display: none !important;
}

/* ========================================
   CACHER LE FORMULAIRE WOOCOMMERCE PAR DÉFAUT
   ======================================== */
.woocommerce-account .u-columns.col2-set {
    display: none !important;
}

/* ========================================
   ANIMATIONS
   ======================================== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.wgb-myaccount-card {
    animation: fadeInUp 0.5s ease-out;
}

.wgb-register-card {
    animation-delay: 0.1s;
}

/* ========================================
   RESPONSIVE AJUSTEMENTS
   ======================================== */
@media (max-width: 480px) {
    .wgb-myaccount-header h2 {
        font-size: 20px;
    }

    .wgb-myaccount-icon {
        width: 60px;
        height: 60px;
    }

    .wgb-myaccount-icon svg {
        width: 30px;
        height: 30px;
    }

    .wgb-myaccount-wrapper .wgb-btn {
        padding: 14px 20px;
        font-size: 15px;
    }

    .wgb-myaccount-wrapper .wgb-input {
        padding: 12px 14px;
        font-size: 15px;
    }
}

/* ========================================
   PAGE MON COMPTE (APRÈS CONNEXION)
   ======================================== */
.woocommerce-MyAccount-navigation {
    background: #fff;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 5px 20px rgba(20, 36, 81, 0.08);
}

.woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.woocommerce-MyAccount-navigation li {
    margin-bottom: 5px;
}

.woocommerce-MyAccount-navigation li a {
    display: block;
    padding: 12px 18px;
    color: #142451;
    text-decoration: none;
    border-radius: 10px;
    transition: all 0.3s ease;
    font-weight: 500;
}

.woocommerce-MyAccount-navigation li a:hover,
.woocommerce-MyAccount-navigation li.is-active a {
    background: #F0B9F0;
    color: #142451;
}

.woocommerce-MyAccount-content {
    background: #fff;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 5px 20px rgba(20, 36, 81, 0.08);
}

/* ========================================
   TABLEAUX (COMMANDES, etc.)
   ======================================== */
.woocommerce-orders-table {
    width: 100%;
    border-collapse: collapse;
}

.woocommerce-orders-table th {
    background: #F2E2D0;
    color: #142451;
    padding: 15px;
    text-align: left;
    font-weight: 600;
}

.woocommerce-orders-table td {
    padding: 15px;
    border-bottom: 1px solid #eee;
}

.woocommerce-orders-table tr:hover td {
    background: #fafafa;
}

.woocommerce-orders-table .button {
    background: #142451 !important;
    color: #fff !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    font-size: 13px !important;
    transition: all 0.3s ease !important;
}

.woocommerce-orders-table .button:hover {
    background: #F0B9F0 !important;
    color: #142451 !important;
}

/* ========================================
   FORMULAIRES DANS MON COMPTE
   ======================================== */
.woocommerce-EditAccountForm .woocommerce-form-row label,
.woocommerce-address-fields .woocommerce-form-row label {
    color: #142451;
    font-weight: 600;
    margin-bottom: 8px;
    display: block;
}

.woocommerce-EditAccountForm .woocommerce-Input,
.woocommerce-address-fields .woocommerce-Input,
.woocommerce-EditAccountForm input[type="text"],
.woocommerce-EditAccountForm input[type="email"],
.woocommerce-EditAccountForm input[type="password"],
.woocommerce-address-fields input[type="text"],
.woocommerce-address-fields select {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    font-size: 15px;
    transition: all 0.3s ease;
}

.woocommerce-EditAccountForm .woocommerce-Input:focus,
.woocommerce-address-fields .woocommerce-Input:focus,
.woocommerce-EditAccountForm input:focus,
.woocommerce-address-fields input:focus,
.woocommerce-address-fields select:focus {
    outline: none;
    border-color: #F0B9F0;
    box-shadow: 0 0 0 4px rgba(240, 185, 240, 0.2);
}

.woocommerce-EditAccountForm button[type="submit"],
.woocommerce-address-fields button[type="submit"] {
    background: #142451;
    color: #fff;
    padding: 14px 30px;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.woocommerce-EditAccountForm button[type="submit"]:hover,
.woocommerce-address-fields button[type="submit"]:hover {
    background: #F0B9F0;
    color: #142451;
    transform: translateY(-2px);
}

/* ========================================
   BOUTON AFFICHER / MASQUER LE MOT DE PASSE
   ========================================
   Ces règles vivaient dans un <style> inline de form-login.php. Elles sont ici
   depuis que le parcours « mot de passe oublié » a ses propres écrans habillés
   (form-lost-password.php, form-reset-password.php) : ils partagent le même
   bouton et doivent partager le même style. my-account.css est chargé sur tous
   les endpoints du compte, y compris lost-password et reset-password. */
.wgb-password-wrap {
    position: relative;
    display: block;
}
.wgb-password-wrap .wgb-input {
    /* Réserve la place du bouton pour que le texte ne passe pas dessous. */
    padding-right: 84px;
    width: 100%;
}
/* 28/10 : plus d'œil de bibliothèque, un libellé « Afficher » / « Masquer ». */
.wgb-password-toggle {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 30px;
    padding: 0 4px;
    border: none;
    background: transparent;
    color: #142451;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}
.wgb-password-toggle:hover,
.wgb-password-toggle:focus-visible {
    background: transparent;
    color: #142451;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ========================================
   PARCOURS MOT DE PASSE OUBLIÉ
   ========================================
   .wgb-myaccount-wrapper est un conteneur à deux colonnes (connexion +
   inscription). Ces écrans n'ont qu'une seule carte : sans cette variante, elle
   s'étirait sur toute la largeur. */
.wgb-myaccount-wrapper--narrow {
    max-width: 520px;
}
.wgb-myaccount-wrapper--narrow .wgb-myaccount-section {
    width: 100%;
}

/* Retours 27/10 : « Je me connecte » — l'adresse email avait l'arrondi de 4 px
   des formulaires de l'extension (.wgb-form-group input), le mot de passe celui
   de 12 px de ce fichier. Même arrondi et même bordure pour tous les champs
   des formulaires du compte (connexion, mot de passe oublié / nouveau). */
.wgb-myaccount-wrapper .wgb-form-group input.wgb-input,
.wgb-myaccount-wrapper .wgb-form-group .wgb-password-wrap input.wgb-input {
    border: 1px solid #142451 !important;
    border-radius: 8px !important;
}