/* ============================================================
   CNCDP — Back-office administrateur
   Système visuel : direction artistique « Douceur » (02/10/2026)
   ------------------------------------------------------------
   Principes :
   - Même famille que le site public (cncdp.css) : encre prune, lilas
     très clair pour les fonds, violet pour les actions, Figtree. Les
     couleurs vives (rose, orange) restent au contenu éditorial.
   - Rayons doux (8/12/18 px), boutons et badges en pilule, filets
     lilas plutôt que gris, ombres légères teintées de prune.
   - Intitulés en minuscules (plus de libellés en capitales espacées).
   - Le contenu porte la hiérarchie, pas la décoration.
   Jusqu'au 02/10/2026 : « ardoise + violet sobre », gris neutres.
   ============================================================ */

/* ============================================================
   1. Jetons de design
   ============================================================ */
:root {
    /* Dimensions */
    --admin-sidebar-width: 15.5rem;
    --admin-header-height: 3.5rem;
    --admin-content-max: 82rem;
    /* Hauteur d'un contrôle de formulaire : 0.4688rem × 2 de padding
       + 1.5 × 0.875rem d'interligne + 2 × 1px de bordure. Tous les types de
       champs s'y alignent, y compris le champ fichier. */
    --admin-control-height: 2.375rem;

    /* Surfaces — blanc et lilas très dilué */
    --admin-bg: #faf7fd;
    --admin-surface: #ffffff;
    --admin-surface-sunken: #fcf9ff;
    --admin-surface-hover: #f8f2fd;

    /* Bordures — lilas plutôt que gris */
    --admin-border: #eadcf8;
    --admin-border-strong: #d6c0ee;

    /* Texte — encre prune ; tous les niveaux passent AA sur blanc
       (14,3 · 8,6 · 7,0 · 5,1:1) */
    --admin-text: #3b1a57;
    --admin-text-secondary: #5c3f78;
    --admin-text-muted: #66507f;
    --admin-text-faint: #7a6690;

    /* Accent — violet de la palette, foncé pour le texte et les boutons
       (blanc dessus : 7,4:1) */
    --admin-accent: #7a2bb0;
    --admin-accent-hover: #6a2499;
    --admin-accent-active: #5a1e83;
    --admin-accent-subtle: #f4ecfb;
    --admin-accent-border: #d6c0ee;
    --admin-accent-ring: rgba(157, 56, 218, 0.2);

    /* États sémantiques */
    --admin-success: #067647;
    --admin-success-bg: #ecfdf3;
    --admin-success-border: #abefc6;
    --admin-danger: #b42318;
    --admin-danger-bg: #fef3f2;
    --admin-danger-border: #fecdca;
    --admin-warning: #b54708;
    --admin-warning-bg: #fffaeb;
    --admin-warning-border: #fedf89;
    --admin-info: #175cd3;
    --admin-info-bg: #eff8ff;
    --admin-info-border: #b2ddff;

    /* Rayons */
    --admin-radius-sm: 8px;
    --admin-radius: 12px;
    --admin-radius-lg: 18px;
    --admin-pilule: 999px;

    /* Ombres — basses, teintées de prune */
    --admin-shadow-xs: 0 1px 2px rgba(59, 26, 87, 0.05);
    --admin-shadow-sm: 0 1px 3px rgba(59, 26, 87, 0.07), 0 1px 2px rgba(59, 26, 87, 0.04);
    --admin-shadow-md: 0 6px 14px -6px rgba(59, 26, 87, 0.12), 0 2px 4px -2px rgba(59, 26, 87, 0.05);
    --admin-shadow-lg: 0 22px 48px -20px rgba(59, 26, 87, 0.3), 0 0 0 1px rgba(59, 26, 87, 0.05);

    /* Typo — Figtree, déclarée et hébergée par cncdp.css */
    --admin-font: var(--font-principale, 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
    --admin-font-mono: ui-monospace, 'SFMono-Regular', 'JetBrains Mono', 'Consolas', monospace;

    /* Transition unique */
    --admin-transition: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   2. Base
   ============================================================ */
.admin-body {
    background-color: var(--admin-bg);
    color: var(--admin-text);
    font-family: var(--admin-font);
    font-size: 0.9375rem;
    line-height: 1.5;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.admin-body .site-header,
.admin-body .site-footer {
    display: none;
}

.admin-body h1,
.admin-body h2,
.admin-body h3,
.admin-body h4 {
    font-family: var(--admin-font);
    color: var(--admin-text);
    letter-spacing: -0.011em;
}

.admin-body a {
    color: var(--admin-accent);
    text-decoration: none;
    transition: color var(--admin-transition);
}

.admin-body a:hover {
    color: var(--admin-accent-hover);
    text-decoration: underline;
}

.admin-body code {
    font-family: var(--admin-font-mono);
    font-size: 0.8125rem;
    color: var(--admin-text-secondary);
    background-color: var(--admin-surface-sunken);
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-sm);
    padding: 0.0625rem 0.375rem;
}

/* Anneau de focus homogène sur tout le back-office */
.admin-body :focus-visible {
    outline: 2px solid var(--admin-accent);
    outline-offset: 2px;
}

/* ============================================================
   3. Layout
   ============================================================ */
.admin-wrapper {
    display: flex;
    min-height: 100vh;
}

.admin-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding-bottom: 3rem;
}

/* ============================================================
   4. Barre latérale — claire, séparée par un filet
   ============================================================ */
.admin-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--admin-sidebar-width);
    background-color: var(--admin-surface);
    border-right: 1px solid var(--admin-border);
    color: var(--admin-text-secondary);
    display: flex;
    flex-direction: column;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.admin-sidebar.open {
    transform: translateX(0);
    box-shadow: var(--admin-shadow-lg);
}

@media (min-width: 992px) {
    .admin-sidebar {
        position: sticky;
        height: 100vh;
        transform: translateX(0);
        box-shadow: none;
    }
}

/* --- Marque --- */
.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    height: var(--admin-header-height);
    padding: 0 1rem;
    border-bottom: 1px solid var(--admin-border);
    flex-shrink: 0;
}

.sidebar-brand img {
    height: 1.75rem;
    width: auto;
    flex-shrink: 0;
}

.sidebar-brand span {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--admin-text);
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.sidebar-brand .brand-sub {
    display: block;
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--admin-text-faint);
    letter-spacing: 0.02em;
}

/* --- Navigation --- */
.sidebar-nav {
    flex: 1;
    padding: 0.875rem 0.625rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.sidebar-section {
    margin-bottom: 1.25rem;
}

.sidebar-section:last-child {
    margin-bottom: 0;
}

.sidebar-section-title {
    padding: 0 0.625rem;
    margin-bottom: 0.375rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--admin-text-faint);
}

