/* ISALYS — thème principal (modules dans assets/css/) */
@import url('assets/css/isalys-variables.css');
@import url('assets/css/isalys-base.css');
@import url('assets/css/isalys-forms.css');
@import url('assets/css/isalys-tables.css');
@import url('assets/css/isalys-header.css');
@import url('assets/css/isalys-portail.css');

/* Fond d'écran — url() direct ici (racine app), pas dans un @import ni une var() CSS */
html::before {
    content: "";
    position: fixed;
    inset: 0;
    background: url('ecole1.jpg') center center / cover no-repeat;
    pointer-events: none;
    z-index: -2;
    transform: translateZ(0);
}

/* Champs honeypot anti-bot (formulaires publics) */
.isalys-hp-wrap {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

/* ============================================
   ISALYS APP — FEUILLE DE STYLE UNIQUE
   Version: 2.0
   Author: Arnaud Ulrich AYANGMA
   Tout le thème (couleurs, panneaux, effets néon, listes, stats)
   est défini ici. Pages : coquille .isalys-page + .isalys-panel--head / --body
   ============================================ */

/* ========== COULEURS POUR ICÔNES ========== */
.icon-green { color: #2ed573 !important; }
.icon-yellow { color: #ffa502 !important; }
.icon-blue { color: #3498db !important; }
.icon-orange { color: #ff6348 !important; }
.icon-purple { color: #a29bfe !important; }
.icon-pink { color: #fd79a8 !important; }
.icon-cyan { color: #00d2d3 !important; }
.icon-red { color: #ff4757 !important; }
.icon-brown { color: #8b4513 !important; }
.icon-gold { color: #f1c40f !important; }
.icon-teal { color: #1abc9c !important; }
.icon-indigo { color: #6c5ce7 !important; }
.icon-lime { color: #badc58 !important; }
.icon-coral { color: #ff7675 !important; }
.icon-mint { color: #55efc4 !important; }

/* ========== CONTENEURS ========== */
.container {
    max-width: 1200px;
    margin: var(--spacing-xl) auto;
    padding: var(--spacing-2xl);
    background: var(--bg-glass);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--secondary), var(--secondary-light), var(--secondary));
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.container-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.container-header img {
    max-width: 180px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--spacing-md);
    display: block;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.35s ease;
}

.container-header img:hover {
    transform: scale(1.06) rotate(-6deg);
    filter: drop-shadow(0 8px 20px rgba(63, 219, 52, 0.45));
}

.container-header h1 {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
    color: var(--secondary);
    text-shadow: 0 2px 10px rgba(63, 219, 52, 0.3);
    letter-spacing: -0.02em;
}

.container-header p {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 400;
}

.container-footer {
    text-align: center;
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-xl);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.95rem;
}

.container-link {
    color: var(--secondary-light);
    text-decoration: none;
    font-weight: 500;
    transition: all var(--transition-fast);
    position: relative;
}

.container-link::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--secondary);
    transition: width var(--transition-base);
}

.container-link:hover {
    color: var(--secondary);
}

.container-link:hover::after {
    width: 100%;
}

.container-link small {
    display: block;
    margin-top: 5px;
}

/* ========== CONTENEUR SOMBRE AVEC EFFET FLUORESCENT ========== */
.dark-container-fluor {
    background: rgba(0, 0, 0, 0.22);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25), var(--isalys-glow-soft);
    max-width: var(--isalys-panel-max);
    margin: 0 auto var(--spacing-xl);
    text-align: center;
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    border: 1px solid rgba(63, 219, 52, 0.22);
    position: relative;
    animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    transition:
        box-shadow var(--transition-base),
        border-color var(--transition-base);
}

.dark-container-fluor:hover {
    box-shadow: var(--isalys-glow), var(--shadow-lg);
    border-color: var(--isalys-border-glow);
}

/* ========== CARTES DE SÉLECTION (pour formulaires) ========== */
.selection-card {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    border-left: 4px solid var(--secondary);
    transition: all 0.3s ease;
    text-align: center;
    width: 250px;
    flex: 0 0 250px;
}

.selection-card:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.selection-icon {
    font-size: 1.5rem;
    margin-right: 10px;
    color: var(--secondary);
    vertical-align: middle;
}

.selection-title {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    color: var(--secondary);
    font-weight: bold;
    justify-content: center;
}

/* ========== TITRES DE FORMULAIRE ========== */
.form-title {
    text-align: center;
    margin-bottom: 30px;
    color: var(--secondary);
    position: relative;
    padding-bottom: 15px;
    font-size: 1.5rem;
    font-weight: 700;
}

.form-title:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 25%;
    width: 50%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--secondary), transparent);
}

.form-title i {
    margin-right: 10px;
}

/* ========== GRILLES & LAYOUT ========== */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--spacing-lg);
    margin: 0 auto var(--spacing-2xl);
    max-width: 1200px;
}

.modules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--spacing-xl);
    margin: 0 auto;
    max-width: 1600px;
}

/* ========== CARTES STATISTIQUES ========== */
.stat-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-glass);
    border-radius: var(--radius-md);
    padding: var(--spacing-xl);
    text-align: center;
    transition: all var(--transition-base);
    cursor: pointer;
    border-left: 4px solid var(--secondary);
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s;
}

.stat-card:hover::before {
    left: 100%;
}

.stat-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: var(--shadow-xl), var(--shadow-glow);
    border-left-color: var(--secondary-light);
}

.stat-card.alert {
    border-left-color: var(--danger);
    animation: pulse 2s infinite;
}

.stat-card h3 {
    font-size: 1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: var(--spacing-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stat-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--secondary);
    margin: var(--spacing-md) 0;
    line-height: 1;
    text-shadow: 0 2px 8px rgba(63, 219, 52, 0.4);
}

.stat-alert {
    background: linear-gradient(135deg, var(--danger), var(--danger-dark));
    color: white;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-full);
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow: var(--shadow-md);
    animation: slideInUp 0.3s ease-out;
}

.stat-alert a,
.stat-alert a:visited {
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.stat-alert a:hover {
    color: #fff9c4;
}

/* ========== MODULES ========== */
.module {
    background: var(--bg-glass);
    border-radius: var(--radius-md);
    padding: var(--spacing-xl);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all var(--transition-base);
}

.module:hover {
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: var(--shadow-lg);
}

.module .module {
    margin-top: var(--spacing-lg);
    background: rgba(0, 0, 0, 0.15);
}

/* Module avec effet fluorescent (pour conteneurs sombres) */
.module.dark-fluor {
    background: rgba(0, 0, 0, 0.38);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(63, 219, 52, 0.22);
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
}

.module.dark-fluor:hover {
    box-shadow: 0 0 35px rgba(0, 200, 0, 0.5);
    border-color: rgba(63, 219, 52, 0.4);
}

.module-title {
    color: var(--secondary);
    border-bottom: 2px solid rgba(63, 219, 52, 0.3);
    padding-bottom: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.module-title i {
    font-size: 1.4rem;
}

.module-actions {
    display: grid;
    gap: var(--spacing-sm);
}

.module-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    color: #fff;
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: all var(--transition-base);
    background: rgba(0, 0, 0, 0.2);
    font-weight: 500;
    position: relative;
    overflow: hidden;
}

.module-link::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 3px;
    background: var(--secondary);
    transform: scaleY(0);
    transition: transform var(--transition-base);
}

.module-link:hover::before {
    transform: scaleY(1);
}

.module-link:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateX(8px);
    color: var(--secondary-light);
}

.module-link i {
    width: 20px;
    text-align: center;
    font-size: 1.1rem;
}

.module-link.cartes-scolaires {
    color: #f7f7f7;
    border-left: 3px solid #0097a7;
}

.coming-soon {
    opacity: 0.5;
    cursor: not-allowed;
    background: rgba(255, 255, 255, 0.05);
    text-decoration: line-through;
}

.coming-soon:hover {
    transform: none !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

/* ========== BOUTONS ========== */
.btn-group {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.btn-group button,
.btn-group a {
    min-width: 120px;
    text-align: center;
}

.btn,
.btn-block,
.mesBouttons {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: 0.85rem 1.5rem;
    border-radius: var(--radius-full);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-base);
    text-decoration: none;
    border: none;
    position: relative;
    overflow: hidden;
    font-family: var(--font-primary);
}

.btn::before,
.btn-primary::before,
.btn-block::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn:active::before,
.btn-primary:active::before,
.btn-block:active::before {
    width: 300px;
    height: 300px;
}

.btn-primary,
.btn-block {
    background: linear-gradient(135deg, var(--secondary), var(--secondary-dark));
    color: var(--primary);
    box-shadow: 0 4px 12px rgba(63, 219, 52, 0.3);
}

.btn-primary:hover,
.btn-block:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(63, 219, 52, 0.4);
    background: linear-gradient(135deg, var(--secondary-light), var(--secondary));
}

.btn-secondary {
    background: transparent;
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
}

.btn-danger {
    background: linear-gradient(135deg, var(--danger), var(--danger-dark));
    color: white;
    box-shadow: 0 4px 12px rgba(255, 71, 87, 0.3);
}

.btn-danger:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(255, 71, 87, 0.4);
}

