/* ==========================================================================
   CATACLYSME - MATERIEL
   Design carré, contrasté
   ========================================================================== */

.materiel * { box-sizing: border-box; }

/* LISTE */
.materiel { margin: 70px 0 40px; }
.materiel .container { width: 1200px; margin: 0 auto; }

.materiel-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.materiel-title { font-size: 20px; font-weight: 600; text-transform: uppercase; letter-spacing: .16em; color: var(--blue-900); }

.btn-primary {
    background: var(--red-700); color: var(--blue-100);
    padding: 8px 14px; border: 1px solid var(--red-800);
    font-weight: bold; text-transform: uppercase; text-decoration: none; letter-spacing: 1px; transition: .15s;
}
.btn-primary:hover { background: var(--red-500); }

.materiel-filters {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
    padding: 10px 14px; margin-bottom: 14px;
    background: #fff; border: 1px solid var(--gray-300);
}
.materiel-filters label { color: var(--blue-900); font-size: 11px; }
.materiel-filters select,
.materiel-filters input[type=text] {
    background: var(--gray-100); color: var(--blue-900);
    border: 1px solid var(--gray-400); padding: 5px 8px; border-radius: 0;
}
.btn-filter { background: var(--gray-800); color: #fff; border: 0; padding: 6px 12px; }
.btn-filter:hover { background: var(--blue-700); }

.materiel-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--gray-300); }
.materiel-table th {
    background: var(--gray-100); color: var(--blue-900);
    text-transform: uppercase; font-weight: 600; letter-spacing: .08em;
    padding: 8px 10px; font-size: 11px; border-bottom: 1px solid var(--gray-300);
}
.materiel-table td { padding: 7px 10px; font-size: 11px; color: var(--blue-900); border-bottom: 1px solid var(--gray-200); }
.materiel-table tr:nth-child(even) td { background: var(--gray-50); }
.materiel-table tr:hover td { background: var(--blue-50); }