.sidebar-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.625rem;
    margin-bottom: 0.0625rem;
    color: var(--admin-text-secondary);
    text-decoration: none;
    border-radius: var(--admin-radius);
    font-size: 0.875rem;
    font-weight: 500;
    transition: background-color var(--admin-transition), color var(--admin-transition);
}

.sidebar-link:hover {
    background-color: var(--admin-surface-hover);
    color: var(--admin-text);
    text-decoration: none;
}

.sidebar-link.active {
    background-color: var(--admin-accent-subtle);
    color: var(--admin-accent);
    font-weight: 600;
}

/* Barre d'accent à gauche de l'entrée active */
.sidebar-link.active::before {
    content: "";
    position: absolute;
    left: -0.625rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 1.125rem;
    border-radius: 0 2px 2px 0;
    background-color: var(--admin-accent);
}

.sidebar-link i {
    width: 1rem;
    text-align: center;
    font-size: 0.875rem;
    color: var(--admin-text-faint);
    transition: color var(--admin-transition);
    flex-shrink: 0;
}

.sidebar-link:hover i {
    color: var(--admin-text-muted);
}

.sidebar-link.active i {
    color: var(--admin-accent);
}

/* --- Pied de barre latérale --- */
.sidebar-footer {
    padding: 0.625rem;
    border-top: 1px solid var(--admin-border);
    flex-shrink: 0;
}

.sidebar-footer a {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.625rem;
    border-radius: var(--admin-radius);
    color: var(--admin-text-muted);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color var(--admin-transition), color var(--admin-transition);
}

.sidebar-footer a:hover {
    background-color: var(--admin-danger-bg);
    color: var(--admin-danger);
    text-decoration: none;
}

.sidebar-footer a i {
    width: 1rem;
    text-align: center;
    font-size: 0.875rem;
}

/* --- Voile mobile --- */
.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(16, 24, 40, 0.45);
    z-index: 99;
    display: none;
}

.sidebar-overlay.visible {
    display: block;
}

@media (min-width: 992px) {
    .sidebar-overlay {
        display: none !important;
    }
}

/* ============================================================
   5. Barre supérieure
   ============================================================ */
.admin-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: var(--admin-header-height);
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: saturate(180%) blur(8px);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--admin-border);
    padding: 0 1.25rem;
    position: sticky;
    top: 0;
    z-index: 50;
    flex-shrink: 0;
}

.admin-topbar-left,
.admin-topbar-right {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
}

.btn-sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--admin-border);
    background: var(--admin-surface);
    color: var(--admin-text-secondary);
    font-size: 0.875rem;
    cursor: pointer;
    border-radius: var(--admin-radius);
    transition: background-color var(--admin-transition), border-color var(--admin-transition);
    flex-shrink: 0;
}

.btn-sidebar-toggle:hover {
    background-color: var(--admin-surface-hover);
    border-color: var(--admin-border-strong);
}

@media (min-width: 992px) {
    .btn-sidebar-toggle {
        display: none;
    }
}

.admin-user-info {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    font-size: 0.8125rem;
    color: var(--admin-text-muted);
    min-width: 0;
}

.admin-user-info i {
    color: var(--admin-text-faint);
    font-size: 0.8125rem;
}

.admin-user-info strong {
    color: var(--admin-text-secondary);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================================
   6. En-tête de page
   ============================================================ */
.admin-page-header {
    padding: 1.75rem 1.5rem 0;
    max-width: var(--admin-content-max);
}

.admin-page-header h1 {
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--admin-text);
    margin-bottom: 0;
    letter-spacing: -0.018em;
}

/* Neutralise le fond gris et le padding que Bootstrap 4 pose sur .breadcrumb */
.admin-page-header .breadcrumb {
    display: block;
    background: transparent;
    border-radius: 0;
    padding: 0;
    margin-bottom: 0.375rem;
    font-size: 0.8125rem;
    color: var(--admin-text-muted);
}

.admin-page-header .breadcrumb a {
    color: var(--admin-text-muted);
    text-decoration: none;
}

.admin-page-header .breadcrumb a:hover {
    color: var(--admin-accent);
    text-decoration: none;
}

/* ============================================================
   7. Contenu
   ============================================================ */
.admin-content {
    padding: 1.5rem;
    max-width: var(--admin-content-max);
}

/* ============================================================
   8. Cartes statistiques
   ============================================================ */
.admin-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 576px) {
    .admin-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    .admin-cards {
        grid-template-columns: repeat(4, 1fr);
    }
}

.admin-stat-card {
    background: var(--admin-surface);
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-lg);
    padding: 1.125rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    transition: border-color var(--admin-transition), box-shadow var(--admin-transition);
}

.admin-stat-card:hover {
    border-color: var(--admin-border-strong);
    box-shadow: var(--admin-shadow-xs);
}

/* Pastilles neutres : plus de fonds pastel violet/rose/orange.
   Les modificateurs .violet / .rose / .orange restent acceptés
   pour ne pas casser les templates, mais rendent tous pareil. */
.stat-icon,
.stat-icon.violet,
.stat-icon.rose,
.stat-icon.orange {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--admin-radius);
    font-size: 0.875rem;
    flex-shrink: 0;
    background-color: var(--admin-surface-sunken);
    border: 1px solid var(--admin-border);
    color: var(--admin-text-muted);
}

.stat-info {
    min-width: 0;
}

.stat-info h3 {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.15;
    margin-bottom: 0.125rem;
    color: var(--admin-text);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.stat-info p {
    font-size: 0.8125rem;
    color: var(--admin-text-muted);
    margin-bottom: 0;
}

/* ============================================================
   9. Grille de panneaux
   ============================================================ */
.admin-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

@media (min-width: 992px) {
    .admin-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Trois colonnes à partir de md — l'ancien `repeat(3, 1fr)` en style
   inline s'appliquait dès 320px et tassait la page Apparence. */
.admin-grid-3 {
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .admin-grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ============================================================
   10. Carte / panneau
   ============================================================ */
.admin-card {
    background: var(--admin-surface);
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-lg);
    overflow: hidden;
}

.admin-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--admin-border);
    background-color: var(--admin-surface);
}

.admin-card-header h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    margin-bottom: 0;
    color: var(--admin-text);
}

.admin-card-header h2 i {
    color: var(--admin-text-faint);
    font-size: 0.8125rem;
}

/* En-tête d'un panneau désactivé (critère inactif) */
.admin-card-header.is-inactive {
    background-color: var(--admin-surface-sunken);
}

.admin-card-header.is-inactive h2 {
    color: var(--admin-text-muted);
}

.admin-card-body {
    padding: 1.25rem;
}

/* Zone d'édition dépliée (critères, valeurs) — teinte d'accent très
   diluée plutôt que l'ancien jaune #fffdf5 */
