/**
 * Formulaires - CFM77 / ECSR Depot
 * Formulaires, pagination, permissions, select/info boxes
 */

/* ========================================
   FORMULAIRES
   ======================================== */

.form_group {
    margin-bottom: 16px;
}

.form_label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    color: var(--color-gray-700);
    font-size: var(--text-small);
}

.form_input {
    width: 100%;
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background-color: var(--color-gray-50);
    transition: all 150ms ease;
    font-size: var(--text-body);
}

.form_input:focus {
    outline: none;
    border-color: var(--color-primary);
    background-color: var(--color-white);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Un champ REFUSÉ – un mot de passe qui ne passe pas, une valeur que le serveur rejette.
   La marque est sur le champ lui-même : un message dans un toast s'efface au bout de quelques
   secondes, et l'œil est resté sur le formulaire. Elle survit au focus, sinon elle disparaît
   à l'instant où l'on revient corriger. */
.form_input_erreur,
.form_input_erreur:focus {
    border-color: var(--color-error);
    box-shadow: 0 0 0 3px var(--color-error-bg);
}

.form_input::placeholder {
    color: var(--color-gray-400);
}

.form_textarea {
    height: auto;
    padding: 10px 14px;
    resize: vertical;
    min-height: 80px;
}

/* UNE INDICATION N'EST PAS UNE SAISIE, elle ne se lit donc pas comme elle : plus petite que
   le champ ET que son libellé, en italique, en gris. À la même taille que ce qu'on tape –
   `--text-small` vaut le même 15 px que `--text-body` – elle passait pour une valeur déjà
   inscrite, et l'œil s'y arrêtait avant d'arriver au champ. */
.form_hint {
    font-size: var(--text-tiny);
    font-style: italic;
    color: var(--color-gray-500);
    margin-top: 4px;
}

/* Précision inline à l'intérieur d'un <label> en gras – style léger, italique pour se distinguer */
.form_label_hint {
    font-weight: 400;
    font-style: italic;
    font-size: var(--text-tiny);
    color: var(--color-gray-500);
}

/* Le compteur reste droit : ce sont des chiffres qu'on relit, pas une phrase d'aide. */
.form_hint_counter {
    display: block;
    text-align: right;
    font-style: normal;
}

.form_row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
}

.settings_form {
    max-width: 500px;
}

.user_form {
    max-width: 600px;
}

.extensions_list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.extensions_list .badge_extension {
    font-size: var(--text-small);
    padding: 6px 12px;
}

/* Extensions preview (parametres) */
.extensions_preview {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 16px;
    background-color: var(--color-gray-50);
    border-radius: 8px;
    margin-top: -8px;
}

.extensions_preview .badge_extension {
    font-size: var(--text-meta);
    padding: 4px 10px;
}

/* Extensions à cocher (parametres etablissement) : badge coché = plein, décoché = atténué */
.extensions_choices {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.extension_choice {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.extension_choice input,
.extension_choice .badge_extension {
    cursor: pointer;
}

.extension_choice input:not(:checked) + .badge_extension {
    opacity: 0.4;
}

/* Trois colonnes ÉGALES – pour les champs courts (SIRET, code postal, téléphone, plafonds).
   Étalés sur une demi-largeur chacun, ils vidaient l'écran pour rien. À ne pas confondre avec
   `.form_row_three` juste en dessous, qui vaut « deux champs + un bouton ». */
.form_row_3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 16px;
}

/* Form row 3 colonnes */
.form_row_three {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 16px;
    align-items: end;
}

/* Input avec suffixe (Mo, etc.) */
.input_with_suffix {
    display: flex;
    align-items: stretch;
}

.input_with_suffix .form_input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
}

.input_suffix {
    display: flex;
    align-items: center;
    padding: 0 12px;
    background-color: var(--color-gray-100);
    border: 1px solid var(--color-gray-300);
    border-left: none;
    border-radius: 0 8px 8px 0;
    color: var(--color-gray-500);
    font-size: var(--text-label);
    font-weight: 500;
}

/* Boutons dans formulaires : utiliser .button_form de boutons.css si hauteur 44px nécessaire */

