first commit

assets/scss/pages/_admin.scss

@@ -0,0 +1,234 @@
+@use "../abstracts/variables" as *;
+@use "../abstracts/mixins" as *;
+
+// =============================================================
+// Pages d'administration
+// =============================================================
+
+// Barre de navigation entre les sections admin
+.admin-nav {
+    margin-bottom: $spacing-lg;
+}
+
+// Cellule d'actions dans les tableaux admin (liste d'articles, médias, etc.)
+// display:flex permet d'utiliser gap en mobile et d'aligner les boutons en desktop.
+.admin-actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: $spacing-xs;
+}
+
+// Tableau de gestion (articles, utilisateurs)
+.admin-table {
+    width: 100%;
+    border-collapse: collapse;
+
+    th,
+    td {
+        padding: $spacing-sm;
+        border-bottom: 1px solid $color-border;
+        text-align: left;
+    }
+
+    th {
+        background: $color-bg-light;
+        font-weight: bold;
+    }
+
+    // Indicateur "(vous)" dans la liste des utilisateurs
+    &__self {
+        color: $color-text-muted;
+        font-size: $font-size-xs;
+    }
+
+    // Ligne d'action indisponible (tiret)
+    &__muted {
+        color: $color-text-subtle;
+        font-size: $font-size-xs;
+    }
+
+    // Sélecteur de rôle dans la liste des utilisateurs
+    &__role-select {
+        font-size: $font-size-sm;
+        padding: $spacing-xs $spacing-sm;
+        border: 1px solid $color-border;
+        border-radius: $border-radius;
+        background: $color-bg-white;
+        cursor: pointer;
+    }
+}
+
+// =============================================================
+// Bloc de création de catégorie (admin)
+// =============================================================
+
+// Conteneur du formulaire de création
+.category-create {
+    margin-bottom: $spacing-xl;
+    padding: $spacing-md;
+    background: $color-bg-light;
+    border: 1px solid $color-border;
+    border-radius: $border-radius;
+}
+
+// Titre du bloc de création
+.category-create__title {
+    margin: 0 0 $spacing-md;
+    font-size: $font-size-base;
+}
+
+// Disposition horizontale : champ + bouton sur la même ligne
+.category-create__form {
+    display: flex;
+    align-items: flex-end;
+    gap: $spacing-sm;
+    flex-wrap: wrap;
+}
+
+// Label englobant le champ texte
+.category-create__label {
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-xs;
+    font-size: $font-size-sm;
+}
+
+// Champ de saisie du nom
+.category-create__input {
+    min-width: 260px;
+    width: 100%;
+}
+
+// Indication de génération automatique du slug
+.category-create__hint {
+    margin: $spacing-sm 0 0;
+    font-size: $font-size-xs;
+    color: $color-text-muted;
+}
+
+// =============================================================
+// Responsive — admin-table en mobile
+// =============================================================
+// En dessous du breakpoint mobile, le tableau est transformé en liste
+// de blocs empilés. Chaque cellule affiche son en-tête via data-label.
+// Les <thead> sont masqués car les labels remplacent les en-têtes.
+
+@include mobile {
+    .admin-table {
+        display: block;
+
+        thead {
+            display: none;
+        }
+
+        tbody,
+        tr {
+            display: block;
+        }
+
+        tr {
+            border: 1px solid $color-border;
+            border-radius: $border-radius;
+            margin-bottom: $spacing-md;
+            padding: $spacing-sm;
+            background: $color-bg-white;
+        }
+
+        td {
+            display: flex;
+            align-items: flex-start;
+            gap: $spacing-sm;
+            padding: $spacing-xs 0;
+            border-bottom: 1px solid $color-border;
+            font-size: $font-size-sm;
+
+            &:last-child {
+                border-bottom: none;
+                padding-bottom: 0;
+            }
+
+            // Label de colonne injecté via data-label
+            &::before {
+                content: attr(data-label);
+                font-weight: bold;
+                min-width: 100px;
+                flex-shrink: 0;
+                color: $color-text-muted;
+            }
+        }
+    }
+
+    // En mobile, les boutons d'actions s'empilent verticalement
+    .admin-actions {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+}
+
+// =============================================================
+// Page d'erreur (404, 500…)
+// =============================================================
+
+.error-page {
+    text-align: center;
+    padding: $spacing-xl 0;
+}
+
+.error-page__code {
+    font-size: 4rem;
+    margin-bottom: $spacing-sm;
+    color: $color-text-muted;
+}
+
+.error-page__message {
+    font-size: 1.2rem;
+    margin-bottom: $spacing-lg;
+}
+
+// =============================================================
+// Éditeur Trumbowyg
+// =============================================================
+
+// Hauteur minimale de la zone de saisie
+.trumbowyg-box,
+.trumbowyg-editor {
+    min-height: 300px;
+}
+
+// Largeur identique aux autres champs du formulaire
+.trumbowyg-box {
+    width: 100%;
+    box-sizing: border-box;
+}
+
+// =============================================================
+// Bloc upload — galerie médias
+// =============================================================
+
+// Lien englobant la miniature d'aperçu
+.upload__thumb-link {
+    display: inline-block;
+    line-height: 0;
+}
+
+// Miniature d'aperçu
+.upload__thumb {
+    width: 64px;
+    height: 64px;
+    object-fit: cover;
+    border-radius: $border-radius;
+    border: 1px solid $color-border;
+    display: block;
+}
+
+// URL affichée en police monospace
+.upload__url {
+    display: block;
+    font-size: $font-size-sm;
+    color: $color-text-muted;
+    margin-bottom: $spacing-xs;
+    word-break: break-all;
+    background: transparent;
+    padding: 0;
+}