/* ============================================================
   TontineLink — feuille de style principale.
   Palette « wax » : vert emeraude dominant + jaune or en accent.
   Toutes les couleurs sont definies UNE fois ici en variables :root ;
   aucun hex en dur ailleurs (§2.5). Mobile-first (§2.6).
   ============================================================ */

:root {
  --nt-vert:        #0f7a52;  /* emeraude dominant */
  --nt-vert-fonce:  #0a5c3d;
  --nt-vert-clair:  #e6f4ee;
  --nt-or:          #d4a017;  /* jaune or accent */
  --nt-or-fonce:    #a87a10;
  --nt-or-clair:    #fbf3dc;

  --nt-texte:       #1c2b25;
  --nt-muet:        #6b7a72;
  --nt-fond:        #f6f8f7;
  --nt-carte:       #ffffff;
  --nt-bordure:     #e2e8e4;

  --nt-orange:      #e08a1e;  /* « declare, non verifie » */
  --nt-rouge:       #c0392b;  /* retard */
  --nt-succes:      var(--nt-vert);

  --nt-radius:      14px;
  --nt-ombre:       0 1px 3px rgba(16, 40, 30, .08), 0 1px 2px rgba(16, 40, 30, .06);

  /* — Typo display partagée avec la vitrine (D-02) — */
  --nt-display: 'Space Grotesk', system-ui, sans-serif;

  /* — Échelle émeraude étendue — */
  --nt-vert-100: #d2ebe0;
  --nt-vert-700: #0a5c3d;      /* alias de lisibilité de --nt-vert-fonce */
  --nt-encre:    #10241b;      /* titres très foncés */

  /* — Surfaces et profondeur — */
  --nt-fond-2:   #eef3f0;      /* fond de sections secondaires */
  --nt-ombre-2:  0 6px 18px rgba(16, 40, 30, .10);   /* cartes mises en avant */
  --nt-radius-lg: 20px;

  /* — Canaux de paiement (pastilles, jamais de logos — D-06) — */
  --nt-canal-wave: #1ba7e0;
  --nt-canal-om:   #ff7900;
  --nt-canal-cash: #6b7a72;
  --nt-whatsapp:   #25d366;
  --nt-sur-or:     #2a2000;    /* texte lisible posé sur un aplat or */
  --nt-blanc:      #ffffff;

  /* — Focus et animation — */
  --nt-focus: 0 0 0 3px rgba(15, 122, 82, .35);
  --nt-duree: .15s;
}

html, body { background: var(--nt-fond); color: var(--nt-texte); }
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

/* -- Marque -- */
.nt-brand {
  font-weight: 800;
  color: var(--nt-vert-fonce);
  text-decoration: none;
  font-size: 1.25rem;
  letter-spacing: -.02em;
}
.nt-brand i { color: var(--nt-or); }