.admin-inline-edit {
    padding: 1.125rem 1.25rem;
    background-color: var(--admin-accent-subtle);
    border-bottom: 1px solid var(--admin-accent-border);
}

.admin-inline-edit-row > td {
    background-color: var(--admin-accent-subtle) !important;
}

.admin-card-body > p {
    color: var(--admin-text-secondary);
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.admin-card-body > p:last-child {
    margin-bottom: 0;
}

/* ============================================================
   11. Liste
   ============================================================ */
.admin-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.admin-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.8125rem 0;
    border-bottom: 1px solid var(--admin-border);
}

.admin-list li:first-child {
    padding-top: 0;
}

.admin-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.admin-list .item-title {
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--admin-text);
}

.admin-list .item-meta {
    font-size: 0.8125rem;
    color: var(--admin-text-muted);
}

/* ============================================================
   12. Boutons
   ============================================================ */
.btn-admin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4375rem;
    padding: 0.4375rem 0.875rem;
    font-family: var(--admin-font);
    font-size: 0.875rem;
    font-weight: 500;
    border: 1px solid transparent;
    border-radius: var(--admin-radius);
    cursor: pointer;
    transition: background-color var(--admin-transition), border-color var(--admin-transition),
                color var(--admin-transition), box-shadow var(--admin-transition);
    text-decoration: none;
    line-height: 1.4;
    white-space: nowrap;
    user-select: none;
}

.btn-admin:hover {
    text-decoration: none;
}

.btn-admin:focus-visible {
    outline: 2px solid var(--admin-accent);
    outline-offset: 2px;
}

.btn-admin:disabled,
.btn-admin.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.btn-admin i {
    font-size: 0.8125rem;
}

/* Primaire — action principale, un seul par écran idéalement */
.btn-admin-primary {
    background-color: var(--admin-accent);
    color: #fff;
    border-color: var(--admin-accent);
    box-shadow: var(--admin-shadow-xs);
}

.btn-admin-primary:hover {
    background-color: var(--admin-accent-hover);
    border-color: var(--admin-accent-hover);
    color: #fff;
}

.btn-admin-primary:active {
    background-color: var(--admin-accent-active);
    border-color: var(--admin-accent-active);
}

/* Outline — action secondaire neutre (et non violette : c'est ce
   qui donnait un écran saturé de contours colorés) */
.btn-admin-outline,
.btn-admin-secondary {
    background: var(--admin-surface);
    color: var(--admin-text-secondary);
    border-color: var(--admin-border-strong);
    box-shadow: var(--admin-shadow-xs);
}

.btn-admin-outline:hover,
.btn-admin-secondary:hover {
    background-color: var(--admin-surface-hover);
    border-color: var(--admin-text-faint);
    color: var(--admin-text);
}

/* Fantôme — actions tertiaires, barres d'outils denses */
.btn-admin-ghost {
    background: transparent;
    color: var(--admin-text-muted);
    border-color: transparent;
}

.btn-admin-ghost:hover {
    background-color: var(--admin-surface-hover);
    color: var(--admin-text);
}

/* Destructif */
.btn-admin-danger {
    background: var(--admin-surface);
    color: var(--admin-danger);
    border-color: var(--admin-danger-border);
    box-shadow: var(--admin-shadow-xs);
}

.btn-admin-danger:hover {
    background-color: var(--admin-danger);
    border-color: var(--admin-danger);
    color: #fff;
}

/* Succès (publier) */
.btn-admin-success {
    background: var(--admin-surface);
    color: var(--admin-success);
    border-color: var(--admin-success-border);
    box-shadow: var(--admin-shadow-xs);
}

.btn-admin-success:hover {
    background-color: var(--admin-success);
    border-color: var(--admin-success);
    color: #fff;
}

/* Avertissement (dépublier) — était utilisé dans avis_list sans exister */
.btn-admin-warning {
    background: var(--admin-surface);
    color: var(--admin-warning);
    border-color: var(--admin-warning-border);
    box-shadow: var(--admin-shadow-xs);
}

.btn-admin-warning:hover {
    background-color: var(--admin-warning);
    border-color: var(--admin-warning);
    color: #fff;
}

/* Tailles */
.btn-admin-sm {
    padding: 0.3125rem 0.625rem;
    font-size: 0.8125rem;
    gap: 0.375rem;
}

.btn-admin-sm i {
    font-size: 0.75rem;
}

.btn-admin-lg {
    padding: 0.5625rem 1.125rem;
    font-size: 0.9375rem;
}

.btn-admin-block {
    display: flex;
    width: 100%;
}

/* Groupe de boutons collés */
.btn-admin-group {
    display: inline-flex;
    gap: 0.375rem;
    flex-wrap: wrap;
    align-items: center;
}

/* ============================================================
   13. Formulaires
   ============================================================ */
.admin-form-group {
    margin-bottom: 1.125rem;
}

.admin-form-group:last-child {
    margin-bottom: 0;
}

.admin-form-group label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--admin-text-secondary);
    margin-bottom: 0.375rem;
}

/* Astérisque de champ obligatoire */
.admin-required {
    color: var(--admin-danger);
    font-weight: 500;
}

.admin-form-group .form-hint,
.admin-form-group small {
    display: block;
    font-size: 0.8125rem;
    color: var(--admin-text-muted);
    margin-top: 0.375rem;
    margin-bottom: 0;
}

/* .admin-input : alias historique employé dans criteres.html.twig.
   Il n'avait aucune définition — les champs tombaient sur le style
   navigateur par défaut. Traité comme .admin-form-control. */
/* Hauteur commune à TOUS les contrôles d'une ligne de formulaire.
   Sans elle, un champ fichier (dont le bouton natif impose sa propre hauteur)
   dépassait un champ texte d'environ 7 px : les deux colonnes de « Médias » et
   la ligne d'édition de « Organisations » n'étaient pas au même niveau.
   Valeur = padding + interligne + bordures d'un champ texte. */
.admin-form-control,
.admin-input {
    display: block;
    width: 100%;
    min-height: var(--admin-control-height);
    padding: 0.4688rem 0.75rem;
    font-family: var(--admin-font);
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--admin-text);
    background-color: var(--admin-surface);
    border: 1px solid var(--admin-border-strong);
    border-radius: var(--admin-radius);
    box-shadow: var(--admin-shadow-xs);
    transition: border-color var(--admin-transition), box-shadow var(--admin-transition);
    -webkit-appearance: none;
    appearance: none;
}

.admin-form-control::placeholder,
.admin-input::placeholder {
    color: var(--admin-text-faint);
}

.admin-form-control:hover:not(:focus):not(:disabled),
.admin-input:hover:not(:focus):not(:disabled) {
    border-color: var(--admin-text-faint);
}

.admin-form-control:focus,
.admin-input:focus {
    outline: none;
    border-color: var(--admin-accent);
    box-shadow: 0 0 0 3px var(--admin-accent-ring);
}

