/* ==========================================================================
   SOMMAIRE M2SA CSS
   ==========================================================================
   0. VARIABLES & THÈMES (Mode Sombre/Clair)
   1. BASE & RESET (Typographie, Body)
   2. HEADER & NAVIGATION (Menu, Boutons de langue, Panier)
   3. HERO SECTION (Titre oversize)
   4. COMPOSANTS UI (Barre de recherche, Filtres, Boutons, Badges)
   5. GRILLE PRODUITS (Catalogue)
   6. CARROUSEL (Nouveautés)
   7. FENÊTRE MODALE (Pop-up)
   8. CONTACT & NEWSLETTER
   9. PAGE MENTIONS LÉGALES
   10. FOOTER & FLOTTANTS (WhatsApp)
   ========================================================================== */

/* ==========================================================================
   0. VARIABLES & THÈMES
   ========================================================================== */
:root {
    /* Couleurs de base (Mode Clair) : blanc cassé chaud (ivoire), sans teinte
       verte - le vert de marque reste porté par --primary/--secondary/
       --accent (titres, boutons, liens), pas par le fond. Les cartes ne sont
       plus en blanc pur non plus, pour un ensemble plus doux et cohérent. */
    --bg-color: #f6f2e8;
    --bg-gradient: linear-gradient(180deg, #fbf8f1 0%, #f0e9d8 100%);
    --carousel-bg: rgba(0, 0, 0, 0.02);
    --text-color: #201f1c;
    --text-muted: #6b6a63;
    --card-bg: #fdfbf6;
    --photo-mat: #f9f6ee;

    /* Couleurs de la marque M2SA (Vert et Rouge) */
    --primary: #008751;
    --secondary: #00663d;
    --accent: #e30a17;
    --border: #e9e0cb;

    --transition: all 0.3s ease;
}

/* Mode Sombre : écart de contraste plus marqué entre le fond et les cartes
   (avant : #121212 / #1a1a1a, quasi indissociables) */
[data-theme="dark"] {
    --bg-color: #101312;
    --bg-gradient: radial-gradient(circle at top center, #16241c 0%, #0a0a0a 100%);
    --carousel-bg: transparent;
    --text-color: #f4f7f6;
    --text-muted: #a9b0ac;
    --card-bg: #1c211f;
    --photo-mat: #f0efe9;
    --primary: #00b36b;
    --secondary: #00e68a;
    --accent: #ff4d56;
    --border: #2c3430;
}

/* ==========================================================================
   1. BASE & RESET
   ========================================================================== */
* { margin: 0; padding: 0; box-sizing: border-box; }

body { 
    font-family: 'Inter', sans-serif; 
    background-color: var(--bg-color); 
    background-image: var(--bg-gradient);
    background-attachment: fixed;
    color: var(--text-color); 
    transition: background-color 0.3s, background-image 0.3s, color 0.3s;
    line-height: 1.6;
}

a { text-decoration: none; color: inherit; }
html { scroll-behavior: smooth; }

/* ==========================================================================
   2. HEADER, NAVIGATION & PANIER
   ========================================================================== */
.site-header { 
    background-color: var(--card-bg); 
    padding: 1rem 5%; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); 
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: background-color 0.3s;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
}

.logo { display: flex; align-items: center; }
.logo-img { max-height: 60px; width: auto; max-width: 250px; object-fit: contain; }

.main-nav ul { display: flex; gap: 2rem; list-style: none; font-weight: 600; }
.main-nav a:hover { color: var(--primary); transition: var(--transition); }

.header-controls { display: flex; align-items: center; gap: 1.5rem; }

/* Bouton Thème */
.theme-btn {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 50%;
    width: 40px; height: 40px;
    font-size: 1.2rem; cursor: pointer;
    display: flex; justify-content: center; align-items: center;
    color: var(--text-color);
    transition: var(--transition);
}
.theme-btn:hover { background-color: rgba(0,0,0,0.05); transform: scale(1.1); }
[data-theme="dark"] .theme-btn:hover { background-color: rgba(255,255,255,0.1); }
.theme-icon { display: flex; align-items: center; justify-content: center; line-height: 0; }

/* Panier de Devis */
.cart-link {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--text-color);
    font-weight: 600;
    transition: var(--transition);
}
.cart-link:hover { color: var(--primary); }

.cart-icon-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}
.cart-badge {
    position: absolute;
    top: -8px;
    inset-inline-end: -10px; /* Propriété logique pour s'adapter au RTL */
    background-color: var(--accent);
    color: white;
    font-size: 0.75rem;
    font-weight: bold;
    height: 18px;
    min-width: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Sélecteur de langue (menu déroulant) */
.lang-dropdown { position: relative; }

.lang-dropdown-trigger {
    display: flex; align-items: center; gap: 6px;
    background: transparent; border: 1px solid var(--border); border-radius: 20px;
    padding: 7px 12px; cursor: pointer; color: var(--text-color);
    font-size: 0.85rem; font-weight: 600; transition: var(--transition);
}
.lang-dropdown-trigger:hover { background-color: rgba(0,0,0,0.05); border-color: var(--primary); color: var(--primary); }
[data-theme="dark"] .lang-dropdown-trigger:hover { background-color: rgba(255,255,255,0.08); }

.lang-dropdown-code { letter-spacing: 0.5px; }
.lang-dropdown-chevron { transition: transform 0.2s ease; }
.lang-dropdown.open .lang-dropdown-chevron { transform: rotate(180deg); }
.lang-dropdown.open .lang-dropdown-trigger { border-color: var(--primary); color: var(--primary); }

.lang-dropdown-menu {
    position: absolute; top: calc(100% + 8px); inset-inline-end: 0;
    background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15); min-width: 170px; overflow: hidden;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    z-index: 1100;
}
.lang-dropdown.open .lang-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }

