/**
 * Theme Name:     Hello Elementor Child
 * Author:         Elementor Team
 * Template:       hello-elementor
 * Text Domain:	   hello-elementor-child
 * Description:    Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
 */


/* =================================================================== */
/*    STYLE PERSONNALISÉ POUR LA PAGE MON COMPTE (UTILISATEUR CONNECTÉ)   */
/* =================================================================== */

/* On s'assure que ce style ne s'applique QUE sur la page mon-compte et QUE si l'utilisateur est connecté */
body.logged-in.woocommerce-account {
    background-color: #ffffff; /* Une couleur de fond légèrement grise pour la page */
}

/* On cache le titre de page par défaut */
body.logged-in.woocommerce-account .entry-title {
    display: none;
}

/* Conteneur principal : on utilise Flexbox pour le layout */
body.logged-in.woocommerce-account .woocommerce {
    display: flex;
    flex-wrap: wrap;
    gap: 40px; /* Espace entre la navigation et le contenu */
    max-width: 1440px;
    margin: 40px auto;
    align-items: flex-start;
}


/* --- 1. Colonne de Navigation --- */
.woocommerce-MyAccount-navigation {
    flex: 0 0 280px; /* Largeur fixe de 280px */
    background-color: #ffffff;
    border-radius: 20px;
    padding: 25px;
    border: 1px solid #e2e2e2;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

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

.woocommerce-MyAccount-navigation-link a {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: #555;
    border-radius: 12px;
    transition: all 0.3s ease;
    margin-bottom: 8px;
}

/* Style des icônes avant chaque lien */
.woocommerce-MyAccount-navigation-link a::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 15px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: grayscale(1) opacity(0.6); /* Icônes grises par défaut */
    transition: all 0.3s ease;
}

/* Icônes spécifiques pour chaque lien (SVG encodés pour ne pas avoir à gérer de fichiers) */
.woocommerce-MyAccount-navigation-link--dashboard a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'%3E%3C/path%3E%3Cpolyline points='9 22 9 12 15 12 15 22'%3E%3C/polyline%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--orders a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z'%3E%3C/path%3E%3Cpolyline points='13 2 13 9 20 9'%3E%3C/polyline%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--downloads a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'%3E%3C/path%3E%3Cpolyline points='7 10 12 15 17 10'%3E%3C/polyline%3E%3Cline x1='12' y1='15' x2='12' y2='3'%3E%3C/line%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--edit-address a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 9v11a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V9'%3E%3C/path%3E%3Cpath d='M9 22V12h6v10'%3E%3C/path%3E%3Cpath d='M2 10.6L12 2l10 8.6'%3E%3C/path%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--edit-account a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--customer-logout a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'%3E%3C/path%3E%3Cpolyline points='16 17 21 12 16 7'%3E%3C/polyline%3E%3Cline x1='21' y1='12' x2='9' y2='12'%3E%3C/line%3E%3C/svg%3E"); }


/* Style du lien au survol */
.woocommerce-MyAccount-navigation-link:not(.is-active) a:hover {
    background-color: #f0f8f7; /* Vert très clair */
    color: #00a684;
}
.woocommerce-MyAccount-navigation-link:not(.is-active) a:hover::before {
    filter: grayscale(0) opacity(1);
}

/* Style du lien ACTIF */
.woocommerce-MyAccount-navigation-link.is-active a {
    background-color: #00a684;
    color: white;
    box-shadow: 0 4px 10px rgba(0, 166, 132, 0.3);
}
.woocommerce-MyAccount-navigation-link.is-active a::before {
    filter: none; /* Retire tous les filtres pour l'icône active */
    /* Pour les icônes SVG blanches, on peut utiliser un filtre invert */
    filter: brightness(0) invert(1);
}


/* --- 2. Colonne de Contenu --- */
.woocommerce-MyAccount-content {
    flex-grow: 1; /* Prend l'espace restant */
    background: #fff;
    padding: 40px;
    border-radius: 20px;
    border: 1px solid #e2e2e2;
}

/* Style des titres de section (ex: "Mes commandes") */
.woocommerce-MyAccount-content h3 {
    font-family: 'Libre Baskerville', serif;
    font-size: 28px;
    color: #222;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 15px;
    margin-bottom: 25px;
}

/* Style du message de bienvenue */
.woocommerce-MyAccount-content p:first-of-type {
    font-size: 16px;
    line-height: 1.7;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #d4edda;
    background-color: #f0f8f7;
    margin-bottom: 30px;
}
.woocommerce-MyAccount-content p:first-of-type a {
    color: #00a684;
    font-weight: bold;
    text-decoration: none;
}
.woocommerce-MyAccount-content p:first-of-type a:hover {
    text-decoration: underline;
}

/* Style des formulaires */
.woocommerce-MyAccount-content form {
    margin-top: 20px;
}
.woocommerce-MyAccount-content .form-row {
    margin-bottom: 20px !important;
}

/* Style des tableaux (commandes, adresses...) */
.woocommerce-orders-table, .woocommerce-table--order-details {
    width: 100%;
    border-collapse: collapse;
}
.woocommerce-orders-table th, .woocommerce-orders-table td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid #f0f0f0;
}
.woocommerce-orders-table th {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    color: #333;
}

/* Style des boutons */
.woocommerce-button, 
.woocommerce-MyAccount-content .button,
.woocommerce-form-login .button,
.woocommerce-form-register .button {
    background-color: #00a684 !important;
    color: white !important;
    padding: 12px 30px !important;
    border: none;
    border-radius: 20px!important  ;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
    text-transform: none !important;
    line-height: normal !important;
    height: auto !important;
}

.woocommerce-button:hover, 
.woocommerce-MyAccount-content .button:hover {
    background-color: #008c6e !important;
    transform: translateY(-2px);
}


/* --- 3. Responsive pour les mobiles --- */
@media (max-width: 991px) {
    body.logged-in.woocommerce-account .woocommerce {
        flex-direction: column; /* Passe en mode colonne */
        gap: 20px;
        margin: 20px auto;
    }
    .woocommerce-MyAccount-navigation {
        flex-basis: 100%; /* La navigation prend toute la largeur */
        order: 1; /* La navigation vient en premier */
    }
    .woocommerce-MyAccount-content {
        order: 2; /* Le contenu vient après */
    }
}