.logout-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 0.85rem 1.5rem;
    background: linear-gradient(135deg, var(--danger), var(--danger-dark));
    color: white;
    border-radius: var(--radius-full);
    text-decoration: none;
    transition: all var(--transition-base);
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(255, 71, 87, 0.3);
}

.logout-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(255, 71, 87, 0.5);
}

.logout-container {
    text-align: center;
    margin-top: var(--spacing-2xl);
}

/* ========== BOUTONS D'ACTION ========== */
.action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--transition-base);
    position: relative;
    cursor: pointer;
    padding: var(--spacing-sm);
    border-radius: var(--radius-sm);
}

.edit-btn i {
    color: #009dff;
    margin-right: var(--spacing-lg);
    font-size: 1.1rem;
}

.delete-btn i {
    color: var(--danger);
    font-size: 1.1rem;
}

.action-btn:hover {
    transform: scale(1.3);
    background: rgba(255, 255, 255, 0.1);
}

.action-btn::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%) scale(0);
    background: rgba(0, 0, 0, 0.85);
    color: white;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
    white-space: nowrap;
    opacity: 0;
    transition: all var(--transition-fast);
    z-index: 10;
    font-size: 0.8rem;
    font-weight: 500;
    pointer-events: none;
}

.action-btn:hover::after {
    transform: translateX(-50%) scale(1);
    opacity: 1;
}

/* ========== CHAMPS SPÉCIAUX ========== */
.champsContainer {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xl);
    justify-content: center;
}

.ChampsAccueil1,
.ChampsAccueil2 {
    flex: 0 0 280px;
    max-width: 280px;
}

fieldset {
    border: 2px solid var(--secondary);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    text-align: center;
    background: rgba(63, 219, 52, 0.05);
    transition: all var(--transition-base);
}

fieldset:hover {
    border-color: var(--secondary-light);
    box-shadow: 0 0 20px rgba(63, 219, 52, 0.2);
}

legend {
    color: var(--secondary);
    padding: 0 var(--spacing-md);
    font-weight: 700;
    font-size: 1.1rem;
}

/* ========== TABLEAUX AMÉLIORÉS (pour decisions.php et pages similaires) ========== */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    overflow: hidden;
}

th, td {
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 12px 8px;
    text-align: left;
}

th {
    background-color: rgba(63, 219, 52, 0.15);
    color: var(--secondary);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
}

tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.05);
}

tr:hover {
    background-color: rgba(63, 219, 52, 0.08);
}

.required-field::after {
    content: ' *';
    color: var(--danger);
    font-weight: bold;
}

/* ========== CELLULES SPÉCIFIQUES ========== */
.decision-cell {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.decision-select {
    width: 100%;
    padding: 8px;
    border-radius: 6px;
    border: 1px solid rgba(63, 219, 52, 0.3);
    background: rgba(0, 0, 0, 0.4);
    color: white;
    font-size: 0.95rem;
}

.decision-select:focus {
    outline: none;
    border-color: var(--secondary);
    box-shadow: 0 0 0 2px rgba(63, 219, 52, 0.2);
}

.classe-container-toggle {
    margin-top: 5px;
    transition: all 0.3s ease;
}

.classe-container-toggle[data-visible="false"] {
    display: none;
}

.classe-container-toggle[data-visible="true"] {
    display: block;
}

/* ========== BOÃŽTES D'AVERTISSEMENT ========== */
.warning-box {
    background-color: rgba(255, 243, 205, 0.15);
    border-left: 4px solid var(--warning);
    padding: 15px;
    margin: 20px 0;
    border-radius: 8px;
    text-align: left;
    backdrop-filter: blur(5px);
}

.warning-box i {
    color: var(--warning);
    margin-right: 10px;
    font-size: 1.2rem;
}

.warning-box strong {
    color: var(--warning);
}

.text-warning {
    color: var(--warning);
    font-size: 0.9rem;
    margin-top: 5px;
}

.alert-warning {
    background-color: rgba(255, 193, 7, 0.2);
    border-left: 4px solid #ffc107;
    color: #ffc107;
}

/* ========== STYLES SPÉCIFIQUES POUR LA GESTION DES NOTES ========== */

/* Grille des filtres — même ADN que modules-grid de Navigation */
.notes-filter-form {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 260px));
    gap: var(--spacing-md);
    margin: 0 auto var(--spacing-lg);
    justify-content: center;
    align-items: start;
}

/* note_liste : 3 colonnes, largeur limitée (filtres Classe / Trimestre / Matière) */
.notes-filter-form--3col {
    grid-template-columns: repeat(3, 1fr);
    justify-content: stretch;
    max-width: 660px;
    margin-left: auto;
    margin-right: auto;
}

/* bulletins : Classe+Trimestre sur une ligne, Appréciations et Type seuls en dessous */
.notes-filter-form--2x2 {
    grid-template-columns: repeat(2, 1fr);
    justify-content: stretch;
    max-width: 660px;
    margin-left: auto;
    margin-right: auto;
}

/* bulletin_annuel : cards empilées verticalement (chacune sur sa propre ligne) */
.notes-filter-form--stack {
    grid-template-columns: 1fr;
    max-width: 600px;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
}

/* bulletin_annuel : la card Classe seule est plus compacte que la section Appréciations */
.notes-filter-form--stack .notes-filter-card--classe {
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
}

/* Carte qui occupe toute la largeur de la grille (utilisée dans bulletins pour
   Appréciations et Type bulletin) */
.notes-filter-card--full {
    grid-column: 1 / -1;
}

/* Formulaire à 1 seule carte (livret, décisions) */
.notes-filter-form--single {
    grid-template-columns: minmax(220px, 320px);
    justify-content: center;
}

/* Bouton de génération centré, taille adaptée au contenu */
.btn-filter-submit {
    grid-column: 1 / -1;
    justify-self: center;
    width: fit-content;
    min-width: 230px;
    margin-top: var(--spacing-md);
}

/* Bouton btn-block dans formulaire grille (livret — 1 seule colonne) */
.notes-filter-form > .btn-block:not(.btn-filter-submit) {
    grid-column: 1 / -1;
    margin-top: var(--spacing-md);
}

@media (max-width: 640px) {
    .notes-filter-form--3col,
    .notes-filter-form--2x2 {
        grid-template-columns: 1fr;
    }
    .notes-filter-form--stack {
        max-width: 100%;
    }
}

@media (max-width: 540px) {
    .notes-filter-form,
    .notes-filter-form--single {
        grid-template-columns: 1fr;
    }
}

