:root {
    /* --- Neutres (fond, texte, bordures) — palette fournie --- */
    --color-bg: #F5F0D7;
    --color-surface: #ffffff;
    --color-surface-alt: #F5F0D7;
    --color-border: #CFC7BC;
    --color-border-strong: #9E9F8D;
    --color-text: #3B3A32;        /* dérivé : brun-olive foncé, non fourni mais nécessaire pour le contraste */
    --color-text-muted: #969587;
    --color-black: black;

    /* --- Accent principal (dérivé de la teinte terracotta) --- */
    --color-accent: #BC632E;
    --color-accent-hover: #9E4F22;
    --color-accent-bg: rgba(188, 99, 46, 0.1);

    /* --- Boutons importants (actions critiques : supprimer, etc.) --- */
    --color-danger: #FF2805;
    --color-danger-hover: #7E1B21;
    --color-danger-bg: rgba(163, 35, 43, 0.1);

    /* --- Boutons autres (actions secondaires : éditer, publier, dupliquer...) --- */
    --color-warning: orange;
    --color-warning-hover: #9E4F22;
    --color-warning-bg: rgba(188, 99, 46, 0.1);

    /* --- Succès (dérivé, ton olive de la palette) --- */
    --color-success: blue;
    --color-success-hover: #5C6944;
    --color-success-bg: rgba(111, 125, 82, 0.12);
	
	/* --- submit (dérivé, ton olive de la palette) --- */
    --color-submit: #6F7D52;
    --color-submit-hover: #5Cbb44;
    /* --color-submit-bg supprimée : jamais utilisée */

    /* --- Info (dérivé, ton neutre gris-olive) --- */
    --color-info: #6B6A5C;
    /* --color-info-hover supprimée : jamais utilisée */
    --color-info-bg: rgba(107, 106, 92, 0.1);

    /* --- Neutre secondaire (ex: bouton retour) --- */
    --color-secondary: #9E9F8D;
    --color-secondary-hover: #969587;

    /* --- Debug (conservé indépendant de la palette) --- */
    --color-debug-bg: #111111;
    --color-debug-text: #0f0;

    /* --- Élévation / ombres --- */
    --shadow-sm: 1px 1px 2px rgba(59, 58, 50, 0.15);
    --shadow-md: 2px 2px 3px rgba(59, 58, 50, 0.2);
    --shadow-lg: 3px 3px 4px rgba(59, 58, 50, 0.25);
    --shadow-inset: inset 0 0 5px rgba(188, 99, 46, 0.12);

    /* --- Rayons --- */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 10px;
    --radius-pill: 20px;
}

/* =========================
   Form & textarea / pre
   ========================= */
textarea {
    width: 100%;
    padding: 10px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    font-family: monospace;
    background: var(--color-surface-alt);
    color: var(--color-text);
	box-sizing: border-box;
}

/* =========================
   Pour login/index.php
   ========================= */
.form-auth {
    max-width: 400px;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    color: var(--color-text);
}

.form-group input {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-alt);
    color: var(--color-text);
}

.alert {
    padding: 10px;
    margin-bottom: 15px;
    border-radius: var(--radius-sm);
}

.alert-error {
    background: var(--color-danger-bg);
    border: 1px solid var(--color-danger);
    color: var(--color-danger);
}

/* =========================
   Pour la dropzone de create.php
   ========================= */
.dropzone {
    border: 2px dashed var(--color-border-strong);
    padding: 20px;
    text-align: center;
    cursor: pointer;
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
    transition: 0.2s;
}

.dropzone:hover {
    background: var(--color-bg);
    border-color: var(--color-text-muted);
}

/* =========================
   dashboard
   ========================*/
#dashboard {
    color: var(--color-text);
}

.dashboard-stats {
    margin-top: 5px;
    padding: 5px 20px;
    background: rgba(255, 255, 255, 0.6);
    border-left: 5px solid var(--color-accent);
    border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
    box-shadow: var(--shadow-inset);
    max-width: 80%;
    display: flex;
    flex-wrap: wrap; /* permet de passer à la ligne si pas assez de place */
    align-items: center;
    gap: 10px;
}

/* titre */
.dashboard-stats h3 {
    margin: 0;
    flex: 0 0 auto; /* taille naturelle */
    color: var(--color-text);
}

/* conteneur des stats */
.stats-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* cartes */
.stats-grid div {
    background: var(--color-surface-alt);
    padding: 8px 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    font-size: 0.95em;
    box-shadow: var(--shadow-sm);
    color: var(--color-text);
}

/* valeur mise en avant */
.stats-grid strong {
    color: var(--color-accent);
    font-size: 1.1em;
}

.stats-details {
    font-size: 0.8em;
    color: var(--color-text-muted);
}

.actions-rapides {
    margin: 30px auto;
}

.filters {
    margin: 20px 0;
    padding: 15px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-lg);
    border: 1px dotted var(--color-border-strong);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.actions {
    font-size: 2em;
}
.actions button {
    border: 0;
    font-size: 1em;
    background: transparent;
    color: var(--color-text);
}

.status-published {
    color: var(--color-success);
}
.status-draft {
    color: var(--color-warning);
}
.status-deleted {
    color: var(--color-danger);
}

/* ========================================= UTILITAIRE ==============================================*/
.inline-form {
    display: inline-block;
}

.pagination {
    margin-top: 10px;
    text-align: center;
}
.pagination a {
    margin: 3px;
    padding: 4px 8px;
    border: 1px solid var(--color-border);
    text-decoration: none;
    border-radius: var(--radius-sm);
    color: var(--color-text);
}

.pagination .active {
    background: var(--color-accent);
    color: var(--color-black);
    border-color: var(--color-accent);
}

