/* ══════════════════════════════════════════════════════════════
   netextra — feuille de style commune (design 2026)
   Tokens + composants réutilisables. Préfixe : nx-
   Chargée après style.css ; le layout (sidebar, header) reste dans haut.php.
   ══════════════════════════════════════════════════════════════ */

:root {
    /* Couleurs */
    --nx-cyan:        #00ACC4;
    --nx-cyan-hover:  #0098AE;
    --nx-cyan-dark:   #007A8E;
    --nx-cyan-halo:   rgba(0,172,196,0.12);
    --nx-cyan-focus:  rgba(0,172,196,0.25);
    --nx-cyan-fond:   #E8F8FB;
    --nx-cyan-fond2:  #F0FAFB;

    --nx-texte:       #233239;
    --nx-texte-2:     #546E7A;
    --nx-texte-3:     #78939C;
    --nx-gris:        #A2AAAD;
    --nx-placeholder: #BCC4C8;

    --nx-fond:        #EEF1F3;
    --nx-fond-champ:  #FAFBFC;
    --nx-fond-doux:   #F0F2F3;
    --nx-bordure:     #E0E5E8;
    --nx-separateur:  #EEF1F3;
    --nx-inactif:     #D0D4D7;

    --nx-vert:        #759F4A;
    --nx-vert-texte:  #4A7A20;
    --nx-vert-fond:   #EBF5E1;
    --nx-rouge:       #A64444;
    --nx-rouge-bord:  #EDCFCF;
    --nx-rouge-fond:  #F5E8E8;
    --nx-orange:      #A07820;
    --nx-orange-fond: #FFF8E8;

    /* Typo */
    --nx-font:        'Rubik', sans-serif;
    --nx-font-titre:  'Lexend', sans-serif;

    /* Formes */
    --nx-r-carte:     16px;
    --nx-r-bloc:      12px;
    --nx-r-champ:     8px;
    --nx-r-bouton:    9px;
    --nx-ombre:       0 2px 20px rgba(35,50,57,0.07);
    --nx-ombre-bloc:  0 1px 6px rgba(35,50,57,0.05);
    --nx-tr:          0.18s ease;
}

/* ── Page ─────────────────────────────────────────────────── */
.nx-page {
    padding: 24px 24px 100px;
    font-family: var(--nx-font);
    color: var(--nx-texte);
}
.nx-page-etroite { max-width: 780px; margin: 0 auto; padding: 28px 20px 100px; }

.nx-titre {
    font-family: var(--nx-font-titre);
    font-size: 22px; font-weight: 700;
    color: var(--nx-texte);
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 4px;
}
.nx-titre-ico {
    width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--nx-cyan) 0%, var(--nx-cyan-dark) 100%);
    color: white; font-size: 17px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 10px rgba(0,172,196,0.35);
}
.nx-sous-titre { font-size: 13px; color: var(--nx-gris); margin-bottom: 24px; }

/* ── Carte ────────────────────────────────────────────────── */
.nx-carte {
    background: white;
    border-radius: var(--nx-r-carte);
    box-shadow: var(--nx-ombre);
    overflow: hidden;
}
.nx-carte-section { padding: 26px 32px; border-top: 1px solid var(--nx-separateur); }
.nx-carte-section:first-child { border-top: 0; }
.nx-carte-pied {
    padding: 20px 32px;
    background: var(--nx-fond-champ); border-top: 1px solid var(--nx-separateur);
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.nx-carte-titre {
    font-family: var(--nx-font-titre); font-size: 13px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.07em;
    color: var(--nx-gris); display: flex; align-items: center; gap: 7px;
}
.nx-grille-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* ── Libellés & aides ─────────────────────────────────────── */
.nx-label {
    display: block;
    font-family: var(--nx-font-titre);
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--nx-texte-2);
    margin-bottom: 8px;
}
.nx-label-ligne {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    margin-bottom: 14px;
}
.nx-label-ligne .nx-label { margin-bottom: 0; }
.nx-aide { font-size: 12px; color: var(--nx-gris); }
.nx-obligatoire { color: var(--nx-cyan); }

