/*
 * Projunior — Charte des composants.
 * Redéfinit les classes Bootstrap réellement employées dans les templates
 * (btn, card, table, badge, alert, form-*) + composants maison (pj-*).
 * Chargé après Bootstrap : à spécificité égale, ces règles gagnent (ordre source).
 */

/* ==================================================================== */
/* En-tête de page                                                      */
/* ==================================================================== */
.pj-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--pj-space-4);
    flex-wrap: wrap;
    margin-bottom: var(--pj-space-5);
    padding-bottom: var(--pj-space-4);
    border-bottom: 1px solid var(--pj-line);
}

.pj-page-head h1 { margin: 0 0 0.15rem; }
.pj-page-head__sub { color: var(--pj-slate); font-size: var(--pj-text-base); margin: 0; }
.pj-page-head__actions { display: flex; gap: var(--pj-space-2); flex-wrap: wrap; }

/* Kicker : intitulé de sous-section en capitales espacées — le pendant in-app de
   l'eyebrow des e-mails. À utiliser pour rythmer une page dense sans hiérarchie
   de titres criarde. */
.pj-kicker {
    font-size: var(--pj-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--pj-caps-ls);
    color: var(--pj-orange-700);
    margin: 0 0 var(--pj-space-3);
}

/* Titres de page hérités (block page_title des templates existants) */
.pj-main__inner > h1 { margin-bottom: var(--pj-space-5); }

/* ==================================================================== */
/* Boutons                                                              */
/* ==================================================================== */
/* Boutons en capitales espacées, comme ceux du site public (Ubuntu, ls 1.5px). */
.btn {
    --bs-btn-border-radius: var(--pj-radius-sm);
    font-family: var(--pj-font);
    font-weight: 500;
    font-size: 0.75rem; /* 12px */
    text-transform: uppercase;
    letter-spacing: var(--pj-caps-ls);
    padding: 0.6rem 1.15rem;
    border-radius: var(--pj-radius-sm);
    transition: background-color var(--pj-dur) var(--pj-ease),
                border-color var(--pj-dur) var(--pj-ease),
                color var(--pj-dur) var(--pj-ease),
                box-shadow var(--pj-dur) var(--pj-ease),
                transform var(--pj-dur) var(--pj-ease);
}

.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--pj-ring); }

.btn-sm { padding: 0.4rem 0.75rem; font-size: 0.6875rem; }
.btn-lg { padding: 0.75rem 1.5rem; font-size: 0.8125rem; }

/* Primaire = marigold ; survol = bleu de marque (signature de proju-arc.ch) */
.btn-primary {
    background-color: var(--pj-orange);
    border-color: var(--pj-orange);
    color: #fff;
    box-shadow: var(--pj-shadow-sm);
}
.btn-primary:hover,
.btn-primary:focus-visible {
    background-color: var(--pj-blue);
    border-color: var(--pj-blue);
    color: #fff;
}
.btn-primary:active { background-color: var(--pj-blue-700); border-color: var(--pj-blue-700); }

/* Outline primaire */
.btn-outline-primary {
    color: var(--pj-orange-700);
    border-color: var(--pj-orange);
    background-color: transparent;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus-visible {
    background-color: var(--pj-orange);
    border-color: var(--pj-orange);
    color: #fff;
}

/* Secondaire = bleu de marque */
.btn-secondary {
    background-color: var(--pj-blue);
    border-color: var(--pj-blue);
    color: #fff;
}
.btn-secondary:hover,
.btn-secondary:focus-visible {
    background-color: var(--pj-blue-700);
    border-color: var(--pj-blue-700);
    color: #fff;
}

/* Outline secondaire = neutre (actions secondaires, liens catalogue) */
.btn-outline-secondary {
    color: var(--pj-slate);
    border-color: var(--pj-line);
    background-color: var(--pj-surface);
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus-visible {
    background-color: var(--pj-canvas-2);
    border-color: var(--pj-slate-400);
    color: var(--pj-ink);
}

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

.btn-outline-danger { color: var(--pj-danger); border-color: var(--pj-danger); background-color: transparent; }
.btn-outline-danger:hover,
.btn-outline-danger:focus-visible { background-color: var(--pj-danger); border-color: var(--pj-danger); color: #fff; }

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

.btn:disabled,
.btn.disabled {
    opacity: 0.55;
    box-shadow: none;
    cursor: not-allowed;
}

/* Lien-bouton discret */
.btn-link { color: var(--pj-blue-700); font-weight: 500; text-decoration: none; }
.btn-link:hover { color: var(--pj-blue-800); text-decoration: underline; }

/* ==================================================================== */
/* Cartes                                                               */
/* ==================================================================== */
.card {
    background: var(--pj-surface);
    border: 1px solid var(--pj-line);
    border-radius: var(--pj-radius-lg);
    box-shadow: var(--pj-shadow-sm);
    transition: box-shadow var(--pj-dur) var(--pj-ease),
                border-color var(--pj-dur) var(--pj-ease),
                transform var(--pj-dur) var(--pj-ease);
}

.card-body { padding: var(--pj-space-5); }

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--pj-line-2);
    padding: var(--pj-space-4) var(--pj-space-5);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--pj-space-3);
    flex-wrap: wrap;
}
.card-header__meta { color: var(--pj-slate); font-size: var(--pj-text-sm); }

