/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra

/* ===== HERO PLEINE LARGEUR ===== */
.hero-cgv-full {
    min-height: 350px;
    background: linear-gradient(135deg, #4A6FA5 0%, #6B8EC0 50%, #4A6FA5 100%);
    background-size: 400% 400%;
    animation: gradientMove 15s ease infinite;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-bottom: 3rem;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(74, 111, 165, 0.3);
}

/* Animation du dégradé */
@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Overlay avec motif de nuages légers */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(circle at 30% 40%, rgba(255,255,255,0.15) 0%, transparent 30%),
                      radial-gradient(circle at 70% 60%, rgba(255,255,255,0.15) 0%, transparent 30%);
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 2;
    padding: 2rem;
    max-width: 1200px; /* Limite la largeur du texte mais le fond reste plein */
    width: 100%;
    margin: 0 auto;
    animation: fadeInUp 1s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Icône avion principale */
.hero-plane {
    font-size: 4rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 1rem;
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.2));
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 800;
    color: white;
    text-shadow: 2px 2px 15px rgba(0,0,0,0.2);
    margin: 0.5rem 0;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.hero-divider {
    width: 100px;
    height: 4px;
    background: linear-gradient(90deg, transparent, #FFD166, transparent);
    margin: 1.5rem auto;
    border-radius: 2px;
}

.hero-subtitle {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 300;
    letter-spacing: 1px;
    text-shadow: 1px 1px 5px rgba(0,0,0,0.1);
}

/* Avions décoratifs qui volent */
.hero-decoration {
    position: relative;
    height: 50px;
    margin-top: 2rem;
}

.decoration-plane {
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.3);
    position: absolute;
    animation: fly 12s linear infinite;
}

.decoration-plane.left {
    left: -50px;
    animation: flyLeft 15s linear infinite;
}

.decoration-plane.right {
    right: -50px;
    animation: flyRight 15s linear infinite;
    animation-delay: 7.5s;
}

@keyframes flyLeft {
    0% { transform: translateX(0) scale(1); opacity: 0; }
    10% { opacity: 0.8; }
    90% { opacity: 0.8; }
    100% { transform: translateX(calc(100vw + 100px)) scale(0.8); opacity: 0; }
}

@keyframes flyRight {
    0% { transform: translateX(0) scale(1) rotateY(180deg); opacity: 0; }
    10% { opacity: 0.8; }
    90% { opacity: 0.8; }
    100% { transform: translateX(calc(-100vw - 100px)) scale(0.8); opacity: 0; }
}

/* ===== STYLES POUR LE CONTENU ===== */
.contenu-cgv {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
    background: white;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border-radius: 20px;
    position: relative;
    z-index: 10;
}

/* Le reste des styles pour le contenu (gardez ceux que je vous ai donnés avant) */
.contenu-cgv h2 {
    font-size: 2rem;
    color: #4A6FA5;
    margin-top: 2.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 3px solid #FFD166;
    position: relative;
}

.contenu-cgv h2::before {
    content: "✈";
    font-size: 1.5rem;
    color: #6B8EC0;
    margin-right: 10px;
    opacity: 0.7;
}

.contenu-cgv h3 {
    font-size: 1.5rem;
    color: #6B8EC0;
    margin-top: 2rem;
    margin-bottom: 1rem;
    padding-left: 1rem;
    border-left: 4px solid #FFD166;
}

/* Responsive */
@media (max-width: 768px) {
    .hero-cgv-full {
        min-height: 250px;
    }
    
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-plane {
        font-size: 3rem;
    }
    
    .hero-content {
        padding: 1.5rem;
    }
    
    .contenu-cgv {
        padding: 1.5rem;
        border-radius: 15px;
    }
    
    .contenu-cgv h2 {
        font-size: 1.5rem;
    }
    
    .contenu-cgv h3 {
        font-size: 1.2rem;
    }
}

/* Pour les très grands écrans */
@media (min-width: 1920px) {
    .hero-cgv-full {
        min-height: 450px;
    }
}

/* ===== STYLES POUR LA PAGE LIVRAISON ===== */

