/* =====================================================================
   Tirage — back-office. Complète style.css, ne le remplace pas.

   La page publique est en fond clair, le back-office reste SOMBRE : c'est
   un outil interne que seuls les organisateurs voient, et le contraste
   marque qu'on a changé de contexte. Convention reprise de
   « Toutes nos couleurs ».
   ===================================================================== */

/* Toute la feuille commune est écrite avec --bg / --fg / --border / --font :
   il suffit donc de les REDÉFINIR ici — admin.css est chargée APRÈS
   style.css — pour rebasculer d'un coup l'ensemble des composants (cartes,
   champs, boutons, alertes, popup), sans surcharger un seul d'entre eux.
   C'est précisément l'intérêt d'avoir tout passé en variables. */
:root {
    --bg: #0d0d0d;
    --bg-soft: #171717;
    --fg: #f2f2f2;
    --fg-dim: #8c8c8c;
    --border: #2a2a2a;
    --focus: #f2f2f2;

    /* Le back-office n'utilise pas la police d'affichage : c'est un outil,
       une police système s'y lit mieux et évite de charger les OTF. */
    --font: var(--font-reading);
}

/* Le corps du texte des alertes et des champs vient de .prose côté public,
   qui fixe un gris sombre en dur pour la lisibilité sur crème. En contexte
   sombre, ce gris devient illisible : on le repasse sur la variable. */
.prose :is(p, li) { color: var(--fg-dim); }

/* ---------------------------------------------------------------------
   Connexion
   --------------------------------------------------------------------- */

.login-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1.5rem;
}

.login-box { width: 100%; max-width: 360px; }

.login-title {
    margin: 0 0 1.25rem;
    font-size: 1.3rem;
    font-weight: 600;
}

.login-help { margin: 1.5rem 0 0; font-size: 0.75rem; color: var(--fg-dim); }

/* --bg et non --bg-soft : les `code` vivent DANS des cartes, qui sont déjà
   en --bg-soft. Le même fond les rendrait invisibles. */
code {
    padding: 0.1rem 0.3rem;
    border-radius: 2px;
    background: var(--bg);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85em;
}

/* ---------------------------------------------------------------------
   En-tête et onglets
   --------------------------------------------------------------------- */

.admin-header {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    align-items: baseline;
    justify-content: space-between;
    padding: 1.5rem 1.5rem 1rem;
    border-bottom: 1px solid var(--border);
}

.admin-header__brand {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.admin-header__sub { font-size: 0.85rem; font-weight: 400; color: var(--fg-dim); }

.admin-header__actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.85rem;
}

.admin-link { color: var(--fg-dim); text-decoration: none; }
.admin-link:hover { color: var(--fg); text-decoration: underline; }

.tabs {
    display: flex;
    gap: 0.25rem;
    padding: 0 1.5rem;
    border-bottom: 1px solid var(--border);
    /* Sur mobile la barre défile : sans ça, cinq onglets se tassent en
       colonnes de deux lettres. */
    overflow-x: auto;
    scrollbar-width: none;
}

.tabs::-webkit-scrollbar { display: none; }

.tab {
    flex: 0 0 auto;
    padding: 0.7rem 1rem;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--fg-dim);
    font-family: inherit;
    font-size: 0.9rem;
    cursor: pointer;
    white-space: nowrap;
}

.tab:hover { color: var(--fg); }

.tab[aria-current="page"] { color: var(--fg); border-bottom-color: var(--fg); }

.admin-main {
    max-width: 68rem;
    margin: 0 auto;
    padding: 2rem 1.5rem 6rem;
}

/* ---------------------------------------------------------------------
   Cartes
   --------------------------------------------------------------------- */

.card {
    margin-bottom: 1rem;
    padding: 1.25rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-soft);
}

.card__title { margin: 0 0 1.25rem; font-size: 1.05rem; font-weight: 600; }

.card__title--spaced {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}

.card__lead { margin: -0.9rem 0 1.25rem; font-size: 0.85rem; color: var(--fg-dim); }