.card-title {
    font-size: var(--pj-text-md);
    font-weight: 600;
    color: var(--pj-ink);
    margin-bottom: var(--pj-space-3);
}

.card-text { color: var(--pj-slate); }

/* Cartes-actions des tableaux de bord : effet de survol + repère marigold.
   Cible les cartes qui contiennent une action (bouton / lien). */
.card:has(.btn):hover {
    border-color: var(--pj-orange-100);
    box-shadow: var(--pj-shadow);
    transform: translateY(-2px);
}

.card:has(.btn) {
    position: relative;
    overflow: hidden;
}

.card:has(.btn)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--pj-orange);
    opacity: 0;
    transition: opacity var(--pj-dur) var(--pj-ease);
}

.card:has(.btn):hover::before { opacity: 1; }

/* Carte contenant un bouton désactivé : pas de mise en avant */
.card:has(.btn:disabled):hover {
    transform: none;
    border-color: var(--pj-line);
    box-shadow: var(--pj-shadow-sm);
}
.card:has(.btn:disabled):hover::before { opacity: 0; }

/* ==================================================================== */
/* Tableaux (« registre »)                                              */
/* ==================================================================== */
.table {
    --bs-table-bg: transparent;
    width: 100%;
    margin-bottom: 0;
    color: var(--pj-ink);
    font-size: var(--pj-text-base);
    border-collapse: separate;
    border-spacing: 0;
}

/* Encadre visuellement le tableau comme une carte */
.table:not(.table-borderless) {
    background: var(--pj-surface);
    border: 1px solid var(--pj-line);
    border-radius: var(--pj-radius-lg);
    overflow: hidden;
    box-shadow: var(--pj-shadow-sm);
}

.table thead th {
    background: var(--pj-canvas-2);
    color: var(--pj-slate);
    font-size: var(--pj-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--pj-line);
    white-space: nowrap;
    vertical-align: middle;
}

.table tbody td {
    padding: 0.7rem 0.9rem;
    border-top: 1px solid var(--pj-line-2);
    vertical-align: middle;
}

.table tbody tr:first-child td { border-top: none; }
.table tbody tr { transition: background var(--pj-dur) var(--pj-ease); }
.table tbody tr:hover { background: var(--pj-orange-50); }

/* Colonnes numériques : chiffres tabulaires, alignées à droite si .text-end */
.table .text-end, .table .pj-num { font-variant-numeric: tabular-nums; }

/* ==================================================================== */
/* Badges / puces de statut                                             */
/* ==================================================================== */
.badge {
    font-family: var(--pj-font);
    font-weight: 600;
    font-size: var(--pj-text-xs);
    letter-spacing: 0.02em;
    padding: 0.32em 0.7em;
    border-radius: var(--pj-radius-pill);
    line-height: 1.3;
}

/* Réinterprète les text-bg-* de Bootstrap en pastilles teintées sobres */
.badge.text-bg-success { background: var(--pj-success-bg) !important; color: var(--pj-success-fg) !important; }
.badge.text-bg-secondary { background: var(--pj-canvas-2) !important; color: var(--pj-slate) !important; }
.badge.text-bg-danger { background: var(--pj-danger-bg) !important; color: var(--pj-danger-fg) !important; }
.badge.text-bg-warning { background: var(--pj-warning-bg) !important; color: var(--pj-warning-fg) !important; }
.badge.text-bg-info,
.badge.text-bg-primary { background: var(--pj-info-bg) !important; color: var(--pj-info-fg) !important; }

/* Variante maison avec pastille */
.pj-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-size: var(--pj-text-xs);
    font-weight: 600;
    padding: 0.32em 0.7em;
    border-radius: var(--pj-radius-pill);
}
.pj-badge::before { content: ""; width: 0.5em; height: 0.5em; border-radius: 50%; background: currentColor; }
.pj-badge--success { background: var(--pj-success-bg); color: var(--pj-success-fg); }
.pj-badge--warning { background: var(--pj-warning-bg); color: var(--pj-warning-fg); }
.pj-badge--danger  { background: var(--pj-danger-bg);  color: var(--pj-danger-fg); }
.pj-badge--neutral { background: var(--pj-canvas-2);   color: var(--pj-slate); }