/* Style pour le tableau des tarifs */
.table-livraison {
    width: 100%;
    border-collapse: collapse;
    margin: 2rem 0;
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.table-livraison thead {
    background: linear-gradient(135deg, #4A6FA5 0%, #6B8EC0 100%);
    color: white;
}

.table-livraison th {
    padding: 1rem;
    font-weight: 600;
    text-align: left;
}

.table-livraison td {
    padding: 1rem;
    border-bottom: 1px solid #e9ecef;
}

.table-livraison tr:last-child td {
    border-bottom: none;
}

.table-livraison tbody tr:hover {
    background-color: #f8fafc;
}

/* Bloc offre spéciale */
.offer-block {
    background: linear-gradient(135deg, #f8fafc 0%, #e9f0f9 100%);
    border-left: 5px solid #FFD166;
    padding: 1.5rem 2rem;
    border-radius: 15px;
    margin: 2rem 0;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    box-shadow: 0 5px 15px rgba(74, 111, 165, 0.1);
}

.offer-icon {
    font-size: 3rem;
    color: #FFD166;
    filter: drop-shadow(0 5px 10px rgba(255, 209, 102, 0.3));
}

.offer-block p {
    margin: 0.25rem 0;
}

/* Notes et petits textes */
.note {
    color: #6c757d;
    font-size: 0.95rem;
    font-style: italic;
    border-top: 1px dashed #dee2e6;
    padding-top: 1rem;
}

/* Responsive pour le tableau */
@media (max-width: 768px) {
    .table-livraison {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
    
    .offer-block {
        flex-direction: column;
        text-align: center;
        padding: 1.5rem;
    }
    
    .offer-icon {
        margin-bottom: 0.5rem;
    }
}


/* ===== STYLES POUR LA PAGE À PROPOS ===== */

/* Layout intro avec photo */
.propos-intro {
    display: flex;
    gap: 3rem;
    align-items: flex-start;
    margin: 2rem 0 3rem;
}

.propos-photo {
    flex: 0 0 250px;
    text-align: center;
}

.photo-gerard {
    width: 100%;
    height: auto;
    border-radius: 50%;
    border: 5px solid #4A6FA5;
    box-shadow: 0 10px 25px rgba(74, 111, 165, 0.3);
    transition: transform 0.3s ease;
}

.photo-gerard:hover {
    transform: scale(1.02);
}

.photo-caption {
    margin-top: 1rem;
    font-weight: 600;
    color: #4A6FA5;
}

.photo-caption i {
    margin-right: 0.5rem;
    font-size: 0.9rem;
}

.propos-texte {
    flex: 1;
}

.propos-texte h2 {
    margin-top: 0 !important;
    border-bottom: none !important;
}

.propos-texte .lead {
    font-size: 1.3rem;
    color: #4A6FA5;
    font-weight: 500;
    margin-bottom: 1.5rem;
}

/* Citation */
.propos-citation {
    background: linear-gradient(135deg, #f8fafc 0%, #e9f0f9 100%);
    padding: 2.5rem 3rem;
    border-radius: 30px;
    margin: 3rem 0;
    position: relative;
    text-align: center;
    border: 1px solid rgba(74, 111, 165, 0.1);
}

.propos-citation i {
    font-size: 2rem;
    color: #FFD166;
    opacity: 0.5;
    display: block;
}

.propos-citation p {
    font-size: 1.3rem;
    font-style: italic;
    color: #2c3e50;
    margin: 1rem 0;
    line-height: 1.8;
}

/* Chiffres clés */
.propos-highlight {
    display: flex;
    justify-content: space-around;
    margin: 3rem 0;
    padding: 2rem;
    background: white;
    border-radius: 20px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.03);
}

.highlight-item {
    text-align: center;
}

.highlight-number {
    display: block;
    font-size: 3rem;
    font-weight: 800;
    color: #4A6FA5;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.highlight-text {
    font-size: 1rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Cartes avions préférés */
.propos-avions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    margin: 2rem 0 3rem;
}

.avion-card {
    text-align: center;
    padding: 2rem 1rem;
    background: white;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.avion-card:hover {
    transform: translateY(-5px);
    border-color: #FFD166;
    box-shadow: 0 10px 25px rgba(74, 111, 165, 0.1);
}

.avion-card i {
    font-size: 3rem;
    color: #4A6FA5;
    margin-bottom: 1rem;
}

.avion-card h4 {
    margin: 0.5rem 0;
    color: #2c3e50;
}

.avion-card p {
    font-size: 0.95rem;
    color: #6c757d;
    margin: 0;
}

/* Bouton CTA */
.propos-cta {
    text-align: center;
    background: linear-gradient(135deg, #4A6FA5 0%, #6B8EC0 100%);
    padding: 3rem;
    border-radius: 30px;
    margin: 3rem 0 2rem;
    color: white;
}

.propos-cta h3 {
    color: white;
    font-size: 2rem;
    margin-top: 0 !important;
    border: none !important;
}

.propos-cta p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.1rem;
    margin-bottom: 2rem;
}

.btn-propos {
    display: inline-block;
    background: white;
    color: #4A6FA5;
    padding: 1rem 2.5rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.btn-propos:hover {
    background: #FFD166;
    color: #2c3e50;
    transform: scale(1.05);
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}

.btn-propos i {
    margin-left: 0.5rem;
    transition: transform 0.3s ease;
}

.btn-propos:hover i {
    transform: translateX(5px);
}

/* Responsive */
@media (max-width: 768px) {
    .propos-intro {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1.5rem;
    }
    
    .propos-photo {
        flex: 0 0 auto;
        max-width: 200px;
    }
    
    .propos-highlight {
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .propos-citation {
        padding: 1.5rem;
    }
    
    .propos-citation p {
        font-size: 1.1rem;
    }
    
    .propos-cta {
        padding: 2rem 1rem;
    }
    
    .propos-cta h3 {
        font-size: 1.5rem;
    }
}

/* ===== STYLES POUR LA PAGE FAQ ===== */

/* Introduction */
.faq-intro {
    font-size: 1.2rem;
    background: #f8fafc;
    padding: 1.5rem 2rem;
    border-radius: 15px;
    margin-bottom: 2rem;
    border-left: 5px solid #4A6FA5;
}

/* Menu rapide des catégories */
.faq-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 2rem 0 3rem;
    justify-content: center;
}

.faq-cat-link {
    background: white;
    color: #4A6FA5;
    text-decoration: none;
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    font-weight: 500;
    border: 2px solid #4A6FA5;
    transition: all 0.3s ease;
    box-shadow: 0 3px 10px rgba(0,0,0,0.03);
}

.faq-cat-link:hover {
    background: #4A6FA5;
    color: white;
    border-color: #4A6FA5;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(74, 111, 165, 0.3);
}

/* Titres de sections */
.faq-section-title {
    margin-top: 3rem !important;
    margin-bottom: 2rem !important;
    position: relative;
    scroll-margin-top: 2rem; /* Pour que l'ancre ne soit pas cachée par le header */
}

.faq-section-title::before {
    content: "✈";
    margin-right: 10px;
    color: #FFD166;
}

/* Éléments FAQ individuels */
.faq-item {
    margin-bottom: 1rem;
    border: 1px solid #e9ecef;
    border-radius: 15px;
    overflow: hidden;
    transition: all 0.3s ease;
    background: white;
}

.faq-item:hover {
    box-shadow: 0 5px 20px rgba(74, 111, 165, 0.1);
    border-color: #4A6FA5;
}

.faq-question {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: #f8fafc;
    cursor: pointer;
    transition: background 0.3s ease;
}

.faq-question:hover {
    background: #e9f0f9;
}

.faq-question i {
    color: #4A6FA5;
    font-size: 1rem;
    transition: transform 0.3s ease;
}

.faq-item.active .faq-question i {
    transform: rotate(90deg);
}

.faq-question h3 {
    margin: 0;
    font-size: 1.2rem;
    color: #2c3e50;
    font-weight: 600;
}

.faq-reponse {
    padding: 0 1.5rem 1.5rem 3.5rem;
    display: none;
    line-height: 1.8;
    color: #4a5568;
}

.faq-item.active .faq-reponse {
    display: block;
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Style des listes dans les réponses */
.faq-reponse ul {
    background: none;
    padding: 0.5rem 0 0.5rem 1.5rem;
    margin: 0.5rem 0;
    box-shadow: none;
}

.faq-reponse li {
    margin-bottom: 0.25rem;
}

/* Bloc de contact */
.faq-contact {
    text-align: center;
    background: linear-gradient(135deg, #f8fafc 0%, #e9f0f9 100%);
    padding: 2.5rem;
    border-radius: 20px;
    margin: 3rem 0;
    border: 1px solid rgba(74, 111, 165, 0.1);
}

.faq-contact i {
    font-size: 3rem;
    color: #4A6FA5;
    margin-bottom: 1rem;
}

.faq-contact p {
    margin: 0.5rem 0;
    font-size: 1.1rem;
}

.faq-contact a {
    color: #4A6FA5;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid #FFD166;
}

.faq-contact a:hover {
    color: #2c3e50;
}

/* Responsive */
@media (max-width: 768px) {
    .faq-categories {
        flex-direction: column;
        align-items: stretch;
    }
    
    .faq-cat-link {
        text-align: center;
    }
    
    .faq-question {
        padding: 1rem;
    }
    
    .faq-question h3 {
        font-size: 1rem;
    }
    
    .faq-reponse {
        padding: 0 1rem 1rem 2.5rem;
    }
    
    .faq-contact {
        padding: 1.5rem;
    }
}

/* ===== STYLES POUR LA PAGE LISTE DE SOUHAITS ===== */

/* Introduction */
.wishlist-intro {
    text-align: center;
    padding: 2rem;
    background: linear-gradient(135deg, #f8fafc 0%, #e9f0f9 100%);
    border-radius: 30px;
    margin-bottom: 3rem;
}

.wishlist-icon-big {
    font-size: 4rem;
    color: #FFD166;
    margin-bottom: 1rem;
    filter: drop-shadow(0 5px 10px rgba(255, 209, 102, 0.3));
    animation: heartbeat 1.5s ease-in-out infinite;
}

@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    25% { transform: scale(1.1); }
    50% { transform: scale(1); }
    75% { transform: scale(1.05); }
}

/* Features grid */
.wishlist-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
    margin: 2rem 0 3rem;
}

.feature-card {
    text-align: center;
    padding: 2rem 1.5rem;
    background: white;
    border-radius: 20px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.03);
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.feature-card:hover {
    transform: translateY(-5px);
    border-color: #FFD166;
    box-shadow: 0 10px 30px rgba(74, 111, 165, 0.1);
}

.feature-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #4A6FA5 0%, #6B8EC0 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    color: white;
    font-size: 2rem;
    box-shadow: 0 5px 15px rgba(74, 111, 165, 0.3);
}

.feature-card h3 {
    margin: 0 0 1rem;
    color: #2c3e50;
    font-size: 1.2rem;
}

.feature-card p {
    color: #6c757d;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* Étapes comment ça marche */
.howto-steps {
    margin: 3rem 0;
}

.step {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: white;
    border-radius: 15px;
    transition: transform 0.3s ease;
}

.step:hover {
    transform: translateX(10px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.step-number {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #FFD166 0%, #FFC233 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.5rem;
    color: #2c3e50;
    flex-shrink: 0;
    box-shadow: 0 5px 10px rgba(255, 209, 102, 0.3);
}

.step-content {
    flex: 1;
}

.step-content h4 {
    margin: 0 0 0.5rem;
    color: #4A6FA5;
}

.step-content p {
    margin: 0;
    color: #6c757d;
}

/* Liste de souhaits vide */
.wishlist-empty {
    text-align: center;
    padding: 4rem 2rem;
    background: #f8fafc;
    border-radius: 30px;
    margin: 2rem 0;
}

.wishlist-empty i {
    font-size: 5rem;
    color: #dee2e6;
    margin-bottom: 1.5rem;
}

.wishlist-empty p {
    font-size: 1.1rem;
    color: #6c757d;
    margin: 0.5rem 0;
}

.btn-wishlist {
    display: inline-block;
    background: linear-gradient(135deg, #4A6FA5 0%, #6B8EC0 100%);
    color: white;
    padding: 1rem 2.5rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    margin-top: 2rem;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(74, 111, 165, 0.3);
}

.btn-wishlist:hover {
    background: #FFD166;
    color: #2c3e50;
    transform: scale(1.05);
}

.btn-wishlist i {
    margin-left: 0.5rem;
    transition: transform 0.3s ease;
}

.btn-wishlist:hover i {
    transform: translateX(5px);
}

/* Éléments de la wishlist (exemple) */
.wishlist-item {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    padding: 1.5rem;
    background: white;
    border-radius: 15px;
    margin-bottom: 1rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
    border: 1px solid #e9ecef;
}

.wishlist-item-image {
    width: 80px;
    height: 80px;
    background: #e9ecef;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
}

.wishlist-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wishlist-item-details {
    flex: 1;
}

.wishlist-item-details h4 {
    margin: 0 0 0.25rem;
    color: #2c3e50;
}

.wishlist-item-cat {
    font-size: 0.9rem;
    color: #6c757d;
    margin: 0 0 0.25rem;
}

.wishlist-item-price {
    font-weight: 600;
    color: #4A6FA5;
    margin: 0;
}

.wishlist-item-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.wishlist-add-to-cart {
    background: linear-gradient(135deg, #4A6FA5 0%, #6B8EC0 100%);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.wishlist-add-to-cart:hover {
    background: #FFD166;
    color: #2c3e50;
}

.wishlist-remove {
    background: none;
    border: none;
    color: #dc3545;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.5rem;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.wishlist-remove:hover {
    opacity: 1;
}

/* FAQ */
.wishlist-faq {
    margin: 3rem 0;
}

.faq-item {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: white;
    border-radius: 15px;
    border-left: 4px solid #FFD166;
}

.faq-item h4 {
    margin: 0 0 1rem;
    color: #4A6FA5;
}

.faq-item p {
    margin: 0;
    color: #6c757d;
    line-height: 1.8;
}

/* CTA final */
.wishlist-cta {
    text-align: center;
    background: linear-gradient(135deg, #4A6FA5 0%, #6B8EC0 100%);
    padding: 3rem;
    border-radius: 30px;
    margin: 3rem 0 2rem;
    color: white;
}

.wishlist-cta i {
    font-size: 4rem;
    color: #FFD166;
    margin-bottom: 1rem;
    filter: drop-shadow(0 5px 10px rgba(0,0,0,0.2));
}

.wishlist-cta h3 {
    color: white;
    font-size: 2rem;
    margin: 1rem 0;
    border: none !important;
}

.btn-wishlist-cta {
    display: inline-block;
    background: white;
    color: #4A6FA5;
    padding: 1rem 3rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.2rem;
    margin: 1.5rem 0;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.btn-wishlist-cta:hover {
    background: #FFD166;
    color: #2c3e50;
    transform: scale(1.05);
}

.wishlist-cta .small {
    font-size: 0.9rem;
    opacity: 0.8;
}

.wishlist-cta .small a {
    color: white;
    font-weight: 600;
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 768px) {
    .wishlist-features {
        grid-template-columns: 1fr;
    }
    
    .step {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .wishlist-item {
        flex-direction: column;
        text-align: center;
    }
    
    .wishlist-item-actions {
        flex-direction: column;
        width: 100%;
    }
    
    .wishlist-add-to-cart {
        width: 100%;
    }
    
    .wishlist-cta {
        padding: 2rem 1rem;
    }
    
    .wishlist-cta h3 {
        font-size: 1.5rem;
    }
}

/* ===== STYLES POUR LA PAGE CONTACT (VERSION SIMPLIFIÉE) ===== */

/* Style général de la page contact */
.contact-content {
    max-width: 800px;
    margin: 0 auto;
}

/* Mini FAQ - style existant amélioré */
.contact-faq-mini {
    background: linear-gradient(135deg, #f8fafc 0%, #e9f0f9 100%);
    padding: 2.5rem;
    border-radius: 30px;
    margin: 2rem 0 3rem;
    border-left: 5px solid #FFD166;
    box-shadow: 0 10px 30px rgba(74, 111, 165, 0.05);
}

.contact-faq-mini h2 {
    margin-top: 0 !important;
    border-bottom: none !important;
    color: #4A6FA5;
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.contact-faq-mini h2 i {
    font-size: 2rem;
    color: #FFD166;
}

.contact-faq-mini p {
    font-size: 1.1rem;
    color: #2c3e50;
    margin-bottom: 1.5rem;
}

.contact-faq-mini p a {
    color: #4A6FA5;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px dotted #FFD166;
    transition: all 0.3s ease;
}

.contact-faq-mini p a:hover {
    color: #2c3e50;
    border-bottom-color: #4A6FA5;
}

.contact-faq-mini ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.contact-faq-mini li {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    background: white;
    border-radius: 50px;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.contact-faq-mini li:hover {
    transform: translateX(10px);
    border-color: #FFD166;
    box-shadow: 0 5px 15px rgba(74, 111, 165, 0.1);
}

.contact-faq-mini li i {
    color: #4A6FA5;
    font-size: 1.2rem;
    background: #e9f0f9;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-faq-mini li a {
    color: #2c3e50;
    text-decoration: none;
    font-weight: 500;
    flex: 1;
}

.contact-faq-mini li a:hover {
    color: #4A6FA5;
}

/* Coordonnées directes */
.contact-content > div:has(p) {
    text-align: center;
    margin: 2rem 0;
    padding: 1.5rem;
    background: white;
    border-radius: 20px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.03);
}

.contact-content p:has(strong) {
    font-size: 1.2rem;
    margin: 1rem 0;
}

.contact-content p a {
    color: #4A6FA5;
    text-decoration: none;
    font-weight: 600;
    padding: 0.3rem 0.8rem;
    background: #f8fafc;
    border-radius: 50px;
    transition: all 0.3s ease;
    display: inline-block;
    margin-left: 0.5rem;
}

.contact-content p a:hover {
    background: #4A6FA5;
    color: white;
    transform: scale(1.05);
}

/* Signature */
.contact-signature {
    text-align: center;
    margin: 4rem 0 2rem;
    padding: 3rem 2rem;
    background: linear-gradient(135deg, white 0%, #f8fafc 100%);
    border-radius: 50px;
    box-shadow: 0 10px 30px rgba(74, 111, 165, 0.05);
    position: relative;
    overflow: hidden;
}

.contact-signature::before {
    content: "✈";
    position: absolute;
    top: -20px;
    right: -20px;
    font-size: 8rem;
    color: #4A6FA5;
    opacity: 0.05;
    transform: rotate(15deg);
}

.contact-signature i {
    font-size: 4rem;
    color: #4A6FA5;
    opacity: 0.2;
    margin-bottom: 1rem;
    animation: float 4s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(5deg); }
}

.contact-signature p {
    font-size: 1.5rem;
    color: #2c3e50;
    margin: 0;
    line-height: 1.6;
}

.contact-signature strong {
    color: #4A6FA5;
    font-size: 2rem;
    font-weight: 700;
    display: inline-block;
    margin-top: 0.5rem;
    position: relative;
}

.contact-signature strong::after {
    content: "";
    display: block;
    width: 50px;
    height: 3px;
    background: #FFD166;
    margin: 0.5rem auto 0;
    border-radius: 3px;
}

/* Note de bas de page */
.contact-content .note {
    text-align: center;
    color: #adb5bd;
    font-size: 0.9rem;
    margin-top: 2rem;
}

/* Responsive */
@media (max-width: 768px) {
    .contact-faq-mini {
        padding: 1.5rem;
    }
    
    .contact-faq-mini h2 {
        font-size: 1.5rem;
    }
    
    .contact-faq-mini li {
        flex-wrap: wrap;
        padding: 0.75rem;
    }
    
    .contact-signature {
        padding: 2rem 1rem;
    }
    
    .contact-signature p {
        font-size: 1.2rem;
    }
    
    .contact-signature strong {
        font-size: 1.5rem;
    }
}

/* ===== STYLES POUR LA PAGE PAIEMENTS SÉCURISÉS ===== */

/* Introduction */
.securite-intro {
    text-align: center;
    padding: 2rem;
    background: linear-gradient(135deg, #f8fafc 0%, #e9f0f9 100%);
    border-radius: 30px;
    margin: 2rem 0 3rem;
    position: relative;
    overflow: hidden;
}

.securite-shield {
    font-size: 4rem;
    color: #4A6FA5;
    opacity: 0.2;
    position: absolute;
    top: -20px;
    right: -20px;
    transform: rotate(15deg);
}

.securite-intro h2 {
    margin-top: 0 !important;
    border: none !important;
    color: #4A6FA5;
    font-size: 2rem;
}

.securite-intro p {
    font-size: 1.1rem;
    max-width: 700px;
    margin: 0 auto;
    color: #2c3e50;
}

/* Garanties cards */
.securite-garanties {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin: 3rem 0;
}

.garantie-card {
    background: white;
    padding: 2rem 1.5rem;
    border-radius: 25px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    transition: all 0.3s ease;
    border: 1px solid transparent;
    position: relative;
    overflow: hidden;
}

.garantie-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, #4A6FA5, #FFD166, #4A6FA5);
}

.garantie-card:hover {
    transform: translateY(-10px);
    border-color: #e9ecef;
    box-shadow: 0 20px 40px rgba(74, 111, 165, 0.1);
}

.garantie-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #4A6FA5 0%, #6B8EC0 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    color: white;
    font-size: 2.5rem;
    box-shadow: 0 10px 20px rgba(74, 111, 165, 0.3);
}

.garantie-card h3 {
    margin: 0 0 1rem;
    color: #2c3e50;
    font-size: 1.3rem;
}

.garantie-card p {
    color: #6c757d;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.garantie-badge {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: #e9f0f9;
    border-radius: 50px;
    font-size: 0.9rem;
    color: #4A6FA5;
    font-weight: 600;
}

.garantie-badge i {
    margin-right: 0.3rem;
}

/* Moyens de paiement */
.moyens-paiement {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
    margin: 2rem 0 3rem;
}

.moyen-groupe {
    background: #f8fafc;
    padding: 2rem 1.5rem;
    border-radius: 20px;
    text-align: center;
    transition: all 0.3s ease;
}

.moyen-groupe:hover {
    background: white;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.moyen-groupe h4 {
    color: #4A6FA5;
    margin: 0 0 1rem;
    font-size: 1.2rem;
}

.moyen-icones {
    margin: 1.5rem 0;
    font-size: 2.5rem;
    color: #4A6FA5;
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.moyen-icones i {
    transition: transform 0.3s ease;
}

.moyen-icones i:hover {
    transform: scale(1.1);
    color: #FFD166;
}

.moyen-groupe p {
    color: #6c757d;
    font-size: 0.95rem;
    margin: 0;
}

/* Étapes paiement */
.etapes-paiement {
    margin: 3rem 0;
}

.etape {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    background: white;
    border-radius: 20px;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.etape:hover {
    border-color: #FFD166;
    box-shadow: 0 10px 30px rgba(74, 111, 165, 0.05);
    transform: translateX(10px);
}

.etape-number {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #FFD166 0%, #FFC233 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 2rem;
    color: #2c3e50;
    flex-shrink: 0;
    box-shadow: 0 5px 15px rgba(255, 209, 102, 0.3);
}

.etape-content {
    flex: 1;
}

.etape-content h4 {
    margin: 0 0 0.5rem;
    color: #4A6FA5;
    font-size: 1.2rem;
}

.etape-content p {
    margin: 0;
    color: #6c757d;
    line-height: 1.7;
}

/* Badges de confiance */
.confiance-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    margin: 3rem 0;
    padding: 2rem;
    background: linear-gradient(135deg, #f8fafc 0%, #e9f0f9 100%);
    border-radius: 50px;
}

.badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.5rem;
    background: white;
    border-radius: 50px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.02);
}

.badge i {
    color: #4A6FA5;
    font-size: 1.2rem;
}

.badge span {
    font-weight: 500;
    color: #2c3e50;
}

/* FAQ paiement */
.faq-paiement {
    margin: 2rem 0 3rem;
}

.faq-paiement .faq-item {
    background: white;
    padding: 1.5rem 2rem;
    border-radius: 15px;
    margin-bottom: 1rem;
    border-left: 4px solid #FFD166;
    transition: all 0.3s ease;
}

.faq-paiement .faq-item:hover {
    box-shadow: 0 10px 30px rgba(74, 111, 165, 0.05);
}

.faq-paiement .faq-item h4 {
    margin: 0 0 0.5rem;
    color: #4A6FA5;
    font-size: 1.1rem;
}

.faq-paiement .faq-item p {
    margin: 0;
    color: #6c757d;
    line-height: 1.7;
}

/* CTA final */
.securite-cta {
    text-align: center;
    background: linear-gradient(135deg, #4A6FA5 0%, #6B8EC0 100%);
    padding: 3rem;
    border-radius: 40px;
    margin: 3rem 0 2rem;
    color: white;
    position: relative;
    overflow: hidden;
}

.securite-cta::before {
    content: "🔒";
    position: absolute;
    bottom: -20px;
    left: -20px;
    font-size: 8rem;
    opacity: 0.1;
    transform: rotate(-15deg);
}

.securite-cta i {
    font-size: 4rem;
    color: #FFD166;
    margin-bottom: 1rem;
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.2));
}

.securite-cta h3 {
    color: white;
    font-size: 2rem;
    margin: 1rem 0;
    border: none !important;
}

.securite-cta p {
    color: rgba(255,255,255,0.9);
    font-size: 1.1rem;
    margin-bottom: 2rem;
}

.btn-securite {
    display: inline-block;
    background: white;
    color: #4A6FA5;
    padding: 1rem 3rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.btn-securite:hover {
    background: #FFD166;
    color: #2c3e50;
    transform: scale(1.05);
}

.btn-securite i {
    font-size: 1rem;
    margin-left: 0.5rem;
    transition: transform 0.3s ease;
}

.btn-securite:hover i {
    transform: translateX(5px);
}

/* Note légale */
.securite-note {
    background: #f8fafc;
    padding: 1.5rem;
    border-radius: 15px;
    margin: 2rem 0;
    text-align: center;
    border: 1px dashed #4A6FA5;
}

.securite-note p {
    margin: 0;
    color: #6c757d;
    font-size: 0.95rem;
}

.securite-note i {
    color: #4A6FA5;
    margin-right: 0.5rem;
}

/* Responsive */
@media (max-width: 768px) {
    .securite-intro h2 {
        font-size: 1.5rem;
    }
    
    .securite-garanties {
        grid-template-columns: 1fr;
    }
    
    .etape {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1rem;
    }
    
    .confiance-badges {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        padding: 1.5rem;
    }
    
    .securite-cta {
        padding: 2rem 1rem;
    }
    
    .securite-cta h3 {
        font-size: 1.5rem;
    }
    
    .moyens-paiement {
        grid-template-columns: 1fr;
    }
}

/* ===== STYLES POUR LA PAGE CONFIDENTIALITÉ ===== */

/* Introduction */
.confidentialite-intro {
    text-align: center;
    padding: 2.5rem;
    background: linear-gradient(135deg, #f8fafc 0%, #e9f0f9 100%);
    border-radius: 30px;
    margin: 2rem 0 3rem;
    position: relative;
    overflow: hidden;
}

.confidentialite-shield {
    font-size: 4rem;
    color: #4A6FA5;
    opacity: 0.2;
    position: absolute;
    top: -20px;
    right: -20px;
    transform: rotate(15deg);
}

.confidentialite-intro h2 {
    margin-top: 0 !important;
    border: none !important;
    color: #4A6FA5;
    font-size: 2rem;
}

.confidentialite-responsable {
    background: white;
    padding: 1rem;
    border-radius: 50px;
    display: inline-block;
    margin-top: 1rem;
    font-size: 0.95rem;
}

/* Sommaire */
.confidentialite-sommaire {
    background: white;
    padding: 2rem;
    border-radius: 20px;
    margin: 2rem 0;
    box-shadow: 0 5px 20px rgba(0,0,0,0.02);
    border-left: 5px solid #FFD166;
}

.confidentialite-sommaire h3 {
    margin-top: 0;
    color: #4A6FA5;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.confidentialite-sommaire ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.confidentialite-sommaire li {
    margin: 0;
}

.confidentialite-sommaire li a {
    display: block;
    padding: 0.5rem 1rem;
    background: #f8fafc;
    border-radius: 50px;
    color: #4A6FA5;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.confidentialite-sommaire li a:hover {
    background: #4A6FA5;
    color: white;
    border-color: #FFD166;
}

/* Grille utilisation */
.utilisation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.utilisation-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.5rem;
    background: white;
    border-radius: 15px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.02);
    border: 1px solid #e9ecef;
}

.utilisation-item i {
    font-size: 1.5rem;
    color: #4A6FA5;
    flex-shrink: 0;
}

.utilisation-item strong {
    display: block;
    margin-bottom: 0.3rem;
    color: #2c3e50;
}

.utilisation-item p {
    margin: 0;
    font-size: 0.95rem;
    color: #6c757d;
}

/* Cookies */
.cookies-intro {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: #f8fafc;
    padding: 1.5rem;
    border-radius: 15px;
    margin: 1.5rem 0;
}

.cookies-intro i {
    font-size: 3rem;
    color: #FFD166;
}

.cookies-intro p {
    margin: 0;
    font-size: 1.1rem;
}

.cookies-table {
    border-radius: 15px;
    overflow: hidden;
    margin: 2rem 0;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.cookie-row {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    padding: 1rem;
    border-bottom: 1px solid #e9ecef;
    background: white;
}

.cookie-row.header {
    background: #4A6FA5;
    color: white;
    font-weight: 600;
}

.cookie-row:last-child {
    border-bottom: none;
}

/* Tableau conservation */
.conservation-table {
    width: 100%;
    border-collapse: collapse;
    margin: 2rem 0;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.conservation-table th {
    background: #4A6FA5;
    color: white;
    padding: 1rem;
    text-align: left;
}

.conservation-table td {
    padding: 1rem;
    background: white;
    border-bottom: 1px solid #e9ecef;
}

/* Droits grid */
.droits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.droit-card {
    background: white;
    padding: 1.5rem;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.02);
    transition: all 0.3s ease;
    border: 1px solid #e9ecef;
}

.droit-card:hover {
    transform: translateY(-5px);
    border-color: #FFD166;
    box-shadow: 0 10px 25px rgba(74, 111, 165, 0.1);
}

.droit-card i {
    font-size: 2rem;
    color: #4A6FA5;
    margin-bottom: 1rem;
}

.droit-card h4 {
    margin: 0 0 0.5rem;
    color: #2c3e50;
    font-size: 1.1rem;
}

.droit-card p {
    margin: 0;
    font-size: 0.9rem;
    color: #6c757d;
}

/* Contact droits */
.contact-droits {
    background: #f8fafc;
    padding: 1.5rem;
    border-radius: 15px;
    margin: 1.5rem 0;
}

.contact-droits p {
    margin: 0.5rem 0;
}

.contact-droits i {
    color: #4A6FA5;
    width: 25px;
}

/* Résumé */
.confidentialite-resume {
    background: linear-gradient(135deg, #4A6FA5 0%, #6B8EC0 100%);
    padding: 2rem;
    border-radius: 30px;
    margin: 3rem 0;
    color: white;
}

.confidentialite-resume h3 {
    color: white;
    border: none !important;
    margin-top: 0 !important;
}

.resume-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.resume-item {
    background: rgba(255,255,255,0.1);
    padding: 1rem;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    backdrop-filter: blur(5px);
}

.resume-item i {
    font-size: 1.2rem;
    color: #FFD166;
}

/* Responsive */
@media (max-width: 768px) {
    .cookie-row {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    
    .cookie-row.header {
        display: none;
    }
    
    .cookie-row > div {
        padding: 0.25rem 0;
    }
    
    .cookie-row > div::before {
        content: attr(class);
        font-weight: 600;
        color: #4A6FA5;
        display: block;
        font-size: 0.9rem;
    }
    
    .conservation-table {
        font-size: 0.9rem;
    }
    
    .cookies-intro {
        flex-direction: column;
        text-align: center;
    }
}




/* ===== STYLES POUR LA PAGE RETOURS & GARANTIES ===== */

/* Introduction */
.retours-intro {
    text-align: center;
    padding: 2.5rem;
    background: linear-gradient(135deg, #f8fafc 0%, #e9f0f9 100%);
    border-radius: 30px;
    margin: 2rem 0 3rem;
    position: relative;
    overflow: hidden;
}

.retours-shield {
    font-size: 4rem;
    color: #4A6FA5;
    opacity: 0.2;
    position: absolute;
    top: -20px;
    right: -20px;
    transform: rotate(15deg);
}

.retours-intro h2 {
    margin-top: 0 !important;
    border: none !important;
    color: #4A6FA5;
    font-size: 2rem;
}

.retours-intro p {
    max-width: 700px;
    margin: 0 auto;
    font-size: 1.1rem;
}

/* Résumé rapide */
.retours-rapide {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 2rem;
    margin: 3rem 0;
    padding: 2rem;
    background: white;
    border-radius: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}

.rapide-card {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1rem 2rem;
    background: #f8fafc;
    border-radius: 50px;
    min-width: 250px;
}

.rapide-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #4A6FA5 0%, #6B8EC0 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2rem;
}

.rapide-content {
    display: flex;
    flex-direction: column;
}

.rapide-number {
    font-size: 1.3rem;
    font-weight: 700;
    color: #4A6FA5;
}

.rapide-text {
    font-size: 0.9rem;
    color: #6c757d;
}

/* Sections retours */
.retours-section {
    margin: 3rem 0;
}

.retours-exemple {
    background: #fff3cd;
    border-left: 5px solid #FFD166;
    padding: 1.5rem;
    border-radius: 15px;
    margin: 2rem 0;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.retours-exemple i {
    font-size: 2rem;
    color: #FFD166;
}

.retours-exemple p {
    margin: 0;
    color: #856404;
}

/* Étapes retour */
.retours-etapes {
    list-style: none;
    padding: 0;
    margin: 2rem 0;
}

.retours-etapes li {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: white;
    border-radius: 20px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.02);
}

.etape-num {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #FFD166 0%, #FFC233 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.5rem;
    color: #2c3e50;
    flex-shrink: 0;
}

.etape-desc {
    flex: 1;
}

.etape-desc strong {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
    color: #4A6FA5;
}

.etape-desc p, .etape-desc ul {
    margin: 0.5rem 0;
    color: #6c757d;
}

.adresse-retour {
    background: #f8fafc;
    padding: 1rem;
    border-radius: 10px;
    font-family: monospace;
    font-size: 1rem;
}

.retours-important {
    background: #f8d7da;
    border-left: 5px solid #dc3545;
    padding: 1.5rem;
    border-radius: 15px;
    margin: 2rem 0;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.retours-important i {
    font-size: 2rem;
    color: #dc3545;
}

.retours-important strong {
    color: #721c24;
}

.retours-important ul {
    margin: 0.5rem 0 0;
    color: #721c24;
}

/* Garanties légales */
.garanties-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.garantie-card-legale {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    transition: all 0.3s ease;
}

.garantie-card-legale:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(74, 111, 165, 0.1);
}

.garantie-header {
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.garantie-header.conformite {
    background: linear-gradient(135deg, #4A6FA5 0%, #6B8EC0 100%);
}

.garantie-header.vices {
    background: linear-gradient(135deg, #2c3e50 0%, #4a5f73 100%);
}

.garantie-header i {
    font-size: 2rem;
    color: white;
    opacity: 0.9;
}

.garantie-header h3 {
    margin: 0;
    color: white;
    border: none !important;
    font-size: 1.3rem;
}

.garantie-body {
    padding: 1.5rem;
}

.garantie-body h4 {
    margin: 1.5rem 0 0.5rem;
    color: #4A6FA5;
    font-size: 1rem;
}

.garantie-body p:first-child {
    font-weight: 600;
    color: #2c3e50;
}

/* Cas particuliers */
.cas-particuliers {
    margin: 2rem 0;
}

.cas-item {
    display: flex;
    gap: 1.5rem;
    padding: 1.5rem;
    background: white;
    border-radius: 15px;
    margin-bottom: 1rem;
    border-left: 4px solid #4A6FA5;
}

.cas-item i {
    font-size: 2rem;
    color: #4A6FA5;
    opacity: 0.5;
}

.cas-item h4 {
    margin: 0 0 0.5rem;
    color: #4A6FA5;
}

.cas-item p, .cas-item ol, .cas-item ul {
    margin: 0.5rem 0;
    color: #6c757d;
}

/* Procédure résumée */
.procedure-resume {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.procedure-etape {
    text-align: center;
    padding: 2rem 1rem;
    background: white;
    border-radius: 20px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.02);
    transition: all 0.3s ease;
}

.procedure-etape:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(74, 111, 165, 0.1);
}

.procedure-number {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #4A6FA5 0%, #6B8EC0 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    color: white;
    font-weight: 800;
    font-size: 1.8rem;
}

.procedure-text strong {
    display: block;
    margin-bottom: 0.5rem;
    color: #4A6FA5;
}

.procedure-text p {
    margin: 0;
    font-size: 0.95rem;
    color: #6c757d;
}

/* FAQ */
.retours-faq {
    margin: 2rem 0;
}

.retours-faq .faq-item {
    background: white;
    padding: 1.5rem 2rem;
    border-radius: 15px;
    margin-bottom: 1rem;
    border-left: 4px solid #FFD166;
}

.retours-faq .faq-item h4 {
    margin: 0 0 0.5rem;
    color: #4A6FA5;
    font-size: 1.1rem;
}

.retours-faq .faq-item p, .retours-faq .faq-item ul {
    margin: 0.5rem 0;
    color: #6c757d;
}

/* CTA */
.retours-cta {
    text-align: center;
    background: linear-gradient(135deg, #4A6FA5 0%, #6B8EC0 100%);
    padding: 3rem;
    border-radius: 40px;
    margin: 3rem 0;
    color: white;
}

.retours-cta i {
    font-size: 3rem;
    color: #FFD166;
    margin-bottom: 1rem;
}

.retours-cta h3 {
    color: white;
    font-size: 2rem;
    margin: 1rem 0;
    border: none !important;
}

.retours-cta p {
    color: rgba(255,255,255,0.9);
    margin-bottom: 2rem;
}

.btn-retours {
    display: inline-block;
    background: white;
    color: #4A6FA5;
    padding: 1rem 3rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.btn-retours:hover {
    background: #FFD166;
    color: #2c3e50;
    transform: scale(1.05);
}

.btn-retours i {
    margin-left: 0.5rem;
    transition: transform 0.3s ease;
}

.btn-retours:hover i {
    transform: translateX(5px);
}

/* Note légale */
.retours-note-legale {
    background: #f8fafc;
    padding: 1.5rem;
    border-radius: 15px;
    margin: 2rem 0;
    border: 1px dashed #4A6FA5;
}

.retours-note-legale p {
    margin: 0;
    color: #6c757d;
    font-size: 0.95rem;
}

.retours-note-legale i {
    color: #4A6FA5;
    margin-right: 0.5rem;
}

/* Responsive */
@media (max-width: 768px) {
    .retours-rapide {
        flex-direction: column;
        align-items: center;
    }
    
    .retours-etapes li {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .etape-desc ul {
        text-align: left;
    }
    
    .cas-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .garanties-grid {
        grid-template-columns: 1fr;
    }
    
    .retours-cta {
        padding: 2rem 1rem;
    }
    
    .retours-cta h3 {
        font-size: 1.5rem;
    }
}

/* ===== STYLES POUR LA PAGE SUIVI DE COMMANDE ===== */

/* Introduction */
.suivi-intro {
    text-align: center;
    padding: 2rem;
    background: #f8fafc;
    border-radius: 50px;
    margin: 2rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.suivi-icon {
    font-size: 3rem;
    color: #4A6FA5;
    opacity: 0.3;
}

.suivi-intro p {
    margin: 0;
    font-size: 1.1rem;
    color: #2c3e50;
    max-width: 600px;
}

/* Conteneur du formulaire WooCommerce */
.suivi-form-container {
    background: linear-gradient(135deg, #f8fafc 0%, #e9f0f9 100%);
    padding: 3rem;
    border-radius: 30px;
    margin: 2rem 0;
    box-shadow: 0 10px 30px rgba(74, 111, 165, 0.05);
}

/* Style du formulaire WooCommerce (personnalisation) */
.suivi-form-container .woocommerce-form-track-order {
    max-width: 500px;
    margin: 0 auto;
}

.suivi-form-container .form-row {
    margin-bottom: 1.5rem;
}

.suivi-form-container label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #4A6FA5;
}

.suivi-form-container input {
    width: 100%;
    padding: 1rem;
    border: 2px solid #dee2e6;
    border-radius: 15px;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.suivi-form-container input:focus {
    outline: none;
    border-color: #4A6FA5;
    box-shadow: 0 5px 15px rgba(74, 111, 165, 0.1);
}

.suivi-form-container button {
    background: linear-gradient(135deg, #4A6FA5 0%, #6B8EC0 100%);
    color: white;
    border: none;
    padding: 1rem 2rem;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    box-shadow: 0 5px 15px rgba(74, 111, 165, 0.3);
}

.suivi-form-container button:hover {
    background: #FFD166;
    color: #2c3e50;
    transform: scale(1.02);
}

/* Informations complémentaires */
.suivi-infos {
    margin: 3rem 0;
}

.infos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.info-card {
    background: white;
    padding: 2rem 1.5rem;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0,0,0,0.02);
    transition: all 0.3s ease;
}

.info-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(74, 111, 165, 0.1);
}

.info-card i {
    font-size: 2.5rem;
    color: #4A6FA5;
    margin-bottom: 1rem;
}

.info-card h4 {
    margin: 0 0 0.5rem;
    color: #2c3e50;
}

.info-card p {
    margin: 0;
    color: #6c757d;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Statuts de commande */
.suivi-statuts {
    margin: 3rem 0;
    padding: 2rem;
    background: #f8fafc;
    border-radius: 30px;
}

.statut-item {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1rem;
    padding: 1rem;
    background: white;
    border-radius: 15px;
    transition: transform 0.3s ease;
}

.statut-item:hover {
    transform: translateX(10px);
}

.statut-badge {
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    min-width: 120px;
    text-align: center;
    flex-shrink: 0;
}

.statut-badge.en-attente {
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
}

.statut-badge.traitement {
    background: #cce5ff;
    color: #004085;
    border: 1px solid #b8daff;
}

.statut-badge.expediee {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.statut-badge.livree {
    background: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

.statut-item p {
    margin: 0;
    color: #6c757d;
    flex: 1;
}

/* Section problèmes */
.suivi-probleme {
    margin: 3rem 0;
}

.probleme-cas {
    background: white;
    padding: 1.5rem 2rem;
    border-radius: 15px;
    margin-bottom: 1rem;
    border-left: 4px solid #FFD166;
    transition: all 0.3s ease;
}

.probleme-cas:hover {
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.probleme-cas h4 {
    margin: 0 0 0.5rem;
    color: #4A6FA5;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.probleme-cas h4 i {
    color: #FFD166;
}

.probleme-cas p, .probleme-cas ul {
    margin: 0.5rem 0;
    color: #6c757d;
}

.probleme-cas ul {
    margin-top: 0.5rem;
    padding-left: 1.5rem;
}

/* Contact direct */
.suivi-contact {
    background: linear-gradient(135deg, #4A6FA5 0%, #6B8EC0 100%);
    padding: 3rem;
    border-radius: 40px;
    margin: 3rem 0;
    color: white;
    display: flex;
    align-items: center;
    gap: 2rem;
    position: relative;
    overflow: hidden;
}

.suivi-contact::before {
    content: "📮";
    position: absolute;
    bottom: -20px;
    right: -20px;
    font-size: 8rem;
    opacity: 0.1;
    transform: rotate(-15deg);
}

.suivi-contact i {
    font-size: 4rem;
    color: #FFD166;
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.2));
}

.suivi-contact h3 {
    color: white;
    margin: 0 0 0.5rem;
    border: none !important;
    font-size: 1.8rem;
}

.suivi-contact p {
    color: rgba(255,255,255,0.9);
    margin-bottom: 1.5rem;
}

.btn-suivi {
    display: inline-block;
    background: white;
    color: #4A6FA5;
    padding: 0.8rem 2rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.btn-suivi:hover {
    background: #FFD166;
    color: #2c3e50;
    transform: scale(1.05);
}

.btn-suivi i {
    font-size: 0.9rem;
    margin-left: 0.5rem;
    color: inherit;
}

/* Responsive */
@media (max-width: 768px) {
    .suivi-form-container {
        padding: 1.5rem;
    }
    
    .statut-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .statut-badge {
        width: 100%;
    }
    
    .suivi-contact {
        flex-direction: column;
        text-align: center;
        padding: 2rem 1.5rem;
    }
    
    .suivi-contact i {
        margin-bottom: 1rem;
    }
}

/* ===== STYLES POUR RESEAUX SOCIAUX ===== */

.social-share {
  display: flex; /* Aligne les boutons sur la même ligne */
  justify-content: center; /* Centre les boutons horizontalement */
  gap: 10px; /* Espace entre les boutons */
  margin-top: 20px; /* Marge au-dessus des boutons */
}

.social-share button {
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  color: white; /* Couleur du texte */
  cursor: pointer;
  transition: background-color 0.3s;
  display: flex; /* Utilise flexbox pour aligner l'icône et le texte */
  align-items: center; /* Centre verticalement l'icône et le texte */
  justify-content: center; /* Centre horizontalement le texte */
  width: auto; /* Ajuste la largeur du bouton au contenu */
}

#share-facebook {
  background-color: #3b5998; /* Couleur de fond Facebook */
}

#share-twitter {
  background-color: #1da1f2; /* Couleur de fond Twitter */
}

#share-pinterest {
  background-color: #e60023; /* Couleur de fond Pinterest */
}

.social-share button i {
  margin-right: 8px; /* Espace entre l'icône et le texte */
}

.social-share button:hover {
  opacity: 0.8; /* Réduction de l'opacité au survol */
}

/* SOLUTION DEFINITIVE POUR WOO FILTERS */
@media (max-width: 768px) {
    /* Reset complet du conteneur principal */
    .elementor-element.elementor-widget-woofilters {
        width: 100% !important;
        display: block !important;
        float: none !important;
        clear: both !important;
    }
    
    /* Force le filtre à ne pas casser le flux */
    .wpfMainWrapper {
        width: 100% !important;
        display: block !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
        margin: 0 0 20px 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }
    
    /* Nettoie après le filtre */
    .wpfMainWrapper:after {
        content: "" !important;
        display: table !important;
        clear: both !important;
        width: 100% !important;
    }
    
    /* Force le contenu suivant à reprendre le flux normal */
    .elementor-widget-woofilters + * {
        clear: both !important;
        display: block !important;
    }
}


/* CORRECTION HEADER MOBILE */
@media (max-width: 768px) {
    /* Reset du header */
    .elementor-location-header {
        position: relative !important;
        z-index: 9999 !important;
        width: 100% !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
    }
    
    /* Correction de la top bar */
    .elementor-element-e544744 {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 10px !important;
    }
    
    /* Cache les éléments qui posent problème en mobile */
    .elementor-hidden-mobile {
        display: none !important;
    }
    
    /* Centre le texte de la top bar */
    .elementor-element-ac90be4 {
        width: 100% !important;
        text-align: center !important;
    }
    
    /* Correction du menu burger */
    .elementor-menu-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 45px !important;
        height: 45px !important;
        background: #4A6FA5 !important;
        border-radius: 5px !important;
        color: white !important;
    }
    
    /* Correction du logo */
    .elementor-element-26ccbc8 {
        text-align: left !important;
    }
    
    /* Correction des icônes utilisateur/panier */
    .elementor-widget-hfe-cart {
        display: inline-block !important;
        width: auto !important;
        margin-left: 10px !important;
    }
}

/* ===== SOLUTION FINALE - PROBLEME CONTENU APRES FOOTER ===== */
@media (max-width: 768px) {
    /* 1. ON REMET TOUT DANS L'ORDRE */
    html, body {
        overflow-x: hidden;
        margin: 0;
        padding: 0;
    }

    /* 2. ON FORCE L'ORDRE DES SECTIONS */
    .elementor-location-archive {
        display: flex !important;
        flex-direction: column !important;
    }

    /* SECTION 1 - Hero */
    .elementor-location-archive > .elementor-section:first-of-type {
        order: 1 !important;
        position: relative !important;
        z-index: 1 !important;
    }

    /* SECTION 2 - Filtre + Produits */
    .elementor-location-archive > .elementor-section:nth-of-type(2) {
        order: 2 !important;
        position: relative !important;
        z-index: 2 !important;
    }

    /* SECTION 3 - Espace vide */
    .elementor-location-archive > .elementor-section:nth-of-type(3) {
        order: 3 !important;
        position: relative !important;
        z-index: 3 !important;
    }

    /* 3. ON RESET LE HERO */
    .hero-cgv-full {
        position: relative !important;
        width: 100% !important;
        min-height: 250px !important;
        margin: 0 0 20px 0 !important;
        background: linear-gradient(135deg, #4A6FA5 0%, #6B8EC0 100%) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 1 !important;
    }

    .hero-overlay {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 1 !important;
    }

    .hero-content {
        position: relative !important;
        z-index: 2 !important;
        padding: 1rem !important;
    }

    .decoration-plane {
        display: none !important;
    }

    /* 4. ON RESET LA SECTION FILTRE + PRODUITS */
    .elementor-section[data-id="f8c9370"] {
        position: relative !important;
        z-index: 2 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .elementor-section[data-id="ece679f"] {
        display: flex !important;
        flex-direction: column !important;
    }

    /* Colonne filtre */
    .elementor-column[data-id="9902e53"] {
        order: 1 !important;
        width: 100% !important;
        margin-bottom: 20px !important;
    }

    /* Colonne produits */
    .elementor-column[data-id="95cd0ff"] {
        order: 2 !important;
        width: 100% !important;
    }

    /* 5. ON DESACTIVE TOUT CE QUI POURRAIT SORTIR DU FLUX */
    .elementor-element,
    .elementor-widget-wrap,
    .elementor-widget,
    .elementor-column,
    .elementor-section {
        float: none !important;
        clear: both !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
    }

    /* 6. ON NETTOIE LE FILTRE */
    .wpfMainWrapper {
        position: relative !important;
        width: 100% !important;
        transform: none !important;
        margin: 0 0 20px 0 !important;
    }

    .wpfFilterWrapper {
        width: 100% !important;
        margin-bottom: 10px !important;
    }

    /* 7. ON FORCE LE FOOTER A RESTER A LA FIN */
    footer.elementor-location-footer {
        position: relative !important;
        z-index: 10 !important;
        clear: both !important;
        margin-top: 30px !important;
    }
}