/**
 * ECOBOIS TRANSFORMATION — Design Professionnel v4.1
 * Sobre · Lisible · Textes augmentés
 * Police : Inter (Google Fonts)
 */

 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

 /* ─── VARIABLES ─────────────────────────────────────── */
 :root {
     --vert:       #225522;
     --vert-med:   #2e7d44;
     --vert-pale:  #e8f2ea;
     --bois:       #8b6914;
     --blanc:      #ffffff;
     --gris-fond:  #f8f8f6;
     --gris-bord:  #dde3de;
     --texte:      #1a1a1a;
     --texte-2:    #4a4a4a;
     --texte-3:    #777;
     --ombre:      0 2px 8px rgba(0,0,0,0.08);
     --ombre-h:    0 6px 20px rgba(0,0,0,0.12);
     --r:          6px;
 }
 
 /* ─── BASE ──────────────────────────────────────────── */
 *, *::before, *::after { box-sizing: border-box; }
 html { scroll-behavior: smooth; }
 
 body {
     font-family: 'Inter', system-ui, sans-serif;
     font-size: 18px;
     font-weight: 400;
     line-height: 1.75;
     color: var(--texte);
     background: var(--gris-fond);
     padding-top: 72px;
     -webkit-font-smoothing: antialiased;
 }
 
 /* Filigrane logo */
 body::before {
     content: '';
     position: fixed;
     inset: 0;
     background-image: url('../images/logo.png');
     background-repeat: repeat;
     background-size: 280px;
     opacity: 0.025;
     pointer-events: none;
     z-index: 0;
 }
 .main-content { position: relative; z-index: 1; }
 
 h1, h2, h3, h4, h5, h6 {
     font-family: 'Inter', system-ui, sans-serif;
     font-weight: 700;
     line-height: 1.3;
     color: var(--texte);
 }
 p { color: var(--texte-2); margin-bottom: 0.9rem; font-size: 1rem; }
 a { color: var(--vert); transition: color 0.2s; }
 a:hover { color: var(--vert-med); }
 
 /* ─── NAVBAR ────────────────────────────────────────── */
 .header {
     background: var(--vert);
     border-bottom: 3px solid #1a4019;
     box-shadow: 0 2px 12px rgba(0,0,0,0.15);
     z-index: 1030;
     position: relative;
     /* overflow: hidden retire d'ici : il coupait le menu deroulant du profil.
        Le fond flouté est maintenant confiné dans .header-mask ci-dessous. */
 }
 /* Image du masque en fond, répétée sur toute la largeur et floutée */
 /* Pour la rendre plus ou moins visible : change juste --header-mask-opacity ci-dessous (0 = invisible, 1 = plein contraste) */
 .header {
     --header-mask-opacity: 0.28;
 }
 /* Calque dédié pour le fond flouté : lui seul est "overflow:hidden",
    ainsi le menu déroulant du profil (enfant du header) n'est plus rogné. */
 .header-mask {
     position: absolute;
     inset: 0;
     overflow: hidden;
     pointer-events: none;
 }
 .header-mask::before {
     content: '';
     position: absolute;
     inset: -10px;
     background-image: url('../images/header/masque-header-bg.png');
     background-repeat: repeat-x;
     background-size: 220px auto;
     background-position: left center;
     filter: blur(3px);
     opacity: var(--header-mask-opacity);
 }
 /* Voile vert par-dessus pour garder le texte lisible */
 .header-mask::after {
     content: '';
     position: absolute;
     inset: 0;
     background: rgba(34,85,34,0.72);
 }
 .header .navbar { position: relative; z-index: 2; }
 .header .dropdown-menu { z-index: 1045; }
 .navbar { padding: 0.55rem 0; }
 
 /* Logo */
 .header-logo-wrap {
     width: 62px; height: 62px;
     min-width: 62px; min-height: 62px;
     border-radius: 50% !important;
     overflow: hidden;
     background: rgba(255,255,255,0.15);
     border: 2px solid rgba(255,255,255,0.3);
     flex-shrink: 0;
 }
 .header-logo { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
 
 /* Nom + slogan */
 .brand-block { text-decoration: none !important; }
 .brand-text { display: flex; flex-direction: column; line-height: 1; gap: 2px; }
 .brand-block .brand-name {
     font-size: 1.2rem;
     font-weight: 800;
     color: #fff;
     letter-spacing: 0.04em;
     line-height: 1.2;
     white-space: nowrap;
 }
 .brand-block .brand-slogan {
     font-size: 0.65rem;
     font-weight: 400;
     color: rgba(255,255,255,0.78);
     letter-spacing: 0.03em;
     line-height: 1.3;
     white-space: nowrap;
 }
 
 /* Nav links */
 .nav-link {
     font-size: 0.98rem;
     font-weight: 600;
     color: rgba(255,255,255,0.92) !important;
     padding: 0.3rem 0.6rem !important;
     border-radius: var(--r);
     white-space: nowrap;
     transition: background 0.2s, color 0.2s;
 }
 .nav-link:hover, .nav-link.active {
     background: rgba(255,255,255,0.12);
     color: #fff !important;
 }
 @media (min-width: 992px) { .navbar-nav { flex-wrap: nowrap !important; } }
 
 /* ─── HERO BANNER ───────────────────────────────────── */
 .hero-banner {
     background: var(--vert);
     color: #fff;
     padding: 3.5rem 0 4rem;
     position: relative;
     overflow: hidden;
 }
 .hero-banner::before {
     content: '';
     position: absolute; inset: 0;
     background: url('../images/hero-bois.jpg') center/cover no-repeat;
     opacity: 0.12;
 }
 .hero-banner .container { position: relative; z-index: 1; }
 .hero-banner h1 {
     font-size: clamp(2rem, 4vw, 3rem);
     font-weight: 700;
     color: #fff;
     line-height: 1.25;
     margin-bottom: 0.75rem;
 }
 .hero-banner .lead { font-size: 1.15rem; font-weight: 400; color: rgba(255,255,255,0.88); }
 .hero-banner p.lead, .hero-banner .lead { color: rgba(255,255,255,0.88) !important; }
 
 /* ─── SECTIONS ──────────────────────────────────────── */
 .section { padding: 4rem 0; }
 .section-alt { background: var(--vert-pale); }
 
 .section-title {
     font-size: clamp(1.6rem, 2.5vw, 2.2rem);
     font-weight: 700;
     color: var(--vert);
     margin-bottom: 0.4rem;
 }
 .section-title + * { margin-top: 0; }
 .section-divider {
     width: 40px; height: 3px;
     background: var(--vert);
     border-radius: 2px;
     margin: 0.6rem 0 1.8rem;
     display: block;
 }
 .section-divider.center { margin-left: auto; margin-right: auto; }
 .section-subtitle { color: var(--texte-3); font-size: 1.05rem; margin-bottom: 2.5rem; }
 
 /* ─── CARTES ────────────────────────────────────────── */
 .card-ecobois {
     border: 1px solid var(--gris-bord);
     border-radius: var(--r);
     box-shadow: var(--ombre);
     background: var(--blanc);
     transition: transform 0.25s, box-shadow 0.25s;
     height: 100%;
 }
 .card-ecobois:hover { transform: translateY(-4px); box-shadow: var(--ombre-h); }
 /* Carte "Design gravure gabonaise" : masque gabonais en fond, uniquement sur cette carte */
 .card-gravure-bg {
     position: relative;
     overflow: hidden;
     background: var(--vert);
     border-color: var(--vert);
 }
 .card-gravure-bg::before {
     content: '';
     position: absolute;
     inset: 0;
     background-image: url('../images/header/masque-header-bg.png');
     background-repeat: no-repeat;
     background-position: center;
     background-size: cover;
     opacity: 0.4;
 }
 .card-gravure-bg::after {
     content: '';
     position: absolute;
     inset: 0;
     background: rgba(20,50,20,0.55);
 }
 .card-gravure-bg > * { position: relative; z-index: 1; }
 .card-gravure-bg h6, .card-gravure-bg p, .card-gravure-bg .text-ecobois { color: #fff !important; }
 .card-ecobois .card-icon {
     width: 52px; height: 52px;
     background: var(--vert);
     color: #fff;
     border-radius: var(--r);
     display: flex; align-items: center; justify-content: center;
     font-size: 1.4rem;
     margin-bottom: 1rem;
     flex-shrink: 0;
 }
 .card-title { font-size: 1.05rem; font-weight: 700; color: var(--texte); }
 .card-text { font-size: 0.97rem; }
 .text-ecobois { color: var(--vert) !important; }
 .bg-ecobois-light { background-color: var(--vert-pale) !important; }
 
 /* ─── BOUTONS ───────────────────────────────────────── */
 .btn-ecobois {
     background: var(--vert);
     border: 2px solid var(--vert);
     color: #fff !important;
     font-weight: 600;
     font-size: 0.97rem;
     padding: 0.65rem 1.6rem;
     border-radius: var(--r);
     transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
     letter-spacing: 0.02em;
 }
 .btn-ecobois:hover {
     background: var(--vert-med);
     border-color: var(--vert-med);
     color: #fff !important;
     transform: translateY(-1px);
     box-shadow: 0 4px 12px rgba(34,85,34,0.25);
 }
 .btn-ecobois:active { transform: translateY(0); }
 
 .btn-ecobois-outline {
     background: transparent;
     border: 2px solid var(--vert);
     color: var(--vert) !important;
     font-weight: 600;
     font-size: 0.97rem;
     padding: 0.65rem 1.6rem;
     border-radius: var(--r);
     transition: all 0.2s;
 }
 .btn-ecobois-outline:hover {
     background: var(--vert);
     color: #fff !important;
     transform: translateY(-1px);
 }
 
 /* ─── PRODUITS ──────────────────────────────────────── */
 .product-card {
     border: 1px solid var(--gris-bord);
     border-radius: var(--r);
     overflow: hidden;
     box-shadow: var(--ombre);
     background: var(--blanc);
     transition: transform 0.25s, box-shadow 0.25s;
     height: 100%;
 }
 .product-card:hover {
     transform: translateY(-4px);
     box-shadow: var(--ombre-h);
     border-color: var(--vert);
 }
 .product-card .card-img-top { height: 220px; object-fit: cover; background: var(--vert-pale); }
 .product-card .price-badge {
     display: inline-block;
     background: var(--vert);
     color: #fff;
     font-weight: 700;
     font-size: 1rem;
     padding: 0.25rem 0.75rem;
     border-radius: var(--r);
 }
 .product-card .card-title { font-size: 1rem; font-weight: 700; }
 .product-card .card-text  { font-size: 0.95rem; }
 
 /* Filtres */
 .filter-btn {
     border-radius: var(--r);
     border: 1.5px solid var(--gris-bord);
     font-size: 0.92rem;
     font-weight: 500;
     color: var(--texte-2);
     padding: 0.42rem 1.1rem;
     margin: 0.2rem;
     background: var(--blanc);
     transition: all 0.2s;
 }
 .filter-btn:hover { border-color: var(--vert); color: var(--vert); }
 .filter-btn.active { background: var(--vert); color: #fff; border-color: var(--vert); }
 
 /* Collections */
 .btn-collection { transition: box-shadow 0.2s, transform 0.2s !important; border-radius: 4px !important; }
 .btn-collection:hover { transform: translateY(-3px) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.25) !important; }
 
 /* ─── PROCESSUS ─────────────────────────────────────── */
 .process-step { text-align: center; padding: 1.5rem 1rem; }
 .process-step .step-number {
     width: 52px; height: 52px;
     background: var(--vert);
     color: #fff;
     border-radius: 50%;
     display: inline-flex; align-items: center; justify-content: center;
     font-size: 1.2rem;
     font-weight: 700;
     margin-bottom: 1rem;
 }
 
 /* ─── IMPACT STATS ──────────────────────────────────── */
 .impact-stat {
     text-align: center;
     padding: 2rem 1rem;
     background: var(--blanc);
     border: 1px solid var(--gris-bord);
     border-radius: var(--r);
     box-shadow: var(--ombre);
     transition: transform 0.25s;
 }
 .impact-stat:hover { transform: translateY(-3px); }
 .impact-stat .stat-value {
     font-size: 2.8rem;
     font-weight: 700;
     color: var(--vert);
     line-height: 1;
     display: block;
 }
 .impact-stat .stat-label { color: var(--texte-2); font-size: 1rem; font-weight: 500; margin-top: 0.4rem; }
 
 /* ─── FORMULAIRES ───────────────────────────────────── */
 .form-control, .form-select {
     font-size: 1rem;
     border: 1.5px solid var(--gris-bord);
     border-radius: var(--r);
     padding: 0.7rem 0.9rem;
     background: var(--blanc);
     color: var(--texte);
     transition: border-color 0.2s, box-shadow 0.2s;
 }
 .form-control:focus, .form-select:focus {
     border-color: var(--vert);
     box-shadow: 0 0 0 3px rgba(34,85,34,0.1);
     outline: none;
 }
 .form-label { font-size: 1rem; font-weight: 600; color: var(--texte); margin-bottom: 0.35rem; }
 
 /* ─── CAROUSEL ──────────────────────────────────────── */
 #carouselAccueil { width: 100%; }
 #carouselAccueil .carousel-control-prev,
 #carouselAccueil .carousel-control-next {
     width: 48px; height: 48px;
     top: 50%; transform: translateY(-50%);
     background: rgba(34,85,34,0.75);
     border-radius: 50%;
     opacity: 1; margin: 0 10px;
     transition: background 0.2s;
 }
 #carouselAccueil .carousel-control-prev:hover,
 #carouselAccueil .carousel-control-next:hover { background: var(--vert); }
 #carouselAccueil .carousel-indicators [data-bs-slide-to] {
     width: 10px; height: 10px;
     border-radius: 50%;
     background: rgba(255,255,255,0.5);
     border: none; margin: 0 3px;
 }
 #carouselAccueil .carousel-indicators .active { background: #fff; }
 
 /* ─── PANIER FLOTTANT ───────────────────────────────── */
 .floating-cart {
     position: fixed;
     right: 1rem; bottom: 1rem;
     width: min(360px, calc(100vw - 2rem));
     max-height: calc(100vh - 2rem);
     display: flex;
     flex-direction: column;
     z-index: 1040;
     border-radius: 8px;
     overflow: hidden;
     box-shadow: 0 8px 40px rgba(0,0,0,0.20);
     border: none;
 }
 .pmode-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,0.10); }
 .floating-cart .cart-scroll, .floating-cart .history-scroll { max-height: 220px; overflow-y: auto; }
 .payment-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
 .payment-option {
     border: 1.5px solid var(--gris-bord);
     border-radius: var(--r);
     padding: 0.4rem 0.55rem;
     cursor: pointer;
     font-size: 0.95rem;
     display: flex; align-items: center; gap: 0.35rem;
     background: var(--blanc);
     transition: all 0.2s;
     font-weight: 500;
 }
 .payment-option:hover { border-color: var(--vert); }
 .payment-option.is-selected {
     border-color: var(--vert);
     box-shadow: 0 0 0 2px rgba(34,85,34,0.15);
     background: var(--vert-pale);
 }
 .payment-option i { color: var(--vert); font-size: 1rem; }
 .cart-totals {
     background: var(--gris-fond);
     border: 1px solid var(--gris-bord);
     border-radius: var(--r);
     padding: 0.55rem 0.7rem;
 }
 
 /* ─── FOOTER ────────────────────────────────────────── */
 .footer { background: var(--vert); color: #fff; border-top: 3px solid #1a4019; padding: 1.2rem 0 0; }
 .footer-brand { font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: 0.3rem; }
 .footer h6 {
     font-size: 0.98rem;
     font-weight: 700;
     letter-spacing: 0.1em;
     text-transform: uppercase;
     color: rgba(255,255,255,0.6);
     margin-bottom: 1rem;
 }
 .footer p, .footer li, .footer a {
     font-size: 0.80rem;
     color: rgba(255,255,255,0.78) !important;
     text-decoration: none;
 }
 .footer a:hover { color: #fff !important; }
 .social-links a {
     display: inline-flex; align-items: center; justify-content: center;
     width: 38px; height: 38px;
     background: rgba(255,255,255,0.1);
     border: 1px solid rgba(255,255,255,0.2);
     color: rgba(255,255,255,0.85) !important;
     border-radius: 50%;
     margin-right: 0.4rem;
     transition: all 0.2s;
 }
 .social-links a:hover { background: rgba(255,255,255,0.22); color: #fff !important; transform: translateY(-2px); }
 .footer-bottom { border-top: 1px solid rgba(255,255,255,0.1) !important; }
 .footer-bottom p { font-size: 0.85rem !important; color: rgba(255,255,255,0.45) !important; }
 
 /* ─── ANIMATIONS ────────────────────────────────────── */
 .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.55s ease, transform 0.55s ease; }
 .reveal.visible { opacity: 1; transform: translateY(0); }
 
 /* ─── UTILITAIRES ───────────────────────────────────── */
 .bg-ecobois-light      { background-color: var(--vert-pale); }
 .bg-ecobois-vert-fonce { background-color: var(--vert); }
 .text-ecobois          { color: var(--vert); }
 .max-w-800             { max-width: 800px; margin-left: auto; margin-right: auto; }
 .badge-ecobois {
     background: var(--vert); color: #fff;
     font-size: 0.75rem; font-weight: 700;
     letter-spacing: 0.08em; text-transform: uppercase;
     padding: 0.3rem 0.8rem; border-radius: 2px;
 }
 
 /* ─── RESPONSIVE ────────────────────────────────────── */
 @media (max-width: 991.98px) {
     body { padding-top: 66px; }
     .header-logo-wrap { width: 44px; height: 44px; min-width: 44px; min-height: 44px; border-radius: 50% !important; }
     .brand-block .brand-name { font-size: 1.05rem; }
     .hero-banner { padding: 2.5rem 0 3rem; }
     .section { padding: 3rem 0; }
     .floating-cart { position: static; width: 100%; max-width: 720px; margin: 0 auto 2rem; }
 }
 @media (max-width: 575.98px) {
     .hero-banner h1 { font-size: 1.75rem; }
     .section-title  { font-size: 1.45rem; }
     .impact-stat .stat-value { font-size: 2.2rem; }
 }