/* ==================================================================== */
/* Formulaires                                                          */
/* ==================================================================== */
.form-label { font-weight: 500; color: var(--pj-ink); margin-bottom: 0.35rem; font-size: var(--pj-text-base); }

.form-control,
.form-select {
    font-family: var(--pj-font);
    font-size: var(--pj-text-base);
    color: var(--pj-ink);
    background-color: var(--pj-surface);
    border: 1px solid var(--pj-line);
    border-radius: var(--pj-radius-sm);
    padding: 0.5rem 0.75rem;
    transition: border-color var(--pj-dur) var(--pj-ease), box-shadow var(--pj-dur) var(--pj-ease);
}

.form-control::placeholder { color: var(--pj-slate-400); }

.form-control:focus,
.form-select:focus {
    border-color: var(--pj-orange);
    box-shadow: var(--pj-ring);
    outline: none;
}

.form-control:disabled { background: var(--pj-canvas-2); color: var(--pj-slate); }
.form-text { color: var(--pj-slate); font-size: var(--pj-text-sm); }

/* Pastille d'aide : « ? » discret portant une infobulle native. Sur <abbr title="…"> pour que
   le texte reste accessible au lecteur d'écran, là où un <span aria-hidden> le perdrait. */
.pj-hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15em;
    height: 1.15em;
    margin-left: 0.35em;
    border: 1px solid var(--pj-slate-400);
    border-radius: 50%;
    color: var(--pj-slate);
    font-size: 0.8em;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    cursor: help;
}

/* Le padding mutualisé ci-dessus écraserait l'espace que Bootstrap réserve à la
   flèche : on le restitue, avec un chevron maison assorti au trait des icônes. */
.form-select {
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23566072' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    background-size: 0.85em;
}
.form-select[multiple],
.form-select[size]:not([size="1"]) { padding-right: 0.75rem; background-image: none; }

/* Cases à cocher & radios — agrandies (1.3em) et dessinées maison : trait de coche
   arrondi assorti aux icônes, survol orange, coche marigold. Tailles en em pour
   suivre la taille de texte du contexte. */
.form-check { padding-left: 1.9em; }
.form-check .form-check-input { float: left; margin-left: -1.9em; }
.form-check-input {
    width: 1.3em;
    height: 1.3em;
    margin-top: 0.1em;
    background-color: var(--pj-surface);
    border: 1.5px solid var(--pj-slate-400);
    background-repeat: no-repeat;
    background-position: center;
    transition: background-color var(--pj-dur) var(--pj-ease),
                border-color var(--pj-dur) var(--pj-ease),
                box-shadow var(--pj-dur) var(--pj-ease);
}
.form-check-input[type="checkbox"] { border-radius: var(--pj-radius-sm); }
.form-check-input:hover:not(:disabled):not(:checked) { border-color: var(--pj-orange); }
.form-check-input:focus { border-color: var(--pj-orange); box-shadow: var(--pj-ring); outline: none; }
.form-check-input:checked { background-color: var(--pj-orange); border-color: var(--pj-orange); }
.form-check-input:checked[type="checkbox"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round' d='m5 10.5 3.5 3.5L15 6.5'/%3E%3C/svg%3E");
    background-size: 0.85em;
}
.form-check-input:checked[type="radio"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='4' fill='%23fff'/%3E%3C/svg%3E");
    background-size: 1em;
}
.form-check-input[type="checkbox"]:indeterminate {
    background-color: var(--pj-orange);
    border-color: var(--pj-orange);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.75' stroke-linecap='round' d='M5.5 10h9'/%3E%3C/svg%3E");
    background-size: 0.85em;
}
.form-check-input:disabled { background-color: var(--pj-canvas-2); border-color: var(--pj-line); opacity: 1; }
.form-check-input:checked:disabled { background-color: var(--pj-orange-100); border-color: var(--pj-orange-100); }
.form-check-input:checked:disabled[type="checkbox"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23b9640a' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round' d='m5 10.5 3.5 3.5L15 6.5'/%3E%3C/svg%3E");
}
.form-check-input:disabled ~ .form-check-label { color: var(--pj-slate-400); }
.form-check-label { padding-top: 0.1em; }

.invalid-feedback { color: var(--pj-danger-fg); }
.form-control.is-invalid, .was-validated .form-control:invalid { border-color: var(--pj-danger); }