.admin-form-control:disabled,
.admin-input:disabled {
    background-color: var(--admin-surface-sunken);
    color: var(--admin-text-muted);
    cursor: not-allowed;
}

textarea.admin-form-control,
textarea.admin-input {
    min-height: 7.5rem;
    resize: vertical;
    line-height: 1.6;
}

/* Sélecteur — chevron discret, pas de triangle plein */
select.admin-form-control,
select.admin-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23667085' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.625rem center;
    padding-right: 2.25rem;
    cursor: pointer;
}

/* Champ fichier — paddings calculés pour tenir dans --admin-control-height.
   Le bouton natif porte sa propre hauteur : sans ce calibrage, le champ
   dépassait un champ texte voisin d'environ 7 px.
   Bouton : 0.1875×2 + 1.5×0.8125 + 2px ≈ 1.72rem
   Champ  : 0.25×2 + 1.72 + 2px ≈ 2.34rem, ramené à 2.375rem par min-height. */
input[type="file"].admin-form-control,
input[type="file"].admin-input {
    padding: 0.25rem 0.5rem;
    font-size: 0.8125rem;
    color: var(--admin-text-muted);
    cursor: pointer;
}

input[type="file"].admin-form-control::file-selector-button,
input[type="file"].admin-input::file-selector-button {
    font-family: var(--admin-font);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--admin-text-secondary);
    background: var(--admin-surface);
    border: 1px solid var(--admin-border-strong);
    border-radius: var(--admin-radius-sm);
    padding: 0.1875rem 0.625rem;
    margin-right: 0.625rem;
    cursor: pointer;
    transition: background-color var(--admin-transition);
}

input[type="file"].admin-form-control::file-selector-button:hover,
input[type="file"].admin-input::file-selector-button:hover {
    background-color: var(--admin-surface-hover);
}

/* Sélecteur de couleur — la page Apparence en aligne neuf */
input[type="color"].admin-form-control,
input[type="color"].admin-input,
.admin-color-input {
    padding: 0.1875rem;
    height: 2.25rem;
    width: 3.5rem;
    cursor: pointer;
}

input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 3px;
}

input[type="color"]::-moz-color-swatch {
    border: none;
    border-radius: 3px;
}

/* Aperçu de logo (page Apparence) */
.admin-logo-preview {
    display: block;
    height: 2.5rem;
    width: auto;
    max-width: 100%;
    padding: 0.5rem 0.75rem;
    margin-bottom: 1.125rem;
    background-color: var(--admin-surface-sunken);
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius);
    box-sizing: content-box;
}

/* Cases et boutons radio */
.admin-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--admin-text-secondary);
    cursor: pointer;
}

.admin-body input[type="checkbox"],
.admin-body input[type="radio"] {
    accent-color: var(--admin-accent);
    width: 0.875rem;
    height: 0.875rem;
    cursor: pointer;
}

/* Rangée de champs */
/* ------------------------------------------------------------------
   Ligne de formulaire — alignement des CHAMPS, pas des bas de bloc
   ------------------------------------------------------------------
   ⚠️ Cette ligne était en `align-items: flex-end`, ce qui alignait le BAS de
   chaque groupe. Dès que deux groupes voisins n'avaient pas la même hauteur —
   un texte d'aide d'un côté et pas de l'autre, ou deux aides de longueurs
   différentes — les champs eux-mêmes se retrouvaient à des hauteurs
   différentes. C'était visible sur « Organisations » (Sigle, qui porte une
   aide, remontait au-dessus de Nom complet, qui n'en a pas) et sur « Médias »
   (aides de 3 et 2 lignes).

   En `stretch`, les groupes partent tous du haut de la ligne : la position du
   champ ne dépend plus que de la hauteur de son label, et l'aide qui le suit ne
   le décale plus. L'aide reste dans le flux, juste sous son champ — la pousser
   en bas de bloc l'aurait détachée du champ qu'elle explique.
   ------------------------------------------------------------------ */
.admin-form-row {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: stretch;
    /* `.admin-form-row > *` remet la marge basse des groupes à zéro : sans marge
       sur la ligne elle-même, deux lignes empilées se touchaient. */
    margin-bottom: 1.125rem;
}

.admin-form-row:last-child {
    margin-bottom: 0;
}

.admin-form-row > * {
    flex: 1;
    min-width: 8rem;
    margin-bottom: 0;
}

.admin-form-row > .admin-form-group {
    display: flex;
    flex-direction: column;
}

/* Champ seul sur sa ligne mais qui doit garder la largeur d'une colonne, pour
   rester aligné sur la grille au-dessus. 0.375rem = la moitié du `gap`.
   Évite d'avoir à insérer un élément vide dans le DOM juste pour occuper
   la seconde colonne. */
.admin-form-row > .admin-form-group.is-half {
    flex: 0 1 calc(50% - 0.375rem);
}

/* Un groupe sans label — bouton d'action, case à cocher — reste calé en bas,
   au niveau des champs voisins : c'est ce que faisait `flex-end` et c'est le
   seul comportement qu'il fallait conserver (voir criteres.html.twig). */
.admin-form-row > .admin-form-group > .btn-admin,
.admin-form-row > .admin-form-group > .admin-check {
    margin-top: auto;
}

/* Séparateur de section dans un formulaire long */
.admin-fieldset-title {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--admin-text-faint);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--admin-border);
}

/* ============================================================
   14. Alertes
   ============================================================ */
.admin-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem 0.875rem;
    border-radius: var(--admin-radius);
    font-size: 0.875rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
}

.admin-alert i {
    margin-top: 0.1875rem;
    font-size: 0.8125rem;
    flex-shrink: 0;
}

.admin-alert-success {
    background-color: var(--admin-success-bg);
    color: var(--admin-success);
    border-color: var(--admin-success-border);
}

.admin-alert-info {
    background-color: var(--admin-info-bg);
    color: var(--admin-info);
    border-color: var(--admin-info-border);
}

.admin-alert-warning {
    background-color: var(--admin-warning-bg);
    color: var(--admin-warning);
    border-color: var(--admin-warning-border);
}

/* Était employée dans 4 templates sans jamais avoir été définie :
   les messages d'erreur s'affichaient sans aucun style. */
.admin-alert-danger,
.admin-alert-error {
    background-color: var(--admin-danger-bg);
    color: var(--admin-danger);
    border-color: var(--admin-danger-border);
}

/* ============================================================
   15. Badges — rectangle à coins courts, pas de pilule
   ============================================================ */
.admin-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.4375rem;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    border-radius: var(--admin-radius-sm);
    border: 1px solid transparent;
    white-space: nowrap;
}

.admin-badge i {
    font-size: 0.6875rem;
}

