Modèle:Documentation/styles.css

/* ======================
   SYSTÈME DE DOCUMENTATION
   Compatible Citizen light/dark
   ====================== */

/* Conteneur principal */
.nef-doc-system {
margin: 1.5em 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ======================
   BANDEAU D'EN-TÊTE
   ====================== */
.nef-doc-header {
background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
color: #fff;
padding: 16px 20px;
border-radius: 8px 8px 0 0;
display: flex;
align-items: center;
gap: 14px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Mode sombre Citizen */
.skin-citizen-dark .nef-doc-header {
background: linear-gradient(135deg, #2c5aa0 0%, #1e3a5f 100%);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.nef-doc-header-icon {
font-size: 28px;
line-height: 1;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

.nef-doc-header-content {
flex: 1;
}

.nef-doc-header-content strong {
display: block;
font-size: 17px;
font-weight: 600;
margin-bottom: 8px;
text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* Actions avec boutons */
.nef-doc-header-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
}

/* Boutons style Citizen */
.nef-doc-btn {
display: inline-flex;
align-items: center;
padding: 6px 14px;
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 6px;
font-size: 13px;
font-weight: 500;
transition: all 0.2s ease;
backdrop-filter: blur(10px);
}

.nef-doc-btn a {
color: #fff !important;
text-decoration: none !important;
}

.nef-doc-btn:hover {
background: rgba(255, 255, 255, 0.3);
border-color: rgba(255, 255, 255, 0.5);
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* Bouton création (vert) */
.nef-doc-btn-create {
background: rgba(52, 211, 153, 0.3);
border-color: rgba(52, 211, 153, 0.5);
}

.nef-doc-btn-create:hover {
background: rgba(52, 211, 153, 0.5);
}

/* Mode sombre - ajustements boutons */
.skin-citizen-dark .nef-doc-btn {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.2);
}

.skin-citizen-dark .nef-doc-btn:hover {
background: rgba(255, 255, 255, 0.2);
}

/* ======================
   BOÎTES DE DOCUMENTATION
   ====================== */
.nef-doc-box {
border: 1px solid var(--border-color-base, #c8ccd0);
border-radius: 0 0 8px 8px;
padding: 1.5em;
margin-top: 0;
background-color: var(--background-color-base, #fff);
border-top: none;
}

/* Mode sombre Citizen */
.skin-citizen-dark .nef-doc-box {
background-color: var(--background-color-dp-04, #2d333b);
border-color: var(--border-color-base, #4a5568);
}

/* Documentation existante */
.nef-doc-exists {
border-left: 3px solid #22863a;
}

.skin-citizen-dark .nef-doc-exists {
border-left-color: #3fb950;
}

/* Documentation manquante */
.nef-doc-missing {
display: flex;
align-items: flex-start;
gap: 1.2em;
background-color: var(--background-color-quiet, #f6f8fa);
border-left: 3px solid #d73d3d;
}

.skin-citizen-dark .nef-doc-missing {
background-color: var(--background-color-dp-02, #22272e);
border-left-color: #f85149;
}

.nef-doc-icon {
font-size: 2.5em;
line-height: 1;
flex-shrink: 0;
opacity: 0.7;
}

.nef-doc-content {
flex: 1;
}

/* Instructions */
.nef-doc-instructions {
background-color: #e7f5ff;
color: #00529b;
padding: 1em;
border-radius: 6px;
margin-top: 1em;
border-left: 3px solid #4285f4;
}

.skin-citizen-dark .nef-doc-instructions {
background-color: #0a2540;
color: #9dcafa;
border-left-color: #6eb9f7;
}

.nef-doc-instructions ul {
margin: 0.5em 0 0 0;
padding-left: 1.5em;
}

/* Liens dans les boîtes */
.nef-doc-box a {
color: var(--color-progressive, #0645ad);
}

.skin-citizen-dark .nef-doc-box a {
color: var(--color-progressive, #7ab7ff);
}

/* ======================
   RESPONSIVE
   ====================== */
@media (max-width: 768px) {
.nef-doc-header {
flex-direction: column;
text-align: center;
gap: 12px;
}

.nef-doc-header-actions {
justify-content: center;
}

.nef-doc-missing {
flex-direction: column;
text-align: center;
}

.nef-doc-icon {
margin: 0 auto;
}
}