@media (max-width: 1350px) {
    .form_row_three {
        grid-template-columns: 1fr 1fr;
    }

    /* Trois champs courts tiennent encore à deux sous 1300 px ; à un seul, on perdrait tout
       le bénéfice. Le repli complet se joue plus bas, sur petit écran. */
    .form_row_3 {
        grid-template-columns: 1fr 1fr;
    }

    .form_group_button {
        grid-column: 1 / -1;
    }

    .filters_row {
        flex-direction: column;
    }

    .filters_row .form_group {
        width: 100%;
        min-width: auto;
    }

    .filters_row .form_group:last-child {
        flex-direction: row;
        width: 100%;
    }

    .filters_row .form_group:last-child .button {
        flex: 1;
    }

    .pagination {
        flex-wrap: wrap;
        gap: 8px;
    }

    .pagination_link {
        min-width: 32px;
        height: 32px;
        padding: 0 8px;
        font-size: var(--text-tiny);
    }
}

/* DEUX champs côte à côte tiennent jusqu'ici : prénom et nom, code postal et ville, ne
   gagnent rien à se séparer plus tôt – et une fenêtre de 600 px les garde à l'aise bien en
   dessous de 1350. Ils se remettent l'un sous l'autre à 750, le palier où l'écran passe
   debout. Les rangées de TROIS, elles, sont déjà passées à deux plus haut. */
@media (max-width: 750px) {
    .form_row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 500px) {
    .form_row_three,
    .form_row_3 {
        grid-template-columns: 1fr;
    }
}

/* Filtres inline */
.filters_form {
    margin: 0;
}

.filters_row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.filters_row .form_group {
    margin-bottom: 0;
    flex: 1;
    min-width: 150px;
}

.filters_row .form_group:last-child {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 16px;
    border-top: 1px solid var(--color-border-light);
}

.pagination_link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    border-radius: 6px;
    font-size: var(--text-small);
    color: var(--color-gray-600);
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    transition: all 150ms ease;
}

.pagination_link:hover {
    background-color: var(--color-gray-50);
    border-color: var(--color-gray-300);
    color: var(--color-gray-800);
}

.pagination_current {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

.pagination_current:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.pagination_ellipsis {
    padding: 0 8px;
    color: var(--color-gray-400);
}

/* ========================================
   SÉPARATEUR DE FORMULAIRE
   ======================================== */

.form_separator {
    margin: 24px 0;
    border: none;
    border-top: 1px solid var(--color-border);
}

/* ========================================
   CHAMP MOT DE PASSE AVEC TOGGLE VISIBILITÉ
   ======================================== */

.password_input_wrapper {
    position: relative;
}

.password_input_wrapper .form_input {
    padding-right: 44px;
}

.password_toggle {
    position: absolute;
    right: 1px;
    top: 1px;
    bottom: 1px;
    width: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    font-size: var(--text-subtitle);
    color: var(--color-gray-400);
    opacity: 0.6;
    transition: opacity 150ms ease, color 150ms ease;
}

.password_toggle:hover {
    opacity: 1;
    color: var(--color-gray-600);
}

.password_toggle_active {
    opacity: 1;
    color: var(--color-primary);
}

/* ========================================
   SECTION MOT DE PASSE (2 COLONNES)
   ======================================== */

.password_section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}