.panel > .card:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------
   Compteurs
   --------------------------------------------------------------------- */

.stats {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    margin-bottom: 1.5rem;
}

.stat {
    padding: 0.9rem 1rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-soft);
}

.stat__value { display: block; font-size: 1.6rem; font-weight: 600; line-height: 1.2; }
.stat__label { display: block; margin-top: 0.1rem; font-size: 0.78rem; color: var(--fg-dim); }

/* Les deux seules touches de couleur du back-office, et elles portent une
   information binaire qu'on doit saisir sans lire : le défi est-il ouvert. */
.stat--on .stat__value { color: #4caf7d; }
.stat--off .stat__value { color: #e05252; }

/* ---------------------------------------------------------------------
   Barre d'outils
   --------------------------------------------------------------------- */

.toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
    margin-bottom: 1rem;
}

.filters { display: flex; gap: 0.25rem; }

.chip {
    padding: 0.35rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: transparent;
    color: var(--fg-dim);
    font-family: inherit;
    font-size: 0.85rem;
    cursor: pointer;
}

.chip--filter.is-on { border-color: var(--fg); background: var(--fg); color: var(--bg); }

.search { flex: 1 1 14rem; font-size: 0.9rem; }

#export { text-decoration: none; }

/* ---------------------------------------------------------------------
   Tableaux
   --------------------------------------------------------------------- */

.table-wrap {
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-soft);
    /* Le tableau déborde sur mobile : c'est LUI qui défile, jamais la page.
       Une page qui glisse horizontalement donne l'impression d'être cassée. */
    overflow-x: auto;
}

.table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }

.table th {
    padding: 0.7rem 0.85rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fg-dim);
    white-space: nowrap;
}

.table td { padding: 0.75rem 0.85rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.table tr:last-child td { border-bottom: 0; }

.col-actions { text-align: right; }
.table td.col-actions { white-space: nowrap; text-align: right; }
.table td.col-actions .btn + .btn { margin-left: 0.3rem; }

.who__name { font-weight: 600; }
.who__mail { font-size: 0.82rem; color: var(--fg-dim); word-break: break-all; }
.who__date { margin-top: 0.2rem; font-size: 0.78rem; color: var(--fg-dim); }

.pairs { margin: 0; display: grid; gap: 0.2rem; }
.pairs div { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.pairs dt { font-size: 0.8rem; color: var(--fg-dim); }
.pairs dd { margin: 0; }

.badge {
    display: inline-block;
    padding: 0.05rem 0.5rem;
    border-radius: 1em;
    background: var(--border);
    color: var(--fg);
    font-size: 0.75rem;
}

.badge--ok { background: #1e3b2c; color: #7fca9f; }
.badge--warn { background: #3b1e1e; color: #f0918a; }

.empty { padding: 2rem 1rem; text-align: center; color: var(--fg-dim); font-size: 0.9rem; }

/* ---------------------------------------------------------------------
   Thèmes
   --------------------------------------------------------------------- */

.theme__head {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--border);
}

.theme__order { display: flex; flex-direction: column; gap: 0.2rem; }

.icon-btn {
    width: 1.6rem;
    height: 1.35rem;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: transparent;
    color: var(--fg-dim);
    font-size: 0.7rem;
    line-height: 1;
    cursor: pointer;
}

.icon-btn:hover:not(:disabled) { border-color: var(--fg); color: var(--fg); }
.icon-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.theme__id { flex: 1 1 auto; min-width: 0; }
.theme__name { margin: 0; font-size: 1.05rem; font-weight: 600; }
.theme__meta { margin: 0.15rem 0 0; font-size: 0.82rem; color: var(--fg-dim); }

.theme__tools { display: flex; gap: 0.35rem; flex-wrap: wrap; justify-content: flex-end; }

.theme--off { opacity: 0.6; }

.theme--off .theme__name::after {
    content: 'inactif';
    margin-left: 0.5rem;
    padding: 0.05rem 0.45rem;
    border-radius: 1em;
    background: var(--border);
    font-size: 0.68rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--fg-dim);
}

.theme__form { padding: 1rem 0; border-bottom: 1px solid var(--border); }

.row-actions { display: flex; gap: 0.4rem; }

.items { display: flex; flex-wrap: wrap; gap: 0.35rem; padding: 0.9rem 0; }

.item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.3rem 0.25rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 3px;
    font-size: 0.85rem;
}

.item--off { opacity: 0.5; text-decoration: line-through; }

/* Un élément déjà attribué ne peut plus être supprimé : le liseré le dit
   avant que l'admin ne clique et ne reçoive un refus. */
.item--used { border-color: var(--fg-dim); }

.item__label { cursor: text; }
.item__label:hover { text-decoration: underline dotted; }

.item__count {
    padding: 0 0.35rem;
    border-radius: 1em;
    background: var(--border);
    font-size: 0.7rem;
    color: var(--fg-dim);
}

.item__btn {
    width: 1.25rem;
    height: 1.25rem;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: var(--fg-dim);
    font-size: 0.8rem;
    line-height: 1;
    cursor: pointer;
}

.item__btn:hover { background: var(--bg); color: var(--fg); }

.item__edit {
    width: 9rem;
    padding: 0.1rem 0.3rem;
    border: 1px solid var(--fg-dim);
    border-radius: 3px;
    background: var(--bg);
    color: var(--fg);
    font-family: inherit;
    font-size: 0.85rem;
}

.items-empty { font-size: 0.85rem; color: var(--fg-dim); }

.add-items { padding-top: 0.9rem; border-top: 1px solid var(--border); }
.add-items label { display: block; margin-bottom: 0.35rem; font-size: 0.9rem; }
.add-items textarea { margin-bottom: 0.5rem; }

/* ---------------------------------------------------------------------
   Textes : sous-onglets et éditeur riche
   --------------------------------------------------------------------- */

.subtabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--border);
}