/* Cartes de filtre — héritent du .module, bordure colorée à gauche */
.notes-filter-card {
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(255, 255, 255, 0.11);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-left-width: 4px;
    border-left-style: solid;
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.notes-filter-card:hover {
    border-color: var(--isalys-border-glow);
    box-shadow: var(--isalys-glow-soft);
}

.notes-filter-card .module-title {
    font-size: 0.85rem;
    margin-bottom: var(--spacing-sm);
    padding-bottom: var(--spacing-xs, 4px);
    text-align: center;
}

.notes-filter-card--classe    { border-left-color: #2196f3; }
.notes-filter-card--trimestre { border-left-color: #009688; }
.notes-filter-card--matiere   { border-left-color: #ffc107; }
.notes-filter-card--apprec    { border-left-color: #9c27b0; }
.notes-filter-card--type      { border-left-color: #e91e63; }

.notes-filter-card .form-control {
    width: 100%;
    margin-top: 0;
    padding: 0.35rem 0.6rem;
    font-size: 0.9rem;
}

/* Ligne d'actions (boutons bas du tableau) */
.notes-actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    justify-content: center;
}

.notes-action-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
    padding: 0.55rem 1.3rem;
    border: 2px solid rgba(255, 255, 255, 0.18);
    border-left-width: 4px;
    border-left-style: solid;
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-size: 0.95rem;
    font-family: inherit;
    transition: background 0.22s, box-shadow 0.22s, transform 0.22s;
}

.notes-action-btn:hover {
    background: rgba(255, 255, 255, 0.14);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.notes-action-btn--save { border-left-color: var(--secondary); }
.notes-action-btn--back { border-left-color: #17a2b8; }

/* Compat ancien sélecteur */
.filter-group {
    min-width: 200px;
}

.filter-group label {
    display: block;
    margin-bottom: 5px;
    color: var(--secondary);
    font-weight: 600;
}

.trimestre-title {
    background: var(--secondary);
    color: var(--primary);
    padding: 8px 15px;
    border-radius: 8px;
    font-weight: bold;
    text-align: center;
    margin: 15px 0;
    font-size: 1.1rem;
}

.coefficient-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    padding: 3px 10px;
    font-size: 0.75rem;
    margin-left: 5px;
    font-weight: bold;
}

/* Tableau de notes avec colonnes fixes */
.notes-table-container {
    overflow-x: auto;
    overflow-y: auto;          /* explicite — évite la conversion implicite visible→auto */
    position: relative;
    margin-top: 20px;
    border-radius: 10px;
    width: 100%;
    -webkit-overflow-scrolling: touch;
}

/* Le formulaire de saisie des notes s'étire (pas centré) pour que le scroll fonctionne */
#notes-form {
    align-items: stretch !important;
}

.notes-data-table {
    /* width: auto + min-width: 100% : le tableau prend sa taille naturelle et DÉPASSE
       le conteneur quand il a beaucoup de colonnes → scroll horizontal activé */
    width: auto;
    min-width: 100%;
    border-collapse: separate;  /* OBLIGATOIRE pour que position:sticky fonctionne */
    border-spacing: 0;
    background-color: rgba(0, 0, 0, 0.3);
}

.notes-data-table th,
.notes-data-table td {
    padding: 12px 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    background-color: rgba(40, 40, 40, 0.62);
}

.notes-data-table th {
    background-color: var(--secondary);
    color: var(--primary);
    font-weight: bold;
    position: sticky;
    top: 0;
    z-index: 10;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
}

.notes-data-table tr:nth-child(even) td {
    background-color: rgba(242, 242, 242, 0.05);
}

.notes-data-table tr:hover td {
    background-color: rgba(2, 255, 6, 0.1);
}

/* Colonnes fixes pour le tableau de notes */
.notes-fixed-header {
    position: sticky;
    z-index: 15;
    background-color: var(--secondary);
}

.notes-fixed-column {
    position: sticky;
    z-index: 5;
    background-color: #2a2a2a; /* opaque — masque le contenu qui défile derrière */
}

/* Maintenir le fond opaque même sur les lignes paires et au survol */
.notes-data-table tr:nth-child(even) td.notes-fixed-column {
    background-color: #252525;
}

.notes-data-table tr:hover td.notes-fixed-column {
    background-color: #1e3a1e;
}

/* Première colonne (Rang) */
.notes-fixed-header-1 {
    left: 0;
    min-width: 55px;
    max-width: 55px;
}

.notes-fixed-column-1 {
    left: 0;
    min-width: 55px;
    max-width: 55px;
}

/* Deuxième colonne (Élève) */
.notes-fixed-header-2 {
    left: 55px;
    min-width: 160px;
    max-width: 160px;
    /* séparateur visuel après les colonnes figées */
    box-shadow: 3px 0 8px rgba(0, 0, 0, 0.5);
}

.notes-fixed-column-2 {
    left: 55px;
    min-width: 160px;
    max-width: 160px;
    box-shadow: 3px 0 6px rgba(0, 0, 0, 0.4);
}

/* Champs éditables pour les notes */
.notes-editable-field {
    width: 60px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--secondary);
    border-radius: 4px;
    color: white;
    text-align: center;
    transition: all 0.2s;
    font-size: 0.95rem;
}

.notes-editable-field:focus {
    outline: none;
    border-color: #3498db;
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

.notes-editable-field::placeholder {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.85rem;
}

.student-average {
    font-weight: bold;
    color: var(--secondary);
    font-size: 1.05rem;
}

/* Message d'état flottant */
.status-message {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 12px 24px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--success), var(--success-dark));
    color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    display: none;
    font-weight: 600;
    animation: slideInDown 0.4s ease-out;
}

/* Animation fade-in */
.fade-in {
    animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ========== LOADER ET SPINNER (pour génération PDF) ========== */
#loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    backdrop-filter: blur(5px);
}

.spinner {
    border: 6px solid rgba(255, 255, 255, 0.3);
    border-top: 6px solid var(--secondary);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Overlay attente PDF (fetch + masquage fiable après téléchargement) */
body.isalys-pdf-wait--lock {
    overflow: hidden;
}

.isalys-pdf-wait {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}

.isalys-pdf-wait[hidden] {
    display: none !important;
}

.isalys-pdf-wait__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.72);
    backdrop-filter: blur(8px);
}

.isalys-pdf-wait__card {
    position: relative;
    z-index: 1;
    min-width: 280px;
    max-width: 92vw;
    padding: 1.75rem 1.5rem 1.5rem;
    border-radius: 14px;
    background: linear-gradient(160deg, rgba(30, 41, 59, 0.98) 0%, rgba(15, 23, 42, 0.99) 100%);
    border: 1px solid rgba(148, 163, 184, 0.25);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.45);
    text-align: center;
}

.isalys-pdf-wait__icon {
    font-size: 2.25rem;
    color: var(--secondary, #3fdb34);
    margin-bottom: 0.75rem;
    animation: isalysPdfPulse 1.4s ease-in-out infinite;
}

@keyframes isalysPdfPulse {
    0%, 100% { opacity: 0.75; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.06); }
}

.isalys-pdf-wait__title {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: #f1f5f9;
}

.isalys-pdf-wait__hint {
    margin: 0 0 1.1rem;
    font-size: 0.85rem;
    color: #94a3b8;
}

.isalys-pdf-wait__bars {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 6px;
    height: 28px;
}

.isalys-pdf-wait__bar {
    width: 6px;
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--secondary, #3fdb34), rgba(63, 219, 52, 0.45));
    transform-origin: bottom center;
    animation: isalysPdfBar 0.9s ease-in-out infinite;
}

.isalys-pdf-wait__bar:nth-child(2) {
    animation-delay: 0.15s;
}

.isalys-pdf-wait__bar:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes isalysPdfBar {
    0%, 100% { transform: scaleY(0.35); opacity: 0.6; }
    50% { transform: scaleY(1); opacity: 1; }
}

/* ========== RADIO BUTTONS ET OPTIONS ========== */
.radio-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

.radio-option {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.radio-option:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(5px);
}

.radio-option input[type="radio"] {
    margin-right: 10px;
    cursor: pointer;
    width: 18px;
    height: 18px;
    accent-color: var(--secondary);
}

.radio-option label {
    cursor: pointer;
    font-weight: 500;
    flex: 1;
}

/* ========== INFO-BULLE ========== */
.info-bulle {
    background-color: rgba(63, 219, 52, 0.1);
    border: 1px solid rgba(63, 219, 52, 0.3);
    padding: 15px;
    border-radius: 8px;
    margin-top: 15px;
    text-align: left;
}

.info-item {
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.info-item:last-child {
    margin-bottom: 0;
}

.info-item i {
    color: var(--secondary);
    font-size: 1.1rem;
    margin-top: 3px;
    flex-shrink: 0;
}

.info-item strong {
    color: var(--secondary);
}

/* ========== PROFIL UTILISATEUR ========== */
.profile-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xl);
    margin-top: var(--spacing-xl);
}

.profile-card {
    flex: 1;
    min-width: 320px;
    background: rgba(0, 0, 0, 0.38);
    border-radius: var(--radius-md);
    padding: var(--spacing-xl);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(63, 219, 52, 0.22);
    transition: all var(--transition-base);
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
}

.profile-card:hover {
    box-shadow: 0 0 35px rgba(0, 200, 0, 0.5);
    border-color: rgba(63, 219, 52, 0.4);
}

.profile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
    border-bottom: 2px solid rgba(63, 219, 52, 0.3);
}

.profile-header h3 {
    margin: 0;
    color: var(--secondary);
    font-size: 1.3rem;
    font-weight: 700;
}

.profile-details table {
    width: 100%;
    background: transparent;
}

.profile-details th {
    text-align: left;
    width: 40%;
    background: transparent;
    color: var(--secondary);
    border: none;
    padding: var(--spacing-sm) 0;
    font-weight: 600;
}

.profile-details td {
    text-align: left;
    border: none;
    padding: var(--spacing-sm) 0;
}

/* ========== BADGES ========== */
.role-badge {
    padding: 0.35rem 0.85rem;
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: var(--shadow-sm);
}