@media (max-width: 500px) {
    .password_section {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   INDICATEUR DE FORCE MOT DE PASSE
   ======================================== */

.password_strength {
    margin-top: 16px;
    padding: 12px;
    background-color: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.password_criteria {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.password_criterion {
    font-size: var(--text-small);
    color: var(--color-gray-500);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 200ms ease;
}

.password_criterion_checkbox {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border: 2px solid var(--color-gray-300);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    line-height: 1;
    color: transparent;
    transition: all 200ms ease;
}

.password_criterion_valid {
    color: var(--color-success);
}

.password_criterion_valid .password_criterion_checkbox {
    border-color: var(--color-success);
    background-color: var(--color-success);
    color: var(--color-white);
}

/* ========================================
   SECTION PERMISSIONS (MODALE)
   ======================================== */

.form_section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border);
}

.form_section_title {
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--color-gray-600);
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.permissions_group {
    margin-bottom: 12px;
}

.permissions_group_label {
    display: block;
    font-weight: 500;
    color: var(--color-gray-700);
    margin-bottom: 6px;
    font-size: var(--text-small);
}

.permissions_checks {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.permissions_checks label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-small);
    color: var(--color-gray-600);
    cursor: pointer;
}

.permissions_checks input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Tableau des permissions */
/* Structure, bordures et cadre : composant `.fiche_tableau` (components/tables.css).
   Ne restent ici que ce qui distingue cette grille de permissions. */
.permissions_table {
    font-size: var(--text-small);
}

.permissions_table thead {
    background-color: var(--color-gray-100);
}

.permissions_table th {
    padding: 10px 12px;
    font-weight: 600;
    color: var(--color-gray-600);
    text-align: center;
    font-size: var(--text-tiny);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-bottom: 1px solid var(--color-border);
}

.permissions_table th:first-child {
    text-align: left;
    width: 40%;
}

/* CE TABLEAU SE RESSERRE, IL NE DÉFILE PAS. Le cadre large impose 620 px de plancher aux
   tableaux de quatre colonnes et les fait défiler – utile quand les quatre portent du texte.
   Ici, trois ne portent qu'une case à cocher : le plancher ne servait qu'à bloquer des
   colonnes trois fois trop larges. On le lève, et le tableau descend jusqu'à la place
   disponible.

   Rien d'autre ne change en petit écran : les intitulés s'abrègent dans le markup
   (`seulement_petit`) et le texte descend d'un cran à 950, comme partout ailleurs. */
/* Trois classes, et non deux : `tables.css` est chargé APRÈS `forms.css`, une règle de même
   poids y gagnerait. C'est la seule raison de nommer `.fiche_tableau` ici. */
.fiche_tableau_wrapper_large .fiche_tableau.permissions_table {
    min-width: 0;
}

/* Le texte se coupe par « … » à mesure que la colonne se resserre, il ne passe pas à la
   ligne : un intitulé sur deux lignes doublerait la hauteur d'une rangée qui ne porte que
   des cases à cocher. L'intitulé entier reste dans l'info-bulle du navigateur. */
.fiche_tableau.permissions_table th,
.fiche_tableau.permissions_table td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 950px) {
    .permissions_table {
        font-size: var(--text-tiny);
    }
}

.permissions_table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-border-light);
}

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

.permissions_table tbody tr:hover {
    background-color: var(--color-gray-50);
}

.permissions_table_label {
    font-weight: 500;
    color: var(--color-gray-700);
}

.permissions_table_check {
    text-align: center;
}

.permissions_table_check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--color-primary);
}

/* Permissions de type « features » (toggles par fonctionnalité, pas CRUD) */
.permissions_features_group {
    margin-top: 20px;
    padding: 14px 16px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background-color: var(--color-gray-50);
}

.permissions_features_title {
    margin: 0 0 10px 0;
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--color-gray-700);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.permissions_features_list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.permissions_features_item + .permissions_features_item {
    border-top: 1px solid var(--color-border-light);
    padding-top: 8px;
}

.permissions_features_label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    padding: 4px 2px;
}

.permissions_features_label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    cursor: pointer;
    accent-color: var(--color-primary);
    flex-shrink: 0;
}

.permissions_features_label:has(input:disabled) {
    opacity: 0.5;
    cursor: not-allowed;
}

.permissions_features_label input:disabled {
    cursor: not-allowed;
}

.permissions_features_text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.permissions_features_name {
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--color-gray-800);
}

.permissions_features_desc {
    font-size: var(--text-tiny);
    color: var(--color-gray-500);
    line-height: 1.4;
}

/* .checkbox_label, .checkbox_input, .radio_input -> deplace dans boutons.css */

/* ========================================
   SELECT STYLISE
   ======================================== */

select.form_input,
.form_select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='none' stroke='%23747A81' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M2 3.5L5 6.5L8 3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
    cursor: pointer;
}

.form_select_inline {
    width: auto;
    min-width: 120px;
    margin-left: auto;
    margin-top: 8px;
}