.lang-dropdown-menu form { display: flex; flex-direction: column; }
.lang-option {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; background: none; border: none; padding: 11px 14px;
    font-size: 0.9rem; text-align: start; color: var(--text-color); cursor: pointer;
    transition: background-color 0.15s;
}
.lang-option:hover { background-color: rgba(0, 135, 81, 0.08); }
[data-theme="dark"] .lang-option:hover { background-color: rgba(0, 179, 107, 0.12); }
.lang-option.active { color: var(--primary); font-weight: 700; }
.lang-option svg { color: var(--primary); flex-shrink: 0; }

/* ==========================================================================
   3. HERO SECTION
   ========================================================================== */
.hero-vitrine {
    width: 100%; padding: 6rem 5% 5rem 5%;
    display: flex; justify-content: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
[data-theme="dark"] .hero-vitrine { border-bottom: 1px solid rgba(255, 255, 255, 0.05); }

/* Composition asymétrique (aligné au bord, pas centré) : le contenu occupe
   une colonne de lecture raisonnable au lieu de s'étaler sur toute la
   largeur en bloc centré - évite l'effet "template de générateur IA".
   Deuxième colonne pour le filigrane, qui comble l'espace resté vide. */
.hero-content {
    width: 95%; max-width: 1800px;
    display: grid; grid-template-columns: minmax(0, 720px) 1fr; gap: 2rem; align-items: center;
}

.hero-subtitle {
    font-size: 1rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 3px; color: var(--primary); margin-bottom: 1.25rem;
}
[data-theme="dark"] .hero-subtitle { color: var(--primary); }

.hero-separator {
    width: 60px; height: 3px; background-color: var(--primary);
    border: none; margin: 0 0 2rem 0;
}

.hero-title {
    font-size: clamp(2.75rem, 5vw, 4.5rem); font-weight: 800; letter-spacing: -1px;
    color: var(--text-color); margin-bottom: 2.5rem; line-height: 1.1;
    max-width: 16ch;
}

.hero-description {
    max-width: 720px;
}
.hero-description p {
    font-size: 1.1rem; font-weight: 400; color: var(--text-muted);
    line-height: 1.8; margin-bottom: 1.5rem; text-align: left;
}
.hero-description p:last-child { margin-bottom: 0; }
.hero-brand { color: var(--text-color); font-weight: 700; }

/* Filigrane a droite du hero : la meme trame que la section newsletter plus
   bas (repere visuel commun), et le mot-symbole M2SA tres attenue par-dessus.
   Comble l'espace vide sans concurrencer le texte - purement decoratif. */
.hero-mark { position: relative; height: 100%; min-height: 380px; }
.hero-mark-pattern {
    position: absolute; inset: -30%;
    background-image:
        repeating-linear-gradient(45deg, rgba(0,135,81,0.10) 0, rgba(0,135,81,0.10) 1.5px, transparent 1.5px, transparent 38px),
        repeating-linear-gradient(-45deg, rgba(0,102,61,0.10) 0, rgba(0,102,61,0.10) 1.5px, transparent 1.5px, transparent 38px);
    -webkit-mask-image: radial-gradient(closest-side, black 55%, transparent 100%);
            mask-image: radial-gradient(closest-side, black 55%, transparent 100%);
}
[data-theme="dark"] .hero-mark-pattern {
    background-image:
        repeating-linear-gradient(45deg, rgba(0,179,107,0.12) 0, rgba(0,179,107,0.12) 1.5px, transparent 1.5px, transparent 38px),
        repeating-linear-gradient(-45deg, rgba(0,230,138,0.10) 0, rgba(0,230,138,0.10) 1.5px, transparent 1.5px, transparent 38px);
}
.hero-wordmark {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: clamp(4.5rem, 11vw, 8rem); font-weight: 800; letter-spacing: -0.02em;
    color: var(--primary); opacity: 0.10; user-select: none; white-space: nowrap; pointer-events: none;
}

/* ==========================================================================
   4. COMPOSANTS UI
   ========================================================================== */
/* Recherche */
.search-container { display: flex; justify-content: center; margin-bottom: 2.5rem; padding: 0 5%; }
.search-bar {
    display: flex; align-items: center; width: 100%; max-width: 650px;
    background-color: var(--card-bg); border: 2px solid var(--border);
    border-radius: 50px; padding: 0.5rem 1.5rem; transition: var(--transition);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}
.search-bar:focus-within {
    border-color: var(--primary); box-shadow: 0 8px 25px rgba(0, 135, 81, 0.15); transform: translateY(-2px); 
}
[data-theme="dark"] .search-bar:focus-within { box-shadow: 0 8px 25px rgba(0, 179, 107, 0.15); }
.search-icon { color: var(--primary); margin-inline-end: 1rem; opacity: 0.8; } /* margin-inline-end s'adapte RTL/LTR */
.search-input {
    flex: 1; border: none; background: transparent; color: var(--text-color);
    font-size: 1.1rem; padding: 0.8rem 0; outline: none; font-family: inherit;
}
.search-input::placeholder { color: var(--text-muted); opacity: 0.6; font-weight: 300; }

/* Filtres de catégorie */
.category-filters { display: flex; justify-content: center; gap: 1rem; margin-bottom: 3rem; flex-wrap: wrap; }
.filter-btn { 
    padding: 0.6rem 1.5rem; border-radius: 30px; border: 2px solid var(--primary); 
    color: var(--text-color); font-weight: 600; transition: var(--transition); 
}
.filter-btn.active, .filter-btn:hover { background-color: var(--primary); color: #fff; }

/* Bouton Load More */
.pagination-container { text-align: center; margin-top: 3rem; margin-bottom: 1rem; width: 100%; }
.load-more-btn {
    background-color: transparent; color: var(--primary); border: 2px solid var(--primary);
    padding: 0.8rem 2.5rem; font-size: 1.1rem; font-weight: 600; border-radius: 50px;
    cursor: pointer; transition: var(--transition); font-family: inherit;
}
.load-more-btn:hover { background-color: var(--primary); color: #ffffff; transform: translateY(-2px); box-shadow: 0 4px 15px rgba(0, 135, 81, 0.2); }

/* Badges Produits avec propriétés logiques */
.badge-new {
    position: absolute; top: 15px; inset-inline-end: 15px;
    background-color: var(--accent); color: #ffffff; padding: 5px 12px;
    border-radius: 20px; font-size: 0.8rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px; box-shadow: 0 4px 10px rgba(227, 10, 23, 0.3); z-index: 10;
}

.badge-incoming {
    position: absolute; top: 15px; inset-inline-start: 15px;
    background-color: #0f3d6b; color: #ffffff; padding: 0.5rem 1rem;
    border-radius: 50px; font-size: 0.85rem; font-weight: 700; z-index: 5;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15); display: flex; align-items: center; gap: 8px; text-transform: uppercase;
}
.boat-icon { flex-shrink: 0; animation: float 3s ease-in-out infinite; }
@keyframes float { 0% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-3px) rotate(5deg); } 100% { transform: translateY(0px) rotate(0deg); } }

