{{-- ===== FOOTER ===== --}}
<footer class="gama-footer">

    {{-- Bande certifications --}}
    <div class="gama-footer-certs">
        <div class="gama-footer-certs-inner">
            @foreach([
                ['FSC',      __('site.footer_fsc'),    '#1a7a4a'],
                ['ISO 9001', __('site.footer_iso'),    '#2563eb'],
                ['PEFC',     __('site.footer_pefc'),   '#16a34a'],
                ['CE',       __('site.footer_ce'),     '#dc2626'],
                ['100% TN',  __('site.footer_fab_tn'), '#d4a843'],
            ] as [$badge, $desc, $color])
                <div class="gama-footer-cert-item">
                    <div class="gama-footer-cert-badge" style="border-color:{{ $color }};color:{{ $color }};">{{ $badge }}</div>
                    <span class="gama-footer-cert-desc">{{ $desc }}</span>
                </div>
            @endforeach
        </div>
    </div>

    {{-- Corps du footer --}}
    <div class="gama-footer-body">
        <div class="gama-footer-grid">

            {{-- Colonne 1 : Marque --}}
            <div class="gama-footer-brand">
                <a href="{{ route('home') }}" class="gama-footer-logo">
                    <div class="gama-footer-logo-icon">G</div>
                    <div>
                        <span class="gama-logo-white">GAMA</span>
                        <span class="gama-logo-gold"> SAC</span>
                        <p class="gama-logo-subtext">Fabricant · Tunisie</p>
                    </div>
                </a>
                <p class="gama-footer-brand-desc">{{ __('site.footer_desc') }}</p>

                <div class="gama-footer-kpis">
                    @foreach([['50K','sacs/jour'],['2000m2','atelier'],['10+','ans exp.'],['500+','clients']] as [$num,$label])
                        <div class="gama-footer-kpi">
                            <div class="gama-footer-kpi-num">{{ $num }}</div>
                            <div class="gama-footer-kpi-label">{{ $label }}</div>
                        </div>
                    @endforeach
                </div>

                <div class="gama-footer-socials">
                    <a href="https://facebook.com/gamasac" target="_blank" class="gama-footer-social" title="Facebook">
                        <svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24"><path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"/></svg>
                    </a>
                    <a href="https://instagram.com/gamasac" target="_blank" class="gama-footer-social" title="Instagram">
                        <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>
                    </a>
<a href="https://tiktok.com/@gamasac" target="_blank" class="gama-footer-social" title="TikTok">
    <svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24">
        <path d="M19.59 6.69a4.83 4.83 0 01-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 01-2.88 2.5 2.89 2.89 0 01-2.89-2.89 2.89 2.89 0 012.89-2.89c.28 0 .54.04.79.1V9.01a6.27 6.27 0 00-.79-.05 6.34 6.34 0 00-6.34 6.34 6.34 6.34 0 006.34 6.34 6.34 6.34 0 006.33-6.34V8.69a8.18 8.18 0 004.78 1.52V6.75a4.85 4.85 0 01-1.01-.06z"/>
    </svg>