.form_select_small {
    padding: 6px 32px 6px 10px;
    font-size: var(--text-small);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background-color: var(--color-gray-50);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='none' stroke='%23747A81' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M2 3.5L5 6.5L8 3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    appearance: none;
    cursor: pointer;
    min-width: 140px;
}

.form_select_small:focus {
    outline: none;
    border-color: var(--color-primary);
    background-color: var(--color-white);
}

/* ========================================
   BARRE DE FILTRES (sélecteur session, etc.)
   ======================================== */

/* La légende passe à la ligne plutôt que de sortir du cadre : un sélecteur dont les
   intitulés sont longs (les compétences du livret B) prend sinon toute la rangée. */
.filter_bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
}

.filter_bar_label {
    font-size: var(--text-small);
    font-weight: 500;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.filter_bar_filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
}

/* Un sélecteur réclame la largeur de son plus long intitulé : sans plafond, il pousse le
   reste de la barre dehors. Borné, il coupe son texte – la liste déroulante l'a en entier. */
.filter_bar .form_select_small {
    min-width: 0;
    max-width: 280px;
}

/* Le « Filtrer par : » passe au-dessus et les sélecteurs se partagent la largeur. Dès
   750 px : à trois filtres, les intitulés étaient déjà rognés en « Toutes dat », « Tous
   thèm » – c'est là qu'ils cessent de tenir sur la même rangée que le libellé. */
@media (max-width: 750px) {
    .filter_bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .filter_bar_filters {
        width: 100%;
    }

    /* Les sélecteurs se partagent toute la largeur : le plafond de la rangée ne vaut plus. */
    .filter_bar .form_select_small {
        flex: 1;
        min-width: 0;
        max-width: none;
    }
}

/* Pillules de filtre cliquables (utilisées par discussions, utilisateurs…) */
.filter_pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 14px;
    border: 1px solid var(--color-gray-300);
    border-radius: 16px;
    background: var(--color-white);
    color: var(--color-gray-700);
    font-size: var(--text-small);
    text-decoration: none;
    transition: background-color 150ms ease, color 150ms ease;
}

.filter_pill:hover {
    background-color: var(--color-bg-hover);
    color: var(--color-gray-700); /* override `a:hover` (spécificité supérieure) */
}

.filter_pill_active {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.filter_pill_active:hover {
    background-color: var(--color-primary-dark);
    color: var(--color-white); /* override `a:hover` qui rendait le texte bleu sur fond bleu */
}

/* Options désactivées dans les selects */
.form_select option:disabled {
    color: var(--color-gray-400);
    background-color: var(--color-gray-100);
    font-style: italic;
}

/* ========================================
   BOITES D'INFO ET HINT
   ======================================== */

.form_info_box {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--color-bg-secondary);
    border-radius: 6px;
    border: 1px solid var(--color-border);
    margin-bottom: 20px;
}

.info_label {
    font-weight: 500;
    color: var(--color-text-secondary);
}

.info_value {
    font-weight: 600;
    color: var(--color-text-primary);
}

.form_hint_box {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: var(--color-info-light);
    border-radius: 6px;
    border: 1px solid var(--color-info);
    color: var(--color-info);
    font-size: var(--text-tiny);
    margin-top: 16px;
}

.form_hint_box_inline {
    margin-top: 12px;
}

.hint_icon {
    font-size: var(--text-h3);
    flex-shrink: 0;
}

/* ========================================
   COLOR PICKERS
   ======================================== */

.colors_grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.color_picker_group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.color_picker_wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.color_picker_input {
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--color-gray-300);
    border-radius: 6px;
    cursor: pointer;
    background: none;
}

.color_picker_input::-webkit-color-swatch-wrapper {
    padding: 2px;
}

.color_picker_input::-webkit-color-swatch {
    border: none;
    border-radius: 4px;
}

.color_picker_preview {
    display: none;
}

.color_picker_text {
    flex: 1;
    font-family: var(--font-mono, monospace);
    font-size: var(--text-small);
    text-transform: uppercase;
}