/* ==========================================================================
   5. GRILLE PRODUITS (Catalogue)
   ========================================================================== */
.gallery-container { max-width: 1400px; margin: 0 auto; padding: 4rem 5% 2rem 5%; }
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 3rem; }

.product-card { 
    background-color: var(--card-bg); border-radius: 12px; overflow: hidden; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); border: 1px solid var(--border);
    transition: transform 0.3s ease, box-shadow 0.3s ease; padding: 1rem;
}
.product-clickable { cursor: pointer; }
.product-clickable:hover { transform: translateY(-8px); box-shadow: 0 10px 25px rgba(0,0,0,0.1); }

.product-gallery-viewer { padding: 1.5rem; border-bottom: 1px solid var(--border); background-color: var(--card-bg); position: relative; }
/* Support photo neutre et constant (les photos produit sont shootées sur fond
   clair) plutôt qu'un blanc pur codé en dur, qui tranchait brutalement en
   mode sombre. Le ton s'ajuste légèrement avec le thème (--photo-mat) sans
   jamais redevenir un blanc criard. */
.main-image-container {
    width: 100%; height: 250px; display: flex; justify-content: center; align-items: center;
    margin-bottom: 1rem; background-color: var(--photo-mat); border-radius: 12px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}
.main-img { max-width: 85%; max-height: 85%; object-fit: contain; border-radius: 8px; }

.thumbnails-list { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; }
.thumb-img { width: 50px; height: 50px; object-fit: cover; background-color: var(--photo-mat); border: 2px solid var(--border); cursor: pointer; border-radius: 6px; transition: var(--transition); }
.thumb-img.active, .thumb-img:hover { border-color: var(--primary); }

.product-info { padding: 1.5rem; }
.category-tag { font-size: 0.75rem; color: var(--accent); font-weight: bold; text-transform: uppercase; letter-spacing: 1px;}
.product-info h3 { margin: 0.5rem 0; font-size: 1.25rem; color: var(--text-color); }
.product-info p { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 1rem; }

/* ==========================================================================
   6. CARROUSEL (Nouveautés)
   ========================================================================== */
.carousel-section { 
    padding: 3rem 5%; 
    background: var(--carousel-bg);
}
.carousel-header h2 { font-size: 2.8rem; color: var(--primary); margin-bottom: 2.5rem; letter-spacing: -0.5px; }

.carousel-wrapper { position: relative; max-width: 1200px; margin: 0 auto; display: flex; align-items: center; }

.carousel-container-scroll {
    display: flex; overflow-x: auto; gap: 2rem; padding: 1rem 0; 
    scroll-snap-type: x mandatory; scroll-behavior: smooth; width: 100%; justify-content: flex-start;
    scrollbar-width: none; -ms-overflow-style: none; 
}
.carousel-container-scroll::-webkit-scrollbar { display: none; }