</a>
                    <a href="https://linkedin.com/company/gamasac" target="_blank" class="gama-footer-social" title="LinkedIn">
                        <svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24"><path d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"/><circle cx="4" cy="4" r="2"/></svg>
                    </a>
                    <a href="https://wa.me/+21600000000" target="_blank" class="gama-footer-social gama-footer-wa" title="WhatsApp">
                        <svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347zM12 0C5.373 0 0 5.373 0 12c0 2.127.558 4.122 1.532 5.85L.057 23.516a.5.5 0 00.608.61l5.788-1.517A11.96 11.96 0 0012 24c6.627 0 12-5.373 12-12S18.627 0 12 0z"/></svg>
                    </a>
                </div>
            </div>

            {{-- Colonne 2 : Navigation --}}
            <div class="gama-footer-col">
                <h4 class="gama-footer-col-title">{{ __('site.footer_pages') }}</h4>
                <ul class="gama-footer-links">
                    @foreach([
                        ['home',        __('site.nav_home')],
                        ['products',    __('site.nav_catalogue')],
                        ['fabrication', __('site.nav_fabrication')],
                        ['usine',       __('site.nav_usine')],
                        ['quote',       __('site.nav_devis')],
                        ['blog',        __('site.nav_blog')],
                        ['contact',     __('site.nav_contact')],
                    ] as [$routeName, $label])
                        <li>
                            <a href="{{ route($routeName) }}" class="gama-footer-link">
                                <svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 5l7 7-7 7"/></svg>
                                {{ $label }}
                            </a>
                        </li>
                    @endforeach
                </ul>
            </div>

            {{-- Colonne 3 : Gammes --}}
            <div class="gama-footer-col">
                <h4 class="gama-footer-col-title">{{ __('site.footer_gammes') }}</h4>
                <ul class="gama-footer-links">
                    @foreach([
                        ['#cat-kraft',       __('site.gamme_kraft')],
                        ['#cat-blanc',       __('site.gamme_blanc')],
                        ['#cat-alimentaire', __('site.gamme_alim')],
                        ['#cat-luxe',        'Luxe'],
                        ['#cat-custom',      __('site.gamme_sur_mesure')],
                    ] as [$anchor, $label])
                        <li>
                            <a href="{{ route('products') }}{{ $anchor }}" class="gama-footer-link">
                                <svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 5l7 7-7 7"/></svg>
                                {{ $label }}
                            </a>
                        </li>
                    @endforeach
                </ul>

                <h4 class="gama-footer-col-title" style="margin-top:24px;">{{ __('site.trust_devis') }}</h4>
                <ul class="gama-footer-specs">
                    <li>{{ __('site.footer_delais1') }}</li>
                    <li>{{ __('site.footer_delais2') }}</li>
                    <li>{{ __('site.footer_imp') }}</li>
                    <li>{{ __('site.trust_livraison') }}</li>
                </ul>
            </div>

            {{-- Colonne 4 : Contact --}}
            <div class="gama-footer-col">
                <h4 class="gama-footer-col-title">{{ __('site.footer_contact') }}</h4>
                <ul class="gama-footer-contact">
                    <li>
                        <svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                        <span>{{ __('site.contact_adresse') }}</span>
                    </li>
                    <li>
                        <svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg>
                        <a href="tel:+21600000000">+216 73 250 211</a>
                    </li>
                    <li>
                        <svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
                        <a href="mailto:contact@gamasac.tn">contact@gamasac.tn</a>
                    </li>
                </ul>

                <div class="gama-footer-hours">
                    <h5>{{ __('site.contact_horaires') }}</h5>
                    <div class="gama-footer-hours-grid">
                        <span>Lun - Ven</span><span><strong>8h00 - 18h00</strong></span>
                        <span>Samedi</span><span><strong>9h00 - 13h00</strong></span>
                        <span>Dimanche</span><span class="gama-hours-closed"><strong>Fermé</strong></span>
                    </div>
                </div>

                <a href="{{ route('quote') }}" class="gama-footer-cta">
                    {{ __('site.footer_devis') }}
                </a>
            </div>
        </div>
    </div>

    {{-- Bas de page --}}
    <div class="gama-footer-bottom">
        <div class="gama-footer-bottom-inner">
            <p>&copy; {{ date('Y') }} <strong>GAMA SAC</strong>. {{ __('site.footer_copy') }}</p>
            <div class="gama-footer-bottom-links">
                <a href="#">{{ __('site.footer_mentions') }}</a>
                <span>&middot;</span>
                <a href="#">{{ __('site.footer_confid') }}</a>
                <span>&middot;</span>
                <a href="#">{{ __('site.footer_cgv') }}</a>
            </div>
            <p class="gama-footer-made">Fabrication industrielle tunisienne</p>
        </div>
    </div>
</footer>

<style>
/* RESET AGRESSIF POUR ISOLER LE FOOTER DU RESTE DU SITE */
.gama-footer,
.gama-footer *,
.gama-footer *::before,
.gama-footer *::after {
    box-sizing: border-box !important;
    margin: 0;
    padding: 0;
}

.gama-footer { 
    background: #0f172a; 
    color: #94a3b8; 
    font-family: inherit; 
    overflow: hidden;
    width: 100%;
    display: block;
}