/* ==================================================================== */
/* Alertes (flash)                                                      */
/* ==================================================================== */
.alert {
    border: 1px solid transparent;
    border-radius: var(--pj-radius);
    padding: 0.85rem 1rem;
    font-size: var(--pj-text-base);
    border-left-width: 3px;
}

.alert-success { background: var(--pj-success-bg); border-color: transparent; border-left-color: var(--pj-success); color: var(--pj-success-fg); }
.alert-danger  { background: var(--pj-danger-bg);  border-left-color: var(--pj-danger);  color: var(--pj-danger-fg); }
.alert-warning { background: var(--pj-warning-bg); border-left-color: var(--pj-warning); color: var(--pj-warning-fg); }
.alert-info,
.alert-primary { background: var(--pj-info-bg);    border-left-color: var(--pj-info);    color: var(--pj-info-fg); }

/* ==================================================================== */
/* Listes de définition / lignes clé-valeur                             */
/* ==================================================================== */
.pj-list {
    background: var(--pj-surface);
    border: 1px solid var(--pj-line);
    border-radius: var(--pj-radius-lg);
    overflow: hidden;
    box-shadow: var(--pj-shadow-sm);
}

.pj-list__row {
    display: flex;
    justify-content: space-between;
    gap: var(--pj-space-4);
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--pj-line-2);
}
.pj-list__row:first-child { border-top: none; }
.pj-list__key { color: var(--pj-slate); }
.pj-list__val { font-weight: 500; text-align: right; }

/* ==================================================================== */
/* Tuiles de statistiques (« chiffre-registre »)                        */
/* ==================================================================== */
.pj-stat {
    background: var(--pj-surface);
    border: 1px solid var(--pj-line);
    border-radius: var(--pj-radius-lg);
    box-shadow: var(--pj-shadow-sm);
    padding: var(--pj-space-4) var(--pj-space-5);
    position: relative;
    overflow: hidden;
}

.pj-stat::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 3px;
    background: var(--pj-orange);
}

.pj-stat__label {
    font-size: var(--pj-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 600;
    color: var(--pj-slate);
    margin-bottom: 0.35rem;
}

.pj-stat__value {
    font-size: var(--pj-text-3xl);
    font-weight: 700;
    line-height: 1.05;
    color: var(--pj-ink);
    letter-spacing: -0.02em;
}

.pj-stat__unit { font-size: var(--pj-text-lg); color: var(--pj-slate); font-weight: 500; }
.pj-stat__hint { font-size: var(--pj-text-sm); color: var(--pj-slate); margin-top: 0.35rem; }

/* Tuile menant un écran, quand un seul chiffre doit primer sur tous les autres — le montant dû
   du bouclement enseignant. Le filet supérieur passe pleine hauteur à gauche et le chiffre gagne
   un cran : sans cela, la tuile principale se confondait avec le détail posé à côté. */
.pj-stat--primary { padding: var(--pj-space-5) var(--pj-space-6); }
.pj-stat--primary::after { right: auto; bottom: 0; width: 4px; height: auto; }
.pj-stat--primary .pj-stat__value { font-size: var(--pj-text-4xl); }

/* Décomposition d'un total : les termes soustraits en retrait, le résultat détaché par un filet
   franc. C'est ce qui permet de vérifier le total sans le prendre sur parole. */
.pj-list--breakdown .pj-list__row--total {
    border-top: 2px solid var(--pj-line);
    font-weight: 600;
}
.pj-list--breakdown .pj-list__row--total .pj-list__key { color: var(--pj-ink); }

/* Détail comptable replié : conservé pour le secrétariat, hors du chemin de lecture courant. */
.pj-details > summary {
    cursor: pointer;
    color: var(--pj-slate);
    font-size: var(--pj-text-sm);
    padding: 0.5rem 0;
}
.pj-details[open] > summary { margin-bottom: var(--pj-space-3); }

/* ==================================================================== */
/* Utilitaires de grille pour tableaux larges + responsive tableaux     */
/* ==================================================================== */
.pj-tablewrap { overflow-x: auto; border-radius: var(--pj-radius-lg); }

/* Sur mobile, tout .table devient scrollable horizontalement
   (sans devoir emballer chaque tableau côté template). */
@media (max-width: 640px) {
    .pj-main .table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    /* En display:block, la table interne rétrécit à son contenu dans une boîte pleine
       largeur : l'habillage « carte » posé sur la boîte (fond, bordure, ombre) dépasse
       alors des cellules. On le retire et on peint les cellules elles-mêmes. */
    .pj-main .table:not(.table-borderless) {
        background: transparent;
        border-color: transparent;
        box-shadow: none;
    }
    .pj-main .table tbody td { background: var(--pj-surface); }
    .pj-page-head { flex-direction: column; }
    .btn { width: auto; }
}

/* ==================================================================== */
/* Tableau de bord — parcours de campagne (« pj-steps »)                */
/* Le déroulé d'une campagne est réellement séquentiel : déclarer,      */
/* commander, vendre, boucler. Le numéro d'étape porte donc du sens.    */
/* ==================================================================== */
.pj-steps {
    list-style: none;
    margin: 0 0 var(--pj-space-5);
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--pj-space-3);
    counter-reset: pj-step;
}