.subtab {
    padding: 0.5rem 0.9rem;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--fg-dim);
    font-family: inherit;
    font-size: 0.9rem;
    cursor: pointer;
}

.subtab:hover { color: var(--fg); }
.subtab.is-active { border-bottom-color: var(--fg); color: var(--fg); }

.editor {
    margin-bottom: 1rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-soft);
}

.editor__toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.5rem;
    border-bottom: 1px solid var(--border);
}

.editor__toolbar button {
    min-width: 2rem;
    padding: 0.3rem 0.55rem;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: var(--bg);
    color: var(--fg);
    font-family: inherit;
    font-size: 0.85rem;
    cursor: pointer;
}

.editor__toolbar button:hover { border-color: var(--fg); }

.editor__area {
    min-height: 12rem;
    max-height: 60vh;
    padding: 1rem 1.25rem;
    overflow-y: auto;
    line-height: 1.5;
}

.editor__area:focus {
    /* Contour à l'INTÉRIEUR : la zone est collée au cadre de l'éditeur, un
       contour extérieur le chevaucherait. */
    outline: 2px solid var(--focus);
    outline-offset: -2px;
}

.editor__area > :first-child { margin-top: 0; }
.editor__area > :last-child { margin-bottom: 0; }
.editor__area h2 { font-size: 1.2rem; }
.editor__area h3 { font-size: 1.05rem; }
.editor__area ul, .editor__area ol { padding-left: 1.2rem; }
.editor__area a { color: #7db7ff; }

/* ---------------------------------------------------------------------
   Réglages
   --------------------------------------------------------------------- */

.switch {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    margin-bottom: 1.25rem;
    cursor: pointer;
}

.switch input { flex-shrink: 0; margin-top: 0.3rem; width: 1rem; height: 1rem; accent-color: var(--fg); }
.switch strong { display: block; font-size: 0.95rem; font-weight: 600; }
.switch em { display: block; margin-top: 0.15rem; font-size: 0.82rem; font-style: normal; color: var(--fg-dim); }

.switch--inline { margin-bottom: 0.9rem; }