.gama-footer-certs { background: #1e293b; border-bottom: 1px solid #334155; padding: 18px 24px; }
.gama-footer-certs-inner { max-width: 1280px; margin: 0 auto; display: flex !important; flex-wrap: wrap !important; align-items: center; justify-content: center; gap: 24px; }
.gama-footer-cert-item { display: flex !important; align-items: center; gap: 8px; }
.gama-footer-cert-badge { border: 1.5px solid; border-radius: 6px; padding: 3px 10px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.05em; white-space: nowrap; }
.gama-footer-cert-desc { font-size: 0.72rem; color: #64748b; white-space: nowrap; }

.gama-footer-body { max-width: 1280px; margin: 0 auto; padding: 56px 24px 40px; }
.gama-footer-grid { display: grid !important; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 48px; }

.gama-footer-brand, .gama-footer-col {
    min-width: 0 !important; /* Empêche le texte de détruire la grille */
}

.gama-footer-logo { display: flex !important; align-items: center; gap: 10px; text-decoration: none; margin-bottom: 16px; }
.gama-footer-logo-icon { width: 36px; height: 36px; background: #1a7a4a; border-radius: 8px; display: flex !important; align-items: center; justify-content: center; color: #fff; font-weight: 900; font-size: 1rem; flex-shrink: 0; }

.gama-logo-white { color: #fff; font-weight: 900; font-size: 1.2rem; }
.gama-logo-gold { color: #d4a843; font-weight: 900; font-size: 1.2rem; }
.gama-logo-subtext { color: #9ca3af; font-size: 0.65rem; line-height: 1.2; margin-top: 1px; }

.gama-footer-brand-desc { font-size: 0.82rem; line-height: 1.7; color: #64748b; margin-bottom: 20px; }

.gama-footer-kpis { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 20px; padding: 14px; background: #1e293b; border-radius: 10px; }
.gama-footer-kpi { text-align: center; }
.gama-footer-kpi-num { font-size: 1rem; font-weight: 900; color: #d4a843; }
.gama-footer-kpi-label { font-size: 0.62rem; color: #64748b; margin-top: 2px; }

.gama-footer-socials { display: flex !important; gap: 8px; }
.gama-footer-social { width: 34px; height: 34px; border-radius: 8px; background: #1e293b; color: #64748b; display: flex !important; align-items: center; justify-content: center; text-decoration: none; transition: all 0.2s; border: 1px solid #334155; }
.gama-footer-social:hover { background: #1a7a4a; color: #fff; border-color: #1a7a4a; }
.gama-footer-wa:hover { background: #25D366 !important; border-color: #25D366 !important; }

.gama-footer-col-title { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: #e2e8f0; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid #1e293b; }
.gama-footer-links { list-style: none !important; display: flex !important; flex-direction: column !important; gap: 6px; }
.gama-footer-link { display: flex !important; align-items: center; gap: 6px; font-size: 0.82rem; color: #64748b; text-decoration: none; transition: color 0.15s; padding: 2px 0; white-space: nowrap; }
.gama-footer-link:hover { color: #d4a843; }
.gama-footer-link svg { flex-shrink: 0; }

.gama-footer-specs { list-style: none !important; margin-top: 10px; display: flex !important; flex-direction: column !important; gap: 6px; }
.gama-footer-specs li { font-size: 0.78rem; color: #64748b; }

.gama-footer-contact { list-style: none !important; margin-bottom: 20px; display: flex !important; flex-direction: column !important; gap: 12px; }
.gama-footer-contact li { display: flex !important; align-items: flex-start; gap: 10px; font-size: 0.82rem; color: #64748b; }
.gama-footer-contact svg { color: #1a7a4a; margin-top: 1px; flex-shrink: 0; }
.gama-footer-contact a { color: #64748b; text-decoration: none; transition: color 0.15s; word-break: break-word; }
.gama-footer-contact a:hover { color: #d4a843; }

.gama-footer-hours { background: #1e293b; border-radius: 10px; padding: 14px; margin-bottom: 16px; }
.gama-footer-hours h5 { font-size: 0.72rem; font-weight: 700; color: #e2e8f0; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }
.gama-footer-hours-grid { display: grid !important; grid-template-columns: auto 1fr; gap: 5px 16px; font-size: 0.78rem; color: #64748b; }
.gama-footer-hours-grid strong { color: #94a3b8; }
.gama-hours-closed { color: #ef4444; }

.gama-footer-cta { display: block; background: #d4a843; color: #fff; font-size: 0.82rem; font-weight: 800; padding: 11px 16px; border-radius: 9px; text-decoration: none; text-align: center; transition: background 0.2s; }
.gama-footer-cta:hover { background: #b08930; }

.gama-footer-bottom { border-top: 1px solid #1e293b; background: #0a0f1a; }
.gama-footer-bottom-inner { max-width: 1280px; margin: 0 auto; padding: 16px 24px; display: flex !important; flex-wrap: wrap !important; align-items: center; justify-content: space-between; gap: 10px; }
.gama-footer-bottom p { font-size: 0.72rem; color: #475569; }
.gama-footer-bottom strong { color: #64748b; }
.gama-footer-bottom-links { display: flex !important; align-items: center; gap: 10px; }
.gama-footer-bottom-links a { font-size: 0.72rem; color: #475569; text-decoration: none; transition: color 0.15s; }
.gama-footer-bottom-links a:hover { color: #d4a843; }
.gama-footer-bottom-links span { color: #334155; }
.gama-footer-made { font-size: 0.7rem; color: #334155; }

@media (max-width: 1024px) { 
    .gama-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px; } 
}
@media (max-width: 640px) { 
    .gama-footer-grid { grid-template-columns: 1fr !important; gap: 28px; } 
    .gama-footer-kpis { grid-template-columns: repeat(2, 1fr) !important; } 
    .gama-footer-bottom-inner { flex-direction: column !important; text-align: center; } 
    .gama-footer-bottom-links { justify-content: center; }
}
</style>