.pj-step {
    counter-increment: pj-step;
    position: relative;
    background: var(--pj-surface);
    border: 1px solid var(--pj-line);
    border-radius: var(--pj-radius-lg);
    box-shadow: var(--pj-shadow-sm);
    padding: var(--pj-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--pj-space-2);
}

.pj-step__head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

/* Pastille numérotée (ou coche une fois l'étape faite) */
.pj-step__num {
    flex: none;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: var(--pj-text-sm);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    background: var(--pj-canvas-2);
    color: var(--pj-slate);
    border: 1px solid var(--pj-line);
}

.pj-step__num::before { content: counter(pj-step); }

.pj-step__title {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--pj-caps-ls);
    color: var(--pj-slate);
    margin: 0;
}

.pj-step__body { flex: 1 1 auto; color: var(--pj-slate); font-size: var(--pj-text-sm); }
.pj-step__body p { margin: 0; }
.pj-step__action { margin-top: auto; }

/* Étape courante : mise en avant marigold */
.pj-step.is-current { border-color: var(--pj-orange); box-shadow: var(--pj-shadow); }
.pj-step.is-current .pj-step__num { background: var(--pj-orange); border-color: var(--pj-orange); color: #fff; }
.pj-step.is-current .pj-step__title { color: var(--pj-ink); }

/* Étape faite : coche verte sobre */
.pj-step.is-done .pj-step__num { background: var(--pj-success-bg); border-color: var(--pj-success-bg); color: var(--pj-success-fg); }
.pj-step.is-done .pj-step__num::before { content: "✓"; }

/* Étape verrouillée */
.pj-step.is-locked { opacity: 0.75; }

/* ==================================================================== */
/* Tableau de bord — bandeau de contexte (campagne / région / classe)   */
/* ==================================================================== */
.pj-context {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pj-space-2) var(--pj-space-5);
    background: var(--pj-surface);
    border: 1px solid var(--pj-line);
    border-left: 3px solid var(--pj-orange);
    border-radius: var(--pj-radius);
    padding: var(--pj-space-3) var(--pj-space-4);
    margin-bottom: var(--pj-space-5);
}

.pj-context__item { display: flex; flex-direction: column; }

.pj-context__key {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: var(--pj-caps-ls-wide);
    font-weight: 500;
    color: var(--pj-slate-400);
}

.pj-context__val { font-weight: 500; color: var(--pj-ink); font-variant-numeric: tabular-nums; }

/* ==================================================================== */
/* Tableau de bord — actions rapides                                    */
/* ==================================================================== */
.pj-quick {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pj-space-2);
}

.pj-quick--stack { flex-direction: column; align-items: stretch; }

/* ==================================================================== */
/* Vues liste — barre recherche/filtres (pj-toolbar) + pagination       */
/* ==================================================================== */
.pj-toolbar {
    margin-bottom: var(--pj-space-4);
    padding: var(--pj-space-4);
    background: var(--pj-surface);
    border: 1px solid var(--pj-line);
    border-radius: var(--pj-radius-lg);
    box-shadow: var(--pj-shadow-sm);
}

/* En-tête de la zone : tuile-icône + titre/sous-titre + réinitialiser, séparé par un filet */
.pj-toolbar__head {
    display: flex;
    align-items: center;
    gap: var(--pj-space-3);
    padding-bottom: var(--pj-space-3);
    margin-bottom: var(--pj-space-4);
    border-bottom: 1px solid var(--pj-line);
}

.pj-toolbar__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--pj-radius);
    background: var(--pj-orange-50);
    color: var(--pj-orange-700);
}

.pj-toolbar__heading { min-width: 0; }
.pj-toolbar__title { margin: 0; font-weight: 600; font-size: var(--pj-text-md); color: var(--pj-ink); line-height: var(--pj-lh-snug); }
.pj-toolbar__hint { margin: 0; font-size: var(--pj-text-sm); color: var(--pj-slate); }

.pj-toolbar__head-actions {
    display: flex;
    align-items: center;
    gap: var(--pj-space-2);
    margin-left: auto;
}