/* ========================================
   GRILLE DE CHECKBOXES (sélection multi-élèves / multi-destinataires)
   Pattern partagé : modales diffusion, upload, permissions, évaluations, planning
   Structures supportées :
     - sans toggle : <label class="eleve_checkbox"><input><span>…</span></label>
     - avec toggle : <div class="eleve_checkbox_row">
                       <label class="eleve_checkbox">…</label>
                       <button class="eleve_checkbox_toggle" …>icon</button>
                     </div>
   ======================================== */

.eleves_checkboxes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
    max-height: 250px;
    overflow-y: auto;
    padding: 12px;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

/* Trait fin sur toute la largeur de la grille checkboxes. Scopé au parent
   .eleves_checkboxes pour ne pas écraser le séparateur de section
   .eleves_separator (sidebar) qui utilise la même classe pour un autre usage. */
.eleves_checkboxes > .eleves_separator {
    grid-column: 1 / -1;
    height: 1px;
    background: var(--color-border);
    margin: 4px 0;
}

.eleves_actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}

.eleves_count {
    margin-left: auto;
    font-size: var(--text-tiny);
    color: var(--color-text-secondary);
}

/* Card checkbox (cas simple : label standalone).
   Le label utilise aussi .checkbox_label (boutons.css) pour la mise en ligne input+texte,
   l'input porte .checkbox_input (boutons.css) pour le style 18px + accent-color. */
.eleve_checkbox {
    padding: 8px 12px;
    background: white;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    transition: all 0.15s ease;
}

.eleve_checkbox:hover {
    border-color: var(--color-primary-light);
}

.eleve_checkbox:has(input:checked) {
    border-color: var(--color-primary);
    background-color: var(--color-primary-light-alpha);
}

/* Card avec toggle intégré : le wrapper porte le style card */
.eleve_checkbox_row {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 4px 4px 12px;
    background: white;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    transition: all 0.15s ease;
}

/* Sans elle, `display: flex` écrase la règle UA `[hidden]` : la ligne du candidat, écartée
   des évaluateurs de sa propre évaluation, resterait visible. */
.eleve_checkbox_row[hidden] {
    display: none;
}

.eleve_checkbox_row:hover {
    border-color: var(--color-primary-light);
}

.eleve_checkbox_row:has(input:checked) {
    border-color: var(--color-primary);
    background-color: var(--color-primary-light-alpha);
}

/* Le label à l'intérieur d'un row perd son style card propre */
.eleve_checkbox_row .eleve_checkbox {
    flex: 1;
    min-width: 0;
    padding: 4px 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.eleve_checkbox_row .eleve_checkbox:hover {
    border-color: transparent;
}

.eleve_checkbox_row .eleve_checkbox:has(input:checked) {
    background: transparent;
    border-color: transparent;
}

/* Bouton icône intégré (œil observateur, chrono responsable temps…) */
.eleve_checkbox_toggle {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: white;
    color: var(--color-gray-600);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 150ms ease;
}

.eleve_checkbox_toggle:hover {
    background: var(--color-gray-100);
    color: var(--color-gray-800);
}

.eleve_checkbox_toggle.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

@media (max-width: 1350px) {
    .eleves_checkboxes {
        grid-template-columns: 1fr;
    }
}

/* Boutons d'action en bas de la grille des élèves (Tout cocher / décocher) */
.eleves_checkboxes_actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}
.eleves_checkboxes_actions[hidden] { display: none; }

/* ========================================
   FIELDSET CADRÉ AVEC LÉGENDE
   ----------------------------------------
   Conteneur générique : bordure + titre intégré dans la bordure.
   Usage : section de formulaire avec une étiquette (passé, candidats, ordre,
   etc.). Réutilisable partout (planning, générateur, paramètres, …).

   Structure attendue :
     <fieldset class="fieldset_bloc">
         <legend class="fieldset_titre">Titre</legend>
         …contenu…
     </fieldset>

   État désactivé : ajouter la classe .fieldset_bloc_disabled OU l'attribut
   [disabled] sur le fieldset → contenu grisé + non interactif sans être caché.
   ======================================== */