.materiel-actions { display: flex; gap: 4px; }
.materiel-actions .btn { padding: 3px 8px; font-size: 10px; border: none; text-decoration: none; color: #fff; }
.btn-edit { background: var(--blue-600); } .btn-edit:hover { background: var(--blue-500); }
.btn-delete { background: var(--red-500); } .btn-delete:hover { background: var(--red-400); }

/* FORM CRUD */
.materiel-form-wrapper { margin-top: 60px; }
.materiel-form-card {
    max-width: 900px; margin: 0 auto 40px; padding: 22px 24px 20px;
    background: #0f172a; border: 1px solid #111827;
    box-shadow: 0 10px 26px rgba(15,23,42,.55);
    color: #e5e7eb;
}
.materiel-form-title { font-size: 18px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: #e5e7eb; margin: 0 0 4px; }
.materiel-form-subtitle { font-size: 11px; color: #9ca3af; margin: 0 0 14px; }

.materiel-form { display: flex; flex-direction: column; gap: 8px; }
.materiel-row { display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 8px; align-items: center; }
.materiel-row label { font-size: 11px; color: #d1d5db; text-align: right; }

.materiel-row input[type=text],
.materiel-row input[type=number],
.materiel-row select,
.materiel-row textarea {
    width: 100%; padding: 6px 8px; font-size: 11px;
    border: 1px solid #374151; background: #020817; color: #e5e7eb; border-radius: 0; transition: .16s;
}
.materiel-row textarea { min-height: 70px; resize: vertical; }
.materiel-row input:focus,
.materiel-row select:focus,
.materiel-row textarea:focus { border-color: var(--blue-500); box-shadow: 0 0 4px rgba(59,130,246,.6); background: #020817; }

.materiel-options { display: flex; flex-wrap: wrap; gap: 12px; margin: 4px 0 2px 150px; font-size: 10px; color: #d1d5db; }
.materiel-options label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }

.materiel-fieldset { margin-top: 10px; padding: 8px 10px 10px; border: 1px solid #374151; background: #020817; border-radius: 0; }
.materiel-fieldset legend { padding: 0 4px; font-size: 9px; text-transform: uppercase; letter-spacing: .12em; color: var(--blue-400); }

.materiel-subgrid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px 8px; margin-top: 6px; }
.materiel-subgrid label { display: block; font-size: 9px; color: #9ca3af; margin-bottom: 1px; }
.materiel-subgrid input[type=text],
.materiel-subgrid input[type=number] { width: 100%; padding: 4px 6px; font-size: 10px; border: 1px solid #374151; background: #020817; color: #e5e7eb; }

.materiel-form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.materiel-form-actions .btn { padding: 7px 14px; font-size: 11px; border: none; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.materiel-form-actions .btn-success { background: var(--blue-600); color:#fff; }
.materiel-form-actions .btn-success:hover { background: var(--blue-500); box-shadow: 0 0 8px rgba(37,99,235,.6); }
.materiel-form-actions .btn-secondary { background: #374151; color:#e5e7eb; }
.materiel-form-actions .btn-secondary:hover { background:#4b5563; }

/* RESPONSIVE */
@media (max-width: 900px) {
    .materiel .container { width: 94%; }
    .materiel-row { grid-template-columns: 1fr; }
    .materiel-row label { text-align: left; }
    .materiel-options { margin-left: 0; }
    .materiel-subgrid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .materiel-form-card { padding: 16px 14px 16px; }
}
@media (max-width: 720px) {
    .materiel-table { font-size: 10px; }
}
/* liens cliquables dans les cellules Nom */
.materiel-table a.link-row{
    color: var(--blue-900);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.materiel-table a.link-row:hover{
    color: var(--blue-700);
}

/* Lien nom (liste) */
.materiel-table a.link-row{
    color: var(--blue-900);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.materiel-table a.link-row:hover{ color: var(--blue-700); }

/* Grille & cartes d'effets (détail) */
.effets-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 12px;
    margin-bottom: 14px;
}
@media (max-width: 900px){ .effets-grid{ grid-template-columns: 1fr; } }

.effet-card{
    border: 1px solid var(--gray-300);
    background: #fff;
    padding: 10px;
}
.effet-head{
    display:flex; gap:6px; align-items:center; margin-bottom:6px;
}
.badge{
    display:inline-block; padding:2px 6px; font-size:10px;
    background: var(--blue-600); color:#fff;
}
.badge-muted{ background: var(--gray-600); }
.effet-title{ font-weight:600; margin-bottom:4px; color: var(--blue-900); }
.effet-line{ font-size:11px; margin:2px 0; color: var(--blue-900); }
.effet-line.muted{ color: var(--gray-700); }
.effet-desc{ font-size:11px; margin-top:6px; color: var(--blue-900); }

/* Read-only boxes pour la fiche vue */
.ro-box{
    display:block;
    padding:6px 8px;
    font-size:11px;
    background:#020817;
    border:1px solid #374151;
    color:#e5e7eb;
}
.ro-text{ white-space:pre-wrap; line-height:1.35; }

/* Petites pastilles “options” */
.pills{ display:flex; flex-wrap:wrap; gap:6px; }
.pill{
    background:#374151; color:#e5e7eb;
    padding:2px 8px; font-size:10px;
    text-transform:uppercase; letter-spacing:.06em;
}
.pill-muted{ background:#4b5563; }

/* (Déjà fournis plus tôt, au cas où) cartes d’effets */
.effets-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-bottom:14px; }
@media (max-width: 900px){ .effets-grid{ grid-template-columns:1fr; } }
.effet-card{ border:1px solid var(--gray-300); background:#fff; padding:10px; }
.effet-head{ display:flex; gap:6px; align-items:center; margin-bottom:6px; }
.badge{ display:inline-block; padding:2px 6px; font-size:10px; background:var(--blue-600); color:#fff; }
.badge-muted{ background: var(--gray-600); }
.effet-title{ font-weight:600; margin-bottom:4px; color: var(--blue-900); }
.effet-line{ font-size:11px; margin:2px 0; color: var(--blue-900); }
.effet-line.muted{ color: var(--gray-700); }
.effet-desc{ font-size:11px; margin-top:6px; color: var(--blue-900); }