/* Réinitialiser : vrai bouton, contour discret, même vocabulaire que .btn */
.pj-toolbar__reset {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--pj-caps-ls);
    color: var(--pj-slate);
    text-decoration: none;
    white-space: nowrap;
    background: transparent;
    border: 1px solid var(--pj-line-2);
    border-radius: var(--pj-radius-sm);
    transition: color var(--pj-dur) var(--pj-ease),
                border-color var(--pj-dur) var(--pj-ease),
                background-color var(--pj-dur) var(--pj-ease);
}
.pj-toolbar__reset:hover {
    color: var(--pj-orange-700);
    border-color: var(--pj-orange-100);
    background: var(--pj-orange-50);
}
.pj-toolbar__reset:focus-visible { outline: 2px solid var(--pj-ring); outline-offset: 2px; }

/* Rangée des contrôles : recherche (extensible) + filtres */
.pj-toolbar__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--pj-space-3) var(--pj-space-4);
}

.pj-toolbar__field { display: flex; flex-direction: column; gap: var(--pj-space-1); min-width: 0; }
.pj-toolbar__field--search { flex: 1 1 18rem; }

.pj-toolbar__label {
    font-size: var(--pj-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--pj-caps-ls);
    color: var(--pj-slate);
    margin: 0;
}

/* Champ de recherche avec loupe insérée à gauche */
.pj-toolbar__search { position: relative; display: flex; align-items: center; }
.pj-toolbar__search-ico {
    position: absolute;
    left: 0.7rem;
    display: inline-flex;
    color: var(--pj-slate-400);
    pointer-events: none;
}
.pj-toolbar__search-input { width: 100%; padding-left: 2.35rem; }

.pj-toolbar__field .form-select,
.pj-toolbar__range .form-control { min-width: 9rem; }

.pj-toolbar__range { display: flex; align-items: center; gap: var(--pj-space-2); }
.pj-toolbar__range .form-control { min-width: 7.5rem; max-width: 8.5rem; }
.pj-toolbar__range-sep { color: var(--pj-slate-400); }

@media (max-width: 640px) {
    .pj-toolbar__head { flex-wrap: wrap; }
    .pj-toolbar__head-actions { margin-left: 0; width: 100%; }
    .pj-toolbar__field--search { flex-basis: 100%; }
}

.pj-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--pj-space-4);
    margin-top: var(--pj-space-5);
}

.pj-pagination__link {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.9rem;
    font-size: var(--pj-text-sm);
    font-weight: 500;
    color: var(--pj-orange-700);
    text-decoration: none;
    border: 1px solid var(--pj-line);
    border-radius: var(--pj-radius-sm);
    transition: background-color var(--pj-dur) var(--pj-ease), border-color var(--pj-dur) var(--pj-ease);
}
.pj-pagination__link:hover { background: var(--pj-orange-50); border-color: var(--pj-orange-100); }
.pj-pagination__link.is-disabled { color: var(--pj-slate-400); pointer-events: none; opacity: 0.6; }

.pj-pagination__status {
    font-size: var(--pj-text-sm);
    color: var(--pj-slate);
    font-variant-numeric: tabular-nums;
}

/* Intertitre de catégorie dans les grilles de commande : une ligne de tableau qui structure
   sans se faire passer pour une ligne d'article — d'où le fond discret et la casse haute. */
.pj-grid-group th {
    background: var(--pj-canvas-2);
    font-size: var(--pj-text-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--pj-slate);
    font-weight: 600;
}

/* Écran « Mon référent » : le formulaire de message et les coordonnées du groupe local.
   Les coordonnées viennent en premier dans le DOM (donc au-dessus du message en mobile,
   comme demandé) et passent en colonne de droite dès qu'il y a la place. */
.pj-contact-layout {
    display: grid;
    gap: 1.5rem;
}

@media (min-width: 62rem) {
    .pj-contact-layout {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
        align-items: start;
    }
    .pj-contact-layout__main { order: 1; }
    .pj-contact-layout__aside { order: 2; }
}

/* Liste de coordonnées : intitulé discret au-dessus de sa valeur, lisible en colonne étroite. */
.pj-deflist { margin: 0; }
.pj-deflist dt {
    font-size: var(--pj-text-sm);
    color: var(--pj-slate);
    font-weight: 600;
}
.pj-deflist dd { margin: 0 0 0.75rem; }
.pj-deflist dd:last-child { margin-bottom: 0; }

/* ==================================================================== */
/* Vue tableau d'un export (pj-datatable)                               */
/* ==================================================================== */
/* Un export peut sortir quarante colonnes et quelques milliers de lignes : le tableau
   défile dans son propre cadre, jamais la page. L'en-tête reste collé en haut du cadre,
   sans quoi on perd le nom des colonnes au bout de vingt lignes. */
