/* ════════════════════════════════════════════════════════════════════
   QualiSoft — feuille de style unique des trois intranets.

   Elle remplace portal_etudiant.css, portal_enseignant.css et
   portal_scolarite.css, qui définissaient les MÊMES noms de classe avec
   des valeurs différentes : trois espaces qui paraissaient trois
   applications distinctes alors qu'ils partageaient déjà tout leur
   vocabulaire de mise en page.

   La base retenue est celle de l'intranet apprenant — en-tête clair,
   navigation en onglets textuels, colonne centrée — enrichie du
   comportement adaptatif de l'espace scolarité : grilles qui se
   recomposent, tableaux qui défilent, en-tête qui se replie.

   Une seule variable distingue les trois espaces : --qs-espace, la
   couleur du mot qui suit « QualiSoft ». Repère discret pour qui
   travaille avec plusieurs onglets ouverts, sans rompre l'unité.
════════════════════════════════════════════════════════════════════ */

:root {
    --qs-accent:      #4f46e5;
    --qs-accent-doux: #eef2ff;
    --qs-accent-fonce:#3730a3;
    --qs-texte:       #1f2937;
    --qs-texte-doux:  #6b7280;
    --qs-texte-faible:#9ca3af;
    --qs-fond:        #f6f7fb;
    --qs-surface:     #ffffff;
    --qs-bordure:     #e8e8ee;
    --qs-succes:      #0f9d58;
    --qs-succes-doux: #dcfce7;
    --qs-alerte:      #c2410c;
    --qs-alerte-doux: #ffedd5;
    --qs-danger:      #dc2626;
    --qs-danger-doux: #fee2e2;
    --qs-rayon:       12px;
    --qs-rayon-petit: 8px;
    --qs-ombre:       0 1px 2px rgba(16, 24, 40, .04);
    --qs-espace:      var(--qs-accent);
}