/* ── Champs ───────────────────────────────────────────────── */
.nx-champ, .nx-select, .nx-textarea {
    padding: 11px 14px;
    border-radius: var(--nx-r-champ); border: 1.5px solid var(--nx-bordure);
    background: var(--nx-fond-champ);
    font-family: var(--nx-font); font-size: 14px; color: var(--nx-texte);
    outline: none;
    transition: border-color var(--nx-tr), box-shadow var(--nx-tr);
    box-sizing: border-box;
}
.nx-champ-100 { width: 100%; }
.nx-champ:focus, .nx-select:focus, .nx-textarea:focus {
    border-color: var(--nx-cyan); background: white;
    box-shadow: 0 0 0 3px var(--nx-cyan-halo);
}
.nx-champ::placeholder, .nx-textarea::placeholder { color: var(--nx-placeholder); }
.nx-select {
    padding-right: 36px; -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%2378939C' stroke-width='1.6'/></svg>");
    background-repeat: no-repeat; background-position: right 14px center;
}
.nx-textarea { width: 100%; min-height: 110px; resize: vertical; }

.nx-champs { display: flex; flex-direction: column; gap: 18px; }
.nx-ligne  { display: flex; gap: 16px; flex-wrap: wrap; }
.nx-ligne > * { flex: 1; min-width: 140px; }

/* ── Boutons ──────────────────────────────────────────────── */
.nx-btn {
    padding: 10px 18px; border-radius: var(--nx-r-bouton);
    font-family: var(--nx-font-titre); font-size: 13px; font-weight: 600;
    display: inline-flex; align-items: center; gap: 7px;
    cursor: pointer; text-decoration: none;
    border: 1.5px solid transparent;
    transition: background var(--nx-tr), color var(--nx-tr), border-color var(--nx-tr), transform 0.15s;
}
.nx-btn-primaire { background: var(--nx-cyan); color: white; box-shadow: 0 3px 10px rgba(0,172,196,0.28); }
.nx-btn-primaire:hover { background: var(--nx-cyan-hover); color: white; transform: translateY(-1px); }
.nx-btn-contour { background: white; color: var(--nx-texte-2); border-color: var(--nx-bordure); }
.nx-btn-contour:hover { border-color: var(--nx-cyan); color: var(--nx-cyan); }
.nx-btn-danger { background: white; color: var(--nx-rouge); border-color: var(--nx-rouge-bord); }
.nx-btn-danger:hover { background: var(--nx-rouge-fond); border-color: #C97070; }
.nx-btn-grand { padding: 12px 22px; font-size: 14px; }
.nx-btn:focus-visible { outline: 3px solid rgba(0,172,196,0.35); outline-offset: 2px; }

.nx-btn-icone {
    width: 32px; height: 32px; border-radius: 8px; border: none; background: none;
    color: var(--nx-inactif); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; text-decoration: none;
    transition: background var(--nx-tr), color var(--nx-tr);
}
.nx-btn-icone:hover { background: var(--nx-fond-doux); color: var(--nx-texte); }
.nx-btn-icone.danger:hover { background: var(--nx-rouge-fond); color: var(--nx-rouge); }

/* ── Contrôle segmenté (radios) ───────────────────────────── */
.nx-seg {
    display: inline-flex;
    background: var(--nx-fond-doux); border-radius: 10px; padding: 3px;
}
.nx-seg label {
    padding: 8px 18px; border-radius: 8px;
    font-size: 13px; color: var(--nx-texte-3); cursor: pointer;
    display: flex; align-items: center; gap: 7px;
    position: relative;
    transition: background var(--nx-tr), color var(--nx-tr), box-shadow var(--nx-tr);
}
.nx-seg label:hover { color: var(--nx-texte); }
.nx-seg input { position: absolute; opacity: 0; width: 0; height: 0; }
.nx-seg label.on {
    background: white; color: var(--nx-texte); font-weight: 500;
    box-shadow: 0 1px 4px rgba(35,50,57,0.10);
}
.nx-seg label.on i { color: var(--nx-cyan); }
.nx-seg label:focus-within { box-shadow: 0 0 0 3px var(--nx-cyan-focus); }

/* ── Cartes-radio (choix illustré) ────────────────────────── */
.nx-choix {
    display: flex; align-items: center; gap: 14px;
    border: 2px solid #E5E8EA; border-radius: var(--nx-r-bloc);
    padding: 14px 16px;
    background: var(--nx-fond-champ);
    cursor: pointer; position: relative;
    transition: border-color var(--nx-tr), background var(--nx-tr), box-shadow var(--nx-tr);
}
.nx-choix:hover { border-color: var(--nx-cyan); background: var(--nx-cyan-fond2); }
.nx-choix input { position: absolute; opacity: 0; width: 0; height: 0; }
.nx-choix-ico {
    width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
    background: white; border: 1px solid #E5E8EA;
    color: var(--nx-gris); font-size: 17px;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--nx-tr), color var(--nx-tr), border-color var(--nx-tr);
}
.nx-choix-txt strong {
    display: block;
    font-family: var(--nx-font-titre); font-size: 14px; font-weight: 600; color: var(--nx-texte);
}
.nx-choix-txt span { font-size: 12px; color: var(--nx-gris); }
.nx-choix.selected { border-color: var(--nx-cyan); background: var(--nx-cyan-fond); box-shadow: 0 0 0 3px var(--nx-cyan-halo); }
.nx-choix.selected .nx-choix-ico { background: var(--nx-cyan); border-color: var(--nx-cyan); color: white; }
.nx-choix.selected .nx-choix-txt strong { color: var(--nx-cyan); }
.nx-choix:focus-within { box-shadow: 0 0 0 3px var(--nx-cyan-focus); }