.carousel-prev, .carousel-next {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: var(--card-bg); color: var(--primary); border: 2px solid var(--primary);
    border-radius: 50%; width: 50px; height: 50px; min-width: 50px;
    font-size: 1.5rem; font-weight: bold; display: flex; align-items: center; justify-content: center;
    cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.1); z-index: 10; transition: all 0.2s;
}
.carousel-prev:hover, .carousel-next:hover { background: var(--primary); color: white; }
/* Utilisation d'inset-inline pour la compatibilité RTL automatique */
.carousel-prev { inset-inline-start: -20px; }
.carousel-next { inset-inline-end: -20px; }

.carousel-card {
    min-width: 300px; max-width: 300px; background: var(--card-bg); border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08); cursor: pointer; transition: transform 0.3s;
    scroll-snap-align: start; overflow: hidden; flex-shrink: 0;
}
.carousel-card:hover { transform: translateY(-8px); }
a.carousel-card { display: block; text-decoration: none; color: inherit; }

.carousel-img-wrapper { position: relative; height: 250px; width: 100%; }
.carousel-img-wrapper img { width: 100%; height: 100%; object-fit: contain; padding: 15px; background-color: var(--photo-mat); }

.badge-carousel-new {
    position: absolute; top: 15px; inset-inline-start: 15px; background-color: #dc3545; 
    color: white; padding: 6px 14px; border-radius: 20px; font-size: 0.85rem; font-weight: bold; z-index: 2;
}

.carousel-info { padding: 1.5rem; text-align: center; }
.carousel-info h4 { font-size: 1.2rem; color: var(--text-color); margin-bottom: 5px; }
.carousel-category { font-size: 0.9rem; color: var(--primary); opacity: 0.8; text-transform: uppercase; }

/* ==========================================================================
   7. FENÊTRE MODALE
   ========================================================================== */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.7); z-index: 2000; display: none;
    align-items: center; justify-content: center; backdrop-filter: blur(5px);
}

.modal-content {
    background-color: var(--card-bg); width: 95%; max-width: 1000px;
    border-radius: 12px; position: relative; padding: 3rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3); animation: modalFadeIn 0.3s ease-out;
    max-height: 90vh; overflow-y: auto;
}

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

.modal-header-actions {
    position: absolute; top: 15px; inset-inline-end: 20px; z-index: 10;
    display: flex; align-items: center; gap: 12px;
}

.modal-close {
    font-size: 2.5rem; line-height: 1; color: var(--text-muted);
    background: none; border: none; cursor: pointer; opacity: 0.6; transition: opacity 0.2s;
}
.modal-close:hover { opacity: 1; color: var(--accent); }

.modal-body { display: flex; gap: 3rem; align-items: flex-start; }