.admin-badge-success {
    background-color: var(--admin-success-bg);
    color: var(--admin-success);
    border-color: var(--admin-success-border);
}

.admin-badge-warning {
    background-color: var(--admin-warning-bg);
    color: var(--admin-warning);
    border-color: var(--admin-warning-border);
}

.admin-badge-danger {
    background-color: var(--admin-danger-bg);
    color: var(--admin-danger);
    border-color: var(--admin-danger-border);
}

/* Utilisée dans avis_list et pages_list sans définition préalable */
.admin-badge-info {
    background-color: var(--admin-info-bg);
    color: var(--admin-info);
    border-color: var(--admin-info-border);
}

.admin-badge-neutral {
    background-color: var(--admin-surface-sunken);
    color: var(--admin-text-secondary);
    border-color: var(--admin-border);
}

.admin-badge-accent {
    background-color: var(--admin-accent-subtle);
    color: var(--admin-accent);
    border-color: var(--admin-accent-border);
}

/* ============================================================
   16. Tableaux
   ============================================================ */
.admin-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    /* Sans min-width, une table en width:100% se comprime dans son conteneur
       overflow-x:auto au lieu de le déborder : les colonnes se tassent et le texte
       casse mot à mot au lieu de déclencher le défilement horizontal prévu. */
    min-width: 640px;
}

.admin-table th {
    text-align: left;
    padding: 0.625rem 0.75rem;
    font-weight: 600;
    color: var(--admin-text-muted);
    background-color: var(--admin-surface-sunken);
    border-bottom: 1px solid var(--admin-border);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.admin-table th:first-child { padding-left: 1.25rem; }
.admin-table th:last-child { padding-right: 1.25rem; }

.admin-table td {
    padding: 0.75rem;
    border-bottom: 1px solid var(--admin-border);
    vertical-align: middle;
    color: var(--admin-text-secondary);
}

.admin-table td:first-child { padding-left: 1.25rem; }
.admin-table td:last-child { padding-right: 1.25rem; }

.admin-table td strong {
    color: var(--admin-text);
    font-weight: 500;
}

.admin-table tbody tr:last-child td {
    border-bottom: none;
}

/* Survol neutre — l'ancien voile violet à 3 % faisait « jouet » */
.admin-table tbody tr:hover td {
    background-color: var(--admin-surface-hover);
}

/* Les cartes contenant une table n'ont pas besoin du padding de card-body */
.admin-card-body.is-table {
    padding: 0;
    overflow-x: auto;
}

/* Vignette de logo dans un tableau (organisations) */
.org-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 1.875rem;
    background: var(--admin-surface-sunken);
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-sm);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--admin-text-faint);
}

/* État vide */
.admin-empty {
    text-align: center;
    padding: 2.5rem 1.25rem;
    color: var(--admin-text-muted);
    font-size: 0.875rem;
}

.admin-empty i {
    display: block;
    font-size: 1.5rem;
    color: var(--admin-text-faint);
    margin-bottom: 0.625rem;
}

/* ============================================================
   17. Page de connexion
   ============================================================ */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--admin-bg);
    /* Trame très légère au lieu du dégradé rose/violet/orange */
    background-image:
        radial-gradient(circle at 1px 1px, rgba(16, 24, 40, 0.055) 1px, transparent 0);
    background-size: 22px 22px;
    padding: 1.5rem;
    font-family: var(--admin-font);
    color: var(--admin-text);
}

.login-card {
    background: var(--admin-surface);
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-lg);
    padding: 2rem;
    width: 100%;
    max-width: 23rem;
    box-shadow: var(--admin-shadow-lg);
}

.login-card .login-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.login-card .login-logo img {
    height: 2.75rem;
    width: auto;
}

.login-card h1 {
    font-size: 1.125rem;
    font-weight: 600;
    text-align: center;
    color: var(--admin-text);
    margin-bottom: 0.25rem;
    letter-spacing: -0.015em;
}

.login-card .login-subtitle {
    text-align: center;
    color: var(--admin-text-muted);
    font-size: 0.8125rem;
    margin-bottom: 1.75rem;
}

.login-card .admin-form-group {
    margin-bottom: 1rem;
}

.login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5625rem;
    font-family: var(--admin-font);
    font-size: 0.875rem;
    font-weight: 500;
    color: #fff;
    background: var(--admin-accent);
    border: 1px solid var(--admin-accent);
    border-radius: var(--admin-radius);
    cursor: pointer;
    transition: background-color var(--admin-transition), border-color var(--admin-transition);
    margin-top: 1.25rem;
}

.login-btn:hover {
    background: var(--admin-accent-hover);
    border-color: var(--admin-accent-hover);
}

.login-btn:active {
    background: var(--admin-accent-active);
}

.login-btn i {
    font-size: 0.8125rem;
}

.login-back {
    display: block;
    text-align: center;
    margin-top: 1.25rem;
    font-size: 0.8125rem;
    color: var(--admin-text-muted);
    text-decoration: none;
    transition: color var(--admin-transition);
}

.login-back:hover {
    color: var(--admin-accent);
    text-decoration: none;
}

/* ============================================================
   18. Utilitaires
   ============================================================ */
.admin-text-muted { color: var(--admin-text-muted); }
/* Ajoutée le 20/08/2026 : elle était appelée par dashboard.html.twig et
   organizations.html.twig sans exister — une classe fantôme n'échoue jamais
   bruyamment, elle rend simplement le texte dans la couleur par défaut. */
.admin-text-faint { color: var(--admin-text-faint); }
.admin-text-sm { font-size: 0.8125rem; }

.admin-mb-0 { margin-bottom: 0; }
.admin-mb-2 { margin-bottom: 0.5rem; }
.admin-mb-3 { margin-bottom: 1rem; }
.admin-mb-4 { margin-bottom: 1.5rem; }

.admin-mt-2 { margin-top: 0.5rem; }
.admin-mt-3 { margin-top: 1rem; }   /* utilisée dans criteres.html.twig */
.admin-mt-4 { margin-top: 1.5rem; }