.super-admin-badge {
    background: linear-gradient(135deg, var(--super-admin), #b71c1c);
}

.admin-badge {
    background: linear-gradient(135deg, var(--admin), #1565c0);
}

.enseignant-badge {
    background: linear-gradient(135deg, var(--enseignant), #2e7d32);
}

/* ========== ALERTS & MESSAGES ========== */
.alert {
    padding: var(--spacing-lg);
    margin: var(--spacing-lg) 0;
    border-radius: var(--radius-md);
    text-align: center;
    position: relative;
    backdrop-filter: blur(10px);
    animation: slideInDown 0.4s ease-out;
    font-weight: 500;
}

.success,
.alert-success {
    background: rgba(46, 213, 115, 0.15);
    color: #2ed573;
    border: 2px solid rgba(46, 213, 115, 0.4);
    border-left: 4px solid var(--success);
}

.error,
.alert-danger {
    background: rgba(255, 71, 87, 0.15);
    color: #ff4757;
    border: 2px solid rgba(255, 71, 87, 0.4);
    border-left: 4px solid var(--danger);
}

.alert-success a:not(.btn):not(.close-btn),
.alert-success a:not(.btn):not(.close-btn):visited {
    color: #c8f7d0;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(200, 247, 208, 0.55);
    text-underline-offset: 2px;
}

.alert-success a:not(.btn):not(.close-btn):hover {
    color: #ffffff;
    text-decoration-color: rgba(255, 255, 255, 0.85);
}

.alert-danger a:not(.btn):not(.close-btn),
.alert-danger a:not(.btn):not(.close-btn):visited {
    color: #ffeef0;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(255, 238, 240, 0.55);
    text-underline-offset: 2px;
}

.alert-danger a:not(.btn):not(.close-btn):hover {
    color: #ffffff;
    text-decoration-color: rgba(255, 255, 255, 0.9);
}

.alert-warning a:not(.btn):not(.close-btn),
.alert-warning a:not(.btn):not(.close-btn):visited {
    color: #fff8e1;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(255, 248, 225, 0.5);
    text-underline-offset: 2px;
}

.alert-warning a:not(.btn):not(.close-btn):hover {
    color: #ffffff;
    text-decoration-color: rgba(255, 255, 255, 0.85);
}

.close-btn {
    position: absolute;
    right: var(--spacing-lg);
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-weight: bold;
    font-size: 1.5rem;
    color: inherit;
    transition: transform var(--transition-fast);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.close-btn:hover {
    transform: translateY(-50%) rotate(90deg);
    background: rgba(255, 255, 255, 0.2);
}

/* ========== FOOTER ========== */
footer {
    margin-top: auto;
    font-size: clamp(0.75rem, 1vw, 0.9rem);
    text-align: center;
    padding: var(--spacing-lg) var(--spacing-xl);
    color: rgba(255, 255, 255, 0.7);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

footer img {
    height: auto;
    width: clamp(1.5rem, 2vw, 2rem);
    vertical-align: middle;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* ========== ANIMATIONS ========== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(255, 71, 87, 0.7);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(255, 71, 87, 0);
    }
}

@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

/* ========== RESPONSIVE ========== */
@media (max-width: 1024px) {
    .modules-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
}

@media (max-width: 768px) {
    :root {
        --spacing-xl: 1.5rem;
        --spacing-2xl: 2rem;
    }
    
    .container {
        margin: var(--spacing-md) var(--spacing-sm);
        padding: var(--spacing-lg);
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Tableaux dans l’ancien conteneur .container (sans .isalys-panel--body) */
    .container:has(table.data-table) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }
    
    .modules-grid {
        grid-template-columns: 1fr;
    }
    
    .champsContainer {
        flex-direction: column;
    }
    
    .ChampsAccueil1,
    .ChampsAccueil2 {
        flex: 1;
        max-width: 100%;
    }
    
    .profile-container {
        flex-direction: column;
    }
    
    .header-topbar {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .header-topbar .top-links {
        flex: 1 1 auto;
        justify-content: center;
    }

    .top-links {
        margin-left: 0;
        margin-bottom: 0.2rem;
    }
    
    .top-links li {
        margin-bottom: 0;
    }
    
    .header-menu {
        gap: var(--spacing-sm);
    }
    
    .data-table {
        font-size: 0.85rem;
    }
    
    .data-table th,
    .data-table td {
        padding: 0.7rem 0.5rem;
    }

    /* Évite le débordement horizontal dû au scale au survol (mobile) */
    .data-table tr:hover {
        transform: none;
    }
    
    .eleve-photo {
        width: 45px;
        height: 45px;
    }

    /* Bandeau titre vert : pleine largeur utile, texte lisible */
    .isalys-panel--head {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .isalys-panel--head .container-header {
        padding: var(--spacing-md) max(0.75rem, env(safe-area-inset-left, 0px)) var(--spacing-md) max(0.75rem, env(safe-area-inset-right, 0px));
        box-sizing: border-box;
    }

    .isalys-panel--head .container-header h1 {
        font-size: clamp(1.05rem, 4.2vw, 1.65rem);
    }

    /* Tableaux larges : défilement horizontal dans la page */
    .isalys-page table.data-table {
        max-width: none;
    }
}

@media (max-width: 480px) {
    .container-header h1 {
        font-size: 1.5rem;
    }
    
    .container-header img {
        max-width: 140px;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .stat-value {
        font-size: 2rem;
    }
    
    .btn,
    .btn-block {
        padding: 0.75rem 1.25rem;
        font-size: 0.95rem;
    }
}

/* ========== WRAPPERS PAGES PRÉ-AUTH ========== */

/* Formulaire étroit : connexion, sélection établissement, admin plateforme */
/* (sel-etab-wrap est déjà défini plus bas) */

/* Formulaire/page large : mot de passe oublié (section admin incluse) */
.auth-wide-wrap {
    max-width: 700px;
    margin: 1.75rem auto 0;
    padding: 0 1rem;
    box-sizing: border-box;
}

.auth-wide-wrap .form-container,
.auth-wide-wrap .requests-section,
.auth-wide-wrap .admin-section {
    background: rgba(15, 15, 15, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 255, 128, 0.15);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-lg);
    margin-bottom: 1.25rem;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.auth-wide-wrap .form-container:hover,
.auth-wide-wrap .requests-section:hover,
.auth-wide-wrap .admin-section:hover {
    border-color: var(--isalys-border-glow);
    box-shadow: var(--shadow-lg), var(--isalys-glow);
}

/* ========== SÉLECTION ÉTABLISSEMENT (selection_etablissement.php) ========== */
.sel-etab-wrap {
    max-width: 480px;
    margin: 1.75rem auto 0;
    padding: 0 1rem;
    box-sizing: border-box;
}

.sel-etab-wrap .form-container {
    background: rgba(15, 15, 15, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 255, 128, 0.15);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-lg);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.sel-etab-wrap .form-container:hover {
    border-color: var(--isalys-border-glow);
    box-shadow: var(--shadow-lg), var(--isalys-glow);
}

/* Compatibilite si container-portail reste reference */
.container.container-portail {
    animation: none;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
}
.portail-actions {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    margin: var(--spacing-xl) 0;
    position: relative;
    z-index: 2;
    isolation: isolate;
    align-items: stretch;
}

/* Fenêtre étroite : une colonne */
/* Fenêtre moyenne : deux colonnes */
@media (min-width: 600px) {
    .portail-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Assez de largeur (typique bureau Windows) : trois cartes sur une ligne, largeur égale */
@media (min-width: 900px) {
    .portail-actions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Quatre cartes portail : une ligne lorsque la fenêtre le permet (dimensions proches de l’ancien trio) */
@media (min-width: 1180px) {
    .portail-actions {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    /* Fallback si assets/css/isalys-portail.css absent côté serveur (@import) */
    .portail-cards-wrap {
        max-width: 1280px;
        margin-left: auto;
        margin-right: auto;
    }
    /* Proportions proches du rendu local : cellules carrées, texte limité */
    .portail-card-inner {
        aspect-ratio: 1;
        justify-content: center;
        padding: var(--spacing-lg, 1.5rem);
    }
    .portail-desc {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        overflow: hidden;
    }
}

/* Lien : pas de fond ici (iOS) */
.portail-card {
    display: block;
    min-width: 0;
    box-sizing: border-box;
    text-decoration: none;
    color: #fff;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1);
    transition: all var(--transition-base);
}

.portail-card-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xl);
    min-width: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    background: rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-sizing: border-box;
    transition: all var(--transition-base);
}

.portail-card:hover .portail-card-inner {
    border-color: rgba(63, 219, 52, 0.4);
    box-shadow: var(--shadow-lg), 0 0 20px rgba(63, 219, 52, 0.15);
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
}

.portail-card:hover {
    color: var(--secondary-light);
}

.portail-card-highlight .portail-card-inner {
    border-color: rgba(241, 196, 15, 0.35);
}

.portail-card-highlight:hover .portail-card-inner {
    border-color: rgba(241, 196, 15, 0.55);
    box-shadow: var(--shadow-lg), 0 0 24px rgba(241, 196, 15, 0.2);
}

.portail-icon {
    font-size: 2rem;
    margin-bottom: var(--spacing-xs);
}

.portail-title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--secondary);
}

.portail-desc {
    font-size: clamp(0.82rem, 1.1vw + 0.65rem, 0.92rem);
    opacity: 0.88;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
    max-width: 100%;
    overflow-wrap: break-word;
    hyphens: auto;
}

.portail-card:hover .portail-desc {
    color: rgba(255, 255, 255, 0.95);
}

/* ========== REGISTRY ADMIN (demandes établissements) ========== */
.container.registry-admin {
    max-width: 960px;
}

.registry-section {
    margin-top: var(--spacing-2xl);
}

.registry-section--lead {
    margin-top: var(--spacing-lg);
}

.registry-section .module-title {
    font-size: 1.2rem;
    margin-bottom: var(--spacing-lg);
}

.registry-demande-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.registry-demande-card {
    margin-bottom: 0;
}

.registry-demande-card .module-title,
.registry-demande-card .registry-demande-title {
    font-size: 1.05rem;
    margin-bottom: var(--spacing-md);
    border-bottom: 1px solid rgba(63, 219, 52, 0.25);
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

.registry-demande-title .registry-demande-code {
    font-weight: 500;
    font-size: 0.88rem;
    opacity: 0.88;
}

.registry-demande-meta {
    font-size: 0.95rem;
    line-height: 1.55;
    margin-bottom: var(--spacing-sm);
}

.registry-demande-meta code {
    background: rgba(0, 0, 0, 0.35);
    padding: 0.15rem 0.45rem;
    border-radius: var(--radius-sm);
}

.registry-demande-message {
    white-space: pre-wrap;
    opacity: 0.92;
    margin: var(--spacing-md) 0;
    text-align: left;
    padding: var(--spacing-md);
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-sm);
    border-left: 3px solid rgba(63, 219, 52, 0.35);
}

.registry-demande-date {
    opacity: 0.75;
    font-size: 0.88rem;
    margin-top: var(--spacing-sm);
}

.registry-form-approve {
    margin-top: var(--spacing-lg);
}

.registry-form-approve.btn-group {
    justify-content: flex-start;
}

.registry-form-reject {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.registry-form-reject .form-group {
    text-align: left;
    max-width: 100%;
}

.registry-form-reject .form-group label {
    text-align: left;
}

.registry-form-reject .form-control {
    text-align: left;
}

.registry-flash-code {
    margin-top: var(--spacing-md);
    font-weight: 700;
}

.registry-flash-code code {
    background: rgba(0, 0, 0, 0.35);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
}

.registry-flash-hint {
    opacity: 0.9;
    margin-top: var(--spacing-sm);
    font-size: 0.92rem;
}

.registry-empty {
    opacity: 0.85;
    padding: var(--spacing-md) 0;
}

.badge-status {
    display: inline-block;
    padding: 0.28rem 0.65rem;
    border-radius: var(--radius-full);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.badge-status--pending {
    background: rgba(255, 165, 2, 0.2);
    color: var(--warning);
    border: 1px solid rgba(255, 165, 2, 0.45);
}

.badge-status--approved {
    background: rgba(46, 213, 115, 0.15);
    color: var(--success);
    border: 1px solid rgba(46, 213, 115, 0.4);
}

.badge-status--rejected {
    background: rgba(255, 71, 87, 0.12);
    color: var(--danger);
    border: 1px solid rgba(255, 71, 87, 0.35);
}

.registry-table-wrap {
    margin-top: var(--spacing-md);
}

@media (max-width: 640px) {
    .registry-form-approve.btn-group {
        flex-direction: column;
        align-items: stretch;
    }

    .registry-form-approve.btn-group .btn {
        width: 100%;
    }
}

/* ========== UTILITAIRES ========== */
.text-center {
    text-align: center;
}

.mt-1 { margin-top: var(--spacing-sm); }
.mt-2 { margin-top: var(--spacing-md); }
.mt-3 { margin-top: var(--spacing-lg); }
.mt-4 { margin-top: var(--spacing-xl); }

.mb-1 { margin-bottom: var(--spacing-sm); }
.mb-2 { margin-bottom: var(--spacing-md); }
.mb-3 { margin-bottom: var(--spacing-lg); }
.mb-4 { margin-bottom: var(--spacing-xl); }

.p-1 { padding: var(--spacing-sm); }
.p-2 { padding: var(--spacing-md); }
.p-3 { padding: var(--spacing-lg); }
.p-4 { padding: var(--spacing-xl); }

/* ========== DARK MODE SUPPORT ========== */
@media (prefers-color-scheme: light) {
    /* Optionnel: ajustements si nécessaire */
}

/* ========== PRINT STYLES ========== */
@media print {
    body {
        background: white;
        color: black;
    }
    
    .container {
        box-shadow: none;
        background: white;
    }
    
    .btn,
    .logout-btn,
    .action-btn {
        display: none;
    }
}

/* ============================================
   AJOUTS POUR STATISTIQUES MATIERE
   ============================================ */

/* En-tête centré avec effet fluorescent */
.header-centered-fluor {
    background: linear-gradient(135deg, rgba(30, 30, 30, 0.95), rgba(10, 50, 10, 0.95));
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-xl);
    text-align: center;
    border-bottom: 3px solid var(--secondary);
    box-shadow: var(--shadow-xl), 0 0 20px rgba(63, 219, 52, 0.2); /* Effet Glow */
    position: relative;
    overflow: hidden;
}

.header-centered-fluor h1 {
    font-family: var(--font-display);
    font-size: 2.2rem;
    color: white;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(63, 219, 52, 0.5);
}

/* Grille de sélection du périmètre (Scope) */
.scope-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
    margin-top: var(--spacing-md);
}

.scope-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    cursor: pointer;
    transition: all var(--transition-base);
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%; /* Uniformise la hauteur */
}

.scope-card:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-5px);
    border-color: rgba(63, 219, 52, 0.4);
}

/* État actif (Sélectionné) - Effet Fluorescent Vert Intense */
.scope-card.active {
    border: 2px solid var(--secondary);
    background: rgba(63, 219, 52, 0.08);
    box-shadow: 0 0 20px rgba(63, 219, 52, 0.3), inset 0 0 10px rgba(63, 219, 52, 0.1);
}

.scope-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.scope-radio {
    width: 20px;
    height: 20px;
    accent-color: var(--secondary);
    cursor: pointer;
}

.scope-icon {
    font-size: 1.8rem;
    color: var(--secondary);
    background: rgba(255, 255, 255, 0.05);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.scope-title {
    font-weight: 700;
    color: white;
    font-size: 1.1rem;
}

.scope-description {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: auto;
    font-style: italic;
}

/* Animation pour l'apparition du select */
.scope-select-container {
    margin-top: var(--spacing-md);
    opacity: 0.4;
    pointer-events: none;
    transition: opacity var(--transition-base);
    filter: blur(2px);
}

.scope-card.active .scope-select-container {
    opacity: 1;
    pointer-events: all;
    filter: blur(0);
}

/* Mise en page formulaire flex */
.form-row-flex {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.form-col-flex {
    flex: 1 1 130px;
    min-width: 120px;
    max-width: 210px;
}

/* Ajustements pour le tableau de saisie */
.input-cell {
    width: 100%;
    background: rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    text-align: center;
    color: white;
    padding: 5px !important;
}

.input-cell:focus {
    border-color: var(--secondary) !important;
    box-shadow: 0 0 5px rgba(63, 219, 52, 0.5) !important;
}

/* ============================================
   AJOUTS POUR LISTE UTILISATEURS (Tableau Fixe)
   ============================================ */

/* 1. Configuration du conteneur pour le scroll */
.dark-container-fluor .scrollable-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-md);
}

/* 2. Configuration du tableau : CRUCIAL pour que sticky fonctionne */
.dark-container-fluor .data-table {
    min-width: 1200px; /* Force la largeur pour activer le scroll */
    border-collapse: separate; /* Obligatoire pour position: sticky */
    border-spacing: 0; /* Simule l'effet "collé" */
}

/* Ajustement des bordures car on a enlevé border-collapse: collapse */
.dark-container-fluor .data-table td,
.dark-container-fluor .data-table th {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-right: none;
    border-left: none;
}

/* 3. La Colonne Fixe (CELLULES) */
.dark-container-fluor .data-table tbody .fixed-column {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    /* Fond OPAQUE sombre (plus de transparence) pour masquer le texte qui passe dessous */
    background-color: #1a1a1a; 
    z-index: 5;
    box-shadow: 4px 0 8px rgba(0, 0, 0, 0.4); /* Ombre portée à droite */
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

/* ============================================
   CORRECTIF COLONNE FIXE (SCROLL)
   ============================================ */

/* 1. Force le scroll horizontal */
/* Sans largeur min, le tableau se compresse et le sticky ne s'active pas */
.dark-container-fluor .data-table {
    min-width: 1200px;
}

/* 2. Correction de la superposition (Z-Index) */

/* La colonne fixe des données (td) doit passer au-dessus du contenu normal */
/* On force un fond sombre quasi-opaque pour éviter que le texte défilant ne se voie en transparence */
.data-table td.fixed-column {
    z-index: 5;
    background-color: rgba(20, 20, 20, 0.95) !important; 
    border-right: 2px solid rgba(63, 219, 52, 0.3);
}

/* 3. Le coin haut-gauche (TH + fixed) est l'élément le plus important */
/* Il doit être au-dessus de la ligne d'en-tête (z-10) ET de la colonne fixe (z-5) */
.data-table th.fixed-column {
    z-index: 20;
    background: linear-gradient(135deg, var(--secondary), var(--secondary-dark));
    border-right: 2px solid rgba(255, 255, 255, 0.1);
}

/* =============================================================================
   ISALYS — Thème applicatif (fusionné, une seule feuille)
   ============================================================================= */

/**
 * ISALYS — Thème unifié (à charger après MiseEnForme.css)
 * Panneaux, survol vert fluorescent, notes, statistiques, bulletins, tableau de bord.
 */

/* ========== Enveloppe page (.isalys-page = standard, + .isalys-page--wide = large) ========== */
.isalys-page:not(.isalys-page--wide) {
    max-width: min(var(--isalys-page-max), 100%);
    margin: 1.25rem auto 2rem;
    padding: 0 max(1rem, env(safe-area-inset-right, 0px)) 0 max(1rem, env(safe-area-inset-left, 0px));
    box-sizing: border-box;
    min-width: 0;
}

.isalys-app,
.isalys-page.isalys-page--wide {
    max-width: min(var(--isalys-page-max-wide), 100%);
    margin: 1.25rem auto 2rem;
    padding: 0 max(1rem, env(safe-area-inset-right, 0px)) 0 max(1rem, env(safe-area-inset-left, 0px));
    box-sizing: border-box;
    min-width: 0;
}

.isalys-app--compact {
    max-width: min(var(--isalys-page-max), 100%);
}

/* Blocs pleine largeur sous .isalys-page (stats, modules, tableaux sans panneau body) */
.isalys-page > .data-table-container,
.isalys-page > .module,
.isalys-page > .stats-grid,
.isalys-page > .modules-grid {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.isalys-page > .data-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.isalys-page > .module:has(table),
.isalys-page > .module:has(.scrollable-table),
.isalys-page > .module:has(.data-table) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ========== En-tête de page (aligné sur header-centered-fluor) ========== */
.isalys-page-header {
    background: linear-gradient(135deg, rgba(30, 30, 30, 0.95), rgba(10, 50, 10, 0.95));
    padding: var(--spacing-xl, 1.5rem);
    border-radius: var(--radius-lg, 15px);
    margin-bottom: var(--spacing-xl, 1.5rem);
    text-align: center;
    border-bottom: 3px solid var(--secondary, #3fdb34);
    box-shadow: var(--shadow-xl, 0 8px 32px rgba(0, 0, 0, 0.2)), 0 0 20px rgba(63, 219, 52, 0.2);
    position: relative;
    overflow: hidden;
}

.isalys-page-header h1 {
    font-family: var(--font-display, 'Segoe UI', sans-serif);
    font-size: clamp(1.35rem, 3vw, 2rem);
    color: #fff;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    text-shadow: 0 0 10px rgba(63, 219, 52, 0.45);
}

.isalys-page-header .isalys-page-subtitle,
.isalys-text-muted {
    color: rgba(255, 255, 255, 0.72);
    margin-top: 0.65rem;
    font-size: 0.98rem;
}

.header-centered-fluor .isalys-text-muted {
    margin-top: 10px;
}

/* ========== Panneaux filtres / critères ========== */
.isalys-panel-spaced {
    margin-bottom: 3rem;
}

/* ========== Statistiques : conteneur large (alias stats-container) ========== */
.stats-container.isalys-layout-wide,
.isalys-stats-layout {
    max-width: 1600px;
    margin: 2rem auto;
    padding: 0 1rem;
}

/* ========== Graphiques Chart.js ========== */
.isalys-chart-wrapper,
.chart-wrapper {
    position: relative;
    height: 300px;
    width: 100%;
}

/* ========== Boutons d’action secondaires (export) ========== */
.btn-excel {
    background: #217346 !important;
    border-color: #1e6b40 !important;
    color: #fff !important;
}

.btn-excel:hover {
    filter: brightness(1.1);
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(33, 115, 70, 0.45);
}

.btn-stats-advanced {
    background: var(--info, #3498db) !important;
    border-color: var(--info, #3498db) !important;
    color: #fff !important;
}

.btn-stats-advanced:hover {
    transform: translateY(-3px);
    filter: brightness(1.12);
    box-shadow: 0 6px 18px rgba(52, 152, 219, 0.45);
}

/* ========== Titres de sections dans tableaux ========== */
.isalys-section-heading {
    color: var(--secondary, #3fdb34);
    text-align: left;
    margin-bottom: 0.5rem;
    font-size: 1.15rem;
    font-weight: 600;
}

.isalys-section-heading--center {
    text-align: center;
}

/* ========== Cellules & badges conditionnels ========== */
.isalys-table-matiere {
    padding-left: 1.25rem;
}

.stat-pill {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-full, 9999px);
    font-weight: 600;
    font-size: 0.9rem;
}

.stat-pill--success {
    background: var(--success-dark, #26be64);
    color: #fff;
}

.stat-pill--danger {
    background: var(--danger, #ff4757);
    color: #fff;
}

.btn-stats-detail {
    padding: 5px 15px;
    font-size: 0.8rem;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.isalys-module-narrow {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.isalys-moyenne-highlight {
    color: var(--success, #2ed573);
    font-weight: bold;
}

.isalys-discipline-alert {
    color: var(--danger, #ff4757);
    font-weight: bold;
}

/* ========== Notes : survol lignes (remplace JS inline) ========== */
.notes-data-table tbody tr {
    transition: background-color var(--transition-fast, 0.15s ease);
}

.notes-data-table tbody tr:hover {
    background-color: rgba(63, 219, 52, 0.1);
}

.notes-editable-field.notes-editable-field--invalid {
    border-color: var(--danger, #ff4757) !important;
    box-shadow: 0 0 0 1px rgba(255, 71, 87, 0.35);
}

/* ========== Cartes cliquables : feedback sans style inline ========== */
.isalys-card-pressable:active,
.module-link:not(.coming-soon):active {
    transform: scale(0.98);
}

.stat-card.isalys-card-pressable,
.module-link:not(.coming-soon) {
    transition: transform var(--transition-fast, 0.15s ease);
}

/* ========== Message flottant notes ========== */
.status-message {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    display: none;
    padding: 0.75rem 1.25rem;
    background: rgba(0, 0, 0, 0.85);
    border: 1px solid var(--secondary, #3fdb34);
    border-radius: var(--radius-md, 10px);
    color: #fff;
    box-shadow: var(--shadow-lg, 0 8px 32px rgba(0, 0, 0, 0.2));
}

.status-message.is-visible {
    display: block;
}

/* ========== Harmonisation titres formulaire notes ========== */
.dark-container-fluor .form-title h1,
.form-title h1 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* =============================================================================
   ISALYS — Design system unifié (panels, survol vert fluorescent, bulletins)
   Référence : note_liste (dark-container-fluor + header-centered-fluor),
   Navigation (icônes colorées), bulletins (selection-card), scope-card actif
   ============================================================================= */


/* --- Surfaces interactives : même « vert néon » au survol --- */
.dark-container-fluor:hover,
.isalys-panel:hover,
.selection-card:hover,
.scope-card:hover {
    box-shadow: var(--isalys-glow), var(--shadow-lg, 0 8px 32px rgba(0, 0, 0, 0.2));
    border-color: var(--isalys-border-glow);
}

.dark-container-fluor:hover {
    box-shadow: var(--isalys-glow), 0 0 25px rgba(0, 200, 0, 0.35);
}

.module:hover {
    border-color: rgba(63, 219, 52, 0.35);
    box-shadow: var(--isalys-glow-soft), var(--shadow-lg, 0 8px 32px rgba(0, 0, 0, 0.2));
}

.selection-card:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.14);
}

/* Panneaux de section (largeur page dans .container) */
.isalys-panel {
    background: rgba(0, 0, 0, 0.30);
    border-radius: var(--radius-lg, 15px);
    padding: var(--spacing-xl, 1.5rem);
    margin-bottom: var(--spacing-xl, 1.5rem);
    text-align: inherit;
    border: 1px solid rgba(63, 219, 52, 0.22);
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
    transition:
        box-shadow var(--transition-base, 0.3s ease-in-out),
        border-color var(--transition-base, 0.3s ease-in-out),
        transform var(--transition-base, 0.3s ease-in-out);
    position: relative;
    animation: fadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.isalys-panel:last-of-type {
    margin-bottom: 0;
}

.isalys-panel--hero {
    padding: 0;
    overflow: hidden;
    text-align: center;
    background: linear-gradient(135deg, rgba(30, 30, 30, 0.96), rgba(10, 50, 10, 0.92));
    border-bottom: 3px solid var(--secondary, #3fdb34);
    box-shadow: var(--shadow-xl, 0 16px 48px rgba(0, 0, 0, 0.3)), var(--isalys-glow-soft);
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.isalys-panel--hero:hover {
    box-shadow: var(--shadow-xl), var(--isalys-glow);
    border-color: var(--isalys-border-glow);
}

.isalys-panel--hero .container-header {
    margin-bottom: 0;
    padding: var(--spacing-xl, 1.5rem);
}

.isalys-panel--hero .container-header h1 {
    color: #fff;
    text-shadow: 0 0 12px rgba(63, 219, 52, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.isalys-panel--hero .container-header p {
    color: rgba(255, 255, 255, 0.82);
}

.isalys-panel--hero hr {
    display: none;
}

.isalys-panel--stats .stats-grid {
    margin-top: var(--spacing-md, 1rem);
    margin-bottom: 0;
}

.isalys-panel--modules .modules-grid {
    margin-bottom: 0;
}

.isalys-panel--enseignant .champsContainer {
    margin: 0;
}

/* ===== Tableau de bord (Navigation.php) ===== */

/* Titre hors conteneur flou : centré, largeur naturelle de la page */
.nav-hero-wrap {
    max-width: 1200px;
    margin: 1.25rem auto 0;
    padding: 0 1rem;
    box-sizing: border-box;
}

.nav-hero-wrap .isalys-panel--hero {
    /* le panel garde son propre style gradient+bordure,
       il n'a plus le backdrop-filter du .container autour */
    margin-bottom: 0;
    border-radius: var(--radius-lg);
}

/* Conteneurs flous du tableau de bord (effectifs + modules) */
.container.isalys-dashboard-shell {
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    box-shadow: var(--shadow-xl), 0 0 28px rgba(63, 219, 52, 0.1);
    margin-top: 1.25rem;
}

/* Cards effectifs : aucun conteneur autour, juste l'espacement et la grille centrée */
.nav-stats-wrap {
    max-width: 1200px;
    margin: 1.25rem auto 0;
    padding: 0 1rem;
    box-sizing: border-box;
}

.nav-stats-wrap .stats-grid {
    margin: 0;
}

/* Modules sans aucun conteneur — centrage + espacement seulement */
.nav-modules-wrap {
    max-width: 1200px;
    margin: 1.25rem auto 0;
    padding: 0 1rem;
    box-sizing: border-box;
}

.nav-modules-wrap .modules-grid {
    margin-bottom: var(--spacing-lg);
}

/* Bulletins / formulaires en colonne dans les panneaux */
.dark-container-fluor form,
.isalys-panel--body form:not(.notes-filter-form) {
    display: flex;
    flex-direction: column;
    /* stretch : les sections / tableaux prennent toute la largeur du panneau (évite débordement du cadre vert) */
    align-items: stretch;
    gap: 1.25rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Blocs volontairement centrés et plus étroits que le panneau */
.dark-container-fluor form > .isalys-btn-row--nowrap-gap,
.dark-container-fluor form > .btn-group:not(.btn-group--flush),
.dark-container-fluor form > .text-center,
.dark-container-fluor form > .portail-footer-wrap,
.isalys-panel--body form:not(.notes-filter-form) > .isalys-btn-row--nowrap-gap,
.isalys-panel--body form:not(.notes-filter-form) > .btn-group:not(.btn-group--flush),
.isalys-panel--body form:not(.notes-filter-form) > .text-center,
.isalys-panel--body form:not(.notes-filter-form) > .portail-footer-wrap {
    align-self: center;
    width: auto;
    max-width: 100%;
}

.cards-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

.selection-card.small-card {
    flex: 1 1 calc(33.333% - 20px);
    min-width: 250px;
    max-width: 280px;
}

.selection-card.large-card {
    flex: 1 1 100%;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* Liens module : barre + texte cohérents avec le vert secondaire */
.module-link:not(.coming-soon):hover {
    color: var(--secondary-light, #5ce851);
}

/* Icônes dans les liens : garder la teinte (Navigation) */
.module-link:not(.coming-soon):hover i[class*="icon-"] {
    filter: brightness(1.15);
}

/* =============================================================================
   Coquille & panneaux — toutes les pages outil (titres / contenus séparés)
   ============================================================================= */

/* Bandeau titre (listes, formulaires) — dimensionné au contenu, centré */
.isalys-panel--head {
    padding: 0;
    overflow: hidden;
    text-align: center;
    background: linear-gradient(135deg, rgba(30, 30, 30, 0.96), rgba(10, 50, 10, 0.92));
    border: 2px solid var(--secondary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl), var(--isalys-glow-soft);
    /* Clé : dimensionné au contenu, centré */
    width: fit-content;
    min-width: 260px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--spacing-xl);
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.isalys-panel--head:hover {
    box-shadow: var(--shadow-xl), var(--isalys-glow);
    border-color: var(--isalys-border-glow);
    transform: translateY(-2px);
}

.isalys-panel--head .container-header {
    margin-bottom: 0;
    padding: var(--spacing-md) var(--spacing-xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
}

/* Bouton sous le titre (jamais à côté), centré */
.isalys-panel--head .container-header > .btn {
    align-self: center;
    white-space: nowrap;
}

.isalys-panel--head .container-header h1 {
    color: #fff;
    text-shadow: 0 0 12px rgba(63, 219, 52, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    max-width: 100%;
    text-align: center;
    line-height: 1.25;
}

.isalys-panel--head .container-header p {
    color: rgba(255, 255, 255, 0.82);
    margin-top: 0;
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
}

.isalys-panel--body {
    text-align: inherit;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Lien dans un texte d’aide (fond sombre) — contraste lisible, évite le violet « visité » par défaut */
a.isalys-text-link,
a.isalys-text-link:visited,
.isalys-page .no-data a:not([class]),
.isalys-page .no-data a:not([class]):visited {
    color: #7dd3fc;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(125, 211, 252, 0.45);
    text-underline-offset: 2px;
    transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}

a.isalys-text-link:hover,
.isalys-page .no-data a:not([class]):hover {
    color: #e0f2fe;
    text-decoration-color: rgba(224, 242, 254, 0.75);
}

a.isalys-text-link:focus-visible,
.isalys-page .no-data a:not([class]):focus-visible {
    outline: 2px solid var(--secondary-light);
    outline-offset: 2px;
    border-radius: 2px;
}

.isalys-panel--table {
    text-align: inherit;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: var(--spacing-xl);
    /* Même effet verre dépoli que les autres .isalys-panel */
    background: rgba(0, 0, 0, 0.48);
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
}

.isalys-panel--table .data-table {
    text-align: left;
}

/* Mes classes / matières — actions lisibles sur fond sombre (liens icônes) */
.isalys-panel--table .action-links {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.isalys-panel--table .action-links a.action-mes-notes,
.isalys-panel--table .action-links a.action-mes-competences {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.35rem;
    min-height: 2.35rem;
    padding: 0.4rem 0.55rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.32);
    background: rgba(12, 14, 18, 0.78);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 2px 8px rgba(0, 0, 0, 0.35);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.isalys-panel--table .action-links a.action-mes-notes:hover,
.isalys-panel--table .action-links a.action-mes-competences:hover {
    transform: translateY(-2px);
    background: rgba(24, 28, 34, 0.95);
    border-color: rgba(255, 255, 255, 0.48);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}

.isalys-panel--table .action-links a.action-mes-notes i {
    color: #ffe082;
    font-size: 1.05rem;
    filter: drop-shadow(0 0 8px rgba(255, 213, 79, 0.55));
}

.isalys-panel--table .action-links a.action-mes-competences i {
    color: #80deea;
    font-size: 1.05rem;
    filter: drop-shadow(0 0 8px rgba(0, 188, 212, 0.5));
}

.isalys-panel--table .action-links a.action-mes-notes:focus-visible,
.isalys-panel--table .action-links a.action-mes-competences:focus-visible {
    outline: 2px solid var(--secondary-light);
    outline-offset: 2px;
}

/* Colonnes Actions (listes élèves, matières, compétences, etc.) — lisibles sur fond sombre */
.isalys-panel--table td.actions,
.isalys-panel--table td.action-btns,
.isalys-page .data-table td.actions,
.isalys-page .data-table td.action-btns,
.data-table-container .data-table td.actions,
.data-table-container .data-table td.action-btns {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.isalys-panel--table .action-icon,
.isalys-page .data-table .action-icon,
.data-table-container .data-table .action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.35rem;
    min-height: 2.35rem;
    padding: 0.4rem 0.55rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.32);
    background: rgba(12, 14, 18, 0.78);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 2px 8px rgba(0, 0, 0, 0.35);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.isalys-panel--table .action-icon:hover,
.isalys-page .data-table .action-icon:hover,
.data-table-container .data-table .action-icon:hover {
    transform: translateY(-2px);
    background: rgba(24, 28, 34, 0.95);
    border-color: rgba(255, 255, 255, 0.45);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}

.isalys-panel--table .action-icon.edit-btn i,
.isalys-page .data-table .action-icon.edit-btn i,
.data-table-container .data-table .action-icon.edit-btn i {
    color: #81d4fa;
    margin-right: 0;
    font-size: 1.05rem;
    filter: drop-shadow(0 0 8px rgba(100, 200, 255, 0.45));
}

.isalys-panel--table .action-icon.delete-btn i,
.isalys-page .data-table .action-icon.delete-btn i,
.data-table-container .data-table .action-icon.delete-btn i {
    color: #ff8a80;
    margin-right: 0;
    font-size: 1.05rem;
    filter: drop-shadow(0 0 8px rgba(255, 100, 100, 0.45));
}

.isalys-panel--table .action-icon:focus-visible,
.isalys-page .data-table .action-icon:focus-visible,
.data-table-container .data-table .action-icon:focus-visible {
    outline: 2px solid var(--secondary-light);
    outline-offset: 2px;
}

.isalys-panel--table .action-btn,
.isalys-page .data-table .action-btn,
.data-table-container .data-table .action-btn {
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(12, 14, 18, 0.78);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 2px 8px rgba(0, 0, 0, 0.35);
}

.isalys-panel--table .action-btn:hover,
.isalys-page .data-table .action-btn:hover,
.data-table-container .data-table .action-btn:hover {
    transform: translateY(-2px);
    background: rgba(24, 28, 34, 0.92);
    border-color: rgba(255, 255, 255, 0.42);
}

.isalys-panel--table .action-btn.edit-btn i,
.isalys-page .data-table .action-btn.edit-btn i,
.data-table-container .data-table .action-btn.edit-btn i {
    color: #81d4fa;
    margin-right: 0;
    filter: drop-shadow(0 0 8px rgba(100, 200, 255, 0.4));
}

.isalys-panel--table .action-btn.delete-btn i,
.isalys-page .data-table .action-btn.delete-btn i,
.data-table-container .data-table .action-btn.delete-btn i {
    color: #ff8a80;
    filter: drop-shadow(0 0 8px rgba(255, 100, 100, 0.4));
}

/* Lien « Liste » matière : texte + icône */
.isalys-panel--table .action-btn.edit-btn,
.isalys-page .data-table .action-btn.edit-btn,
.data-table-container .data-table .action-btn.edit-btn {
    gap: 0.35rem;
    padding-left: 0.65rem;
    padding-right: 0.65rem;
    min-height: 2.35rem;
}

.isalys-panel--table .action-btn.edit-btn span,
.isalys-page .data-table .action-btn.edit-btn span,
.data-table-container .data-table .action-btn.edit-btn span {
    color: rgba(255, 255, 255, 0.92);
    font-weight: 600;
    font-size: 0.85rem;
}

/* Pied d’actions dans la coquille */
.isalys-page > .container-footer {
    margin-top: 0;
    padding-top: var(--spacing-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Ancien .container plein verre : survol aligné sur les panneaux */
.container:not(.container-portail):hover {
    box-shadow: var(--shadow-xl), var(--isalys-glow-soft);
    border-color: rgba(63, 219, 52, 0.22);
}

/* Section import (matières, etc.) */
.import-section {
    background: rgba(0, 0, 0, 0.4);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    width: 100%;
    max-width: 860px;
    margin: 0 auto var(--spacing-md);
    border: 1px solid rgba(63, 219, 52, 0.2);
}

.import-section .alert ul {
    margin: 10px 0;
    padding-left: 20px;
    text-align: left;
}

/* ====== Photo + Nom columns fixées (eleve_liste) ====== */
.fixed-column-photo {
    position: sticky;
    position: -webkit-sticky;
    left: 0;
    min-width: 90px;
    max-width: 90px;
    background-color: #1a1a1a;
    z-index: 5;
    border-right: none;
}
.fixed-column-nom {
    position: sticky;
    position: -webkit-sticky;
    left: 90px;
    min-width: 160px;
    background-color: #1a1a1a;
    z-index: 5;
    box-shadow: 3px 0 8px rgba(0,0,0,0.5);
}
.data-table th.fixed-column-photo {
    background: linear-gradient(135deg, var(--secondary), var(--secondary-dark));
    z-index: 20;
}
.data-table th.fixed-column-nom {
    background: linear-gradient(135deg, var(--secondary), var(--secondary-dark));
    z-index: 20;
}
.data-table tr:nth-child(even) td.fixed-column-photo,
.data-table tr:nth-child(even) td.fixed-column-nom {
    background-color: #141414;
}
.data-table tr:hover td.fixed-column-photo,
.data-table tr:hover td.fixed-column-nom {
    background-color: #1e3a1e;
}

/* ===== Page attente (compte en validation) — mise en page soignée ===== */
.isalys-panel--attente {
    text-align: center;
}

.attente-hero {
    max-width: 38rem;
    margin: 0 auto;
    padding-bottom: var(--spacing-lg);
}

.attente-badge-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: var(--spacing-lg);
}

/* Grand picto page attente (sans cercle) — même clignotement que .isalys-waiting-blink */
.attente-waiting-mascot {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0.25rem 0 1.75rem;
}

.attente-waiting-mascot__figure {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(6.5rem, 28vw, 14rem);
    line-height: 1;
    color: #22c55e;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.12),
        0 8px 28px rgba(34, 197, 94, 0.35);
    filter: drop-shadow(0 8px 20px rgba(34, 197, 94, 0.45));
}

/* Clignotement partagé : en-tête + page attente */
.isalys-waiting-blink {
    animation: isalys-waiting-blink 1.2s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

@keyframes isalys-waiting-blink {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.3;
        transform: scale(0.97);
    }
}

.isalys-panel--attente .badge-waiting {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 1.15rem;
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
    background: linear-gradient(
        135deg,
        rgba(63, 219, 52, 0.22) 0%,
        rgba(34, 197, 94, 0.12) 100%
    );
    border: 1px solid rgba(63, 219, 52, 0.4);
    border-radius: var(--radius-full);
    box-shadow: var(--isalys-glow-soft);
}

.isalys-panel--attente .badge-waiting i {
    color: var(--secondary-light);
    font-size: 0.95em;
}

.isalys-panel--attente .waiting-title {
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 4vw, 1.75rem);
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 var(--spacing-md);
    color: rgba(255, 255, 255, 0.96);
    letter-spacing: -0.02em;
}

.isalys-panel--attente .waiting-subtitle {
    margin: 0 auto;
    max-width: 34rem;
    font-size: 1.05rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.68);
}

.isalys-panel--attente .section-divider--attente {
    border: none;
    height: 1px;
    max-width: 28rem;
    margin: var(--spacing-xl) auto;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(63, 219, 52, 0.45),
        rgba(255, 255, 255, 0.12),
        rgba(63, 219, 52, 0.45),
        transparent
    );
    opacity: 0.9;
}

.isalys-panel--attente .admin-contact-card {
    max-width: 32rem;
    margin: 0 auto;
    padding: var(--spacing-xl);
    text-align: left;
    background: var(--bg-glass);
    border: 1px solid rgba(63, 219, 52, 0.2);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md), var(--isalys-glow-soft);
}

.isalys-panel--attente .admin-contact-card h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 var(--spacing-md);
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.95);
}

.isalys-panel--attente .admin-contact-card h3 i {
    color: var(--secondary);
}

.isalys-panel--attente .admin-contact-card p {
    margin: 0 0 var(--spacing-lg);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
}

.isalys-panel--attente .admin-contact-card .btn-group {
    justify-content: flex-start;
    flex-wrap: wrap;
}

@media (prefers-reduced-motion: reduce) {
    .isalys-waiting-blink {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* Alerte d’erreur session affichée sous l’en-tête (Entete) */
.isalys-flash-error-banner {
    margin: 0 auto;
    padding: 0.35rem 1rem 0;
    max-width: var(--isalys-page-max-wide);
}

/* ========== Page Paramètres système ========== */
.page-parametres-systeme .page-parametres-systeme__lead {
    margin: 0.5rem 0 0;
    font-size: 1rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.75);
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5;
}

.page-parametres-systeme__panel {
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
}

.page-parametres-systeme__flash {
    margin-bottom: var(--spacing-lg);
}

.page-parametres-systeme .parametres-section {
    margin-bottom: var(--spacing-xl);
    text-align: left;
}

.page-parametres-systeme .parametres-section:last-of-type {
    margin-bottom: var(--spacing-md);
}

.page-parametres-systeme__pdf-alert {
    border-left: 4px solid var(--warning);
    background: rgba(255, 165, 2, 0.08);
    margin-bottom: var(--spacing-xl);
}

.page-parametres-systeme__pdf-alert-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.05rem;
    margin-bottom: 0.35rem;
}

.page-parametres-systeme__pdf-alert-head i {
    color: var(--warning);
    font-size: 1.2rem;
}

.page-parametres-systeme__pdf-alert-text {
    margin: 0 0 0.5rem;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.95rem;
}

.page-parametres-systeme__missing-list {
    margin: 0;
    padding-left: 1.25rem;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.55;
}

.page-parametres-systeme__missing-list li {
    margin-bottom: 0.35rem;
}

.page-parametres-systeme__logo-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md);
    background: rgba(0, 0, 0, 0.35);
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.12);
    margin-top: 0.5rem;
}

.page-parametres-systeme__logo-img {
    max-width: 200px;
    max-height: 200px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--radius-sm);
}

.page-parametres-systeme__checkbox {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: var(--spacing-md);
    cursor: pointer;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
}

.page-parametres-systeme__checkbox input {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--secondary);
}

.page-parametres-systeme__textarea {
    min-height: 140px;
    font-family: var(--font-primary);
    line-height: 1.45;
}

.page-parametres-systeme__submit {
    margin-top: var(--spacing-2xl);
    padding-top: var(--spacing-xl);
    border-top: 1px solid rgba(63, 219, 52, 0.2);
    text-align: center;
}

.page-parametres-systeme__submit .btn {
    min-width: 220px;
    padding: 0.65rem 1.5rem;
    font-weight: 600;
}

/* ——— Bascule langue Fr | En (en-tête + pages portail) ——— */
/* Toujours une seule ligne : pas le display:flex « menu » de .top-links a/span */
.header-lang-switch {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.2rem;
    white-space: nowrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

.top-links li.header-lang-switch {
    margin-bottom: 0;
}

.header-lang-switch a {
    display: inline;
    opacity: 0.85;
    text-decoration: none;
    color: inherit;
    padding: 0.15rem 0.35rem;
    border-radius: var(--radius-sm);
    font-weight: 500;
    white-space: nowrap;
}

/* Annule .top-links a { display:flex; gap:... } pour Fr | En uniquement */
.top-links li.header-lang-switch > a {
    display: inline;
}

.header-lang-switch a:hover {
    opacity: 1;
    text-decoration: underline;
}

.header-lang-switch a.is-active {
    opacity: 1;
    font-weight: 600;
}

.header-lang-sep {
    display: inline;
    opacity: 0.45;
    user-select: none;
    padding: 0 0.12rem;
    flex-shrink: 0;
}

/* Le séparateur | ne doit pas hériter du display:flex des .top-links span */
.top-links li.header-lang-switch > .header-lang-sep {
    display: inline;
    padding: 0 0.12rem;
}

.portail-lang-switch {
    margin: 0.65rem 0 0;
    text-align: center;
}

.portail-lang-switch .header-lang-switch {
    vertical-align: middle;
}

.page-portail .container-header .portail-lang-switch .header-lang-switch {
    justify-content: center;
}

.page-portail .isalys-panel--head .portail-lang-switch {
    margin-top: 0.5rem;
}

/* Lien d'évitement accessibilité */
.isalys-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 10000;
    padding: 0.5rem 1rem;
    background: #111;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius-sm);
}

.isalys-skip-link:focus,
.isalys-skip-link:focus-visible {
    left: 0.5rem;
    top: 0.5rem;
    outline: 2px solid var(--secondary-light);
    outline-offset: 2px;
}

.isalys-main-landmark {
    display: block;
}