.modal-image-col { width: 45%; flex-shrink: 0; display: flex; flex-direction: column; gap: 1.5rem; }
.modal-main-image-container {
    background-color: var(--photo-mat); border-radius: 8px; padding: 1rem;
    border: 1px solid var(--border); width: 100%; height: 350px;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.modal-image-col img#modal-img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform 0.4s ease; }
.modal-main-image-container:hover img#modal-img { transform: scale(1.08); }

.modal-expand-btn {
    width: 32px; height: 32px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background-color: var(--card-bg); color: var(--text-color); border: 1px solid var(--border);
    border-radius: 6px; cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.modal-expand-btn:hover { background-color: var(--primary); color: #fff; border-color: var(--primary); }

.modal-thumbnails-list { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; width: 100%; }
.modal-thumb-img {
    width: 65px; height: 65px; object-fit: contain; padding: 5px; background: var(--photo-mat); border-radius: 6px;
    border: 2px solid var(--border); cursor: pointer; opacity: 0.7; transition: all 0.2s;
}
.modal-thumb-img:hover, .modal-thumb-img.active { opacity: 1; border-color: var(--primary); }

.modal-info-col { width: 55%; display: flex; flex-direction: column; }
.modal-category-tag { color: var(--primary); font-weight: 600; font-size: 0.9rem; text-transform: uppercase; margin-bottom: 0.5rem; }
.modal-info-col h2 { font-size: 2.2rem; color: var(--text-color); margin-bottom: 1rem; letter-spacing: -0.5px;}
.modal-divider { border: 0; border-top: 1px solid var(--border); margin: 1.5rem 0; }
.modal-info-col h3 { font-size: 1.2rem; margin-bottom: 0.8rem; color: var(--text-color); }
.modal-info-col p { color: var(--text-color); opacity: 0.9; line-height: 1.7; margin-bottom: 2.5rem; font-size: 1rem; }

/* Conteneur pour nos futurs boutons de devis */
.modal-actions {
    display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
}

.btn-modal-contact { display: inline-block; background-color: var(--primary); color: white; padding: 14px 28px; border-radius: 8px; text-decoration: none; font-weight: 600; text-align: center; transition: background 0.3s; width: fit-content;}
.btn-modal-contact:hover { background-color: var(--secondary); cursor: pointer; }

.btn-modal-secondary { display: inline-block; background-color: transparent; color: var(--primary); border: 2px solid var(--primary); padding: 12px 26px; border-radius: 8px; text-decoration: none; font-weight: 600; text-align: center; transition: all 0.3s; width: fit-content;}
.btn-modal-secondary:hover { background-color: rgba(0, 135, 81, 0.1); cursor: pointer; }

.qty-selector { display: flex; align-items: stretch; border: 2px solid var(--border); border-radius: 8px; overflow: hidden; height: 48px; flex-shrink: 0; }
.qty-input {
    width: 48px; height: 100%; border: none;
    background: var(--card-bg); color: var(--text-color); text-align: center; font-size: 1rem;
    -moz-appearance: textfield;
}
.qty-input::-webkit-outer-spin-button, .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.qty-btn-stack { display: flex; flex-direction: column; width: 32px; border-inline-start: 2px solid var(--border); }
.qty-btn {
    background: var(--card-bg); color: var(--text-color); border: none; flex: 1; width: 100%;
    display: flex; align-items: center; justify-content: center; line-height: 1;
    font-size: 0.9rem; cursor: pointer; transition: background-color 0.2s, color 0.2s;
}
.qty-btn.qty-plus { border-block-end: 1px solid var(--border); }
.qty-btn:hover { background-color: var(--primary); color: #fff; }

/* ==========================================================================
   8. CONTACT & NEWSLETTER
   Fond ivoire unifié (identique au reste de la page, aucune coupure de
   couleur nécessaire), avec 4 dunes en toile de fond, groupées en 2
   lignes (haut/bas) de 2 dunes chacune qui se chevauchent (nuances de
   vert, une ligne dérive vers la gauche, l'autre vers la droite).
   ========================================================================== */
.nl-contact-unified {
    position: relative;
    background-color: var(--bg-color);
    overflow: hidden;
}

.dune-pattern { position: absolute; inset: 0; pointer-events: none; }
.dune-layer {
    position: absolute; left: -50%; right: -50%; height: 480px;
    background-repeat: repeat-x; background-size: 640px 100%;
}

/* Ligne du haut (2 dunes qui se chevauchent) : dérive vers la gauche.
   Les deux vagues ont une longueur d'onde différente (640 vs 460) et
   partagent presque le même axe vertical, pour que leurs courbes se
   croisent réellement au lieu de simplement s'empiler. */
.dune-layer--1 {
    top: 0%; opacity: 0.24;
    background-size: 640px 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='160' viewBox='0 0 640 160'%3E%3Cpath fill='%2353b787' d='M0 80 Q 160 5 320 80 T 640 80 V160 H0 Z'/%3E%3C/svg%3E");
    animation: dune-drift-left-640 55s linear infinite;
}
.dune-layer--2 {
    top: 1%; opacity: 0.34;
    background-size: 460px 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='460' height='160' viewBox='0 0 460 160'%3E%3Cpath fill='%232f8f63' d='M0 85 Q 115 155 230 85 T 460 85 V160 H0 Z'/%3E%3C/svg%3E");
    animation: dune-drift-left-460 34s linear infinite;
}

/* Ligne du bas (2 dunes qui se chevauchent) : dérive vers la droite, sens opposé à la ligne du haut */
.dune-layer--3 {
    bottom: 0%; opacity: 0.30;
    background-size: 640px 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='160' viewBox='0 0 640 160'%3E%3Cpath fill='%231f6b49' d='M0 80 Q 160 5 320 80 T 640 80 V160 H0 Z'/%3E%3C/svg%3E");
    animation: dune-drift-right-640 60s linear infinite;
}
.dune-layer--4 {
    bottom: 1%; opacity: 0.40;
    background-size: 460px 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='460' height='160' viewBox='0 0 460 160'%3E%3Cpath fill='%23004d2e' d='M0 85 Q 115 155 230 85 T 460 85 V160 H0 Z'/%3E%3C/svg%3E");
    animation: dune-drift-right-460 36s linear infinite;
}

[data-theme="dark"] .dune-layer--1 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='160' viewBox='0 0 640 160'%3E%3Cpath fill='%2300e68a' d='M0 80 Q 160 5 320 80 T 640 80 V160 H0 Z'/%3E%3C/svg%3E");
}
[data-theme="dark"] .dune-layer--2 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='460' height='160' viewBox='0 0 460 160'%3E%3Cpath fill='%2300b36b' d='M0 85 Q 115 155 230 85 T 460 85 V160 H0 Z'/%3E%3C/svg%3E");
}
[data-theme="dark"] .dune-layer--3 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='160' viewBox='0 0 640 160'%3E%3Cpath fill='%23049960' d='M0 80 Q 160 5 320 80 T 640 80 V160 H0 Z'/%3E%3C/svg%3E");
}
[data-theme="dark"] .dune-layer--4 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='460' height='160' viewBox='0 0 460 160'%3E%3Cpath fill='%23025c37' d='M0 85 Q 115 155 230 85 T 460 85 V160 H0 Z'/%3E%3C/svg%3E");
}

@keyframes dune-drift-left-640 { from { background-position-x: 0; } to { background-position-x: -640px; } }
@keyframes dune-drift-left-460 { from { background-position-x: 0; } to { background-position-x: -460px; } }
@keyframes dune-drift-right-640 { from { background-position-x: 0; } to { background-position-x: 640px; } }
@keyframes dune-drift-right-460 { from { background-position-x: 0; } to { background-position-x: 460px; } }
@media (prefers-reduced-motion: reduce) {
    .dune-layer { animation: none !important; }
}

.newsletter-section { position: relative; z-index: 1; padding: 5rem 5% 3rem 5%; text-align: center; }
.newsletter-container { max-width: 900px; margin: 0 auto; }
.newsletter-content h2 { font-size: 2.2rem; font-weight: 800; margin-bottom: 1rem; color: var(--text-color); }
.newsletter-content p { font-size: 1.1rem; color: var(--text-muted); margin-bottom: 2.5rem; }