/* -- Boutons -- */
.btn-nt {
  background: var(--nt-vert);
  border-color: var(--nt-vert);
  color: #fff;
  font-weight: 600;
}
.btn-nt:hover, .btn-nt:focus { background: var(--nt-vert-fonce); border-color: var(--nt-vert-fonce); color: #fff; }
.btn-nt-or {
  background: var(--nt-or);
  border-color: var(--nt-or);
  color: #2a2000;
  font-weight: 700;
}
.btn-nt-or:hover, .btn-nt-or:focus { background: var(--nt-or-fonce); border-color: var(--nt-or-fonce); color: #fff; }
.btn-nt-outline {
  border: 1.5px solid var(--nt-vert);
  color: var(--nt-vert-fonce);
  background: transparent;
  font-weight: 600;
}
.btn-nt-outline:hover { background: var(--nt-vert-clair); color: var(--nt-vert-fonce); }

/* Boutons pleine largeur ≥ 48px sur mobile (§2.6). */
.btn-bloc { display: block; width: 100%; min-height: 48px; font-size: 1.05rem; }

/* -- Cartes -- */
.nt-carte {
  background: var(--nt-carte);
  border: 1px solid var(--nt-bordure);
  border-radius: var(--nt-radius);
  box-shadow: var(--nt-ombre);
}

/* -- Chiffres dominants (montant, date du prochain tour) -- */
.nt-montant { font-size: 2rem; font-weight: 800; color: var(--nt-vert-fonce); letter-spacing: -.02em; }
.nt-montant-xl { font-size: 2.6rem; }

/* -- Badges de statut de cotisation (§4.3) -- */
.nt-badge { display: inline-block; padding: .22em .6em; border-radius: 999px; font-size: .78rem; font-weight: 600; }
.nt-badge-attendue { background: #eef1ef; color: var(--nt-muet); }
.nt-badge-declaree { background: var(--nt-or-clair); color: var(--nt-or-fonce); }   /* « Declare, non verifie » */
.nt-badge-confirmee { background: var(--nt-vert-clair); color: var(--nt-vert-fonce); }
.nt-badge-retard { background: #fbe6e3; color: var(--nt-rouge); }
.nt-badge-conteste { background: #fbe6e3; color: var(--nt-rouge); }                 /* Les 2 versions restent visibles */
.nt-badge-exoneree { background: #eef2f7; color: #5a6b80; }

/* -- Bandeau reglementaire permanent (§1.1c) -- */
.nt-bandeau-regl {
  background: var(--nt-or-clair);
  border: 1px solid #ecd9a0;
  color: #6b5410;
  border-radius: 10px;
  font-size: .82rem;
  padding: .55rem .8rem;
}
.nt-bandeau-regl i { color: var(--nt-or-fonce); }

/* -- Aide contextuelle depliable -- */
.nt-aide summary { cursor: pointer; color: var(--nt-vert-fonce); font-weight: 600; }
.nt-aide[open] summary { margin-bottom: .4rem; }

/* -- Barre d'onglets basse (mobile) -- */
.nt-tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 1030;
  display: flex; background: var(--nt-carte);
  border-top: 1px solid var(--nt-bordure);
  box-shadow: 0 -1px 4px rgba(16, 40, 30, .06);
}
.nt-tabbar a {
  flex: 1; text-align: center; padding: .5rem 0 .35rem;
  color: var(--nt-muet); text-decoration: none; font-size: .68rem;
}
.nt-tabbar a i { display: block; font-size: 1.25rem; margin-bottom: .1rem; }
.nt-tabbar a.actif { color: var(--nt-vert); }
.nt-tabbar .nt-badge-cloche {
  position: absolute; transform: translate(4px, -4px);
  background: var(--nt-rouge); color: #fff; border-radius: 999px;
  font-size: .6rem; padding: 0 .3em; min-width: 1.1em;
}

/* Sur mobile, laisser la place a la tabbar. */
@media (max-width: 991.98px) {
  .nt-avec-tabbar { padding-bottom: 76px; }
}
/* Nav laterale ≥ 992px (§2.6). */
@media (min-width: 992px) {
  .nt-tabbar { display: none; }
}

/* ============================================================
   SYSTÈME DE COMPOSANTS v2 (§4 du plan UI/UX)
   ============================================================ */

/* Typo display : titres de page et montants uniquement (D-02). */
h1, h2, .nt-titre, .nt-montant, .nt-montant-xl { font-family: var(--nt-display); letter-spacing: -.02em; }
h1, h2, .nt-titre { font-weight: 700; color: var(--nt-encre); }

/* Focus visible partout (§1.7). */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--nt-focus);
  border-radius: 8px;
}

/* Transitions communes cartes/boutons (§2.5). */
.nt-carte, .btn { transition: background var(--nt-duree), transform var(--nt-duree), box-shadow var(--nt-duree); }

/* -- C-01 · Carte tontine -- */
.nt-carte-tontine { position: relative; display: block; padding: 1rem; color: inherit; text-decoration: none; }
.nt-carte-tontine:hover { box-shadow: var(--nt-ombre-2); transform: translateY(-2px); color: inherit; }
.nt-carte-tontine .nt-ct-nom { font-family: var(--nt-display); font-weight: 700; font-size: 1.1rem; color: var(--nt-encre); }
.nt-carte-tontine .nt-ct-pied {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  margin-top: .75rem; padding-top: .65rem; border-top: 1px solid var(--nt-bordure);
  font-size: .84rem; color: var(--nt-muet);
}

/* -- C-02 · Jauge v2 -- */
.nt-jauge { height: 12px; background: var(--nt-vert-clair); border-radius: 999px; overflow: hidden; }
.nt-jauge > span { display: block; height: 100%; background: var(--nt-vert); border-radius: 999px; }
/* Remplissage animé une seule fois au chargement : la largeur cible est portée
   par --nt-cible, le JS retire .nt-jauge-anim quand l'animation est jouée. */
.nt-jauge-anim > span { width: 0 !important; animation: nt-remplir .6s ease-out forwards; }
@keyframes nt-remplir { to { width: var(--nt-cible, 0%) !important; } }
.nt-jauge-complete > span { background: var(--nt-or); }
.nt-jauge-etiquette { font-size: .84rem; color: var(--nt-muet); margin-top: .3rem; }
.nt-jauge-etiquette strong { color: var(--nt-encre); font-weight: 600; }

/* -- C-03 · Roue du cycle -- */
.nt-roue { display: block; width: 100%; max-width: 220px; margin-inline: auto; }
.nt-roue text { font-family: var(--nt-display); }
.nt-roue .nt-roue-titre { font-weight: 700; fill: var(--nt-encre); }
.nt-roue .nt-roue-sous { font-weight: 500; fill: var(--nt-muet); }
@media (min-width: 576px) { .nt-roue { max-width: 260px; } }

/* -- C-04 · Timeline du registre -- */
.nt-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.nt-timeline > li { position: relative; padding: 0 0 1.1rem 2.25rem; }
.nt-timeline > li::before {           /* rail vertical */
  content: ""; position: absolute; inset-inline-start: 13px; top: 1.6rem; bottom: 0;
  width: 2px; background: var(--nt-bordure);
}
.nt-timeline > li:last-child::before { display: none; }
.nt-timeline .nt-tl-puce {
  position: absolute; inset-inline-start: 0; top: .1rem;
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; font-size: .85rem;
  background: var(--nt-fond-2); color: var(--nt-muet);
}
.nt-tl-declare  { background: var(--nt-or-clair); color: var(--nt-or-fonce); }
.nt-tl-confirme { background: var(--nt-vert-clair); color: var(--nt-vert-fonce); }
.nt-tl-conteste { background: #fbe6e3; color: var(--nt-rouge); }
.nt-tl-remise   { background: var(--nt-or-clair); color: var(--nt-or-fonce); }
.nt-tl-reception{ background: var(--nt-vert-clair); color: var(--nt-vert-fonce); }
.nt-timeline .nt-tl-quand { font-size: .8rem; color: var(--nt-muet); }

/* -- Tracabilite nominative : qui a saisi, qui a confirme (Lot 0 n°1) -- */
.nt-tracabilite {
  font-size: .78rem; color: var(--nt-muet); line-height: 1.45;
  margin-top: .15rem; display: flex; align-items: baseline; gap: .3rem;
}
.nt-tracabilite i { font-size: .72rem; flex: none; }

/* -- Contestation : les deux versions cote a cote (Lot 0 n°3) -- */
.nt-litige {
  border-inline-start: 3px solid var(--nt-rouge); background: #fdf3f1;
  border-radius: 4px; padding: .55rem .7rem; margin-top: .5rem;
}
.nt-litige-titre {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--nt-rouge); font-weight: 600; margin-bottom: .35rem;
}
.nt-litige-version { font-size: .82rem; line-height: 1.5; }
.nt-litige-version + .nt-litige-version { margin-top: .3rem; padding-top: .3rem; border-top: 1px dashed rgba(0,0,0,.12); }
.nt-litige-qui { font-weight: 600; }

/* -- C-05 · Stat-tile -- */
.nt-stat { position: relative; overflow: hidden; padding: .85rem 1rem; }
.nt-stat .nt-stat-lib { font-size: .78rem; color: var(--nt-muet); text-transform: uppercase; letter-spacing: .06em; }
.nt-stat .nt-stat-val { font-family: var(--nt-display); font-weight: 700; font-size: 1.5rem; color: var(--nt-encre); line-height: 1.15; }
.nt-stat .nt-stat-ic { position: absolute; inset-inline-end: .6rem; bottom: .35rem; font-size: 2.2rem; color: var(--nt-vert); opacity: .1; }

/* -- C-06 · État vide narratif -- */
.nt-vide { text-align: center; padding: 3rem 1.25rem; }
.nt-vide svg { width: 116px; height: 116px; margin-bottom: 1rem; }
.nt-vide p { color: var(--nt-muet); max-width: 32ch; margin-inline: auto; margin-bottom: 1.25rem; }

/* -- C-07 · Pastille canal -- */
.nt-canal { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; color: var(--nt-muet); }
.nt-canal::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--nt-canal-cash); flex: 0 0 auto; }
.nt-canal-wave::before   { background: var(--nt-canal-wave); }
.nt-canal-om::before     { background: var(--nt-canal-om); }
.nt-canal-especes::before{ background: var(--nt-canal-cash); }
.nt-canal-autre::before  { background: var(--nt-bordure); }

/* -- C-08 · Boutons canal (radios déguisés) -- */
.nt-btn-canal { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
.nt-btn-canal input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.nt-btn-canal label {
  display: flex; flex-direction: column; justify-content: center; gap: .3rem;
  min-height: 72px; padding: .75rem; cursor: pointer;
  border: 2px solid var(--nt-bordure); border-radius: var(--nt-radius);
  background: var(--nt-carte); font-weight: 600;
  transition: border-color var(--nt-duree), background var(--nt-duree);
}
.nt-btn-canal input:checked + label { border-color: var(--nt-vert); background: var(--nt-vert-clair); }
.nt-btn-canal input:focus-visible + label { box-shadow: var(--nt-focus); }

/* -- C-09 · Bouton WhatsApp -- */
.btn-whatsapp { background: var(--nt-whatsapp); border-color: var(--nt-whatsapp); color: #08351a; font-weight: 700; }
.btn-whatsapp:hover, .btn-whatsapp:focus { background: #1eb457; border-color: #1eb457; color: #08351a; }
.nt-wa-apercu {
  font-size: .82rem; color: var(--nt-muet); background: var(--nt-fond-2);
  border-radius: 10px; padding: .55rem .7rem; margin-top: .5rem; white-space: pre-line;
}

/* -- C-10 · Comparateur de règlement -- */
.nt-comparateur { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.nt-comparateur .nt-cmp-titre { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--nt-muet); margin-bottom: .5rem; }
.nt-comparateur .nt-cmp-ligne { padding: .45rem .6rem; border-radius: 8px; font-size: .92rem; }
.nt-comparateur .nt-cmp-ligne.nt-inchange { color: var(--nt-muet); }
.nt-comparateur .nt-cmp-ligne.nt-modifie { background: var(--nt-or-clair); }
.nt-comparateur .nt-cmp-ligne del { color: var(--nt-muet); }
.nt-comparateur .nt-cmp-ligne ins { text-decoration: none; font-weight: 700; }
@media (max-width: 575.98px) { .nt-comparateur { grid-template-columns: 1fr; } }

/* -- C-11 · Stepper -- */
.nt-stepper { display: flex; align-items: flex-start; gap: 0; margin-bottom: 1.5rem; }
.nt-stepper .nt-etape { flex: 1; text-align: center; position: relative; font-size: .78rem; color: var(--nt-muet); }
.nt-stepper .nt-etape::before {         /* trait de liaison */
  content: ""; position: absolute; top: 13px; inset-inline-start: -50%; width: 100%; height: 2px; background: var(--nt-bordure);
}
.nt-stepper .nt-etape:first-child::before { display: none; }
.nt-stepper .nt-etape .nt-pt {
  position: relative; z-index: 1; width: 28px; height: 28px; margin: 0 auto .35rem;
  border-radius: 50%; display: grid; place-items: center;
  background: var(--nt-fond-2); color: var(--nt-muet); font-weight: 700; font-size: .85rem;
}
.nt-stepper .nt-etape.nt-faite .nt-pt { background: var(--nt-vert-clair); color: var(--nt-vert-fonce); }
.nt-stepper .nt-etape.nt-faite::before { background: var(--nt-vert); }
.nt-stepper .nt-etape.nt-courante .nt-pt { background: var(--nt-vert); color: #fff; }
.nt-stepper .nt-etape.nt-courante { color: var(--nt-vert-fonce); font-weight: 700; }

/* -- C-12 · Skeleton -- */
.nt-skeleton { background: var(--nt-fond-2); border-radius: 8px; min-height: 1rem; position: relative; overflow: hidden; }
.nt-skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent);
  animation: nt-shimmer 1.2s linear infinite;
}
@keyframes nt-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* -- C-13 · Toasts (flash v2) -- */
.nt-toasts { position: fixed; top: .75rem; left: 50%; transform: translateX(-50%); z-index: 1080; width: min(560px, calc(100% - 1.5rem)); }
.nt-toast {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .7rem .9rem; margin-bottom: .5rem;
  background: var(--nt-carte); border: 1px solid var(--nt-bordure);
  border-inline-start: 4px solid var(--nt-muet); border-radius: var(--nt-radius);
  box-shadow: var(--nt-ombre-2);
}
.nt-toast-succes { border-inline-start-color: var(--nt-vert); }
.nt-toast-succes > i { color: var(--nt-vert); }
.nt-toast-erreur { border-inline-start-color: var(--nt-rouge); }
.nt-toast-erreur > i { color: var(--nt-rouge); }
.nt-toast-info { border-inline-start-color: var(--nt-or); }
.nt-toast-info > i { color: var(--nt-or-fonce); }
.nt-toast .btn-close { margin-inline-start: auto; font-size: .7rem; }

/* -- C-14 · Tableaux transformés en cartes sous 768 px -- */
@media (max-width: 767.98px) {
  .nt-table-cartes thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .nt-table-cartes, .nt-table-cartes tbody, .nt-table-cartes tr, .nt-table-cartes td { display: block; width: 100%; }
  .nt-table-cartes tr {
    background: var(--nt-carte); border: 1px solid var(--nt-bordure);
    border-radius: var(--nt-radius); box-shadow: var(--nt-ombre);
    margin-bottom: .75rem; padding: .35rem .25rem;
  }
  .nt-table-cartes td { display: flex; justify-content: space-between; gap: 1rem; border: 0; padding: .4rem .75rem; }
  .nt-table-cartes td::before {
    content: attr(data-th); font-size: .78rem; color: var(--nt-muet);
    font-weight: 600; flex: 0 0 40%; text-align: start;
  }
  .nt-table-cartes td:empty { display: none; }
}

/* -- C-15 · Bandeau de moment (§2.2) -- */
.nt-moment {
  display: flex; align-items: center; gap: .9rem;
  padding: 1rem 1.1rem; border-radius: var(--nt-radius-lg); margin-bottom: 1rem;
}
.nt-moment > i { font-size: 2rem; flex: 0 0 auto; }
.nt-moment .nt-moment-titre { font-family: var(--nt-display); font-weight: 700; font-size: 1.15rem; line-height: 1.2; }
.nt-moment-or { background: var(--nt-or); color: #2a2000; }
.nt-moment-tour { background: linear-gradient(110deg, var(--nt-vert) 0%, var(--nt-or) 100%); color: #fff; }
.nt-moment-tour .nt-moment-titre { font-size: 1.35rem; }
.nt-moment-fin { background: var(--nt-vert-clair); color: var(--nt-vert-fonce); border: 1px solid var(--nt-vert-100); }
/* Halo doré joué UNE fois (§2.2 / D-10). */
.nt-moment-halo { animation: nt-halo .6s ease-out 1; }
@keyframes nt-halo {
  from { box-shadow: 0 0 0 0 rgba(212, 160, 23, .55); }
  to   { box-shadow: 0 0 0 18px rgba(212, 160, 23, 0); }
}
/* Check qui « pop » à la confirmation. */
.nt-pop { animation: nt-pop .25s ease-out 1; }
@keyframes nt-pop { from { transform: scale(.8); } to { transform: scale(1); } }

/* -- C-16 · Compteur de fiabilité (JAMAIS inter-tontines) -- */
.nt-fiabilite { display: inline-flex; align-items: center; gap: .7rem; font-size: .8rem; color: var(--nt-muet); }
.nt-fiabilite .nt-fi-heure { color: var(--nt-vert-fonce); }
.nt-fiabilite .nt-fi-retard { color: var(--nt-rouge); }
.nt-fiabilite .nt-fi-serie { color: var(--nt-or-fonce); }

/* -- Barre « hors connexion » (layouts) -- */
.nt-offline-bar { background: var(--nt-rouge); color: #fff; text-align: center; padding: .3rem; font-size: .85rem; }

/* -- Solidité du mot de passe : 3 barres + libellé (E-09) -- */
.nt-solidite { display: flex; align-items: center; gap: .25rem; font-size: .78rem; color: var(--nt-muet); margin-top: .4rem; }
.nt-solidite i { display: block; width: 26px; height: 4px; border-radius: 999px; background: var(--nt-bordure); }
.nt-solidite span { margin-inline-start: .4rem; }
.nt-solidite[data-niveau="1"] i:nth-child(1) { background: var(--nt-rouge); }
.nt-solidite[data-niveau="2"] i:nth-child(-n+2) { background: var(--nt-or); }
.nt-solidite[data-niveau="3"] i { background: var(--nt-vert); }

/* Troncature de texte dans un conteneur flex. */
.min-w-0 { min-width: 0; }

/* Réordonnancement de l'ordre des tours (E-28). */
.nt-rang { color: var(--nt-muet); font-weight: 700; min-width: 1.6em; }
.nt-ordre-fige .nt-ordre-btns { visibility: hidden; }

/* -- Avatar initiales -- */
.nt-avatar {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--nt-vert-clair); color: var(--nt-vert-fonce);
  font-weight: 700; font-size: .85rem;
}

/* -- Nav latérale (layouts app/admin) -- */
.nt-nav .nav-link { color: var(--nt-texte); border-radius: 10px; padding: .55rem .7rem; font-weight: 500; }
.nt-nav .nav-link:hover { background: var(--nt-fond-2); }
.nt-nav .nav-link.actif, .nt-nav .nav-link.active { background: var(--nt-vert-clair); color: var(--nt-vert-fonce); font-weight: 700; }

/* -- Respect de prefers-reduced-motion sur TOUTE animation (§1.7) -- */
@media (prefers-reduced-motion: reduce) {
  .nt-jauge-anim > span { animation: none; width: var(--nt-cible, 0%) !important; }
  .nt-skeleton::after { animation: none; }
  .nt-moment-halo, .nt-pop { animation: none; }
  .nt-carte-tontine:hover { transform: none; }
  * { scroll-behavior: auto !important; }
}

/* -- Écrans d'authentification (E-08→E-11) -- */
.nt-auth { max-width: 420px; margin-inline: auto; }
.nt-marque-roue { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-bottom: 1.25rem; }
.nt-marque-roue-nom { font-family: var(--nt-display); font-weight: 700; font-size: 1.5rem; color: var(--nt-vert-fonce); letter-spacing: -.02em; }
.nt-prefixe { background: var(--nt-fond-2); color: var(--nt-muet); font-weight: 600; border: 1px solid var(--nt-bordure); border-inline-end: 0; }
/* Grande icône d'état (résultat, retour paiement, erreurs) */
.nt-etat-ic { font-size: 3rem; line-height: 1; }
.nt-etat-ic.nt-ok { color: var(--nt-vert); }
.nt-etat-ic.nt-attente { color: var(--nt-or); }
.nt-etat-ic.nt-ko { color: var(--nt-rouge); }
.nt-rond-emeraude { width: 84px; height: 84px; border-radius: 50%; background: var(--nt-vert-clair); color: var(--nt-vert); display: grid; place-items: center; font-size: 2.4rem; margin: 0 auto 1rem; }
/* Illustration d'erreur (SVG inline) */
.nt-err-svg { width: 132px; height: 132px; margin: 0 auto 1rem; display: block; }
.nt-err-code { font-size: .8rem; color: var(--nt-muet); letter-spacing: .1em; }

/* ============================================================
   BACK-OFFICE ADMIN (E-31, gabarit unique — D-08)
   ============================================================ */
/* La « salle du registre » : nuit d'encre émeraude + or du mil. La roue de
   points de la marque devient le séparateur des groupes du menu. */
.nt-admin-side {
  width: 248px; min-height: 100vh; position: sticky; top: 0;
  background: linear-gradient(178deg, #0B1F17 0%, #0E241C 68%, #10281E 100%);
}
.nt-admin-side .nt-brand, .nt-admin-side .nt-brand:hover { color: var(--nt-blanc); }
.nt-admin-side .nt-brand i { color: var(--nt-or); }
.nt-admin-side .badge { background: rgba(212, 160, 23, .18) !important; color: var(--nt-or); font-weight: 600; }

/* Groupes : petites capitales dorées, séparées par la roue en pointillés. */
.nt-admin-groupe {
  font-size: .64rem; text-transform: uppercase; letter-spacing: .13em;
  color: #E3A63C; font-weight: 700;
  margin: 1.1rem 0 .3rem; padding: .55rem .75rem 0;
  border-top: 1px dashed rgba(227, 166, 60, .3);
}
.nt-admin-groupe:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.nt-admin-reserve { color: #E3A63C; margin-inline-start: auto; font-size: .7rem; }

.nt-admin-side .nav-link, #navAdmin .nav-link {
  color: rgba(244, 238, 221, .68); border-radius: 9px; padding: .48rem .7rem;
  border-inline-start: 3px solid transparent;
  transition: background var(--nt-duree), color var(--nt-duree);
}
.nt-admin-side .nav-link:hover, #navAdmin .nav-link:hover { background: rgba(244, 238, 221, .07); color: #fff; }
.nt-admin-side .nav-link.active, #navAdmin .nav-link.active {
  background: rgba(212, 160, 23, .13); color: #fff; font-weight: 600;
  border-inline-start-color: var(--nt-or);
}
.nt-admin-side .nav-link i, #navAdmin .nav-link i { opacity: .8; }
.nt-admin-side .btn-nt-outline { border-color: rgba(244, 238, 221, .3); color: rgba(244, 238, 221, .85); }
.nt-admin-side .btn-nt-outline:hover { background: rgba(244, 238, 221, .1); color: #fff; }

/* Tiroir mobile : même nuit que la barre latérale. */
#navAdmin { background: #0B1F17; color: rgba(244, 238, 221, .85); max-width: 290px; }
#navAdmin .offcanvas-title { color: #fff; }
#navAdmin .offcanvas-title i { color: var(--nt-or); }
#navAdmin .btn-close { filter: invert(1) grayscale(1); }
#navAdmin .btn-nt-outline { border-color: rgba(244, 238, 221, .3); color: rgba(244, 238, 221, .85); }

.nt-admin-main { max-width: 1200px; }
.nt-admin-topbar {
  border-bottom: 1px solid var(--nt-bordure); background: var(--nt-carte);
  position: sticky; top: 0; z-index: 30;
}
.nt-admin-fil { font-size: .8rem; color: var(--nt-muet); }
.nt-admin-fil strong { color: var(--nt-encre); font-weight: 600; }

/* Pastille de l'administrateur connecté. */
.nt-admin-qui { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--nt-muet); }
.nt-admin-qui .nt-avatar {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--nt-vert-clair); color: var(--nt-vert-fonce); font-weight: 700; font-size: .78rem;
}
.nt-admin-proprio {
  font-size: .62rem; text-transform: uppercase; letter-spacing: .08em;
  background: var(--nt-or-clair); color: var(--nt-or-fonce);
  border-radius: 999px; padding: .1rem .45rem; font-weight: 700;
}

/* Titres de page : la display de la marque, un filet doré court. */
.nt-admin-main h1 {
  font-family: var(--nt-display); letter-spacing: -.02em;
  padding-bottom: .45rem; margin-bottom: 1.1rem; position: relative;
}
.nt-admin-main h1::after {
  content: ""; position: absolute; bottom: 0; inset-inline-start: 0;
  width: 42px; height: 3px; border-radius: 2px; background: var(--nt-or);
}

/* Tuiles KPI : le chiffre est le héros. */
.nt-admin-main .nt-stat { border-top: 3px solid transparent; transition: transform var(--nt-duree), box-shadow var(--nt-duree), border-color var(--nt-duree); }
.nt-admin-main .nt-stat:hover { transform: translateY(-2px); box-shadow: var(--nt-ombre-2); border-top-color: var(--nt-or); }
.nt-admin-main .nt-stat .nt-stat-val { font-size: 1.6rem; }

/* Tableaux : denses, en-tête collant, survol net. */
.nt-admin-table { font-size: .88rem; }
.nt-admin-table thead th {
  background: var(--nt-fond-2); color: var(--nt-muet); font-weight: 600;
  text-transform: uppercase; font-size: .7rem; letter-spacing: .06em;
  border-bottom: 1px solid var(--nt-bordure);
  position: sticky; top: 0;
}
.nt-admin-table tbody tr { border-bottom: 1px solid var(--nt-bordure); }
.nt-admin-table tbody tr:nth-child(even) { background: var(--nt-fond); }
.nt-admin-table tbody tr:hover { background: var(--nt-vert-clair); }
.nt-admin-table td, .nt-admin-table th { padding: .55rem .65rem; vertical-align: middle; }
.nt-admin-table .nt-montant, .nt-admin-table [data-nombre] { font-variant-numeric: tabular-nums; }

/* Bandeau d'action sensible (motif audité). */
.nt-admin-audit { background: var(--nt-or-clair); border: 1px solid #ecd9a0; color: #6b5410; border-radius: 10px; padding: .6rem .85rem; font-size: .85rem; }
.nt-admin-audit i { color: var(--nt-or-fonce); }

@media (prefers-reduced-motion: reduce) {
  .nt-admin-main .nt-stat, .nt-admin-side .nav-link { transition: none; }
  .nt-admin-main .nt-stat:hover { transform: none; }
}

/* -- Pages légales (E-07, traitement léger) -- */
.nt-legal { line-height: 1.7; }
.nt-legal h2 { font-size: 1.05rem; margin-top: 1.5rem; color: var(--nt-encre); }
.nt-legal h2:first-of-type { margin-top: .5rem; }
.nt-sommaire { list-style: none; padding: .75rem 1rem; margin: 0 0 1.25rem; background: var(--nt-fond-2); border-radius: 12px; }
.nt-sommaire li { padding: .15rem 0; }
.nt-sommaire a { color: var(--nt-vert-fonce); text-decoration: none; }
.nt-sommaire a:hover { text-decoration: underline; }

/* -- Affiche A4 imprimable (E-06) -- */
.nt-affiche { max-width: 480px; padding: 2.5rem 2rem; text-align: center; }
.nt-affiche-head { display: flex; align-items: center; justify-content: center; gap: .6rem; margin-bottom: 1.5rem; }
.nt-affiche-marque { font-family: var(--nt-display); font-weight: 700; font-size: 2rem; color: var(--nt-vert-fonce); letter-spacing: -.02em; }
.nt-affiche-titre { font-family: var(--nt-display); font-weight: 700; font-size: 1.9rem; line-height: 1.15; color: var(--nt-encre); margin-bottom: 1.5rem; }
.nt-affiche-benefices { list-style: none; padding: 0; margin: 0 auto 1.75rem; max-width: 320px; text-align: start; }
.nt-affiche-benefices li { padding: .35rem 0; }
.nt-affiche-benefices i { color: var(--nt-vert); margin-inline-end: .4rem; }
.nt-affiche-qr-cadre { display: inline-block; padding: .75rem; background: #fff; border: 1px solid var(--nt-bordure); border-radius: 12px; }
.nt-affiche-qr-cadre svg { width: 170px; height: 170px; display: block; }
.nt-affiche-qr-txt { color: var(--nt-muet); font-size: .9rem; margin-top: .6rem; }
.nt-affiche-url { font-family: var(--nt-display); font-weight: 700; font-size: 1.2rem; color: var(--nt-vert-fonce); margin: 1.25rem 0 .5rem; word-break: break-all; }
.nt-affiche-pied { font-size: .78rem; color: var(--nt-muet); }
@media print {
  @page { size: A4 portrait; margin: 1.5cm; }
  .nt-affiche { max-width: none; border: 0; box-shadow: none; padding: 0; }
}

/* -- Bilan de cycle (E-30) -- */
.nt-bilan { background: var(--nt-blanc); }
.nt-bilan .nt-brand i { color: var(--nt-or); }
.nt-bilan-thead th { background: var(--nt-vert-clair); }
.nt-signature { border-top: 1px solid var(--nt-texte); padding-top: 4px; }

/* -- Impression bilan (§5.2) -- */
@media print {
  .nt-noprint, .nt-tabbar, .nt-toasts, header, footer, aside { display: none !important; }
  body { background: var(--nt-blanc); }
  .nt-carte { box-shadow: none; border-color: var(--nt-muet); }
  .nt-bilan { border: 0; }
  .nt-bilan-thead th { background: transparent; border-bottom: 2px solid var(--nt-texte); }
  .nt-bilan .table, .nt-bilan .table th, .nt-bilan .table td { border-color: var(--nt-texte) !important; }
}

/* ===== Célébration « pot complet » (C-fête) : pluie d'or dans le bandeau or ===== */
.nt-fete { position: relative; overflow: hidden; }
.nt-confetti {
  position: absolute; top: -8px; width: 7px; height: 11px; border-radius: 2px;
  background: #fff; opacity: .95; pointer-events: none;
  animation: nt-confetti-chute 1.4s ease-in forwards;
}
.nt-confetti-vert { background: var(--nt-vert); }
@keyframes nt-confetti-chute {
  0%   { transform: translateY(-10px) rotate(0deg); opacity: 0; }
  15%  { opacity: .95; }
  100% { transform: translateY(90px) rotate(280deg); opacity: 0; }
}
.nt-fete > i { animation: nt-trophee 1s ease 1; }
@keyframes nt-trophee {
  0%, 100% { transform: none; }
  30% { transform: scale(1.25) rotate(-8deg); }
  60% { transform: scale(1.1) rotate(6deg); }
}
@media (prefers-reduced-motion: reduce) {
  .nt-confetti { display: none; }
  .nt-fete > i { animation: none; }
}

/* ===== Entrée en douceur des cartes (cascade discrète, toutes zones) ===== */
.nt-entree { animation: nt-entree .45s cubic-bezier(.2,.7,.3,1) backwards; }
@keyframes nt-entree {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
/* Retour d'appui : les boutons répondent sous le doigt */
.btn-nt:active, .btn-nt-or:active, .btn-nt-outline:active, .btn-whatsapp:active { transform: scale(.97); }
.btn-nt, .btn-nt-or, .btn-nt-outline, .btn-whatsapp { transition: transform .12s ease, filter .15s ease; }
/* Cartes tontine : léger soulèvement au survol (souris uniquement) */
@media (hover: hover) {
  .nt-carte-tontine { transition: transform .2s ease, box-shadow .2s ease; }
  .nt-carte-tontine:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(15, 40, 30, .1); }
}
@media (prefers-reduced-motion: reduce) {
  .nt-entree { animation: none; }
  .btn-nt:active, .btn-nt-or:active, .btn-nt-outline:active, .btn-whatsapp:active { transform: none; }
  .nt-carte-tontine:hover { transform: none; box-shadow: none; }
}

/* -- Recu de tour (Lot 1 n°7) : le cahier ouvert sur la table -- */
.nt-recu { background: var(--nt-blanc); }
.nt-recu-tete {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding-bottom: .75rem; border-bottom: 2px solid var(--nt-vert);
}
.nt-recu-montant {
  text-align: center; padding: 1rem .5rem; margin: 1rem 0;
  background: var(--nt-vert-clair); border-radius: var(--nt-radius);
}
.nt-recu-benef {
  font-family: var(--nt-display); font-weight: 700; font-size: 1.35rem;
  color: var(--nt-encre); margin: .15rem 0 .35rem;
}
.nt-recu-lignes { margin: 0; }
.nt-recu-lignes > div {
  display: flex; flex-wrap: wrap; gap: .25rem 1rem;
  padding: .5rem 0; border-bottom: 1px solid var(--nt-bordure);
}
.nt-recu-lignes dt { flex: 0 0 8.5rem; color: var(--nt-muet); font-size: .85rem; font-weight: 400; }
.nt-recu-lignes dd { flex: 1 1 12rem; margin: 0; font-size: .92rem; }
.nt-recu-membres { list-style: none; margin: 0; padding: 0; }
.nt-recu-membres li {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .4rem 0; border-bottom: 1px solid var(--nt-bordure);
}
.nt-recu-nom { font-size: .93rem; }
.nt-recu-mention {
  margin: 1.25rem 0 0; padding-top: .75rem; border-top: 1px solid var(--nt-bordure);
  font-size: .76rem; color: var(--nt-muet); line-height: 1.5;
}
@media print {
  .nt-recu { border: 0; box-shadow: none; }
  .nt-recu-montant { background: transparent; border: 1px solid var(--nt-texte); }
}