.qs-apprenant  { --qs-espace:#4f46e5; }
.qs-formateur  { --qs-espace:#0369a1; }
.qs-scolarite  { --qs-espace:#0f766e; }
.qs-admission  { --qs-espace:#b45309; }
.qs-finance    { --qs-espace:#0d9488; }

/* ── Ossature ──────────────────────────────────────────────────── */
* { box-sizing:border-box; }

body, .pe-body {
    margin:0; background:var(--qs-fond); color:var(--qs-texte);
    font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                "Helvetica Neue", Arial, sans-serif;
    font-size:15px; line-height:1.5;
    -webkit-font-smoothing:antialiased;
}
.pe-page { min-height:100vh; display:flex; flex-direction:column; }
.pe-main { flex:1; padding:18px 0 48px; }
.pe-container { max-width:940px; margin:0 auto; padding:0 16px; }

/* ── En-tête ───────────────────────────────────────────────────── */
.pe-header {
    background:var(--qs-surface); border-bottom:1px solid var(--qs-bordure);
    position:sticky; top:0; z-index:100;
}
.pe-header-inner {
    max-width:940px; margin:0 auto; padding:0 16px;
    display:flex; align-items:center; justify-content:space-between;
    gap:12px; min-height:58px;
}
.pe-logo {
    display:flex; align-items:center; gap:10px;
    text-decoration:none; min-width:0;
}
.pe-logo:hover { text-decoration:none; }
.pe-logo-img {
    height:34px; width:34px; flex-shrink:0; display:block;
    border-radius:9px; background:#fff;
}
.pe-logo-txt {
    font-weight:800; font-size:1.08rem; letter-spacing:.01em;
    color:var(--qs-texte); line-height:1.1; white-space:nowrap;
}
.pe-logo-txt span { color:var(--qs-espace); font-weight:600; }
.pe-logout {
    font-size:13px; color:var(--qs-texte-doux); text-decoration:none;
    white-space:nowrap;
}
.pe-logout:hover { color:var(--qs-accent); text-decoration:none; }

/* ── Navigation ────────────────────────────────────────────────── */
/* La barre occupe toute la largeur — sinon son fond blanc s'arrêterait
   au milieu de l'écran — mais son contenu s'aligne sur la colonne
   centrale grâce à un retrait calculé. */
.pe-nav {
    background:var(--qs-surface); border-bottom:1px solid var(--qs-bordure);
    display:flex; gap:2px;
    padding-inline:max(16px, calc((100% - 940px) / 2));
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
}
.pe-nav::-webkit-scrollbar { display:none; }
.pe-nav-item {
    padding:12px 14px; font-size:14px; font-weight:500; white-space:nowrap;
    color:var(--qs-texte-doux); text-decoration:none;
    border-bottom:2px solid transparent; transition:color .12s;
}
.pe-nav-item:hover, .pe-nav-item.active {
    color:var(--qs-accent); text-decoration:none;
    border-bottom-color:var(--qs-accent);
}

/* ── Cartes ────────────────────────────────────────────────────── */
.pe-card {
    background:var(--qs-surface); border:1px solid var(--qs-bordure);
    border-radius:var(--qs-rayon); padding:16px; margin-bottom:12px;
    box-shadow:var(--qs-ombre);
}
.pe-card-accent  { border-left:3px solid var(--qs-accent); }
.pe-card-success { border-left:3px solid var(--qs-succes); }
.pe-card-warning { border-left:3px solid var(--qs-alerte); }
.pe-card-danger  { border-left:3px solid var(--qs-danger); }
.pe-card-info    { border-left:3px solid #0284c7; }
.pe-card-meet    { border-left:3px solid var(--qs-succes); }
.pe-card-open    { border-left:3px solid var(--qs-succes); }
.pe-section-title {
    font-size:13px; font-weight:700; text-transform:uppercase;
    letter-spacing:.05em; color:var(--qs-texte-faible);
    margin:22px 0 8px 2px;
}

/* ── Indicateurs chiffrés ──────────────────────────────────────── */
.pe-stats-grid, .sco-tuiles {
    display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
    gap:10px; margin-bottom:16px;
}
.pe-stat, .sco-tuile {
    background:var(--qs-surface); border:1px solid var(--qs-bordure);
    border-radius:var(--qs-rayon); padding:16px 12px; text-align:center;
    box-shadow:var(--qs-ombre); text-decoration:none; color:inherit;
    display:block;
}
.sco-tuile:hover { text-decoration:none; border-color:var(--qs-accent); }
.pe-stat-value, .sco-chiffre {
    font-size:1.75rem; font-weight:800; color:var(--qs-accent); line-height:1;
}
.pe-stat-label, .sco-libelle {
    font-size:12px; color:var(--qs-texte-doux); margin-top:6px;
}
.pe-stat-warning .pe-stat-value,
.sco-alerte .sco-chiffre { color:var(--qs-alerte); }
.pe-heures-total { font-size:1.4rem; font-weight:800; color:var(--qs-accent); }

/* ── Emploi du temps et séances ────────────────────────────────── */
.pe-edt-nav, .sco-semaine-nav {
    display:flex; align-items:center; justify-content:space-between;
    gap:10px; margin-bottom:16px; flex-wrap:wrap;
}
.pe-edt-titre { font-weight:700; text-align:center; }
.pe-jour-bloc, .sco-jour { margin-bottom:16px; }
.pe-jour-header, .sco-jour-titre, .pe-mois-header {
    font-weight:700; font-size:.92rem; text-transform:capitalize;
    color:#334155; margin:0 0 6px 2px;
}
.pe-jour-header.aujourd-hui,
.sco-jour-actuel .sco-jour-titre { color:var(--qs-accent); }
.pe-jour-vide {
    background:var(--qs-surface); border:1px dashed var(--qs-bordure);
    border-radius:var(--qs-rayon); padding:14px; text-align:center;
    color:var(--qs-texte-faible); font-size:13px; margin-bottom:8px;
}
.pe-seance-card {
    display:flex; align-items:center; gap:12px;
    background:var(--qs-surface); border:1px solid var(--qs-bordure);
    border-radius:var(--qs-rayon); padding:12px 14px; margin-bottom:8px;
    text-decoration:none; color:inherit; box-shadow:var(--qs-ombre);
    transition:border-color .12s, transform .12s;
}
.pe-seance-card:hover {
    text-decoration:none; border-color:var(--qs-accent);
    transform:translateY(-1px);
}
.pe-seance-heure {
    display:flex; flex-direction:column; align-items:center;
    min-width:52px; font-size:12px; color:var(--qs-texte-doux);
    line-height:1.3; flex-shrink:0;
}
.pe-seance-heure strong { font-size:14px; color:var(--qs-texte); }
.pe-seance-info { flex:1; min-width:0; }
.pe-seance-matiere {
    font-weight:600; font-size:14.5px; color:var(--qs-texte);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pe-seance-meta { font-size:12.5px; color:var(--qs-texte-doux); margin-top:2px; }

/* ── Pastilles ─────────────────────────────────────────────────── */
.pe-badge, .pe-seance-badge, .pe-etat-badge, .sco-etat, .pe-badge-groupe {
    font-size:11.5px; font-weight:600; padding:3px 10px; border-radius:11px;
    background:#eef2f7; color:#475569; white-space:nowrap;
    align-self:center; display:inline-block;
}
.pe-badge-visio, .pe-badge-ouvert,
.sco-etat-planifiee, .sco-etat-signe,
.sco-etat-insc-termine    { background:var(--qs-accent-doux); color:var(--qs-accent-fonce); }
.pe-badge-present, .pe-etat-confirme, .pe-etat-en_cours,
.sco-etat-terminee, .sco-etat-valide, .sco-etat-just-valide,
.sco-etat-insc-confirme, .sco-etat-insc-en_cours
                          { background:var(--qs-succes-doux); color:#166534; }
.pe-badge-en-cours, .pe-etat-preinscrit,
.sco-etat-en_cours, .sco-etat-retard, .sco-etat-reportee,
.sco-etat-just-recu, .sco-etat-insc-preinscrit, .sco-etat-insc-admis
                          { background:#fef3c7; color:#92400e; }
.pe-badge-absent, .pe-badge-conflit, .pe-badge-ferme,
.sco-etat-annulee, .sco-etat-just-refuse,
.sco-etat-insc-abandon, .sco-etat-insc-annule
                          { background:var(--qs-danger-doux); color:#991b1b; }
.pe-badge-presentiel, .pe-etat-termine, .pe-etat-autre,
.sco-etat-brouillon, .sco-etat-insc-prospect, .sco-etat-insc-candidature,
.sco-etat-tk-cloture, .sco-etat-tk-annule
                          { background:#f1f5f9; color:#475569; }
/* États des demandes d'assistance */
.sco-etat-tk-nouveau    { background:var(--qs-alerte-doux); color:#9a3412; }
.sco-etat-tk-en_cours   { background:var(--qs-accent-doux); color:var(--qs-accent-fonce); }
.sco-etat-tk-en_attente { background:#fef3c7; color:#92400e; }
.sco-etat-tk-resolu     { background:var(--qs-succes-doux); color:#166534; }
.pe-badge-aujourd-hui {
    background:var(--qs-accent); color:#fff; font-size:11px;
    padding:2px 9px; border-radius:10px; font-weight:600;
}

/* ── Boutons ───────────────────────────────────────────────────── */
.pe-btn, .pe-save-btn, .pe-meet-btn {
    display:inline-block; padding:9px 18px; border-radius:var(--qs-rayon-petit);
    background:var(--qs-accent); color:#fff; border:1px solid var(--qs-accent);
    font-size:14px; font-weight:600; text-decoration:none; cursor:pointer;
    font-family:inherit; transition:background .12s;
}
.pe-btn:hover, .pe-save-btn:hover, .pe-meet-btn:hover {
    background:var(--qs-accent-fonce); border-color:var(--qs-accent-fonce);
    color:#fff; text-decoration:none;
}
.pe-btn-sm { padding:6px 12px; font-size:12.5px; }
.pe-btn-secondaire, .pe-toggle-btn {
    background:var(--qs-surface); color:var(--qs-texte);
    border:1px solid var(--qs-bordure);
}
.pe-btn-secondaire:hover, .pe-toggle-btn:hover {
    background:#f3f4f8; color:var(--qs-texte); border-color:#d5d5e0;
}
.pe-btn-present { background:var(--qs-succes); border-color:var(--qs-succes); }
.pe-btn-absent  { background:var(--qs-danger); border-color:var(--qs-danger); }
.pe-back-link {
    display:inline-block; margin-bottom:12px; font-size:13px;
    color:var(--qs-texte-doux); text-decoration:none;
}
.pe-back-link:hover { color:var(--qs-accent); text-decoration:none; }
.pe-toggle-bar { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.sco-filtres { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }

/* ── Formulaires ───────────────────────────────────────────────── */
.sco-input, .sco-select, .pe-motif-select,
.pe-contenu-editor, .remarque-textarea {
    padding:9px 12px; border:1px solid var(--qs-bordure);
    border-radius:var(--qs-rayon-petit); font-size:14px;
    font-family:inherit; background:var(--qs-surface);
    color:var(--qs-texte); max-width:100%;
}
.sco-input:focus, .sco-select:focus, .pe-motif-select:focus,
.pe-contenu-editor:focus, .remarque-textarea:focus {
    outline:none; border-color:var(--qs-accent);
    box-shadow:0 0 0 2px rgba(79, 70, 229, .12);
}
.pe-contenu-editor, .remarque-textarea { width:100%; min-height:110px; }
.pe-appreciation-form { display:flex; flex-direction:column; gap:10px; }
.pe-remarque-bloc { display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.remarque-feedback { font-size:12.5px; color:var(--qs-succes); }

/* ── Émargement ────────────────────────────────────────────────── */
.pe-emarg-ligne {
    display:flex; align-items:center; justify-content:space-between;
    gap:10px; padding:9px 0; border-bottom:1px solid #f2f2f5;
    flex-wrap:wrap;
}
.pe-emarg-nom { font-size:14px; font-weight:500; flex:1; min-width:140px; }
.pe-emarg-actions { display:flex; gap:6px; flex-wrap:wrap; }
.pe-presence-bar {
    height:7px; background:#ececf3; border-radius:4px;
    overflow:hidden; margin:10px 0 6px 0;
}
.pe-presence-fill { height:100%; background:var(--qs-succes); }
.pe-token-url {
    font-size:12.5px; color:var(--qs-texte-doux); word-break:break-all;
    background:#f8f8fc; border-radius:var(--qs-rayon-petit); padding:8px 10px;
}

/* ── Tableaux ──────────────────────────────────────────────────── */
.sco-table { width:100%; border-collapse:collapse; margin-top:10px; }
.sco-table th {
    text-align:left; font-size:11.5px; text-transform:uppercase;
    letter-spacing:.04em; color:var(--qs-texte-faible);
    padding:7px 4px; border-bottom:1px solid var(--qs-bordure);
}
.sco-table td {
    padding:8px 4px; border-bottom:1px solid #f2f2f5; font-size:13.5px;
}

/* ── Divers ────────────────────────────────────────────────────── */
.pe-avatar {
    width:44px; height:44px; border-radius:50%;
    background:var(--qs-accent-doux); color:var(--qs-accent-fonce);
    display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:17px; flex-shrink:0;
}
.pe-detail-grid {
    display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
    gap:14px; margin-top:14px;
}
.pe-detail-label {
    font-size:11.5px; color:var(--qs-texte-faible);
    text-transform:uppercase; letter-spacing:.04em;
}
.pe-detail-val { font-weight:600; font-size:14px; }
.pe-stars { display:flex; gap:4px; }
.pe-star {
    font-size:26px; color:#dcdce6; cursor:pointer; line-height:1;
    transition:color .12s;
}
.pe-star.active, .pe-star:hover { color:#f0ad4e; }

/* ── Adaptation aux petits écrans ──────────────────────────────────
   Reprise du comportement de l'espace scolarité : rien n'est masqué,
   tout se recompose. Un agent qui consulte une séance depuis un
   téléphone doit voir la même information que sur son poste. */
@media (max-width:640px) {
    body, .pe-body { font-size:14.5px; }
    .pe-header-inner { min-height:52px; }
    .pe-logo-img { height:30px; width:30px; }
    .pe-logo-txt { font-size:.98rem; }
    .pe-container { padding:0 12px; }
    .pe-main { padding:14px 0 36px; }
    .pe-nav { padding-inline:12px; }
    .pe-nav-item { padding:11px 11px; font-size:13.5px; }
    .pe-card { padding:14px; border-radius:10px; }
    .pe-stats-grid, .sco-tuiles {
        grid-template-columns:repeat(auto-fit, minmax(112px, 1fr)); gap:8px;
    }
    .pe-stat-value, .sco-chiffre { font-size:1.5rem; }
    .pe-seance-card { padding:11px 12px; gap:10px; }
    .pe-seance-matiere { white-space:normal; }
    .pe-btn { padding:10px 16px; }        /* cible tactile confortable */
    .sco-table { display:block; overflow-x:auto; white-space:nowrap; }
}

@media (min-width:1280px) {
    .pe-container, .pe-header-inner { max-width:1060px; }
    .pe-nav { padding-inline:max(16px, calc((100% - 1060px) / 2)); }
}

/* ── Étapes du parcours d'admission ────────────────────────────────
   Une frise plutôt qu'une liste : ce qui compte est de situer le
   dossier dans un enchaînement, pas d'énumérer des états. */
.adm-jalons { display:flex; flex-wrap:wrap; gap:4px 0; }
.adm-jalon {
    display:flex; align-items:center; gap:6px; padding:4px 12px 4px 0;
    font-size:12.5px; color:var(--qs-texte-faible); position:relative;
}
.adm-jalon-puce {
    width:11px; height:11px; border-radius:50%; flex-shrink:0;
    background:#dcdce6; border:2px solid #dcdce6;
}
.adm-jalon-franchi { color:var(--qs-texte); }
.adm-jalon-franchi .adm-jalon-puce {
    background:var(--qs-succes); border-color:var(--qs-succes);
}
.adm-jalon-courant { color:var(--qs-accent); font-weight:700; }
.adm-jalon-courant .adm-jalon-puce {
    background:#fff; border-color:var(--qs-accent);
    box-shadow:0 0 0 3px rgba(79,70,229,.15);
}

/* Étapes d'admission — mêmes teintes que les autres pastilles d'état */
.sco-etat-adm-contact, .sco-etat-adm-documents_recus
                              { background:#f1f5f9; color:#475569; }
.sco-etat-adm-formation_choisie, .sco-etat-adm-test_valide,
.sco-etat-adm-visa_en_cours   { background:#fef3c7; color:#92400e; }
.sco-etat-adm-preinscription_payee, .sco-etat-adm-avance_payee,
.sco-etat-adm-visa_obtenu     { background:var(--qs-accent-doux);
                                color:var(--qs-accent-fonce); }
.sco-etat-adm-inscription_finalisee
                              { background:var(--qs-succes-doux); color:#166534; }
.sco-etat-adm-refuse, .sco-etat-adm-abandonne
                              { background:var(--qs-danger-doux); color:#991b1b; }

/* États de contrôle d'une pièce du dossier d'admission */
.sco-etat-piece-a_valider { background:#fef3c7; color:#92400e; }
.sco-etat-piece-valide    { background:var(--qs-succes-doux); color:#166534; }
.sco-etat-piece-refuse    { background:var(--qs-danger-doux); color:#991b1b; }

/* ── Formulaire public de candidature ─────────────────────────────── */
.cand-aide { font-size:11.5px; color:var(--qs-texte-faible); margin-top:3px; }
.cand-aide-alerte { color:var(--qs-alerte); font-weight:600; }
.cand-encart:empty { display:none; }
.cand-encart {
    margin-top:14px; padding:10px 12px; border-radius:8px;
    font-size:13px; background:#f1f5f9; color:#475569;
}
.cand-encart-ok { background:var(--qs-succes-doux); color:#166534; }
.cand-encart-attention { background:var(--qs-alerte-doux); color:#9a3412; }
.cand-pieces { margin:0; padding-left:18px; }
.cand-pieces li { margin-bottom:8px; font-size:13.5px; }
.cand-piece-precision {
    font-size:12.5px; color:var(--qs-texte-doux); margin-top:2px;
}
.cand-suggestions { position:relative; }
.cand-suggestion {
    display:block; width:100%; text-align:left; padding:8px 10px;
    background:#fff; border:1px solid var(--qs-bordure); border-top:none;
    font-size:13px; font-family:inherit; cursor:pointer; color:var(--qs-texte);
}
.cand-suggestion:first-child { border-top:1px solid var(--qs-bordure); }
.cand-suggestion:hover { background:var(--qs-accent-doux); }
.cand-erreur { border-color:var(--qs-danger) !important;
               box-shadow:0 0 0 2px rgba(220,38,38,.10); }

/* Tableau des pièces du formulaire de candidature */
.cand-tableau { width:100%; border-collapse:collapse; }
.cand-tableau th {
    text-align:left; font-size:11.5px; text-transform:uppercase;
    letter-spacing:.04em; color:var(--qs-texte-faible);
    padding:6px 6px; border-bottom:1px solid var(--qs-bordure);
}
.cand-tableau td {
    padding:10px 6px; border-bottom:1px solid #f2f2f5;
    font-size:13.5px; vertical-align:top;
}
.cand-fichier { font-size:12.5px; max-width:100%; }
@media (max-width:640px) {
    .cand-tableau, .cand-tableau tbody, .cand-tableau tr,
    .cand-tableau td { display:block; width:100%; }
    .cand-tableau thead { display:none; }
    .cand-tableau td { border:none; padding:4px 0; }
    .cand-tableau tr {
        border-bottom:1px solid #f2f2f5; padding:10px 0; display:block;
    }
}
.sco-etat-adm-candidature_recue { background:#fef3c7; color:#92400e; }
.sco-etat-adm-candidature_validee,
.sco-etat-adm-documents_valides { background:#f1f5f9; color:#475569; }
.sco-etat-adm-test_envoye { background:#fef3c7; color:#92400e; }
.sco-etat-adm-documents_generes { background:var(--qs-accent-doux);
                                  color:var(--qs-accent-fonce); }
.sco-etat-adm-alternance_en_cours { background:var(--qs-accent-doux);
                                    color:var(--qs-accent-fonce); }
.cand-panneau summary { list-style:none; }
.cand-panneau summary::-webkit-details-marker { display:none; }
.cand-panneau[open] summary { margin-bottom:4px; }

/* ── Intranet planification ────────────────────────────────────────
   Le calendrier occupe toute la largeur disponible : une grille de
   sept jours sur dix heures ne tient pas dans la colonne centrée. */
.qs-planification { --qs-espace:#7c3aed; }
.qs-planification .pe-container { max-width:1400px; }

.plf-semaine {
    display:flex; align-items:center; justify-content:space-between;
    gap:10px; margin-bottom:14px; flex-wrap:wrap;
}
.plf-atelier {
    display:grid; grid-template-columns:270px 1fr; gap:14px;
    align-items:start;
}
.plf-vivier {
    background:var(--qs-surface); border:1px solid var(--qs-bordure);
    border-radius:var(--qs-rayon); padding:14px; position:sticky; top:70px;
    max-height:calc(100vh - 110px); overflow:auto;
}
.plf-zone-vivier { display:flex; flex-direction:column; gap:6px; }

.plf-carte, .plf-posee {
    background:#fff; border:1px solid var(--qs-bordure);
    border-left:3px solid var(--qs-accent); border-radius:8px;
    padding:7px 9px; cursor:grab; font-size:12.5px;
}
.plf-carte:active, .plf-posee:active { cursor:grabbing; }
.plf-carte-titre {
    font-weight:600; color:var(--qs-texte); line-height:1.25;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.plf-carte-meta {
    font-size:11.5px; color:var(--qs-texte-doux); margin-top:2px;
}
.plf-en-cours { opacity:.45; }

.plf-grille-zone {
    background:var(--qs-surface); border:1px solid var(--qs-bordure);
    border-radius:var(--qs-rayon); padding:14px; overflow-x:auto;
}
.plf-grille { display:grid; gap:1px; background:#e8e8ee; min-width:700px; }
.plf-entete {
    background:#f8f8fc; padding:8px 6px; text-align:center;
    font-size:12px; font-weight:700; color:#334155; text-transform:capitalize;
}
.plf-jour-actuel { color:var(--qs-accent); }
.plf-jour-ferme { color:var(--qs-texte-faible); background:#f1f5f9; }
.plf-heure {
    background:#f8f8fc; padding:6px; text-align:right;
    font-size:11.5px; color:var(--qs-texte-faible);
}
.plf-case {
    background:#fff; min-height:44px; padding:2px; position:relative;
    transition:background .1s;
}
.plf-case-survol { background:var(--qs-accent-doux); }
.plf-posee {
    border-left-color:var(--qs-alerte); position:relative;
    background:var(--qs-alerte-doux);
}
.plf-posee-validee {
    border-left-color:var(--qs-succes); background:var(--qs-succes-doux);
}
.plf-retirer {
    position:absolute; top:2px; right:3px; border:none; background:none;
    cursor:pointer; font-size:15px; line-height:1; color:var(--qs-texte-doux);
    padding:0 3px;
}
.plf-retirer:hover { color:var(--qs-danger); }
.plf-lien-retirer {
    border:none; background:none; cursor:pointer; padding:0;
    font-size:12px; color:var(--qs-texte-doux); text-decoration:underline;
    font-family:inherit;
}
.plf-lien-retirer:hover { color:var(--qs-danger); }

.plf-dialogue {
    position:fixed; inset:0; background:rgba(15,23,42,.45);
    display:flex; align-items:center; justify-content:center; z-index:1000;
    padding:16px;
}
.plf-dialogue-boite {
    background:#fff; border-radius:var(--qs-rayon); padding:20px;
    max-width:520px; width:100%; box-shadow:0 8px 32px rgba(16,24,40,.18);
}

@media (max-width:900px) {
    .plf-atelier { grid-template-columns:1fr; }
    .plf-vivier { position:static; max-height:280px; }
}
.plf-posee-conflit {
    background:#f1f5f9 !important; border-left-color:#94a3b8 !important;
    opacity:.72;
}
.plf-posee-conflit .plf-carte-titre { color:#64748b; }
.plf-alerte {
    position:absolute; top:2px; right:20px; font-size:12px; color:#b45309;
}
.plf-carte-date {
    font-size:11px; color:var(--qs-texte-faible); margin-top:3px;
    font-style:italic;
}

/* Indisponibilité du groupe : hachures plutôt qu'aplat, pour rester
   lisible sous une séance posée par-dessus. */
.plf-case-indispo {
    background:repeating-linear-gradient(45deg,#f8fafc,#f8fafc 6px,
                                         #eef2f7 6px,#eef2f7 12px);
}
.plf-selectionnee {
    outline:2px solid var(--qs-accent); outline-offset:1px;
}
.plf-apercu {
    background:#fff; border:1px solid var(--qs-bordure);
    border-radius:var(--qs-rayon); padding:12px; margin-bottom:12px;
}
.plf-apercu-entete {
    display:flex; align-items:center; gap:8px; margin-bottom:10px;
    font-size:13.5px;
}
.plf-mini { display:grid; gap:2px; }
.plf-mini-entete {
    font-size:10.5px; font-weight:700; text-align:center; color:#475569;
    text-transform:capitalize;
}
.plf-mini-heure {
    font-size:10px; color:var(--qs-texte-faible); text-align:right;
    padding-right:3px; line-height:16px;
}
.plf-mini-case { height:16px; border-radius:3px; }
.plf-vert { background:#bbf7d0; }
.plf-rouge { background:#fecaca; }
.plf-legende {
    display:flex; gap:14px; margin-top:8px; font-size:11.5px;
    color:var(--qs-texte-doux); align-items:center;
}
.plf-pastille {
    display:inline-block; width:11px; height:11px; border-radius:3px;
    margin-right:4px; vertical-align:-1px;
}
.plf-figee { cursor:not-allowed; opacity:.8; }
.plf-figee .plf-carte-titre { color:#475569; }
.plf-cadenas {
    position:absolute; top:2px; right:3px; font-size:10px; opacity:.6;
}
/* Grille par créneaux : les lignes sont plus hautes et moins nombreuses
   qu'un découpage horaire, la case doit accueillir une séance entière. */
.plf-heure-creneau {
    font-size:11px; line-height:1.3; padding:10px 6px;
    display:flex; align-items:center; justify-content:flex-end;
    text-align:right; font-variant-numeric:tabular-nums;
}
.plf-case-creneau { min-height:78px; padding:3px; }
.plf-case-creneau .plf-posee { min-height:70px; }
/* Case interdite pour la séance sélectionnée : hachures rouges, plus
   marquées que le gris d'une indisponibilité de groupe — l'une empêche
   ce placement-ci, l'autre décrit l'état du groupe. */
.plf-case-interdite {
    background:repeating-linear-gradient(45deg,#fef2f2,#fef2f2 5px,
                                         #fee2e2 5px,#fee2e2 10px)
               !important;
    cursor:not-allowed;
}
/* Séance d'une session liée : ni la couleur d'une séance de ce planning,
   ni celle d'un conflit — un bandeau neutre qui dit « occupé ailleurs ». */
.plf-reservee {
    background:#eef2ff; border:1px dashed #c7d2fe;
    border-left:3px solid #818cf8; border-radius:8px;
    padding:7px 9px; font-size:12.5px; margin-bottom:3px;
    position:relative; cursor:default;
}
.plf-reservee .plf-carte-titre { color:#4338ca; }
.plf-filtres-etat {
    font-size:12px; color:var(--qs-texte-faible); min-width:60px;
}

/* Distinction validée / à valider, dans la grille et l'emploi du temps.
   La couleur porte l'information principale, l'étiquette la confirme :
   un daltonien lit le texte, les autres balaient les couleurs. */
.plf-etiquette-brouillon {
    display:inline-block; margin-left:5px; padding:0 5px;
    border-radius:4px; background:var(--qs-alerte-doux);
    color:#9a3412; font-size:10.5px; font-weight:600;
    vertical-align:1px;
}
.plf-pastille-brouillon { background:var(--qs-alerte-doux);
                          border:1px solid #fdba74; }
.plf-pastille-validee { background:var(--qs-succes-doux);
                        border:1px solid #86efac; }
.plf-pastille-liee { background:#eef2ff; border:1px solid #c7d2fe; }
.plf-ligne-edt {
    font-size:12.5px; color:var(--qs-texte-doux);
    padding:3px 0 3px 12px; border-left:3px solid transparent;
    margin-left:4px;
}
.plf-edt-validee { border-left-color:var(--qs-succes); }
.plf-edt-brouillon { border-left-color:var(--qs-alerte); }

/* Barre de progression du solveur */
.plf-barre {
    height:10px; background:#eef2f7; border-radius:6px; overflow:hidden;
}
.plf-barre-remplie {
    height:100%; background:var(--qs-accent); border-radius:6px;
    transition:width .4s ease;
}
.plf-barre-ok { background:var(--qs-succes); }
.plf-barre-echec { background:var(--qs-danger); }

/* Sélecteur de salle dans une séance posée */
.plf-salle {
    width:100%; margin-top:3px; font-size:10.5px; padding:1px 3px;
    border:1px solid var(--qs-bordure); border-radius:4px;
    background:rgba(255,255,255,.75); color:var(--qs-texte-doux);
    cursor:pointer;
}
.plf-salle:hover { background:#fff; }
.plf-salle-figee, .plf-distanciel {
    font-size:10.5px; color:var(--qs-texte-doux); margin-top:3px;
    font-style:italic;
}


/* ══════════════════════════════════════════════════════════════════
   Espace finance

   Aucun composant nouveau : la barre de filtres, les cartes et les
   tableaux sont ceux des autres intranets. Ce bloc n'ajoute que ce
   que le vocabulaire commun ne couvrait pas — la mise en avant d'un
   montant sous un indicateur, et les jeux d'états propres aux
   factures et aux echeances.
══════════════════════════════════════════════════════════════════ */
.qs-finance .pe-container { max-width:1180px; }
.qs-finance .pe-header-inner,
.qs-finance .pe-nav { max-width:1180px; }

/* Montant rappele sous un indicateur chiffre */
.fin-stat-montant {
    margin-top:6px; font-size:13px; font-weight:600;
    color:var(--qs-texte-doux);
}

/* Barre d'actions : filtres a gauche, action principale a droite */
.fin-barre {
    display:flex; align-items:flex-start; justify-content:space-between;
    gap:12px; flex-wrap:wrap; margin-bottom:14px;
}
.fin-filtres { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

.fin-total {
    font-size:13px; color:var(--qs-texte-doux);
    padding-bottom:6px; border-bottom:1px solid var(--qs-bordure);
}
.fin-entete {
    display:flex; align-items:flex-start; justify-content:space-between;
    gap:12px; flex-wrap:wrap; margin-bottom:14px;
}
.fin-actions { display:flex; gap:8px; flex-wrap:wrap; }
.fin-actions form { display:flex; gap:8px; flex-wrap:wrap; }

/* Ce qui est en retard doit se voir sans etre lu */
.fin-retard { color:var(--qs-danger); font-weight:600; }

/* Formulaires de saisie */
.fin-form label {
    display:block; font-size:11.5px; text-transform:uppercase;
    letter-spacing:.04em; color:var(--qs-texte-faible); margin-bottom:4px;
}
.fin-champ { margin-bottom:14px; }
.fin-champ .sco-input, .fin-champ .sco-select { width:100%; }
.fin-grille {
    display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
    gap:14px;
}
.fin-aide {
    font-size:12px; color:var(--qs-texte-faible); margin-top:5px;
    line-height:1.45;
}
.fin-case {
    display:flex; align-items:center; gap:8px; font-size:.92rem;
    text-transform:none; letter-spacing:normal; color:var(--qs-texte);
}

/* Origine de la facture recue */
.fin-badge-formateur   { background:#e0f2fe; color:#075985; }
.fin-badge-fournisseur { background:#f3e8ff; color:#6b21a8; }

/* Zone d'accroche des liens Drive : sans of_google_workspace, elle
   reste vide et ne doit alors occuper aucune place. */
.fin-drive-zone:empty { display:none; }
.gw-drive {
    display:flex; gap:8px; flex-wrap:wrap; align-items:center;
    margin-top:14px; padding-top:12px;
    border-top:1px dashed var(--qs-bordure);
}
.gw-drive-titre {
    font-size:11px; text-transform:uppercase; letter-spacing:.05em;
    color:var(--qs-texte-faible);
}
.gw-drive-lien {
    display:inline-flex; align-items:center; gap:6px;
    padding:6px 12px; border-radius:var(--qs-rayon-petit);
    background:#f6f7fb; border:1px solid var(--qs-bordure);
    font-size:12.5px; font-weight:600; color:var(--qs-texte);
    text-decoration:none;
}
.gw-drive-lien:hover {
    text-decoration:none; border-color:var(--qs-accent);
    color:var(--qs-accent-fonce);
}
.gw-drive-pastille {
    width:9px; height:9px; border-radius:50%; background:#FBBC05;
    display:inline-block; flex-shrink:0;
}
.gw-drive-qui {
    font-size:11.5px; color:var(--qs-texte-faible); margin-left:auto;
}
.gw-drive-absent {
    font-size:12px; color:var(--qs-alerte); line-height:1.45;
}

/* Pieces justificatives : recus, justificatifs, conventions */
.fin-pieces {
    display:flex; gap:10px; flex-wrap:wrap; align-items:center;
    padding:8px 0 0; border-top:1px dashed var(--qs-bordure);
}
.fin-pieces form { display:flex; gap:6px; align-items:center; margin:0; }
.fin-pieces-upload .sco-input { max-width:230px; padding:5px 8px; font-size:12.5px; }
.fin-manquant {
    font-size:11.5px; color:var(--qs-alerte); font-weight:600;
}
.fin-drive {
    font-size:11.5px; color:var(--qs-succes); font-weight:600;
}

/* Etats de la convention */
.fin-conv-brouillon { background:#f1f5f9; color:#475569; }
.fin-conv-envoyee   { background:var(--qs-alerte-doux); color:var(--qs-alerte); }
.fin-conv-signee    { background:var(--qs-succes-doux); color:#166534; }
.fin-conv-annulee   { background:#f1f5f9; color:var(--qs-texte-faible); }

.qs-annee {
    background:var(--qs-surface); border-bottom:1px solid var(--qs-bordure);
}
.qs-annee-form {
    max-width:1180px; margin:0 auto; padding:8px 16px;
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.qs-annee-libelle {
    font-size:11px; text-transform:uppercase; letter-spacing:.05em;
    color:var(--qs-texte-faible); margin:0;
}
.qs-annee .sco-select { padding:5px 10px; font-size:13px; }
@media (max-width:640px) {
    .qs-annee-form { padding:8px 12px; }
    .qs-annee .sco-select { flex:1; }
}

/* Ligne de tableau se comportant comme un lien (voir portal_qualisoft.js).
   Le geste doit etre le meme que sur les cartes des autres espaces. */
.qs-ligne-lien { cursor:pointer; transition:background-color .12s; }
.qs-ligne-lien:hover { background:var(--qs-accent-doux); }
.qs-ligne-lien:focus-visible {
    outline:2px solid var(--qs-accent); outline-offset:-2px;
}
.qs-chevron {
    color:var(--qs-texte-faible); font-size:16px; line-height:1;
}
.qs-ligne-lien:hover .qs-chevron { color:var(--qs-accent); }

/* Etats du contrat formateur */
.fin-contrat-brouillon { background:#f1f5f9; color:#475569; }
.fin-contrat-valide    { background:#e0f2fe; color:#075985; }
.fin-contrat-actif     { background:var(--qs-succes-doux); color:#166534; }
.fin-contrat-termine   { background:#f1f5f9; color:var(--qs-texte-faible); }
.fin-contrat-annule    { background:var(--qs-danger-doux); color:#991b1b; }

/* Origine du dossier financier */
.fin-origine-admission   { background:#fef3c7; color:#92400e; }
.fin-origine-inscription { background:#e0f2fe; color:#075985; }

/* Etats des factures recues */
.fin-etat-recue    { background:var(--qs-accent-doux); color:var(--qs-accent-fonce); }
.fin-etat-verifiee { background:#e0f2fe; color:#075985; }
.fin-etat-validee  { background:var(--qs-alerte-doux); color:var(--qs-alerte); }
.fin-etat-payee    { background:var(--qs-succes-doux); color:#166534; }
.fin-etat-rejetee  { background:var(--qs-danger-doux); color:#991b1b; }
.fin-etat-litige   { background:var(--qs-danger-doux); color:#991b1b; }

/* Etats des echeances clients */
.fin-ech-prevu   { background:#f1f5f9; color:#475569; }
.fin-ech-facture { background:var(--qs-alerte-doux); color:var(--qs-alerte); }
.fin-ech-paye    { background:var(--qs-succes-doux); color:#166534; }
.fin-ech-retard  { background:var(--qs-danger-doux); color:#991b1b; }
.fin-ech-annule  { background:#f1f5f9; color:var(--qs-texte-faible); }

/* Etats de l'echeancier OPCO (onglet apporte par of_alternance) */
.fin-opco-planifie   { background:#f1f5f9; color:#475569; }
.fin-opco-a_facturer { background:var(--qs-alerte-doux); color:var(--qs-alerte); }
.fin-opco-brouillon  { background:var(--qs-accent-doux); color:var(--qs-accent-fonce); }
.fin-opco-transmise  { background:#e0f2fe; color:#075985; }
.fin-opco-acceptee   { background:#ecfccb; color:#3f6212; }
.fin-opco-payee      { background:var(--qs-succes-doux); color:#166534; }
.fin-opco-annulee    { background:#f1f5f9; color:var(--qs-texte-faible); }

/* Etat de paiement remonte de la comptabilite */
.fin-paiement-paid       { background:var(--qs-succes-doux); color:#166534; }
.fin-paiement-in_payment { background:#e0f2fe; color:#075985; }
.fin-paiement-partial    { background:var(--qs-alerte-doux); color:var(--qs-alerte); }
.fin-paiement-not_paid,
.fin-paiement-none       { background:#f1f5f9; color:#475569; }
.fin-paiement-reversed   { background:#f3e8ff; color:#6b21a8; }

@media (max-width:640px) {
    .fin-barre { flex-direction:column; align-items:stretch; }
    .fin-filtres { width:100%; }
    .fin-filtres .sco-select, .fin-filtres .sco-input { flex:1; min-width:130px; }
    /* Les tableaux defilent plutot que de masquer des colonnes :
       un montant tronque est pire qu'un defilement. */
    .qs-finance .pe-card { overflow-x:auto; }
    .qs-finance .sco-table { min-width:640px; }
}

/* Évaluation dans le vivier : elle se place en dernier, et le dire
   évite un geste refusé. */
.plf-carte-eval { border-left-color:#7c3aed; }
.plf-attente-eval {
    font-size:11px; color:#7c3aed; margin-top:3px; font-style:italic;
}