.admin-d-flex {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.admin-justify-between { justify-content: space-between; }
.admin-flex-wrap { flex-wrap: wrap; }

.admin-divider {
    height: 1px;
    background-color: var(--admin-border);
    border: 0;
    margin: 1.25rem 0;
}

/* ============================================================
   19. Accessibilité
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .admin-body *,
    .login-page * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* ============================================================
   21. Ergonomie tactile (audit responsive du 20/08/2026)
   ------------------------------------------------------------
   Le back-office est mobile-first côté GABARIT (sidebar escamotable, cartes empilées, tables
   défilantes), mais ses contrôles restaient dimensionnés pour la souris : 32 px de côté pour
   le bouton d'ouverture du menu, ~28 px pour les boutons `-sm` des tableaux et de la
   médiathèque. En dessous de 44 px, la saisie au doigt devient imprécise (WCAG 2.5.8 fixe
   24 px en minimum absolu, 44 px est le seuil confortable retenu par iOS et Material).

   Ces règles ne s'appliquent QU'AUX POINTEURS GROSSIERS (`pointer: coarse`) : sur un écran
   piloté à la souris, les densités actuelles sont volontaires et restent inchangées.
   ============================================================ */
@media (pointer: coarse) {
    .btn-sidebar-toggle {
        width: 2.75rem;
        height: 2.75rem;
        font-size: 1rem;
    }

    .sidebar-link,
    .sidebar-footer a {
        min-height: 2.75rem;
    }

    .btn-admin,
    .btn-admin-sm {
        min-height: 2.75rem;
    }

    /* Deux boutons d'action côte à côte dans un tableau se touchaient : l'écart minimal
       recommandé entre deux cibles tactiles est de 8 px. */
    .btn-admin-group {
        gap: 0.5rem;
    }

    /* 16px : en dessous, iOS Safari zoome à la prise de focus et décale toute la mise en page. */
    .admin-form-control,
    .admin-input,
    .admin-body select,
    .admin-body textarea {
        font-size: 1rem;
    }

    /* Les cases à cocher de la page Critères faisaient 13 px de côté (taille native). */
    .admin-body input[type="checkbox"],
    .admin-body input[type="radio"] {
        width: 1.15rem;
        height: 1.15rem;
    }
}

/* Avertissement affiché sur l'écran d'édition d'une page, uniquement sous 992 px.
   Masqué par défaut : sur un poste de travail, il n'aurait rien à dire. */
.editor-mobile-warning {
    display: none;
}

@media (max-width: 991.98px) {
    .editor-mobile-warning {
        display: flex;
    }
}

/* Sur les écrans les plus étroits, un bouton pleine largeur est plus sûr qu'un bouton
   de 90 px aligné à droite — et évite le débordement quand le libellé est long. */
@media (max-width: 480px) {
    .admin-card-header {
        align-items: flex-start;
    }

    .admin-card-header .btn-admin-group {
        width: 100%;
    }

    .admin-card-header .btn-admin-group > .btn-admin {
        flex: 1;
        justify-content: center;
    }
}

/* ============================================================
   20. Médiathèque
   ============================================================ */
.media-grid {
    display: grid;
    /* auto-fill plutôt qu'auto-fit : avec un seul média, la vignette garde sa
       largeur nominale au lieu de s'étirer sur toute la ligne. */
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 1rem;
}

.media-item {
    display: flex;
    flex-direction: column;
    margin: 0;
    background-color: var(--admin-surface);
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-lg);
    overflow: hidden;
    transition: border-color var(--admin-transition);
}

.media-item:hover {
    border-color: var(--admin-border-strong);
}

.media-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 9rem;
    background-color: var(--admin-surface-sunken);
    border-bottom: 1px solid var(--admin-border);
}

/* contain, jamais cover : une vignette rognée tromperait sur le cadrage réel
   de l'image telle qu'elle sera posée dans la page. */
.media-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.media-ext {
    font-family: var(--admin-font-mono);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--admin-text-faint);
}

.media-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
}

.media-title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--admin-text);
    overflow-wrap: anywhere;
}

.media-meta {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
    font-size: 0.75rem;
    color: var(--admin-text-muted);
    font-variant-numeric: tabular-nums;
}

.media-url-label {
    margin: 0;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--admin-text-faint);
}

.media-url {
    font-family: var(--admin-font-mono);
    font-size: 0.75rem;
    background-color: var(--admin-surface-sunken);
}

.media-rename {
    display: flex;
    gap: 0.375rem;
}

.media-rename input {
    flex: 1;
    min-width: 0;
    font-size: 0.8125rem;
}

/* ============================================================
   Indexation d'un avis (avis_edit) et références d'une valeur (critere_valeur_edit) — 09/09/2026
   Un fieldset par champ ; un mot-clé qui a des termes associés est un intitulé, ses termes
   sont indentés dessous. Les options sont des étiquettes cliquables pleine largeur.
   ============================================================ */
