/* ==========================================================================
   redesign.css — Nouvelle identité visuelle NK TECH (vision page d'accueil)
   Système de design autonome, classes préfixées « nk- ».
   Chargé uniquement sur la home pour validation. 100 % réversible.
   Inspiration : Stripe / Apple / Linear — espace, typographie, sobriété.
   ========================================================================== */

:root {
    --nk-ink: #0C1B2A;
    --nk-ink-soft: #44566A;
    --nk-muted: #6B7B8C;
    --nk-accent: #1457C9;
    --nk-accent-deep: #0E3F97;
    --nk-accent-soft: #EAF1FF;
    --nk-bg: #FFFFFF;
    --nk-surface: #F5F8FC;
    --nk-border: #E7EDF4;
    --nk-radius: 18px;
    --nk-radius-sm: 12px;
    --nk-shadow: 0 24px 60px -20px rgba(12, 27, 42, 0.22);
    --nk-shadow-sm: 0 8px 24px -12px rgba(12, 27, 42, 0.18);
    --nk-maxw: 1180px;
    --nk-display: "Montserrat", system-ui, sans-serif;
    --nk-body: "Source Sans Pro", system-ui, sans-serif;
    /* États */
    --nk-success: #1CA35B;
    --nk-success-soft: #E7F6EE;
    --nk-danger: #D64545;
    --nk-danger-soft: #FCECEC;
    --nk-warning: #C7901C;
    /* Espacements */
    --nk-space-1: 4px;
    --nk-space-2: 8px;
    --nk-space-3: 12px;
    --nk-space-4: 16px;
    --nk-space-5: 24px;
    --nk-space-6: 32px;
    --nk-space-7: 48px;
    --nk-space-8: 64px;
    /* Z-index */
    --nk-z-header: 1000;
    --nk-z-overlay: 1100;
    --nk-z-top: 1200;
}

/* ---------- RESET ROBUSTE ----------
   Isole la page du thème : neutralise toutes les règles globales d'élément
   de style.css qui pourraient fuiter (img{height:80px}, marges, listes...). */
.nk { color: var(--nk-ink); font-family: var(--nk-body); font-size: 17px; line-height: 1.7; -webkit-font-smoothing: antialiased; }
.nk *, .nk *::before, .nk *::after { box-sizing: border-box; }
.nk h1, .nk h2, .nk h3, .nk h4, .nk p, .nk ul, .nk ol, .nk li, .nk figure, .nk blockquote { margin: 0; padding: 0; }
.nk ul, .nk ol { list-style: none; }
.nk img, .nk svg { display: block; max-width: 100%; }
/* Neutralise la règle globale toxique du thème : img { height:80px; width:80px } */
.nk img { width: auto; height: auto; margin: 0; }
.nk a { text-decoration: none; color: inherit; }
.nk button { font-family: inherit; cursor: pointer; }
.nk button:not([class]) { border: none; background: none; }
.nk-container { width: 100%; max-width: var(--nk-maxw); margin: 0 auto; padding: 0 24px; }

/* ---------- Typographie ---------- */
.nk h1, .nk h2, .nk h3 { font-family: var(--nk-display); color: var(--nk-ink); letter-spacing: -0.02em; line-height: 1.1; margin: 0; }
.nk-eyebrow { font-family: var(--nk-display); font-weight: 700; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--nk-accent); margin-bottom: 18px; }
.nk-h1 { font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 800; }
.nk-h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); font-weight: 800; }
.nk-accent-word { color: var(--nk-accent); }
.nk-lead { font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--nk-ink-soft); margin-top: 22px; max-width: 44ch; }

/* ---------- Boutons ---------- */
.nk-btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--nk-display); font-weight: 700; font-size: 1rem; padding: 16px 30px; border-radius: 999px; cursor: pointer; border: none; transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease; }
.nk-btn svg, .nk-btn .nk-arrow { width: 16px; height: 16px; fill: currentColor; transition: transform .25s ease; }
.nk-btn:hover .nk-arrow { transform: translateX(5px); }
.nk-btn:active { transform: translateY(0) scale(.98); }

