/* ===================================================================
   style.css — KeurMame Node0 Premium Design System
   Nettoyé des overrides Tailwind !important, enrichi des composants
   =================================================================== */

:root {
    --color-primary: #063d33;
    --color-secondary: #c9942f;
    --color-accent: #0f766e;
    --background-color: #f8f4ea;
    --text-color: #1f2933;
    --button-radius: 14px;
    --mn-night: #042f2a;
    --mn-emerald: #063d33;
    --mn-emerald-2: #0f766e;
    --mn-gold: #c9942f;
    --mn-gold-soft: #f5e5bd;
    --mn-ivory: #fbf7ee;
    --mn-warm: #f8f4ea;
    --mn-graphite: #1f2933;
    --mn-muted: #647067;
    --mn-border: #d8e5dd;
    --mn-shadow: 0 20px 60px rgba(4, 47, 42, 0.12);
    --friendly-primary: var(--mn-emerald);
    --friendly-primary-dark: var(--mn-night);
    --friendly-secondary: var(--mn-gold);
    --friendly-accent: var(--mn-emerald-2);
    --friendly-soft: #edf8f3;
    --friendly-warm: #fff7e8;
    --friendly-border: var(--mn-border);
    --gradient: linear-gradient(135deg, #042f2a 0%, #063d33 48%, #0f766e 78%, #c9942f 135%);
}

* { box-sizing: border-box; }

body {
    font-family: 'Poppins', sans-serif;
    -webkit-font-smoothing: antialiased;
    background: var(--mn-warm);
    color: var(--text-color);
}

.bg-brand-gradient {
    background:
        radial-gradient(circle at 15% 20%, rgba(201, 148, 47, 0.28), transparent 28%),
        linear-gradient(135deg, rgba(4, 47, 42, 0.98) 0%, rgba(6, 61, 51, 0.96) 52%, rgba(15, 118, 110, 0.94) 82%, rgba(201, 148, 47, 0.9) 138%);
}

.btn-primary {
    background: linear-gradient(135deg, var(--friendly-primary) 0%, var(--friendly-accent) 100%);
    border-radius: var(--button-radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 22px rgba(15, 118, 110, 0.16);
    transition: box-shadow 0.2s, transform 0.2s, background 0.2s;
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--friendly-primary-dark) 0%, #15803d 100%);
    box-shadow: 0 12px 26px rgba(15, 118, 110, 0.2);
    transform: translateY(-1px);
}

/* === Couleurs Tailwind propres — plus de !important, on utilise les CSS vars === */
a, .nav-link:hover { color: var(--friendly-primary); }

/* Filtres */
.filter-btn, .mn-filter-btn {
    background: #f3f4f6;
    color: #6b7280;
    border: 2px solid transparent;
    transition: all 0.25s;
    cursor: pointer;
}
.filter-btn:hover, .mn-filter-btn:hover {
    background: var(--friendly-soft);
    color: var(--friendly-primary);
    border-color: var(--friendly-border);
}
.filter-btn.active, .mn-filter-btn.active {
    background: linear-gradient(135deg, var(--friendly-primary) 0%, var(--friendly-accent) 100%);
    color: #ffffff;
    border-color: transparent;
}

.product-card, .project-card {
    transition: box-shadow 0.3s, transform 0.3s;
}
.product-card:hover, .project-card:hover, a.bg-white:hover,
.mn-product-card:hover, .mn-gallery-item:hover, .mn-project-card:hover {
    box-shadow: 0 18px 40px rgba(31, 41, 55, 0.12);
}

/* Hero legacy (version précédente) */
.hero-section { min-height: calc(100vh - 4rem); background: #f7fbf8; }
.hero-section .hero-bg::after {
    content: ""; position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0)),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.08) 0 1px, transparent 1px 96px);
    opacity: 0.45;
}
.hero-section h1 { letter-spacing: 0; }
.hero-section .bg-white\/15 { background: rgba(255,255,255,0.18); }

.line-clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-3 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

input[type="file"]::file-selector-button {
    background: linear-gradient(135deg, var(--friendly-primary) 0%, var(--friendly-accent) 100%);
    color: white; border: none; padding: 8px 16px; border-radius: 10px;
    cursor: pointer; font-weight: 600; font-family: 'Poppins', sans-serif;
    font-size: 13px; margin-right: 8px; transition: opacity 0.2s;
}
input[type="file"]::file-selector-button:hover { opacity: 0.9; }
label:has(> input[type="checkbox"].sr-only:checked) > div:first-of-type { background: var(--friendly-primary); }
input[type="checkbox"].sr-only:checked + div + div { transform: translateX(20px); }

.prose p { margin-bottom: 1rem; }
.prose h2 { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.75rem; }
.prose ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1rem; }

#sidebar a.active { background: rgba(255,255,255,0.22); }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.fade-in-up { animation: fadeInUp 0.5s ease-out; }

@media (max-width: 768px) {
    #sidebar { display: none; }
    #sidebar.open { display: flex; position: fixed; z-index: 50; width: 260px; height: 100vh; top: 0; left: 0; }
}