.admin-indexation { border: 0; padding: 0; margin: 0; min-width: 0; }
.admin-indexation legend { font-size: 0.9375rem; font-weight: 600; color: var(--admin-text, #1f2937); padding: 0; margin-bottom: 0.5rem; }
.admin-indexation legend small { font-weight: 400; font-size: 0.8125rem; }
.admin-indexation-option {
    display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.35rem 0.5rem; margin: 0;
    border-radius: 6px; font-size: 0.875rem; line-height: 1.4; cursor: pointer; user-select: none;
}
.admin-indexation-option:hover { background: #faf8fc; }
.admin-indexation-option input { margin-top: 0.2rem; flex-shrink: 0; }
.admin-indexation-option small { display: block; font-size: 0.78rem; }
.admin-indexation-groupe { margin: 0.35rem 0 0.5rem; }
.admin-indexation-parent { display: block; padding: 0.35rem 0.5rem 0.1rem; font-weight: 600; font-size: 0.875rem; }
.admin-indexation-parent small { font-weight: 400; font-size: 0.78rem; }
.admin-indexation-enfants { margin-left: 1rem; padding-left: 0.75rem; border-left: 2px solid #e0d8e8; }
.admin-indexation-precision { padding: 0 0.5rem 0.5rem 2.1rem; }
.admin-indexation-precision .admin-form-control { max-width: 28rem; }
.admin-indexation-references { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0 0.5rem; }
.admin-indexation-references .admin-indexation-option { padding: 0.25rem 0.4rem; }

/* ============================================================
   22. Direction artistique « Douceur » (02/10/2026)
   ------------------------------------------------------------
   Retouches qui ne tiennent pas aux seuls jetons de la section 1.
   ============================================================ */

/* 🐛 Correctif : un bouton écrit comme un LIEN (<a class="btn-admin btn-admin-primary">,
   « Nouvelle page », « Modifier la page d'accueil »…) affichait son texte en violet sur
   fond violet, donc invisible : `.admin-body a` (spécificité 0,1,1) passait devant
   `.btn-admin-primary` (0,1,0). Antérieur à la refonte, relevé le 02/10/2026. Chaque
   variante reprend ici sa couleur à une spécificité supérieure à celle des liens. */
.admin-body a.btn-admin { text-decoration: none; }
.admin-body a.btn-admin-primary,
.admin-body a.btn-admin-primary:hover { color: #fff; }
.admin-body a.btn-admin-outline,
.admin-body a.btn-admin-secondary { color: var(--admin-text-secondary); }
.admin-body a.btn-admin-outline:hover,
.admin-body a.btn-admin-secondary:hover,
.admin-body a.btn-admin-ghost:hover { color: var(--admin-text); }
.admin-body a.btn-admin-ghost { color: var(--admin-text-muted); }
.admin-body a.btn-admin-danger { color: var(--admin-danger); }
.admin-body a.btn-admin-success { color: var(--admin-success); }
.admin-body a.btn-admin-warning { color: var(--admin-warning); }
.admin-body a.btn-admin-danger:hover,
.admin-body a.btn-admin-success:hover,
.admin-body a.btn-admin-warning:hover { color: #fff; }

/* Boutons et badges en pilule, graisse un peu plus franche */
.btn-admin { border-radius: var(--admin-pilule); font-weight: 600; }
.admin-badge { border-radius: var(--admin-pilule); }

/* Titres : la graisse 800 de cncdp.css est réservée au titre de page */
.admin-body h1 { font-weight: 800; letter-spacing: -0.02em; }
.admin-body h2, .admin-body h3, .admin-body h4 { font-weight: 700; }

/* Intitulés : plus de capitales espacées (sections de la barre latérale, séparateurs de
   formulaire, en-têtes de tableau, libellés de la médiathèque). */
.sidebar-section-title,
.admin-fieldset-title,
.admin-table th,
.media-url-label {
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.8125rem;
    font-weight: 700;
}
.sidebar-section-title { color: var(--admin-text-muted); }

/* Barre latérale : entrée active en pastille lilas, sans barre d'accent */
.sidebar-link { border-radius: var(--admin-pilule); font-weight: 600; }
.sidebar-link.active { background-color: var(--admin-accent-subtle); color: var(--admin-text); }
.sidebar-link.active::before { display: none; }
.sidebar-link.active i { color: var(--admin-accent); }

/* --- Page de connexion et page d'accès réservé (templates/acces/formulaire.html.twig) ---
   Panneau « aura » de la DA, motif « lever » tiré au sort pour la page d'accès : trois arcs
   fins (violet, rose, orange) qui se lèvent depuis le bas de la carte. */
.login-page {
    background-color: var(--admin-surface);
    background-image: none;
}
.login-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    max-width: 25rem;
    padding: 2.5rem 2.25rem 5rem;
    border: 0;
    border-radius: clamp(28px, 4vw, 36px);
    background-color: var(--aura-fond, #fcf8ff);
    background-image: var(--aura, none);
    box-shadow: var(--admin-shadow-lg);
}
.login-card::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    /* Trois cercles de 13rem de rayon centrés 9rem SOUS la carte : seuls leurs sommets
       apparaissent, sur environ 4rem. Décalés vers la gauche et le haut, comme le motif
       « lever » du site (cncdp.css, .cn-bandeau--lever). */
    background:
        radial-gradient(circle at 72% calc(100% + 9rem), transparent 0 13rem, rgba(157, 56, 218, 0.45) 13rem calc(13rem + 2px), transparent calc(13rem + 2px)),
        radial-gradient(circle at calc(72% - 1rem) calc(100% + 8.55rem), transparent 0 13rem, rgba(253, 130, 187, 0.65) 13rem calc(13rem + 2px), transparent calc(13rem + 2px)),
        radial-gradient(circle at calc(72% - 2rem) calc(100% + 8.1rem), transparent 0 13rem, rgba(252, 188, 99, 0.9) 13rem calc(13rem + 2px), transparent calc(13rem + 2px));
    pointer-events: none;
}
.login-card h1 { font-weight: 800; letter-spacing: -0.02em; }
.login-btn { border-radius: var(--admin-pilule); font-weight: 700; }
.login-card .admin-form-control { background-color: var(--admin-surface); }

/* 🐛 Grilles écrites en style en ligne (`grid-template-columns: 1fr 340px`, `140px 1fr`,
   `1fr 1fr 1fr` dans avis_edit.html.twig) : elles ne s'adaptaient jamais, et le formulaire
   d'un avis débordait de 355 px sur téléphone (relevé du 02/10/2026, antérieur à la refonte).
   Sous 768 px, toute grille du back-office passe sur une colonne ; `!important` est le seul
   moyen de passer devant un attribut `style`. */
@media (max-width: 767.98px) {
    .admin-body .admin-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ============================================================
   23. Formulaire d'un avis — maquette n°2 (11/10/2026)
   ------------------------------------------------------------
   templates/admin/avis_edit.html.twig : résumé en listes déroulantes à groupes, contenu en puces
   avec un panneau de cases, barre d'état fixe en bas. Remplace les styles en ligne du formulaire.
   ============================================================ */
.avis-form-page { padding-bottom: 6rem; }
.avis-form { display: grid; gap: 1.25rem; max-width: 64rem; }

.avis-form-identite { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 0 1rem; }
.avis-form-identite__titre { grid-column: 2; }
.avis-form-identite__slug { grid-column: 1 / -1; }
@media (min-width: 768px) {
    .avis-form-identite { grid-template-columns: 8.5rem minmax(0, 1fr) 10rem 10rem; }
    .avis-form-identite__titre { grid-column: 2 / -1; }
    .avis-form-identite__slug { grid-column: 3 / -1; grid-row: 2; }
}
.avis-form-publication { display: grid; gap: 0 1.25rem; }
@media (min-width: 768px) { .avis-form-publication { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.avis-form-pdf {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    padding: 0.375rem 0.375rem 0.375rem 0.75rem;
    border-radius: var(--admin-radius-sm);
    background: var(--admin-accent-subtle);
    font-size: 0.8125rem;
}
.avis-form-pdf span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Une ligne de l'indexation du résumé : intitulé et règle à gauche, liste déroulante à droite. */
.avis-ix-ligne { display: grid; gap: 0.375rem 1.25rem; padding: 1rem 0; border-top: 1px solid var(--admin-border); }
.avis-ix-ligne:first-child, .avis-ix-alerte + .avis-ix-ligne { border-top: 0; padding-top: 0; }
@media (min-width: 768px) { .avis-ix-ligne { grid-template-columns: 13rem minmax(0, 1fr); } }
.avis-ix-nom { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.5rem; align-content: start; }
.avis-ix-nom label, .avis-ix-titre { margin: 0; color: var(--admin-text); font-size: 0.875rem; font-weight: 600; }
.avis-ix-regle {
    padding: 0 0.5rem;
    border-radius: var(--admin-pilule);
    box-shadow: inset 0 0 0 1px var(--admin-border-strong);
    color: var(--admin-text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.5;
}
.avis-ix-regle--plusieurs { background: #feeed4; box-shadow: none; }
.avis-ix-aide { margin: 0.375rem 0 0; color: var(--admin-text-muted); font-size: 0.8125rem; line-height: 1.45; }
.avis-ix-aide strong { color: var(--admin-text); font-weight: 600; }
.avis-ix-precision { margin-top: 0.5rem; max-width: 30rem; }
.avis-ix-alerte {
    margin: 0 0 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--admin-radius-sm);
    background: var(--admin-warning-bg);
    color: var(--admin-warning);
    font-size: 0.8125rem;
}

/* Champ multiple : puces des valeurs choisies, panneau de cases repliable. */
.avis-ix-multiple + .avis-ix-multiple { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--admin-border); }
.avis-ix-multiple .form-hint { margin: 0.375rem 0 0; }
.avis-ix-puces { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0; padding: 0; list-style: none; }
.avis-ix-puce {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3125rem 0.375rem 0.3125rem 0.75rem;
    border-radius: var(--admin-pilule);
    background: var(--admin-accent-subtle);
    box-shadow: inset 0 0 0 1px var(--admin-accent-border);
    color: var(--admin-text);
    font-size: 0.8125rem;
    line-height: 1.35;
}
.avis-ix-puce small { color: var(--admin-text-muted); font-size: 0.75rem; }
.avis-ix-puce button {
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border: 0;
    border-radius: 50%;
    background: var(--admin-surface);
    color: var(--admin-text-secondary);
    cursor: pointer;
}
.avis-ix-puce button:hover { background: var(--admin-danger-bg); color: var(--admin-danger); }
.avis-ix-puces-vide { color: var(--admin-text-muted); font-size: 0.8125rem; }
.avis-ix-panneau > summary { list-style: none; }
.avis-ix-panneau > summary::-webkit-details-marker { display: none; }
.avis-ix-panneau[open] > summary { background: var(--admin-accent-subtle); }
.avis-ix-panneau-corps {
    margin-top: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--admin-border-strong);
    border-radius: var(--admin-radius-lg);
    background: var(--admin-surface-sunken);
}
.avis-ix-recherche { max-width: 24rem; margin-bottom: 0.75rem; }
.avis-ix-arbre { columns: 2 20rem; column-gap: 1.5rem; }
.avis-ix-arbre > * { break-inside: avoid; }
.avis-ix-option {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    margin: 0;
    padding: 0.375rem 0.5rem;
    border-radius: var(--admin-radius-sm);
    color: var(--admin-text);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.4;
    cursor: pointer;
}
.avis-ix-option[hidden] { display: none; }
.avis-ix-option:hover { background: var(--admin-surface-hover); }
.avis-ix-option input { flex: none; width: 1.0625rem; height: 1.0625rem; margin: 0.125rem 0 0; accent-color: var(--admin-accent); }
.avis-ix-option:has(input:checked) { background: var(--admin-accent-subtle); }
.avis-ix-option:has(input:checked) .avis-ix-option-libelle { font-weight: 600; }
.avis-ix-option.est-inclus { box-shadow: inset 3px 0 0 var(--admin-accent-border); }
.avis-ix-option-texte { display: grid; gap: 0.0625rem; min-width: 0; }
.avis-ix-option-aide { color: var(--admin-text-muted); font-size: 0.75rem; }
.avis-ix-option-refs { color: var(--orange-fonce, #a84f06); font-size: 0.75rem; font-weight: 600; }
.avis-ix-inclus { color: var(--admin-accent); font-size: 0.75rem; font-weight: 600; }
.avis-ix-inclus[hidden] { display: none; }
.avis-ix-groupe > summary { display: flex; align-items: flex-start; gap: 0.5rem; border-radius: var(--admin-radius-sm); list-style: none; cursor: pointer; }
.avis-ix-groupe > summary::-webkit-details-marker { display: none; }
.avis-ix-groupe > summary:hover { background: var(--admin-surface-hover); }
.avis-ix-groupe > summary > .avis-ix-option { flex: 1; min-width: 0; }
.avis-ix-groupe > summary > .avis-ix-option:hover { background: transparent; }
.avis-ix-groupe-nb { flex: none; padding: 0.375rem 0.5rem 0 0; color: var(--admin-text-muted); font-size: 0.75rem; white-space: nowrap; }
.avis-ix-groupe-nb i { margin-left: 0.25rem; font-size: 0.625rem; transition: transform 0.2s ease; }
.avis-ix-groupe[open] .avis-ix-groupe-nb i { transform: rotate(180deg); }
.avis-ix-enfants { margin: 0 0 0.375rem 1.0625rem; padding-left: 0.5rem; border-left: 2px solid var(--admin-border); }
.avis-ix-entree[hidden] { display: none; }

.avis-ix-references { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--admin-border); }
.avis-ix-references-titre { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.5rem; color: var(--admin-text-secondary); font-size: 0.8125rem; font-weight: 600; }
.avis-ix-references-titre span { padding: 0 0.4375rem; border-radius: var(--admin-pilule); background: #feeed4; color: var(--admin-text); font-size: 0.75rem; }
.avis-ix-refs { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0; padding: 0; list-style: none; }
.avis-ix-refs li { padding: 0.125rem 0.625rem; border-radius: var(--admin-pilule); background: #feeed4; color: var(--admin-text); font-size: 0.8125rem; font-weight: 600; }
.avis-ix-refs li.avis-ix-refs-vide { padding: 0; background: none; color: var(--admin-text-muted); font-weight: 400; }

/* Barre d'état fixe : ce qui reste à indexer et les boutons, toujours visibles. */
.avis-form-etat {
    position: fixed;
    right: 0;
    bottom: 0;
    left: var(--admin-sidebar-width);
    z-index: 50;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.25rem;
    padding: 0.75rem 1.5rem;
    border-top: 1px solid var(--admin-border);
    background: var(--admin-surface);
    box-shadow: 0 -8px 24px -16px rgba(59, 26, 87, 0.3);
}
@media (max-width: 991.98px) { .avis-form-etat { left: 0; } }
.avis-form-etat p { margin: 0; color: var(--admin-text-secondary); font-size: 0.875rem; }
.avis-etat-pastille {
    display: inline-grid;
    place-items: center;
    min-width: 1.5rem;
    height: 1.375rem;
    margin-right: 0.25rem;
    padding: 0 0.375rem;
    border-radius: var(--admin-pilule);
    background: var(--admin-warning-bg);
    color: var(--admin-warning);
    font-size: 0.75rem;
    font-weight: 700;
}
.avis-etat-pastille.est-ok { background: var(--admin-success-bg); color: var(--admin-success); }
.avis-etat-erreur { color: var(--admin-danger) !important; font-weight: 600; }
.avis-etat-erreur[hidden] { display: none; }
.avis-form-etat-actions { display: flex; gap: 0.5rem; margin-left: auto; }
@media (max-width: 575.98px) {
    .avis-form-page { padding-bottom: 9rem; }
    .avis-form-etat { gap: 0.25rem 0.75rem; padding: 0.5rem 0.75rem; }
    .avis-form-etat p { font-size: 0.75rem; }
    .avis-form-etat-actions { width: 100%; }
    .avis-form-etat-actions .btn-admin { flex: 1; justify-content: center; }
}