.nk-btn-primary { position: relative; color: #fff; background: #1E66E0; box-shadow: 0 16px 30px -12px rgba(30, 102, 224, .55); }
.nk-btn-primary svg, .nk-btn-primary .nk-arrow { fill: #fff; color: #fff; }
.nk-btn-primary:hover { background: #155FD4; transform: translateY(-3px); box-shadow: 0 22px 40px -12px rgba(30, 102, 224, .6); }

.nk-btn-ghost { background: transparent; color: var(--nk-ink); border: 1.5px solid var(--nk-border); }
.nk-btn-ghost:hover { border-color: var(--nk-ink); transform: translateY(-2px); }

/* Garantie : les <button> stylés gardent toujours leur fond (priorité sur tout reset) */
.nk button.nk-btn-primary { background: #1E66E0; color: #fff; }
.nk button.nk-btn-success { background: var(--nk-success); color: #fff; }
.nk button.nk-btn-danger { background: var(--nk-danger); color: #fff; }
.nk button.nk-btn-ghost { background: transparent; color: var(--nk-ink); }

/* Garantie : les boutons-liens <a> restent lisibles même dans du contenu (prose, accordéon, onglets) */
.nk a.nk-btn { text-decoration: none !important; }
.nk a.nk-btn-primary, .nk a.nk-btn-success, .nk a.nk-btn-danger { color: #fff !important; }
.nk a.nk-btn-ghost { color: var(--nk-ink) !important; }
.nk a.nk-btn-primary svg, .nk a.nk-btn-primary .nk-arrow { fill: #fff !important; color: #fff !important; }

/* ---------- Sections ---------- */
.nk-section { padding: clamp(40px, 5vw, 72px) 0; }
.nk-section--surface { background: var(--nk-surface); }
.nk-section-head { max-width: 640px; margin: 0 auto 36px; text-align: center; }
.nk-section-head .nk-lead { margin-left: auto; margin-right: auto; max-width: 60ch; }

/* ---------- Hero ---------- */
.nk-hero { padding: clamp(40px, 5vw, 72px) 0 clamp(36px, 4vw, 60px); background:
    radial-gradient(1200px 500px at 80% -10%, var(--nk-accent-soft), transparent 60%),
    var(--nk-bg); overflow: hidden; }
.nk-hero-grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 64px; align-items: center; }
.nk-hero-visual { position: relative; }
/* Panneau d'accent décoratif derrière la photo (effet carte empilée) */
.nk-hero-visual::before { content: ""; position: absolute; z-index: 0; left: 34px; right: -16px; top: 26px; bottom: 22px; border-radius: calc(var(--nk-radius) + 10px); background: linear-gradient(150deg, var(--nk-accent), #5B8DF0); }
.nk-hero-visual img { position: relative; z-index: 1; display: block; width: 100%; height: clamp(360px, 46vw, 560px); object-fit: cover; border-radius: var(--nk-radius); box-shadow: var(--nk-shadow); border: 8px solid #fff; }
.nk-hero-badge { position: absolute; z-index: 2; left: -14px; bottom: 28px; background: #fff; border: 1px solid var(--nk-border); border-radius: var(--nk-radius-sm); box-shadow: var(--nk-shadow-sm); padding: 18px 24px; display: flex; align-items: center; gap: 14px; }
.nk-hero-badge::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--nk-accent); box-shadow: 0 0 0 4px var(--nk-accent-soft); flex: none; }
.nk-hero-badge strong { font-family: var(--nk-display); font-size: 1.5rem; color: var(--nk-ink); display: block; line-height: 1; }
.nk-hero-badge span { font-size: .85rem; color: var(--nk-muted); }
.nk-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.nk-hero-meta { margin-top: 30px; display: flex; gap: 28px; flex-wrap: wrap; color: var(--nk-muted); font-size: .92rem; }
.nk-hero-meta b { color: var(--nk-ink); font-family: var(--nk-display); }

/* ---------- Bande de confiance ---------- */
.nk-trust { padding: 40px 0; border-top: 1px solid var(--nk-border); border-bottom: 1px solid var(--nk-border); }
.nk-trust-title { text-align: center; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--nk-muted); margin-bottom: 26px; }
.nk-trust-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 30px 48px; }
.nk-trust-logos img { height: 34px; width: auto; filter: grayscale(100%); opacity: .55; transition: filter .3s, opacity .3s; }
.nk-trust-logos img:hover { filter: grayscale(0); opacity: 1; }

/* ---------- Cartes services ---------- */
.nk-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.nk-card { background: var(--nk-bg); border: 1px solid var(--nk-border); border-radius: var(--nk-radius); padding: 36px 30px; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; display: flex; flex-direction: column; }
.nk-card:hover { transform: translateY(-6px); box-shadow: var(--nk-shadow); border-color: transparent; }
.nk-card-ico { width: 60px; height: 60px; border-radius: 14px; background: var(--nk-accent-soft); display: grid; place-items: center; margin-bottom: 22px; }
/* En-tête de carte horizontal (icône à gauche, titre à droite) */
.nk-card-head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.nk-card-head .nk-card-ico { margin-bottom: 0; flex: none; }
.nk-card-head h3 { margin-bottom: 0; }
.nk-card-ico img { width: 32px; height: 32px; }
.nk-card h3 { font-size: 1.35rem; font-weight: 700; margin-bottom: 12px; }
.nk-card p { color: var(--nk-ink-soft); font-size: 1rem; margin: 0 0 22px; }
.nk-card-link { margin-top: auto; font-family: var(--nk-display); font-weight: 600; color: var(--nk-accent); display: inline-flex; align-items: center; gap: 8px; }
.nk-card:hover .nk-card-link { gap: 12px; }

.nk-cards--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .nk-cards--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .nk-cards--4 { grid-template-columns: 1fr; } }

/* ---------- Features (pourquoi nous choisir) ---------- */
.nk-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 48px; }
.nk-feature { padding-top: 22px; border-top: 2px solid var(--nk-border); transition: border-color .25s; }
.nk-feature:hover { border-color: var(--nk-accent); }
.nk-feature h3 { font-size: 1.18rem; font-weight: 700; margin-bottom: 10px; }
.nk-feature p { color: var(--nk-ink-soft); font-size: .98rem; margin: 0; }

/* ---------- Stats ---------- */
.nk-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.nk-stat { text-align: center; }
.nk-stat-num { font-family: var(--nk-display); font-weight: 800; font-size: clamp(2.4rem, 4vw, 3.4rem); color: var(--nk-ink); line-height: 1; }
.nk-stat-num .nk-plus { color: var(--nk-accent); }
.nk-stat-label { margin-top: 10px; color: var(--nk-muted); font-size: .95rem; }

/* ---------- CTA ---------- */
.nk-cta-band { background: linear-gradient(120deg, var(--nk-accent-deep), var(--nk-accent)); border-radius: clamp(20px, 4vw, 32px); padding: clamp(40px, 6vw, 72px); text-align: center; color: #fff; box-shadow: var(--nk-shadow); }
.nk-cta-band h2 { color: #fff; font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 800; }
.nk-cta-band p { color: rgba(255,255,255,.85); max-width: 52ch; margin: 18px auto 30px; font-size: 1.1rem; }
.nk-cta-band a.nk-btn-primary, .nk-cta-band button.nk-btn-primary { background: #fff !important; color: var(--nk-accent-deep) !important; box-shadow: none; }
.nk-cta-band a.nk-btn-primary svg, .nk-cta-band a.nk-btn-primary .nk-arrow, .nk-cta-band button.nk-btn-primary svg { fill: var(--nk-accent-deep) !important; color: var(--nk-accent-deep) !important; }
.nk-cta-band a.nk-btn-primary:hover, .nk-cta-band button.nk-btn-primary:hover { background: #EAF1FF !important; transform: translateY(-3px); }

/* ---------- News ---------- */
.nk-news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.nk-news-card { border: 1px solid var(--nk-border); border-radius: var(--nk-radius); overflow: hidden; background: #fff; transition: transform .25s, box-shadow .25s; display: flex; flex-direction: column; }
.nk-news-card:hover { transform: translateY(-6px); box-shadow: var(--nk-shadow); }
.nk-news-thumb { aspect-ratio: 16/10; overflow: hidden; background: var(--nk-surface); }
.nk-news-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.nk-news-card:hover .nk-news-thumb img { transform: scale(1.05); }
.nk-news-body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.nk-news-date { font-size: .82rem; color: var(--nk-accent); font-weight: 600; text-transform: capitalize; }
.nk-news-body h3 { font-size: 1.22rem; font-weight: 700; margin: 10px 0 12px; }
.nk-news-body p { color: var(--nk-ink-soft); font-size: .97rem; margin: 0; }
.nk-center { text-align: center; margin-top: 32px; }

/* ---------- Animations sobres ---------- */
@media (prefers-reduced-motion: no-preference) {
    .nk-reveal { opacity: 0; transform: translateY(24px); animation: nkUp .7s ease forwards; }
    .nk-reveal:nth-child(2) { animation-delay: .08s; }
    .nk-reveal:nth-child(3) { animation-delay: .16s; }
    @keyframes nkUp { to { opacity: 1; transform: none; } }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
    .nk-hero-grid { grid-template-columns: 1fr; gap: 40px; }
    .nk-hero-visual { order: -1; }
    .nk-cards, .nk-features, .nk-news-grid { grid-template-columns: 1fr 1fr; }
    .nk-stats { grid-template-columns: 1fr 1fr; gap: 40px 24px; }
}
@media (max-width: 620px) {
    .nk { font-size: 16px; }
    .nk-cards, .nk-features, .nk-news-grid { grid-template-columns: 1fr; }
    .nk-hero-badge { left: 12px; }
}

/* ==========================================================================
   COMPOSANTS PARTAGÉS (Lot 0) — réutilisés sur tout le site
   ========================================================================== */

/* ---------- Variantes de boutons ---------- */
.nk-btn-sm { padding: 11px 20px; font-size: .9rem; }
.nk-btn-block { width: 100%; justify-content: center; }
.nk-btn-danger { background: var(--nk-danger); color: #fff; }
.nk-btn-danger:hover { background: #b93a3a; transform: translateY(-2px); }
.nk-btn-success { background: var(--nk-success); color: #fff; }
.nk-btn-success:hover { background: #178a4d; transform: translateY(-2px); }

/* ---------- Titre de section aligné à gauche (variante) ---------- */
.nk-section-head--left { margin-left: 0; margin-right: 0; text-align: left; max-width: 720px; }
.nk-section-head--left .nk-lead { margin-left: 0; }

/* ---------- Hero compact pour pages intérieures ---------- */
.nk-pagehero { padding: clamp(28px, 4vw, 52px) 0 clamp(22px, 3vw, 36px); background:
    radial-gradient(900px 360px at 85% -20%, var(--nk-accent-soft), transparent 60%), var(--nk-bg);
    border-bottom: 1px solid var(--nk-border); }
.nk-pagehero h1 { font-size: clamp(2rem, 4vw, 3.1rem); font-weight: 800; }
.nk-pagehero .nk-lead { margin-top: 16px; }

/* ---------- Breadcrumb ---------- */
.nk-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .9rem; color: var(--nk-muted); margin-bottom: 18px; }
.nk-breadcrumb a { color: var(--nk-muted); }
.nk-breadcrumb a:hover { color: var(--nk-accent); }
.nk-breadcrumb .nk-sep { opacity: .5; }
.nk-breadcrumb .nk-current { color: var(--nk-ink); font-weight: 600; }

/* ---------- Article / prose (detailpub + pages légales) ---------- */
.nk-article { max-width: 760px; margin: 0 auto; }
.nk-article h1 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 800; margin-bottom: 18px; }
.nk-article h2 { font-size: 1.5rem; font-weight: 700; margin: 38px 0 14px; }
.nk-article h3 { font-size: 1.2rem; font-weight: 700; margin: 28px 0 12px; }
.nk-article p { color: var(--nk-ink-soft); margin-bottom: 18px; }
.nk-article ul { list-style: disc; padding-left: 22px; margin-bottom: 18px; color: var(--nk-ink-soft); }
.nk-article li { margin-bottom: 8px; }
.nk-article a { color: var(--nk-accent); text-decoration: underline; }
.nk-article-meta { display: flex; flex-wrap: wrap; gap: 18px; color: var(--nk-muted); font-size: .9rem; margin-bottom: 24px; }
.nk-article-img { width: 100%; height: auto; border-radius: var(--nk-radius); margin: 8px 0 30px; box-shadow: var(--nk-shadow-sm); }

/* ---------- Alertes / messages Django ---------- */
.nk-alerts { padding: 16px 0 0; }
.nk-alert { padding: 14px 20px; border-radius: var(--nk-radius-sm); margin-bottom: 12px; font-weight: 500; border: 1px solid transparent; }
.nk-alert--success { background: var(--nk-success-soft); color: #146b3a; border-color: #bce6cd; }
.nk-alert--error, .nk-alert--danger { background: var(--nk-danger-soft); color: #9b2c2c; border-color: #f3c9c9; }
.nk-alert--warning { background: #FBF3E2; color: #8a6406; border-color: #ecdcae; }
.nk-alert--info { background: var(--nk-accent-soft); color: var(--nk-accent-deep); border-color: #cfe0fb; }

/* ---------- Formulaires ---------- */
.nk-form { width: 100%; }
.nk-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.nk-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.nk-field--full { grid-column: 1 / -1; }
.nk-label { font-family: var(--nk-display); font-weight: 600; font-size: .9rem; color: var(--nk-ink); }
.nk-input, .nk-select, .nk-textarea {
    width: 100%; font-family: var(--nk-body); font-size: 1rem; color: var(--nk-ink);
    background: var(--nk-bg); border: 1.5px solid var(--nk-border); border-radius: var(--nk-radius-sm);
    padding: 13px 16px; transition: border-color .2s, box-shadow .2s; }
.nk-textarea { resize: vertical; min-height: 130px; }
.nk-input:focus, .nk-select:focus, .nk-textarea:focus {
    outline: none; border-color: var(--nk-accent); box-shadow: 0 0 0 3px var(--nk-accent-soft); }
.nk-input:disabled, .nk-select:disabled { background: var(--nk-surface); color: var(--nk-muted); cursor: not-allowed; }
.nk-error { color: var(--nk-danger); font-size: .88rem; }
.nk-form-card { background: var(--nk-bg); border: 1px solid var(--nk-border); border-radius: var(--nk-radius); padding: clamp(24px, 4vw, 40px); box-shadow: var(--nk-shadow-sm); }

/* Bloc d'infos de contact */
.nk-info { background: var(--nk-surface); border: 1px solid var(--nk-border); border-radius: var(--nk-radius); padding: 30px; }
.nk-info h4 { font-family: var(--nk-display); font-size: 1.2rem; font-weight: 700; margin-bottom: 18px; }
.nk-info-list { display: flex; flex-direction: column; gap: 18px; }
.nk-info-item { display: flex; gap: 14px; align-items: flex-start; }
.nk-info-item .material-icons { color: var(--nk-accent); }
.nk-info-item a { color: var(--nk-ink-soft); display: block; }
.nk-info-item a:hover { color: var(--nk-accent); }

/* ---------- Mise en page contact & auth ---------- */
.nk-contact-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 32px; align-items: start; }
.nk-auth { max-width: 460px; margin: 0 auto; }
@media (max-width: 820px) { .nk-contact-grid { grid-template-columns: 1fr; } }

/* ---------- Tableaux (admin) ---------- */
.nk-table-wrap { overflow-x: auto; border: 1px solid var(--nk-border); border-radius: var(--nk-radius); background: #fff; }
.nk-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.nk-table th, .nk-table td { padding: 14px 18px; text-align: left; white-space: nowrap; }
.nk-table thead th { background: var(--nk-surface); font-family: var(--nk-display); font-weight: 700; color: var(--nk-ink); border-bottom: 1px solid var(--nk-border); }
.nk-table tbody tr { border-top: 1px solid var(--nk-border); }
.nk-table tbody tr:hover { background: var(--nk-accent-soft); }
.nk-badge { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: .8rem; font-weight: 600; }
.nk-badge--ok { background: var(--nk-success-soft); color: #146b3a; }
.nk-badge--wait { background: #FBF3E2; color: #8a6406; }
.nk-badge--off { background: var(--nk-danger-soft); color: #9b2c2c; }
.nk-table-title { font-family: var(--nk-display); font-size: 1.15rem; font-weight: 700; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.nk-count { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px; background: var(--nk-accent-soft); color: var(--nk-accent); font-size: .85rem; font-weight: 700; }
.nk-count--ok { background: var(--nk-success-soft); color: #146b3a; }

/* ---------- Onglets (restyle, garde les hooks .tabs/.tabs-nav/.tabs-item du JS) ---------- */
.nk .tabs-nav { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 28px; border-bottom: 1px solid var(--nk-border); }
.nk .tabs-nav li { padding: 12px 20px; font-family: var(--nk-display); font-weight: 600; color: var(--nk-ink-soft); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .2s, border-color .2s, background-color .2s; }
.nk .tabs-nav li:hover { color: var(--nk-ink); }
.nk .tabs-nav li.active { color: var(--nk-accent); border-bottom-color: var(--nk-accent); }
.nk .tabs-item { display: none; }
.nk .tabs-item.active { display: block; animation: nkFade .35s ease; }
.nk .tabs-item p { color: var(--nk-ink-soft); margin-bottom: 18px; }
@keyframes nkFade { from { opacity: 0; } to { opacity: 1; } }
/* Onglets verticaux */
.nk .tabs.tabs-vertical { display: grid; grid-template-columns: 260px 1fr; gap: 30px; }
.nk .tabs.tabs-vertical .tabs-nav { flex-direction: column; border-bottom: none; border-right: 1px solid var(--nk-border); margin: 0; padding-right: 8px; }
.nk .tabs.tabs-vertical .tabs-nav li { border-bottom: none; border-right: 2px solid transparent; margin: 0 -1px 0 0; border-radius: 8px 0 0 8px; }
.nk .tabs.tabs-vertical .tabs-nav li:hover { background: var(--nk-surface); }
.nk .tabs.tabs-vertical .tabs-nav li.active { border-right-color: var(--nk-accent); background: var(--nk-accent-soft); }

/* ---------- Accordéon (restyle, garde les hooks .accordion* du JS) ---------- */
.nk .accordion-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.nk .accordion-item { border: 1px solid var(--nk-border); border-radius: var(--nk-radius-sm); overflow: hidden; background: #fff; }
.nk .accordion-trigger { padding: 18px 22px; font-family: var(--nk-display); font-weight: 600; color: var(--nk-ink); cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.nk .accordion-trigger::after { content: "+"; font-size: 1.4rem; color: var(--nk-accent); }
.nk .accordion-item.active .accordion-trigger::after { content: "\2212"; }
.nk .accordion-content { padding: 0 22px 20px; color: var(--nk-ink-soft); }
.nk .accordion-content p { margin-bottom: 12px; }
.nk .accordion-content a { color: var(--nk-accent); }

/* Accordéon en deux colonnes */
.nk-acc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 820px) { .nk-acc-cols { grid-template-columns: 1fr; } }

/* ---------- Pagination ---------- */
.nk-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 48px; list-style: none; padding: 0; }
.nk-pagination a, .nk-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 14px; border-radius: var(--nk-radius-sm); border: 1.5px solid var(--nk-border); font-family: var(--nk-display); font-weight: 600; color: var(--nk-ink); transition: all .2s; }
.nk-pagination a:hover { border-color: var(--nk-accent); color: var(--nk-accent); }
.nk-pagination .nk-page-current { background: var(--nk-accent); border-color: var(--nk-accent); color: #fff; }

/* ---------- Empty state ---------- */
.nk-empty { text-align: center; padding: 60px 20px; color: var(--nk-muted); }

/* ---------- Bloc « application » en vedette (pleine largeur) ---------- */
.nk-featured { display: grid; grid-template-columns: 300px 1fr; background: #fff; border: 1px solid var(--nk-border); border-radius: var(--nk-radius); overflow: hidden; box-shadow: var(--nk-shadow-sm); }
.nk-featured-aside { background: linear-gradient(150deg, var(--nk-accent), #5B8DF0); display: grid; place-items: center; padding: 40px 30px; }
.nk-featured-aside img { width: 150px; height: 150px; border-radius: 30px; background: #fff; object-fit: cover; box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .35); }
.nk-featured-body { padding: clamp(28px, 4vw, 48px); display: flex; flex-direction: column; justify-content: center; }
.nk-featured-eyebrow { font-family: var(--nk-display); font-weight: 700; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--nk-accent); margin-bottom: 10px; }
.nk-featured-body h2 { font-family: var(--nk-display); font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 800; margin-bottom: 14px; color: var(--nk-ink); }
.nk-featured-body p { color: var(--nk-ink-soft); margin-bottom: 26px; max-width: 62ch; }
@media (max-width: 820px) { .nk-featured { grid-template-columns: 1fr; } .nk-featured-aside { padding: 34px; } .nk-featured-aside img { width: 120px; height: 120px; } }

/* ---------- Étapes (comment ça marche) ---------- */
.nk-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.nk-step { position: relative; padding: 32px 28px; background: #fff; border: 1px solid var(--nk-border); border-radius: var(--nk-radius); }
.nk-step-num { width: 46px; height: 46px; border-radius: 50%; background: var(--nk-accent); color: #fff; font-family: var(--nk-display); font-weight: 800; font-size: 1.15rem; display: grid; place-items: center; margin-bottom: 18px; }
.nk-step h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: 10px; }
.nk-step p { color: var(--nk-ink-soft); margin: 0; }
@media (max-width: 820px) { .nk-steps { grid-template-columns: 1fr; } }

/* ---------- Cartes de messages (admin contacts) ---------- */
.nk-msg-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.nk-msg-card { background: #fff; border: 1px solid var(--nk-border); border-radius: var(--nk-radius); padding: 26px; }
.nk-msg-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.nk-msg-head h4 { font-family: var(--nk-display); font-size: 1.15rem; font-weight: 700; }
.nk-msg-date { font-size: .85rem; color: var(--nk-muted); }
@media (max-width: 820px) { .nk-msg-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   EN-TÊTE & PIED DE PAGE (chrome global, restyle des classes thème)
   ========================================================================== */

/* Footer */
.nk-footer { background: var(--nk-ink); color: #C6D2DF; padding: clamp(48px, 6vw, 72px) 0 28px; }
.nk-footer a { color: #C6D2DF; transition: color .2s; }
.nk-footer a:hover { color: #fff; }
.nk-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: 40px; }
.nk-footer-brand .nk-footer-logo { font-family: var(--nk-display); font-weight: 800; font-size: 1.4rem; color: #fff; letter-spacing: .04em; margin-bottom: 14px; }
.nk-footer-brand p { color: #93A4B5; font-size: .95rem; max-width: 34ch; }
.nk-footer h5 { font-family: var(--nk-display); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: #fff; margin-bottom: 18px; }
.nk-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: .95rem; }
.nk-footer-contact li { display: flex; gap: 10px; align-items: flex-start; color: #93A4B5; }
.nk-footer-contact .material-icons { font-size: 18px; color: var(--nk-accent); }
.nk-footer-socials { display: flex; gap: 12px; margin-top: 16px; }
.nk-footer-socials a { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.08); display: grid; place-items: center; }
.nk-footer-socials a:hover { background: var(--nk-accent); }
.nk-footer-bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: 40px; padding-top: 22px; text-align: center; color: #7E90A2; font-size: .88rem; }

/* ---------- Présentation : image + texte ---------- */
.nk-about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.nk-about-media img { width: 100%; height: clamp(300px, 36vw, 460px); object-fit: cover; border-radius: var(--nk-radius); box-shadow: var(--nk-shadow); }
.nk-about-text h2 { margin-bottom: 18px; }
.nk-about-text p { color: var(--nk-ink-soft); margin-bottom: 16px; }

/* Mission & vision */
.nk-mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.nk-mv-card { background: var(--nk-bg); border: 1px solid var(--nk-border); border-radius: var(--nk-radius); padding: 38px 34px; }
.nk-mv-card h3 { font-size: 1.4rem; font-weight: 700; margin: 18px 0 14px; }
.nk-mv-card p { color: var(--nk-ink-soft); }
.nk-mv-card .nk-card-ico .material-icons { color: var(--nk-accent); font-size: 30px; }
.nk-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.nk-list li { position: relative; padding-left: 28px; color: var(--nk-ink-soft); }
.nk-list li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--nk-accent); font-weight: 800; }

/* Partenaires */
.nk-partners { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.nk-partner { background: #fff; border: 1px solid var(--nk-border); border-radius: var(--nk-radius-sm); height: 110px; display: grid; place-items: center; padding: 22px; transition: box-shadow .25s, transform .25s; }
.nk-partner:hover { box-shadow: var(--nk-shadow-sm); transform: translateY(-4px); }
.nk-partner img { max-height: 52px; width: auto; object-fit: contain; filter: grayscale(100%); opacity: .6; transition: filter .3s, opacity .3s; }
.nk-partner:hover img { filter: grayscale(0); opacity: 1; }

/* ---------- Cartes applications (page technologie) ---------- */
.nk-apps { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.nk-apps--single { max-width: 560px; margin: 0 auto; }
.nk-app { background: #fff; border: 1px solid var(--nk-border); border-radius: var(--nk-radius); padding: 36px 32px; display: flex; flex-direction: column; transition: transform .25s, box-shadow .25s; }
.nk-app:hover { transform: translateY(-6px); box-shadow: var(--nk-shadow); }
.nk-app-ico { width: 60px; height: 60px; border-radius: 14px; background: var(--nk-accent-soft); display: grid; place-items: center; margin-bottom: 22px; }
.nk-app-ico .material-icons { color: var(--nk-accent); font-size: 30px; }
.nk-app-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.nk-app-logo { flex: none; width: 64px; height: 64px; border-radius: 16px; overflow: hidden; border: 1px solid var(--nk-border); background: #fff; }
.nk-app-logo img { width: 100%; height: 100%; object-fit: cover; }
.nk-app h3 { font-size: 1.4rem; font-weight: 700; margin: 0; }
.nk-app p { color: var(--nk-ink-soft); margin: 0 0 22px; }
.nk-app-foot { margin-top: auto; }
.nk-app-foot .nk-card-link { margin-bottom: 14px; }
.nk-stores { display: flex; gap: 10px; flex-wrap: wrap; }
.nk-store { display: inline-flex; align-items: center; gap: 7px; font-family: var(--nk-display); font-size: .82rem; font-weight: 600; padding: 8px 14px; border: 1.5px solid var(--nk-border); border-radius: 999px; color: var(--nk-ink); transition: border-color .2s, color .2s; }
.nk-store:hover { border-color: var(--nk-accent); color: var(--nk-accent); }
.nk-store .material-icons { font-size: 18px; }
.nk-store--web { background: var(--nk-accent); border-color: var(--nk-accent); color: #fff; }
.nk-store--web:hover { background: var(--nk-accent-deep); border-color: var(--nk-accent-deep); color: #fff; }
@media (max-width: 820px) { .nk-apps { grid-template-columns: 1fr; } }

/* ---------- Galerie d'images (pages domaines) ---------- */
.nk-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 48px; }
.nk-gallery img { width: 100%; height: 210px; object-fit: cover; border-radius: var(--nk-radius-sm); box-shadow: var(--nk-shadow-sm); }

/* Galerie riche (auto, zoom au survol) */
.nk-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.nk-gallery-item { display: block; border-radius: var(--nk-radius-sm); overflow: hidden; aspect-ratio: 4 / 3; background: var(--nk-surface); box-shadow: var(--nk-shadow-sm); }
.nk-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.nk-gallery-item:hover img { transform: scale(1.06); }

/* ---------- Lignes média (image + texte) ---------- */
.nk-media-list { display: flex; flex-direction: column; gap: 24px; }
.nk-media-row { display: grid; grid-template-columns: 340px 1fr; background: #fff; border: 1px solid var(--nk-border); border-radius: var(--nk-radius); overflow: hidden; transition: box-shadow .25s; }
.nk-media-row:hover { box-shadow: var(--nk-shadow); }
.nk-media-row > img { width: 100%; height: 100%; min-height: 220px; object-fit: cover; }
.nk-media-body { padding: 30px 36px; display: flex; flex-direction: column; justify-content: center; }
.nk-media-body h3 { font-size: 1.35rem; font-weight: 700; margin-bottom: 12px; }
.nk-media-body p { color: var(--nk-ink-soft); margin-bottom: 12px; }
.nk-media-body a { color: var(--nk-accent); font-weight: 600; }

/* ---------- Grille de catégories (imprimerie) ---------- */
.nk-cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.nk-cat { background: #fff; border: 1px solid var(--nk-border); border-radius: var(--nk-radius); padding: 26px 24px; }
.nk-cat h4 { font-family: var(--nk-display); color: var(--nk-accent); font-size: 1.05rem; margin-bottom: 14px; }
.nk-cat ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; color: var(--nk-ink-soft); font-size: .95rem; }

/* Cartes produits (avec image) */
.nk-product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.nk-product-card { background: #fff; border: 1px solid var(--nk-border); border-radius: var(--nk-radius); overflow: hidden; transition: transform .25s, box-shadow .25s; }
.nk-product-card:hover { transform: translateY(-6px); box-shadow: var(--nk-shadow); }
.nk-product-img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--nk-surface); }
.nk-product-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.nk-product-card:hover .nk-product-img img { transform: scale(1.06); }
.nk-product-body { padding: 18px 20px; }
.nk-product-body h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 6px; }
.nk-product-body p { color: var(--nk-ink-soft); font-size: .92rem; margin: 0; }
.nk-product-grid--2 { grid-template-columns: repeat(2, 1fr); max-width: 720px; margin: 0 auto; }
@media (max-width: 980px) { .nk-product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .nk-product-grid, .nk-product-grid--2 { grid-template-columns: 1fr; } }

/* Cartes texte (cultures, élevage) */
.nk-text-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.nk-text-cards--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .nk-text-cards--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .nk-text-cards--4 { grid-template-columns: 1fr; } }
.nk-text-card { background: #fff; border: 1px solid var(--nk-border); border-radius: var(--nk-radius); padding: 30px 32px; }
.nk-text-card h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 12px; }
.nk-text-card p { color: var(--nk-ink-soft); margin: 0; }

@media (max-width: 980px) {
    .nk-gallery { grid-template-columns: 1fr 1fr; }
    .nk-cat-grid { grid-template-columns: 1fr 1fr; }
    .nk-text-cards { grid-template-columns: 1fr; }
    .nk-media-row { grid-template-columns: 1fr; }
    .nk-media-row > img { min-height: 200px; max-height: 260px; }
    .nk-about-grid, .nk-mv-grid { grid-template-columns: 1fr; gap: 32px; }
    .nk-partners { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 620px) {
    .nk-gallery, .nk-cat-grid { grid-template-columns: 1fr 1fr; }
    .nk-partners { grid-template-columns: 1fr 1fr; }
}

/* ---------- Espacement resserré pour l'admin ---------- */
.nk-admin .nk-section { padding: clamp(24px, 3vw, 44px) 0; }
.nk-admin .nk-pagehero { padding: clamp(20px, 2.5vw, 32px) 0 clamp(14px, 2vw, 22px); }
.nk-admin .nk-section-head { margin-bottom: 22px; }
.nk-admin .nk-section--surface + .nk-section,
.nk-admin .nk-section:first-child { padding-top: clamp(20px, 2.5vw, 32px); }

/* ---------- Bouton « retour en haut » (restyle) ---------- */
.btn-top { background: var(--nk-accent) !important; border: none !important; border-radius: 50% !important; width: 46px !important; height: 46px !important; right: 20px !important; display: grid !important; place-items: center !important; box-shadow: 0 12px 26px -8px rgba(30, 102, 224, .55); }
.btn-top .material-icons { color: #fff; font-size: 22px; line-height: 1; width: 22px; height: 22px; text-align: center; margin: 0; }
.btn-top:hover { background: var(--nk-accent-deep) !important; transform: translateY(-3px); }

/* ---------- En-tête (restyle des classes thème, hooks JS préservés) ---------- */
.header-fixed { background: rgba(255, 255, 255, 0.9); backdrop-filter: saturate(160%) blur(10px); -webkit-backdrop-filter: saturate(160%) blur(10px); box-shadow: 0 1px 0 var(--nk-border); }
.logo-text { font-family: var(--nk-display) !important; color: var(--nk-ink) !important; }
.main-mnu-list > li > a { font-family: var(--nk-display); font-weight: 600; color: var(--nk-ink-soft); transition: color .2s; overflow: visible; }
/* Désactive l'effet de bascule du thème (texte qui glisse + duplicata data-title) */
.main-mnu-list > li > a::after { display: none; }
.main-mnu-list > li > a > span,
.main-mnu-list > li:hover > a > span,
.main-mnu-list > li.active > a > span { transform: none; }
.main-mnu-list > li > a:hover span, .main-mnu-list > li > a:hover { color: var(--nk-accent); }
/* Lien de la page active */
.main-mnu-list > li > a.nk-active { position: relative; }
.main-mnu-list > li > a.nk-active span, .main-mnu-list > li > a.nk-active { color: var(--nk-accent); font-weight: 800; }
.main-mnu-list > li > a.nk-active::before { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 3px; background: var(--nk-accent); border-radius: 3px; }
.mmm-list > li > a.nk-active { color: var(--nk-accent); font-weight: 800; }
/* Bouton « Connexion » dans la nav (desktop) */
.main-mnu-list > li.nk-login-li { display: flex; align-items: center; margin-left: 1.8rem; padding: 0 0 0 1.8rem; border-left: 1px solid var(--nk-border); }
.main-mnu-list > li > a.nk-nav-btn { display: inline-flex; align-items: center; gap: 7px; background: var(--nk-accent); padding: 10px 22px; border-radius: 999px; box-shadow: 0 10px 20px -8px rgba(30, 102, 224, .55); transition: background-color .2s, transform .2s, box-shadow .2s; }
.main-mnu-list > li > a.nk-nav-btn .material-icons { color: #fff; font-size: 19px; }
.main-mnu-list > li > a.nk-nav-btn span { color: #fff; }
.main-mnu-list > li > a.nk-nav-btn:hover { background: var(--nk-accent-deep); transform: translateY(-2px); box-shadow: 0 14px 26px -8px rgba(30, 102, 224, .65); }
.main-mnu-list > li > a.nk-nav-btn:hover span { color: #fff; }
.main-mnu-list > li > a.nk-nav-btn::before, .main-mnu-list > li > a.nk-nav-btn::after { display: none !important; }
/* Bouton « Connexion » dans le menu mobile */
.mmm-list > li.nk-login-mobile, .mmm-list > li:has(> .mmm-login) { border-bottom: none; }
.mmm-list > li > a.mmm-login { display: inline-flex; width: auto; align-items: center; gap: 8px; background: var(--nk-accent); color: #fff; height: auto; line-height: 1; padding: 13px 26px; margin: 14px 1.25rem 0; border-radius: 999px; }
.mmm-list > li > a.mmm-login .material-icons { font-size: 20px; }
.mmm-list > li > a.mmm-login:hover { background: var(--nk-accent-deep); color: #fff; }
/* Lien de déconnexion (admin) */
.main-mnu-list > li > a.nk-logout span, .main-mnu-list > li > a.nk-logout { color: var(--nk-danger); }
.main-mnu-list > li > a.nk-logout:hover span, .main-mnu-list > li > a.nk-logout:hover { color: #b93a3a; }
.mmm-list > li > a.nk-logout { color: #ff9a9a; }
.main-mnu-btn .bar { background-color: var(--nk-ink); }
/* Menu mobile (drawer) */
.mmm { background: var(--nk-ink); }
.mmm-content { background: var(--nk-ink); padding: 14px 0; }
.mmm-list > li { border-bottom: 1px solid rgba(255, 255, 255, .08); }
.mmm-list > li > a { font-family: var(--nk-display); font-weight: 600; color: #E2E9F2; }
.mmm-list > li > a:hover { color: #fff; background: rgba(255, 255, 255, .05); }
.mmm-list > li.active > a, .mmm-list > li > a.nk-active { background: var(--nk-accent); color: #fff; }

/* Responsive composants partagés */
@media (max-width: 980px) {
    .nk-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    .nk .tabs.tabs-vertical { grid-template-columns: 1fr; }
    .nk .tabs.tabs-vertical .tabs-nav { flex-direction: row; flex-wrap: wrap; border-right: none; border-bottom: 1px solid var(--nk-border); padding-right: 0; }
}
@media (max-width: 620px) {
    .nk-form-grid { grid-template-columns: 1fr; }
    .nk-footer-grid { grid-template-columns: 1fr; }
}