/* tableaux propres */
.tableau {
    max-width: 100%;
    min-width: 75%;
    margin: 0 auto;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--color-text);
    border-radius: var(--radius-lg);
    overflow: hidden; /* TRÈS IMPORTANT */
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
}

.tableau th,
.tableau td {
    border: 1px solid var(--color-border-strong);
    padding: 6px;
    color: var(--color-text);
}
.tableau a,
.tableau a {
    text-decoration: none;
    color: var(--color-black);
}

#sauvegarde {
    display: inline;
}

/* =========================
   Les boutons et affichages lors de la creation, l'édition d'un article (mode admin)
   ========================= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    height: 38px;
    padding: 0 12px;
    box-sizing: border-box;

    text-decoration: none;
    border: 0;
    border-radius: var(--radius-md);

    font-family: inherit;
    font-size: 17px;
    font-weight: normal;
    line-height: 1;

    color: var(--color-text);
    box-shadow: var(--shadow-md);

    margin-right: 10px;
    cursor: pointer;

    transition: 0.2s;
}
.btn-creer {
    background: var(--color-success);
    color: var(--c-white);
}
.btn-creer:hover {
    background: var(--color-success-hover);
}

/* boutons "danger" : suppression, action grave — même rendu, factorisés */
.btn-grave,
.btn-delete,
.btn-save {
    background: var(--color-danger);
    color: var(--color-black);
}
.btn-grave:hover,
.btn-delete:hover,
.btn-save:hover {
    background: var(--color-danger-hover);
}

/* boutons "warning" : édition, publication — même rendu, factorisés */
.btn-edit,
.btn-publish {
    background: var(--color-warning);
    color: var(--color-black);
}
.btn-edit:hover,
.btn-publish:hover {
    background: var(--color-warning-hover);
}

.btn-retour {
    background: var(--color-secondary);
    color: var(--color-black);
}
.btn-retour:hover {
    background: var(--color-secondary-hover);
}
.bouton-retour {
    
}
.btn-restaure {
    background: var(--color-submit);
    color: var(--color-black);
}
.btn-restaure:hover {
    background: var(--color-submit-hover);
}

.top-container {
    display: flex;
    gap: 10px; /* espace entre les div */
    flex-wrap: wrap; /* permet de passer à la ligne si manque de place */
}

.btn-submit {
    background: var(--color-submit);
    color: var(--color-black);
}
.btn-submit:hover {
    background: var(--color-submit-hover);
}


/* .badge-role, .btn-sort, .badge-visibility-*, .badge-type-* :
   déplacées dans spirale.css, à côté des autres .badge-* déjà
   présents là-bas (cohérence : ce sont des éléments d'habillage
   de contenu/page, pas des composants d'admin génériques) */

.file-tag-group {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.file-tag {
    display: inline-block;
    padding: 3px 8px;
    font-size: 0.75em;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--color-text);
    user-select: none;
    transition: 0.15s;
}

.file-tag:hover {
    background: var(--color-accent);
    color: var(--color-black);
    border-color: var(--color-accent);
}

/* ==============================
pour categories/index.php
================================*/
.attention {
    background: var(--color-warning-bg);
    color: var(--color-warning);
    padding: 0 10px;
    border-radius: var(--radius-sm);
}
.tab-rub td {
    text-align: center;
}
.tab-rub td:nth-child(3) {
    text-align: left;
}
.editerRubrique {
    margin: 2px;
    padding: 1px;
    box-shadow: none;
}
.supprimerRubrique {
    margin: 2px;
    padding: 2px;
    box-shadow: none;
    color: var(--color-black);
}
.cachee {
    background: var(--color-border);
}
.privee {
    background: var(--color-warning-bg);
}

/* ==============================
pour categories/edit.php
================================*/
/* Formulaire de modification de rubrique */
.form-category {
    max-width: 500px; /* largeur raisonnable */
    margin: 20px auto; /* centré horizontalement */
    padding: 20px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-surface-alt);
}

.form-category .form-group {
    display: flex;
    flex-direction: column; /* label au-dessus de l'input */
    margin-bottom: 15px;
    font-size: 1.2em;
}

.form-category .form-group label {
    margin-bottom: 5px;
}

.form-category input[type="text"] {
    padding: 8px 10px;
    font-size: 1em;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-surface-alt);
    color: var(--color-text);
}

.form-category .btn-edit {
    margin-top: 10px;
    padding: 10px 15px;
    font-size: 1em;
    cursor: pointer;
}

.form-category select {
    font: inherit;
    width: auto;
    min-width: 160px;
    padding: 8px 10px;
    border: 1px solid var(--color-border, #ccc);
    border-radius: var(--radius-sm, 4px);
    background: var(--color-surface-alt, #f9f9f9);
    color: var(--color-text, #000);
}

/* ==============================*/

input[name="title"],
input[name="name"],
input[name="created_at"] {
    max-width: 400px;
    padding: 8px 12px;
    font-size: 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-alt);
    color: var(--color-text);
}

select[name="category_id"],
select[name="status"],
input[name="q"],
select[name="category_level"],
select[name="visibility_role"],
select[name="article_type"] {
    padding: 8px 12px;
    font-size: 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-alt);
    color: var(--color-text);
}

form[name="supprimeArticle"] {
    display: inline;
}

.grand {
    font-size: 20px;
    margin-left: 20px;
}

.encartDebug {
    position: fixed;
    top: 300px;
    right: 10px;
    background: var(--color-debug-bg);
    color: var(--color-debug-text);
    font-size: 12px;
    padding: 10px;
    z-index: 99999;
    border-radius: var(--radius-md);
    max-width: 300px;
    opacity: 0.9;
}

@media (max-width: 1024px) {  .btn{height:22px;margin:3px;}}