.newsletter-form { display: flex; justify-content: center; gap: 1rem; max-width: 600px; margin: 0 auto; }
.newsletter-form input {
    flex: 1; padding: 1rem 1.5rem; border-radius: 50px; border: 1.5px solid var(--primary);
    background: var(--card-bg); color: var(--text-color); font-size: 1rem; outline: none; font-family: inherit;
}
.newsletter-form input::placeholder { color: var(--text-muted); }
.newsletter-form button { background-color: var(--primary); color: #ffffff; border: none; padding: 1rem 2.5rem; border-radius: 50px; font-weight: 700; cursor: pointer; transition: var(--transition); }
.newsletter-form button:hover { background-color: var(--secondary); transform: translateY(-2px); }
.newsletter-message { margin-top: 1.5rem; font-weight: 600; min-height: 24px; }

.modern-contact { position: relative; z-index: 1; padding: 2rem 5% 4rem 5%; margin-top: 0; }
.contact-container { max-width: 1200px; margin: 0 auto; }
.contact-header { text-align: center; margin-bottom: 4rem; }
.contact-header h2 { font-size: 2.5rem; font-weight: 700; margin-bottom: 1rem; letter-spacing: 1px; color: var(--text-color); }
.contact-separator { width: 60px; height: 3px; background-color: var(--primary); border: none; margin: 0 auto 1.5rem auto; }
.contact-subtitle { color: var(--text-muted); font-size: 1.1rem; }

.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2.5rem; margin-bottom: 4rem; }
.contact-card {
    display: flex; flex-direction: column; justify-content: center; height: 100%;
    background-color: var(--card-bg); border: 1px solid var(--border); border-radius: 16px;
    padding: 2.5rem 2rem; text-align: center; transition: transform 0.3s ease, border-color 0.3s ease;
}
.contact-card:hover { transform: translateY(-5px); border-color: var(--primary); }

/* Icônes ligne (SVG, currentColor) : le survol change juste la couleur du
   texte, plus besoin du filtre CSS bricolé pour recolorer un PNG. */