.pj-datatable {
    max-height: min(70vh, 46rem);
    overflow: auto;
    border: 1px solid var(--pj-line);
    border-radius: var(--pj-radius-lg);
    background: var(--pj-surface);
    box-shadow: var(--pj-shadow-sm);
}

/* Le cadre porte déjà bordure et rayon : la table les rendrait en double. */
.pj-datatable__table {
    border: none;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
}

.pj-datatable__table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 0;
}

/* L'en-tête est un bouton : le tri doit être atteignable au clavier comme à la souris. */
.pj-datatable__sort {
    display: flex;
    align-items: center;
    gap: var(--pj-space-1);
    width: 100%;
    padding: 0.7rem 0.9rem;
    background: none;
    border: none;
    font: inherit;
    color: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    text-align: inherit;
    cursor: pointer;
}

.pj-datatable__table th.text-end .pj-datatable__sort { justify-content: flex-end; }
.pj-datatable__sort:hover { color: var(--pj-ink); }
.pj-datatable__sort:focus-visible { outline: none; box-shadow: var(--pj-ring); }

/* Flèche de tri : discrète tant que la colonne n'est pas celle qui trie. */
.pj-datatable__arrow::after {
    content: '↕';
    opacity: 0.35;
    font-size: 0.9em;
}
.pj-datatable__table th[aria-sort='ascending'] .pj-datatable__arrow::after { content: '▲'; opacity: 1; }
.pj-datatable__table th[aria-sort='descending'] .pj-datatable__arrow::after { content: '▼'; opacity: 1; }
.pj-datatable__table th[aria-sort='ascending'],
.pj-datatable__table th[aria-sort='descending'] { color: var(--pj-orange-700); }

.pj-datatable__table tbody td { white-space: nowrap; }

.pj-datatable__empty {
    margin: var(--pj-space-4) 0 0;
    color: var(--pj-slate);
    text-align: center;
}

/* Rappel du périmètre exporté, sous le titre : organisation · campagne · groupe local. */
.pj-export-scope {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pj-space-2) var(--pj-space-4);
    margin: 0 0 var(--pj-space-4);
    color: var(--pj-slate);
    font-size: var(--pj-text-sm);
}
.pj-export-scope span + span::before {
    content: '·';
    margin-right: var(--pj-space-4);
    color: var(--pj-slate-400);
}

/* Les deux gestes d'une carte d'export : télécharger le fichier, ou le regarder. */
.pj-export-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pj-space-2);
}

/* Écrans qui doivent sortir de la colonne de contenu : une grille de saisie large
   n'a rien à gagner à être bridée à 1200 px pendant que l'écran reste vide. */
.pj-main__inner--wide { max-width: none; }

/* ── Vue tabulaire de la feuille de suivi ──────────────────────────────────────
   Le nombre d'articles suivis est décidé par la liste blanche du groupe local :
   la grille peut donc être bien plus large que l'écran. La colonne « Élève »
   reste figée à gauche pour qu'on sache toujours quelle ligne on édite, et le
   reste défile horizontalement dans son propre conteneur — jamais la page. */
/* Le thème de formulaire ouvre un `.pj-form` — grille auto-colonnes `minmax(240px, 1fr)`
   plafonnée à 880 px — autour du contenu de tout formulaire. Adapté à des champs, désastreux
   ici : la table, le message et la barre d'actions se retrouveraient côte à côte dans trois
   colonnes étroites. Cet écran est un tableau, pas une fiche : on rend le flux au bloc. */
.pj-gridsheet-form > .pj-form {
    display: block;
    max-width: none;
}

.pj-gridsheet {
    overflow-x: auto;
}

.pj-gridsheet__table {
    margin-bottom: 0;
    white-space: nowrap;
}

.pj-gridsheet__table th,
.pj-gridsheet__table td {
    padding: 0.35rem 0.5rem;
    vertical-align: middle;
}

.pj-gridsheet__student {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--pj-surface);
    text-align: left;
    font-weight: 600;
    box-shadow: 1px 0 0 var(--pj-line);
}

.pj-gridsheet__table thead th {
    background: var(--pj-surface);
    white-space: normal;
}

/* Un produit = une colonne. « Donné » et « rendu » sont superposés dans la cellule : deux
   colonnes par produit doublaient la largeur pour deux nombres à trois chiffres, et
   repoussaient les encaissements hors de l'écran dès trois articles suivis. */
.pj-gridsheet__cell { padding: 0.25rem 0.5rem; text-align: center; }

/* Le bloc de saisie est centré dans sa cellule, comme l'en-tête de produit : sinon les
   champs se collent au bord gauche pendant que le titre reste au centre. */