.fieldset_bloc {
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 8px;
    padding: 12px 16px 14px;
    margin: 0 0 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0; /* nécessaire pour fieldset flex avec overflow */
}
.fieldset_titre {
    padding: 0 12px;
    font-size: var(--text-body);
    font-weight: 600;
    color: var(--color-text-primary, #1e293b);
    line-height: 1;
    transform: translateY(-2px);
}
/* Variante grisée – utilisée pour signaler un bloc inactif sans le replier.
   On grise le contenu du fieldset (sauf la légende et le 1er enfant qui est
   typiquement le toggle d'activation). */
.fieldset_bloc_disabled > :not(legend):not(:first-of-type) {
    opacity: 0.45;
    pointer-events: none;
}

/* ============================================================================
   PICKER DE COULEUR (modale profil – couleur HEX libre dans le forum Discussions)
   Combinaison input[type=color] natif + champ texte HEX synchronisés
   ============================================================================ */

.profile_color_picker {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ============================================================================
   PALETTE DE TEINTES (composant champ-palette.php)
   Des pastilles à cocher, pas un nuancier libre. Ce sont des boutons radio :
   c'est `:checked` qui marque le choix, aucun JS n'intervient.
   ============================================================================ */

.palette {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.palette_choix {
    display: flex;
    align-items: center;
    cursor: pointer;
}

/* Le bouton radio disparaît mais reste focusable au clavier : `display: none` le
   sortirait de la navigation par tabulation. */
.palette_input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* La pastille porte sa teinte en variable, injectée par le composant. Le cerne blanc
   posé à l'intérieur détache l'anneau de sélection de la couleur elle-même. */
.palette_pastille {
    display: inline-block;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: var(--palette-teinte);
    box-shadow: 0 0 0 1px var(--color-gray-300);
    transition: box-shadow 150ms ease;
}

.palette_input:checked + .palette_pastille {
    box-shadow: 0 0 0 2px var(--color-white) inset, 0 0 0 2px var(--palette-teinte);
}

.palette_input:focus-visible + .palette_pastille {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.profile_color_input {
    width: 40px;
    height: 36px;
    padding: 2px;
    border: 1px solid var(--color-gray-300);
    border-radius: 6px;
    cursor: pointer;
    background-color: var(--color-white);
}

.profile_color_text {
    width: 110px;
    font-family: 'Courier New', Consolas, monospace;
    text-transform: lowercase;
}

/* ============================================================================
   BARRE D'ACTIONS D'UN CHAMP
   Tout ce qui accompagne un champ – la gomme, la reformulation, le compteur de
   caractères – rangé sous lui et aligné à DROITE, d'un seul tenant. Sous le
   champ, jamais dans le pied de la fenêtre : ça ne concerne pas la fenêtre.
   ============================================================================ */

.champ_actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

/* Le retrait du haut est déjà porté par la barre. */
.champ_actions .form_hint,
.champ_actions .reformuler {
    margin-top: 0;
}

/* ============================================================================
   COMPTEUR DE CARACTÈRES (composant champ-compteur.php)
   Combien est écrit, et ce qu'on en attend. Il ouvre la barre d'actions – on lit
   où l'on en est avant de trouver de quoi tout effacer.
   ============================================================================ */

.champ_compteur {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 0;
    margin-right: auto;
    font-size: var(--text-meta);
    color: var(--color-gray-500);
}

.champ_compteur_valeur {
    font-weight: 700;
    color: var(--color-gray-700);
}

/* Trois états, trois couleurs : orange s'il manque des caractères, vert dans le repère,
   rouge si l'on dépasse. Seul le chiffre change de couleur, pas le fond ni le cadre –
   c'est un repère, pas une erreur de saisie. */
.champ_compteur_court .champ_compteur_valeur {
    color: var(--color-warning-dark);
}

.champ_compteur_bon .champ_compteur_valeur {
    color: var(--color-success);
}

.champ_compteur_long .champ_compteur_valeur {
    color: var(--color-danger);
}

/* ============================================================================
   BOUTON « REFORMULER » (composant champ-reformulable.php)
   Barre d'assistance posée sous un champ de saisie – alignée à droite du champ.
   ============================================================================ */

.reformuler {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
}