/* ── Interrupteur (checkbox) ──────────────────────────────── */
.nx-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    cursor: pointer; position: relative;
}
.nx-toggle-txt strong { display: block; font-size: 14px; font-weight: 500; color: var(--nx-texte); }
.nx-toggle-txt span { font-size: 12px; color: var(--nx-gris); }
.nx-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.nx-switch {
    width: 44px; height: 26px; border-radius: 13px; flex-shrink: 0;
    background: var(--nx-inactif); position: relative;
    transition: background 0.2s;
}
.nx-switch::after {
    content: ''; position: absolute; top: 3px; left: 3px;
    width: 20px; height: 20px; border-radius: 50%;
    background: white; box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    transition: transform 0.2s;
}
.nx-toggle input:checked + .nx-switch { background: var(--nx-cyan); }
.nx-toggle input:checked + .nx-switch::after { transform: translateX(18px); }
.nx-toggle input:focus-visible + .nx-switch { box-shadow: 0 0 0 3px var(--nx-cyan-focus); }
.nx-toggle.disabled { opacity: 0.45; cursor: not-allowed; }

/* ── Badges & statuts ─────────────────────────────────────── */
.nx-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 20px;
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.nx-badge-ok      { background: var(--nx-vert-fond);   color: var(--nx-vert-texte); }
.nx-badge-attente { background: var(--nx-orange-fond); color: var(--nx-orange); }
.nx-badge-erreur  { background: var(--nx-rouge-fond);  color: var(--nx-rouge); }
.nx-badge-neutre  { background: #F2F3F4;               color: var(--nx-gris); }
.nx-badge-info    { background: #EBF0F8;               color: #4A6FA5; }

.nx-point { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.nx-point.on  { background: var(--nx-vert); box-shadow: 0 0 0 3px rgba(117,159,74,0.15); }
.nx-point.off { background: var(--nx-inactif); }

/* ── Ligne de liste ───────────────────────────────────────── */
.nx-liste { display: flex; flex-direction: column; gap: 8px; }
.nx-ligne-item {
    background: white; border-radius: var(--nx-r-bloc);
    box-shadow: var(--nx-ombre-bloc);
    display: flex; align-items: center; gap: 16px;
    padding: 14px 18px;
    text-decoration: none; color: inherit;
    border: 1.5px solid transparent;
    transition: box-shadow var(--nx-tr), border-color var(--nx-tr), transform 0.15s;
}
.nx-ligne-item:hover { box-shadow: 0 4px 18px rgba(35,50,57,0.1); border-color: #E0F4F7; transform: translateY(-1px); }
.nx-avatar {
    width: 44px; height: 44px; border-radius: var(--nx-r-bloc); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--nx-font-titre); font-size: 17px; font-weight: 700; color: white;
    background: linear-gradient(135deg, var(--nx-cyan) 0%, var(--nx-cyan-dark) 100%);
}
.nx-item-info { flex: 1; min-width: 0; }
.nx-item-nom  { font-family: var(--nx-font-titre); font-size: 15px; font-weight: 700; color: var(--nx-texte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-item-meta { font-size: 12px; color: var(--nx-gris); display: flex; gap: 12px; flex-wrap: wrap; margin-top: 2px; }
.nx-item-meta span { display: flex; align-items: center; gap: 4px; }
.nx-item-fleche { color: var(--nx-inactif); font-size: 14px; }
.nx-ligne-item:hover .nx-item-fleche { color: var(--nx-cyan); }

/* ── Barre de recherche + filtres ─────────────────────────── */
.nx-barre { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; }
.nx-recherche { flex: 1; min-width: 220px; position: relative; }
.nx-recherche i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--nx-gris); pointer-events: none; }
.nx-recherche input {
    width: 100%; padding: 11px 14px 11px 40px; border-radius: 10px;
    border: 1.5px solid var(--nx-bordure); background: white;
    font-family: var(--nx-font); font-size: 14px; color: var(--nx-texte);
    box-shadow: 0 1px 4px rgba(35,50,57,0.06); outline: none; box-sizing: border-box;
    transition: border-color var(--nx-tr), box-shadow var(--nx-tr);
}
.nx-recherche input:focus { border-color: var(--nx-cyan); box-shadow: 0 0 0 3px var(--nx-cyan-halo); }
.nx-filtres { display: flex; gap: 8px; flex-wrap: wrap; }
.nx-filtre {
    padding: 9px 16px; border-radius: 20px;
    border: 1.5px solid var(--nx-bordure); background: white;
    font-family: var(--nx-font); font-size: 13px; color: var(--nx-texte-3);
    cursor: pointer; white-space: nowrap;
    display: flex; align-items: center; gap: 6px;
    transition: border-color var(--nx-tr), color var(--nx-tr), background var(--nx-tr);
}
.nx-filtre:hover { border-color: var(--nx-cyan); color: var(--nx-cyan); }
.nx-filtre.on { background: var(--nx-cyan); border-color: var(--nx-cyan); color: white; font-weight: 600; }

/* ── Chiffres clés ────────────────────────────────────────── */
.nx-stats { display: flex; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; }
.nx-stat {
    background: white; border-radius: var(--nx-r-bloc); padding: 14px 20px;
    box-shadow: 0 1px 6px rgba(35,50,57,0.06);
    display: flex; flex-direction: column; gap: 2px; min-width: 110px;
}
.nx-stat-val { font-family: var(--nx-font-titre); font-size: 24px; font-weight: 700; color: var(--nx-texte); line-height: 1; }
.nx-stat-label { font-size: 12px; color: var(--nx-gris); text-transform: uppercase; letter-spacing: 0.05em; }
.nx-stat.accent .nx-stat-val { color: var(--nx-cyan); }

/* ── Messages ─────────────────────────────────────────────── */
.nx-message { padding: 14px 18px; border-radius: var(--nx-r-bloc); font-size: 13px; display: flex; align-items: flex-start; gap: 10px; }
.nx-message-ok     { background: var(--nx-vert-fond);   color: var(--nx-vert-texte); }
.nx-message-erreur { background: var(--nx-rouge-fond);  color: var(--nx-rouge); }
.nx-message-info   { background: var(--nx-cyan-fond);   color: var(--nx-cyan-dark); }
.nx-texte-erreur   { color: var(--nx-rouge); }

/* ── État vide ────────────────────────────────────────────── */
.nx-vide { text-align: center; padding: 60px 20px; color: var(--nx-gris); }
.nx-vide i { font-size: 48px; margin-bottom: 16px; display: block; color: #D0D8DC; }
.nx-vide-titre { font-family: var(--nx-font-titre); font-size: 16px; color: var(--nx-texte-3); margin-bottom: 8px; }

/* ── Responsive & accessibilité ───────────────────────────── */
@media (max-width: 700px) {
    .nx-page { padding-left: 16px; padding-right: 16px; }
    .nx-carte-section, .nx-carte-pied { padding-left: 20px; padding-right: 20px; }
    .nx-grille-2 { grid-template-columns: 1fr; }
    .nx-carte-pied .nx-btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .nx-btn, .nx-seg label, .nx-choix, .nx-choix-ico, .nx-switch, .nx-switch::after, .nx-ligne-item, .nx-filtre { transition: none; }
}