.pj-gridsheet__pair {
    display: inline-grid;
    grid-template-columns: auto auto;
    align-items: center;
    justify-content: center;
    gap: 0.15rem 0.35rem;
}

/* Repère de ligne : l'en-tête porte déjà « donné / rendu » en toutes lettres, ces initiales
   ne servent qu'à désambiguïser d'un coup d'œil — d'où `aria-hidden` côté gabarit, le champ
   portant son intitulé complet en `aria-label`. */
.pj-gridsheet__tag {
    font-size: var(--pj-text-xs);
    font-weight: 600;
    color: var(--pj-slate-400);
    line-height: 1;
}

.pj-gridsheet__pair--total { justify-items: end; }

/* Les colonnes de montants alignent leur champ sur leur en-tête, à droite. */
.pj-gridsheet__table td.text-end > .form-control { display: inline-block; }

/* Sous-titre « donné / rendu » de l'en-tête de produit. */
.pj-gridsheet__hint {
    display: block;
    font-size: var(--pj-text-xs);
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    color: var(--pj-slate-400);
}

/* Champs compacts : une grille de saisie n'a pas la place des champs de formulaire pleins.
   Les quantités par élève tiennent sur trois chiffres ; les flèches natives des champs
   numériques mangeraient à elles seules la largeur d'un chiffre, pour un geste qu'on ne fait
   pas ici — on les retire. */
.pj-gridsheet__qty {
    width: 3.5rem;
    text-align: right;
    padding-inline: 0.35rem;
    -moz-appearance: textfield;
    appearance: textfield;
}

.pj-gridsheet__qty::-webkit-outer-spin-button,
.pj-gridsheet__qty::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
}

.pj-gridsheet__amount { width: 6rem; text-align: right; }
.pj-gridsheet__name { width: 11rem; }
.pj-gridsheet__comment { width: 13rem; }

.pj-gridsheet__actions {
    display: flex;
    gap: var(--pj-space-2);
    align-items: center;
    margin-top: var(--pj-space-3);
}

/* La grille est haute et large : sans barre collante, « Enregistrer tout » se retrouve hors
   de vue dès qu'on saisit, et l'enseignant doit remonter pour chaque enregistrement. */
.pj-gridsheet__actions--sticky {
    position: sticky;
    bottom: 0;
    z-index: 3;
    margin-top: 0;
    padding: var(--pj-space-3) 0;
    background: var(--pj-canvas);
    border-top: 1px solid var(--pj-line);
}

/* Encadré des rôles concernés par une communication (24.08.2026). Posé en tête de l'écran
   d'édition, il répond avant la lecture du gabarit à la question que le secrétariat devait
   deviner : qui déclenche ce message, et qui le reçoit — donc ce que désignent les balises
   « destinataire » et « contrepartie ». */
.pj-rolecard {
    margin-bottom: var(--pj-space-4);
    padding: var(--pj-space-3) var(--pj-space-4);
    border: 1px solid var(--pj-line);
    border-left: 3px solid var(--pj-blue);
    border-radius: var(--pj-radius);
    background: var(--pj-canvas-2);
}

.pj-rolecard__title {
    margin: 0 0 var(--pj-space-2);
    font-size: var(--pj-text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--pj-slate);
}

.pj-rolecard__row { margin: 0 0 var(--pj-space-1); }

.pj-rolecard__key {
    display: inline-block;
    min-width: 9rem;
    color: var(--pj-slate);
}

.pj-rolecard__desc {
    margin: var(--pj-space-2) 0 0;
    font-size: var(--pj-text-sm);
    color: var(--pj-slate);
}

/* Éditeur enrichi (Trix) des corps d'e-mails et des textes d'écran (24.08.2026). Trix apporte
   sa propre feuille de style ; on ne réaligne ici que ce qui jurerait avec le reste des
   formulaires — bordure, rayon, hauteur utile, et la barre d'outils sur le fond de carte. */
.pj-richtext {
    min-height: 14rem;
    padding: var(--pj-space-3);
    border: 1px solid var(--pj-line);
    border-radius: var(--pj-radius);
    background: var(--pj-surface);
    color: var(--pj-ink);
}

.pj-richtext:focus {
    border-color: var(--pj-blue);
    box-shadow: var(--pj-ring);
    outline: none;
}

trix-toolbar .trix-button-row { flex-wrap: wrap; }

trix-toolbar .trix-button-group {
    border-color: var(--pj-line);
    border-radius: var(--pj-radius-sm);
}

trix-toolbar .trix-button {
    border-color: var(--pj-line);
    background: var(--pj-surface);
}

trix-toolbar .trix-button.trix-active { background: var(--pj-canvas-2); }