.share-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.share-btn { display:inline-flex; align-items:center; gap:6px; padding:9px 16px; border-radius:10px; font-size:13px; font-weight:600; color:#fff; text-decoration:none; border:none; cursor:pointer; transition:opacity .2s,transform .15s; }
.share-btn:hover { opacity:.88; transform:translateY(-1px); }
.share-fb { background:#1877F2; }
.share-wa { background:#25D366; }
.share-ig { background:linear-gradient(135deg,#f09433,#dc2743,#bc1888); }
.share-copy { background:#374151; }
.share-feedback { width:100%; font-size:12px; color:#22c55e; }
.share-feedback.hidden { display:none; }

.agent-screen { height:calc(100dvh - 128px); min-height:620px; display:flex; flex-direction:column; gap:10px; min-width:0; }
.agent-topbar { flex-shrink:0; }
.agent-messages { flex:1; overflow-y:auto; padding:4px 0; }
.agent-bubble { max-width:85%; margin-bottom:10px; }
.agent-inputbar { flex-shrink:0; }

.mn-empty-state { background: #f9fafb; border-radius: 20px; border: 1px dashed #d1d5db; }

/* ===================================================================
   PREMIUM SECTION COMPONENTS — mn-* namespace
   Design system complet pour les sections refondues
   =================================================================== */

/* --- Animations scroll-reveal --- */
[data-mn-reveal] {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
[data-mn-reveal].mn-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* --- Hero premium --- */
.mn-hero .mn-hero-cta-primary {
    box-shadow: 0 8px 32px rgba(6, 61, 51, 0.25);
}
.mn-hero .mn-hero-cta-secondary {
    backdrop-filter: blur(8px);
}

/* --- Template-specific heroes (boutique, mode, agro, agence) --- */
.mn-hero-template {
    position: relative;
}
.mn-hero-template .font-display {
    letter-spacing: -0.02em;
}
.mn-hero-template .inline-flex.items-center.gap-2.rounded-full {
    backdrop-filter: blur(12px);
}
.mn-hero-template a.rounded-full {
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.mn-hero-template a.rounded-full:hover {
    transform: translateY(-2px);
}
.mn-hero-template a.rounded-2xl {
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.mn-hero-template a.rounded-2xl:hover {
    box-shadow: 0 12px 40px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}
.template-hero-mode .tabular-nums,
.template-hero-boutique .tabular-nums,
.template-hero-agro .tabular-nums,
.template-hero-agence .tabular-nums {
    font-variant-numeric: tabular-nums;
}

/* --- Sections générales --- */
.mn-section {
    position: relative;
}

/* --- Kicker (label au-dessus du titre) --- */
.mn-kicker {
    letter-spacing: 0.2em;
    position: relative;
    display: inline-block;
}
.mn-kicker::after {
    content: '';
    display: block;
    width: 40px;
    height: 2px;
    background: var(--color-accent);
    margin: 8px auto 0;
    border-radius: 1px;
    opacity: 0.4;
}

/* --- Cartes testimonial --- */
.mn-testimonial-card {
    transition: box-shadow 0.4s ease, transform 0.4s ease, border-color 0.4s ease;
}
.mn-testimonial-card:hover {
    border-color: var(--mn-border);
}

/* --- FAQ accordéon --- */
.mn-faq-item {
    transition: border-color 0.3s;
}
.mn-faq-answer {
    transition: max-height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.mn-faq-answer.mn-faq-open {
    max-height: 600px;
}

/* --- Gallery / Product cards --- */
.mn-gallery-item {
    transition: box-shadow 0.4s ease, transform 0.4s ease;
}
.mn-gallery-item img {
    transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* --- Product card --- */
.mn-product-card .mn-price {
    font-feature-settings: "tnum";
}

/* --- Service card --- */
.mn-service-card {
    transition: box-shadow 0.4s ease, transform 0.4s ease, border-color 0.4s ease;
}

/* --- Team card --- */
.mn-team-card .rounded-full {
    transition: transform 0.4s ease;
}

/* --- Project card --- */
.mn-project-card {
    transition: box-shadow 0.4s ease, transform 0.4s ease;
}
.mn-project-card img {
    transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* --- Stat section --- */
.mn-stat-item {
    transition: transform 0.3s ease;
}
.mn-stat-item:hover {
    transform: translateY(-2px);
}

/* --- Article card blog --- */
.mn-article-card {
    transition: box-shadow 0.4s ease, transform 0.4s ease;
}
.mn-article-card img {
    transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* --- Booking section --- */
.mn-section-booking .btn-primary {
    font-size: 1.05rem;
}

/* --- Lightbox gallery --- */
#gallery-lightbox {
    transition: opacity 0.3s ease;
}
#gallery-lightbox.hidden {
    display: none;
}
#gallery-lightbox.flex {
    display: flex;
}
#lightbox-img {
    transition: opacity 0.4s ease;
}

/* --- mn-chip (petit badge) --- */
.mn-chip {
    transition: background 0.3s, color 0.3s;
}

/* ===================================================================
   RESPONSIVE ADJUSTMENTS — Premium sections
   =================================================================== */
@media (max-width: 640px) {
    .mn-hero h1 { font-size: 2.5rem; }
    .mn-hero p { font-size: 1rem; }
    .mn-section-head h2 { font-size: 2rem; }
    .mn-stat-item .text-5xl { font-size: 2.5rem; }
    .mn-stat-item.border-x { border: none; }
}

/* --- Transition universelle douce pour TOUS les éléments interactifs --- */
a, button, .btn-primary, [class*="transition"] {
    -webkit-tap-highlight-color: transparent;
}