/* ==========================================================================
   NS DIGITAL SERVICES — Composants ajoutes par les gabarits PHP
   --------------------------------------------------------------------------
   main.css porte la charte (couleurs, typographie, boutons, cartes).
   Ce fichier ne contient que ce qui manquait : fil d'Ariane, pagination,
   messages, prose d'article, bandeau cookies, barres de filtres.
   Charge APRES main.css.
   ========================================================================== */

/* ── Fil d'Ariane ─────────────────────────────────────────────────────────── */
.ns-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-family: var(--ns-font-mono); font-size: var(--ns-text-xs);
  color: var(--ns-ink-muted); margin-bottom: var(--ns-space-4);
}
.ns-crumbs a { color: var(--ns-ink-muted); }
.ns-crumbs a:hover { color: var(--ns-blue-dark); }
.ns-crumbs span[aria-current] { color: var(--ns-ink); }

/* ── En-tete de page ─────────────────────────────────────────────────────── */
.ns-pagehead { padding-block: var(--ns-space-8) var(--ns-space-6); border-bottom: 1px solid var(--ns-line); }
.ns-pagehead h1 { margin: 0 0 var(--ns-space-3); }
.ns-pagehead .ns-lead { max-width: 62ch; margin: 0; }

/* ── Messages (succes, erreur, information) ──────────────────────────────── */
.ns-alert {
  display: flex; gap: 12px; align-items: flex-start;
  border-radius: var(--ns-radius-md); padding: 14px 16px;
  font-size: 14px; line-height: var(--ns-leading-body);
  margin-bottom: var(--ns-space-5); border: 1px solid transparent;
}
.ns-alert--ok   { background: var(--ns-success-tint); color: #0B6B31; border-color: #BFE7CE; }
.ns-alert--ko   { background: var(--ns-red-tint);     color: var(--ns-red-dark); border-color: #F8C7C7; }
.ns-alert--warn { background: var(--ns-warning-tint); color: var(--ns-warning); border-color: #EFDFA8; }
.ns-alert--info { background: var(--ns-blue-tint);    color: var(--ns-blue-deep); border-color: #C3DEFC; }
.ns-alert strong { display: block; }

/* Erreur attachee a un champ de formulaire */
.ns-error { display: block; margin-top: 6px; font-size: 12.5px; color: var(--ns-red-dark); }
.ns-input--error, .ns-textarea--error, .ns-select--error { border-color: var(--ns-red); }

/* ── Pagination ──────────────────────────────────────────────────────────── */
.ns-pager { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; margin-top: var(--ns-space-7); }
.ns-pager a, .ns-pager span {
  min-width: 42px; height: 42px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--ns-line); border-radius: var(--ns-radius-sm);
  background: var(--ns-paper); font-size: 14px; font-weight: 600; color: var(--ns-ink-soft);
}
.ns-pager a:hover { border-color: var(--ns-blue); color: var(--ns-blue-dark); }
.ns-pager [aria-current="page"] { background: var(--ns-blue); border-color: var(--ns-blue); color: #FFFFFF; }
.ns-pager span[aria-disabled] { opacity: .45; }

/* ── Barre de filtres ────────────────────────────────────────────────────── */
.ns-filters {
  display: flex; flex-wrap: wrap; gap: var(--ns-space-3); align-items: flex-end;
  background: var(--ns-paper); border: 1px solid var(--ns-line);
  border-radius: var(--ns-radius-lg); padding: 16px 18px; margin-bottom: var(--ns-space-5);
}
.ns-filters .ns-field { margin: 0; min-width: 170px; flex: 1 1 170px; }
.ns-filters .ns-btn { flex-shrink: 0; }

/* Filtres en pastilles (portfolio, categories du magazine) */
.ns-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--ns-space-6); }
.ns-chip {
  padding: 8px 16px; border-radius: var(--ns-radius-pill);
  border: 1px solid var(--ns-line); background: var(--ns-paper);
  font-size: 13.5px; font-weight: 600; color: var(--ns-ink-soft);
}
.ns-chip:hover { border-color: var(--ns-blue); color: var(--ns-blue-dark); }
.ns-chip[aria-current="true"] { background: var(--ns-ink); border-color: var(--ns-ink); color: #FFFFFF; }

/* ── Etat vide ───────────────────────────────────────────────────────────── */
.ns-empty {
  text-align: center; padding: var(--ns-space-8) var(--ns-space-5);
  border: 1px dashed var(--ns-line); border-radius: var(--ns-radius-lg);
  color: var(--ns-ink-muted); background: var(--ns-paper);
}

/* ── Corps d'article ─────────────────────────────────────────────────────── */
.ns-prose { max-width: 68ch; font-size: 16.5px; line-height: 1.75; color: var(--ns-ink); }
.ns-prose > * + * { margin-top: 1.1em; }
.ns-prose h2 { font-size: clamp(22px, 2.6vw, 30px); margin-top: 2em; }
.ns-prose h3 { font-size: clamp(18px, 2vw, 22px); margin-top: 1.6em; }
.ns-prose ul, .ns-prose ol { padding-left: 1.4em; }
.ns-prose li + li { margin-top: .4em; }
.ns-prose img { max-width: 100%; height: auto; border-radius: var(--ns-radius-md); }
.ns-prose blockquote {
  margin-left: 0; padding: 4px 0 4px 20px;
  border-left: 3px solid var(--ns-flame); font-size: 18px; color: var(--ns-ink-soft);
}
.ns-prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.ns-prose th, .ns-prose td { border: 1px solid var(--ns-line); padding: 10px 12px; text-align: left; }
.ns-prose code { font-family: var(--ns-font-mono); font-size: .9em; background: var(--ns-paper-alt); padding: 2px 5px; border-radius: 4px; }

/* Barriere des articles reserves aux abonnes */
.ns-paywall {
  margin-top: var(--ns-space-6); padding: var(--ns-space-6);
  background: var(--ns-flame); color: var(--ns-on-flame);
  border-radius: var(--ns-radius-lg); text-align: center;
}
.ns-paywall h3 { color: #FFFFFF; margin-top: 0; }

/* ── Commentaires ────────────────────────────────────────────────────────── */
.ns-comment { padding: var(--ns-space-5) 0; border-top: 1px solid var(--ns-line-soft); }
.ns-comment:first-child { border-top: none; }
.ns-comment__head { display: flex; gap: 10px; align-items: baseline; margin-bottom: 6px; }
.ns-comment__name { font-weight: 700; font-size: 14.5px; }

/* ── Choix des creneaux de rendez-vous ───────────────────────────────────── */
.ns-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.ns-slot { position: relative; }
.ns-slot input { position: absolute; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.ns-slot span {
  display: block; text-align: center; padding: 13px 8px;
  border: 1px solid var(--ns-line); border-radius: var(--ns-radius-md);
  background: var(--ns-paper); font-family: var(--ns-font-mono);
  font-size: 15px; font-weight: 600; color: var(--ns-ink);
}
.ns-slot input:checked + span { background: var(--ns-blue); border-color: var(--ns-blue); color: #FFFFFF; }
.ns-slot input:focus-visible + span { box-shadow: 0 0 0 3px rgba(24, 120, 248, .25); }

/* ── Barre de progression (projets) ──────────────────────────────────────── */
.ns-progress { height: 8px; border-radius: var(--ns-radius-pill); background: var(--ns-line); overflow: hidden; }
.ns-progress > i { display: block; height: 100%; background: var(--ns-blue); border-radius: inherit; }

/* ── Bandeau cookies ─────────────────────────────────────────────────────── */
.ns-cookies {
  position: fixed; inset-inline: 16px; bottom: 16px; z-index: var(--ns-z-toast);
  max-width: 620px; margin-inline: auto;
  background: var(--ns-ink); color: #FFFFFF;
  border-radius: var(--ns-radius-lg); padding: 18px 20px;
  box-shadow: var(--ns-shadow-lg);
  display: flex; flex-wrap: wrap; gap: var(--ns-space-4); align-items: center;
}
.ns-cookies p { margin: 0; font-size: 13.5px; flex: 1 1 260px; color: #E7E8EC; }
.ns-cookies a { color: #FFFFFF; text-decoration: underline; }
.ns-cookies[hidden] { display: none; }

/* ── Bascule de langue ───────────────────────────────────────────────────── */
.ns-lang { display: inline-flex; border: 1px solid var(--ns-line); border-radius: var(--ns-radius-pill); overflow: hidden; }
.ns-lang a {
  padding: 6px 12px; font-family: var(--ns-font-mono); font-size: 11.5px;
  font-weight: 700; letter-spacing: .06em; color: var(--ns-ink-muted); background: var(--ns-paper);
}
.ns-lang a[aria-current="true"] { background: var(--ns-ink); color: #FFFFFF; }

/* ── Grille de la mediatheque ────────────────────────────────────────────── */
.ns-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--ns-space-4); }
.ns-media-item { border: 1px solid var(--ns-line); border-radius: var(--ns-radius-md); overflow: hidden; background: var(--ns-paper); }
.ns-media-item img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.ns-media-item p { margin: 0; padding: 8px 10px; font-size: 12px; color: var(--ns-ink-soft); word-break: break-word; }

/* ── Impression : devis, factures, attestations ──────────────────────────── */
@media print {
  .ns-header, .ns-footer, .ns-cookies, .ns-whatsapp-fab,
  .ns-admin__aside, .ns-admin__topbar, .ns-no-print { display: none !important; }
  .ns-admin__content, .ns-section { padding: 0 !important; }
  a { text-decoration: none; color: #000; }
  body { background: #FFF; }
}