.contact-icon {
    width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1.5rem auto; border-radius: 50%;
    background-color: rgba(0, 135, 81, 0.12); color: var(--primary);
    transition: var(--transition);
}
.contact-card:hover .contact-icon { background-color: var(--accent); color: #ffffff; }

.contact-card h3 { font-size: 1.2rem; color: var(--primary); margin-bottom: 1.5rem; text-transform: uppercase; letter-spacing: 1px; }
.address-item { margin-bottom: 1.2rem; text-align: center; }
.address-item:last-child { margin-bottom: 0; }
.address-label { font-size: 0.8rem; color: var(--primary); text-transform: uppercase; font-weight: 700; letter-spacing: 1.5px; display: block; margin-bottom: 4px; opacity: 0.85; }
.address-item p, .contact-card > p { color: var(--text-muted); font-size: 1rem; line-height: 1.5; }
.address-spacer { border: none; border-top: 1px solid var(--border); width: 60px; margin: 1.2rem auto; }
.contact-link { color: var(--text-color); text-decoration: none; font-weight: 600; transition: color 0.3s ease; }
.contact-link:hover { color: var(--accent); }

.callback-section {
    display: flex; flex-direction: column; justify-content: center; height: 100%;
    background-color: var(--card-bg); border: 1px solid var(--border); border-radius: 16px;
    padding: 3rem 2rem; max-width: 800px; margin: 0 auto 4rem auto; text-align: center;
}
.callback-header h3 { font-size: 1.8rem; color: var(--primary); margin-bottom: 0.5rem; }
.callback-header p { color: var(--text-muted); margin-bottom: 2rem; }
.callback-form { display: flex; flex-direction: column; gap: 1rem; max-width: 500px; margin: 0 auto; }
.callback-form .form-row { display: flex; gap: 1rem; }
.callback-form input {
    width: 100%; padding: 1rem 1.5rem; border-radius: 8px; background-color: var(--bg-color);
    border: 1px solid var(--border); color: var(--text-color); font-size: 1rem; outline: none; transition: var(--transition);
}
.callback-form input::placeholder { color: var(--text-muted); }
.callback-form input:focus { border-color: var(--primary); }
.btn-callback { background-color: var(--primary); color: #ffffff; border: none; padding: 1rem; border-radius: 8px; font-weight: 700; font-size: 1.1rem; cursor: pointer; transition: var(--transition); margin-top: 0.5rem; }
.btn-callback:hover { background-color: var(--secondary); transform: translateY(-2px); }
.callback-message { margin-top: 1rem; font-weight: 600; min-height: 20px; }

.legal-info { text-align: center; border-top: 1px solid var(--border); padding-top: 2rem; }
.legal-info p, .legal-link { color: var(--text-muted); font-size: 0.85rem; letter-spacing: 1px; }
.legal-link:hover { color: var(--primary); }

/* ==========================================================================
   9. PAGE MENTIONS LÉGALES
   ========================================================================== */
.legal-page-section { padding: 6rem 5%; background-color: var(--bg-color); }
.legal-page-container { max-width: 900px; margin: 0 auto; background-color: var(--card-bg); padding: 3rem 4rem; border-radius: 16px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
.legal-content h1 { font-size: 2.2rem; color: var(--primary); margin-bottom: 2.5rem; text-align: center; }
.legal-content h2 { font-size: 1.5rem; color: var(--text-color); margin-top: 3rem; margin-bottom: 1.2rem; border-bottom: 2px solid var(--border); padding-bottom: 0.5rem; }
.legal-content h3 { font-size: 1.1rem; color: var(--primary); margin-top: 2rem; margin-bottom: 0.8rem; }
.legal-content p, .legal-content li { font-size: 1rem; line-height: 1.7; margin-bottom: 1rem; color: var(--text-color); opacity: 0.9; }
.legal-content ul { margin-inline-start: 1.5rem; margin-bottom: 1.5rem; } /* Remplacement du margin-left pour le RTL */

/* ==========================================================================
   10. FOOTER & FLOTTANTS
   ========================================================================== */
.site-footer { background-color: var(--bg-color); border-top: 1px solid var(--border); text-align: center; padding: 1rem 5% 2rem 5%; color: var(--text-muted); font-size: 0.85rem; }

.whatsapp-float {
    position: fixed; width: 60px; height: 60px; bottom: 30px; inset-inline-end: 30px; /* S'adaptera au RTL */
    background-color: #25D366; color: #FFF; border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); z-index: 1000;
    display: flex; align-items: center; justify-content: center; transition: var(--transition);
}
.whatsapp-float:hover { background-color: #128C7E; transform: scale(1.1) translateY(-5px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4); }
.whatsapp-icon { width: 35px; height: 35px; fill: #ffffff; }

/* ==========================================================================
   11. MEDIA QUERIES (MOBILES)
   ========================================================================== */
@media (max-width: 768px) {
    .header-container { flex-direction: column; gap: 1rem; }
    .main-nav ul { gap: 1rem; }
    .hero-vitrine { padding: 4rem 5% 3rem 5%; }
    .hero-content { grid-template-columns: 1fr; }
    .hero-mark { display: none; }
    .hero-subtitle { font-size: 1rem; letter-spacing: 2px; }
    .hero-description p { font-size: 1.1rem; text-align: start; } /* Remplacement du left par start */
    .contact-grid { grid-template-columns: 1fr; }
    .legal-page-container { padding: 2rem; }
    .legal-content h1 { font-size: 1.8rem; }
    .whatsapp-float { width: 50px; height: 50px; bottom: 20px; inset-inline-end: 20px; }
    .whatsapp-icon { width: 30px; height: 30px; }
    .carousel-header h2 { font-size: 2.2rem; }
    .carousel-prev, .carousel-next { display: none; }
    .modal-body { flex-direction: column; gap: 1.5rem;}
    .modal-image-col, .modal-info-col { width: 100%; }
    .modal-content { padding: 1.5rem; margin-top: 20px; }
    .modal-main-image-container { height: 250px; }
    .modal-info-col h2 { font-size: 1.8rem; }
}
@media (max-width: 600px) {
    .newsletter-form { flex-direction: column; }
    .callback-form .form-row { flex-direction: column; }
}
/* ==========================================================================
   12. PAGE PANIER DE DEVIS
   ========================================================================== */
.cart-page-section { padding: 4rem 5%; background-color: var(--bg-color); min-height: 60vh; }
.cart-page-container { max-width: 1200px; margin: 0 auto; background-color: var(--card-bg); padding: 3rem; border-radius: 16px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }

.cart-header { text-align: center; margin-bottom: 3rem; }
.cart-header h1 { color: var(--primary); font-size: 2.2rem; margin-bottom: 0.5rem; }

/* Tableau du panier */
.cart-table-wrapper { overflow-x: auto; margin-bottom: 3rem; }
.cart-table { width: 100%; border-collapse: collapse; text-align: start; min-width: 700px; }
.cart-table th { padding: 1rem; border-bottom: 2px solid var(--border); color: var(--text-muted); font-weight: 600; text-transform: uppercase; font-size: 0.85rem; }
.cart-table td { padding: 1.5rem 1rem; border-bottom: 1px solid var(--border); vertical-align: middle; }

.cart-item-info { display: flex; align-items: center; gap: 1rem; }
.cart-item-img { width: 70px; height: 70px; object-fit: contain; border-radius: 8px; border: 1px solid var(--border); padding: 5px; background: #fff; }
.cart-item-title { font-weight: 600; color: var(--text-color); margin-bottom: 4px; }
.cart-item-category { font-size: 0.85rem; color: var(--primary); }

/* Contrôle des quantités */
.qty-controls { display: flex; align-items: center; gap: 10px; }
.qty-btn { background: var(--bg-color); border: 1px solid var(--border); color: var(--text-color); width: 32px; height: 32px; border-radius: 50%; font-weight: bold; cursor: pointer; transition: var(--transition); display: flex; align-items: center; justify-content: center; }
.qty-btn:hover { background: var(--primary); color: white; border-color: var(--primary); }
.qty-input { width: 50px; text-align: center; border: 1px solid var(--border); border-radius: 6px; padding: 6px; font-weight: 600; }

/* Bouton Supprimer */
.btn-remove { background: none; border: none; color: #dc3545; cursor: pointer; padding: 8px; border-radius: 50%; transition: var(--transition); display: inline-flex; }
.btn-remove:hover { background: #ffe6e6; }

/* Formulaire de validation */
.quote-form-section { background: rgba(0,0,0,0.02); padding: 2rem; border-radius: 12px; border: 1px solid var(--border); }
[data-theme="dark"] .quote-form-section { background: rgba(255,255,255,0.02); }
.quote-form-section h3 { margin-bottom: 1.5rem; color: var(--text-color); }

.client-type-switch { display: flex; gap: 2rem; margin-bottom: 2rem; }
.radio-label { display: flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1.5rem; }
.form-group { display: flex; flex-direction: column; gap: 8px; }
.form-group.full-width { grid-column: 1 / -1; }
.form-group label { font-size: 0.9rem; font-weight: 600; color: var(--text-muted); }
.form-control { padding: 12px 15px; border: 1px solid var(--border); border-radius: 8px; background: var(--card-bg); color: var(--text-color); font-family: inherit; font-size: 1rem; transition: var(--transition); }
.form-control:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px rgba(0, 135, 81, 0.1); }

/* État vide */
.cart-empty { text-align: center; padding: 3rem 0; display: none; }
.cart-empty-icon { width: 80px; height: 80px; margin-bottom: 1.5rem; opacity: 0.3; }

@media (max-width: 768px) {
    .form-grid { grid-template-columns: 1fr; }
    .cart-page-container { padding: 1.5rem; }
}

/* ==========================================
   PAGE DÉTAIL PRODUIT (SEO & Partage)
   ========================================== */

.product-detail-container {
    max-width: 1200px;
    margin: 60px auto;
    padding: 0 20px;
}

/* Fil d'Ariane (Breadcrumb) */
.breadcrumb {
    font-size: 0.9rem;
    color: var(--text-muted, #888);
    margin-bottom: 30px;
    display: flex;
    gap: 8px;
    align-items: center;
}
.breadcrumb a {
    color: var(--primary);
    text-decoration: none;
    transition: color 0.3s ease;
}
.breadcrumb a:hover {
    color: var(--text-color);
}

/* Layout 2 colonnes (Desktop) */
.product-detail-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

/* Colonne Gauche : Images */
.product-detail-images {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.detail-main-image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: var(--photo-mat);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
}

.detail-main-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    padding: 10px;
    transition: transform 0.4s ease;
}

.detail-main-image-wrapper:hover .detail-main-img {
    transform: scale(1.12);
}

.detail-thumbnails {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.detail-thumb {
    width: 80px;
    height: 80px;
    object-fit: contain;
    border-radius: 8px;
    cursor: pointer;
    border: 2px solid transparent;
    opacity: 0.6;
    transition: all 0.3s ease;
    background-color: var(--photo-mat);
    padding: 5px;
}

.detail-thumb:hover, .detail-thumb.active {
    opacity: 1;
    border-color: var(--primary);
}

/* Colonne Droite : Infos */
.product-detail-info {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.detail-category-tag {
    align-self: flex-start;
    background-color: rgba(0, 135, 81, 0.1);
    color: var(--primary);
    padding: 6px 16px;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-title {
    font-size: 2.5rem;
    margin: 0;
    color: var(--text-color);
    line-height: 1.2;
}

.detail-reference {
    font-size: 0.9rem;
    color: var(--text-muted);
    font-family: monospace;
    background: var(--card-bg);
    padding: 4px 8px;
    border-radius: 4px;
    align-self: flex-start;
}

.detail-divider {
    border: 0;
    height: 1px;
    background-color: var(--border);
    margin: 15px 0;
}

.detail-description h3 {
    font-size: 1.3rem;
    margin-bottom: 15px;
    color: var(--text-color);
}

.detail-description p {
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 15px;
    font-size: 1.05rem;
}

.detail-action-box {
    background-color: var(--card-bg);
    padding: 30px;
    border-radius: 12px;
    margin-top: 20px;
    border: 1px solid var(--border);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.btn-primary-large {
    width: 100%;
    padding: 18px;
    font-size: 1.1rem;
    font-weight: bold;
    background-color: var(--primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.1s;
    text-align: center;
    display: inline-block;
    text-decoration: none;
}

.btn-primary-large:hover {
    background-color: var(--secondary);
    color: #fff;
}

.btn-primary-large:active {
    transform: scale(0.98);
}

/* Utilisé à côté de .btn-primary-large (ex: "Continuer de parcourir") -
   n'avait jamais eu de style, rendu en lien bleu souligné par défaut. */
.btn-secondary {
    padding: 18px 24px;
    font-size: 1.1rem;
    font-weight: bold;
    background-color: transparent;
    color: var(--primary);
    border: 2px solid var(--primary);
    border-radius: 8px;
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
    display: inline-block;
    text-decoration: none;
}
.btn-secondary:hover { background-color: rgba(0, 135, 81, 0.1); }

.product-reassurance {
    margin-top: 25px;
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
    font-size: 0.95rem;
    color: var(--text-muted);
    font-weight: 600;
}
.product-reassurance p { display: flex; align-items: center; gap: 8px; }
.product-reassurance svg { color: var(--primary); flex-shrink: 0; }

/* Responsive Mobile */
@media (max-width: 900px) {
    .product-detail-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .detail-title {
        font-size: 2rem;
    }
}