/* CanLMS — charte Agence Canelle. Aucune ressource externe. */
:root {
  /* Couleurs relevées sur le logo et la grille de marque */
  --accent: #a91135;         /* le rouge Canelle */
  --accent-fonce: #602335;   /* bordeaux, pour les survols et les titres */
  --nuit: #0c0c16;           /* le fond du logo : la barre du haut s'y fond */
  --taupe: #a16868;
  --rose: #e19999;
  --rose-pale: #fbeaee;
  --fond: #faf7f7; --carte: #ffffff;
  --texte: #21262b; --gris: #6b7280; --bord: #e8e0e0;
  --rouge: #b3261e; --ambre: #b45309;
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.5 -apple-system, "Segoe UI", Roboto, sans-serif;
       background: var(--fond); color: var(--texte); }
main { max-width: 1100px; margin: 24px auto; padding: 0 16px; }

.topbar { display: flex; justify-content: space-between; align-items: center; gap: 12px;
          background: var(--nuit); color: #fff; padding: 8px 20px; flex-wrap: wrap; }
.topbar .brand { font-weight: 700; font-size: 17px; }
.topbar nav { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.topbar a { color: #e6d6db; text-decoration: none; }
.topbar a:hover { color: #fff; }
.topbar .user { color: #b79aa3; font-size: 13px; text-decoration: none; }
.topbar .user:hover { color: #fff; text-decoration: underline; }
.btn-sortie { border: 1px solid #ffffff55; padding: 3px 10px; border-radius: 6px; }
.badge { font-size: 11px; padding: 2px 8px; border-radius: 10px; vertical-align: middle; }
.badge-local { background: var(--taupe); }
.badge-serveur { background: var(--accent); }

h1 { font-size: 22px; } h2 { font-size: 18px; }
a { color: var(--accent); }

.cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.carte { background: var(--carte); border: 1px solid var(--bord); border-radius: 10px;
         padding: 16px; text-decoration: none; color: var(--texte); display: block; }
.carte:hover { border-color: var(--accent); }
.carte .nombre { font-size: 26px; font-weight: 700; color: var(--accent-fonce); }
.carte .icone { font-size: 22px; }

/* v3.46 — tableau de bord : patchwork de tuiles hexagonales métalliques (bascule 3D, reflet qui suit le pointeur, lueur sous la tuile) */
.nuage { background: radial-gradient(120% 90% at 50% 0%, #34353f 0%, #1a1b23 60%, #101117 100%); border-radius: 22px; padding: 26px 12px 40px;
         display: flex; justify-content: center; margin: 8px 0 22px; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 24px rgba(0,0,0,.18); }
.ruche { position: relative; flex: none; }
.tuile { --e: 1; --p: 0; --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 30%; position: absolute; display: block; width: 142px; height: 164px; text-decoration: none; color: #1e232d;
         transform: perspective(620px) rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--e)); transform-style: preserve-3d;
         transition: transform .16s ease-out; will-change: transform; }
/* lueur et ombre portées depuis le dessous de la tuile */
.tuile::before { content: ""; position: absolute; left: 12%; right: 12%; bottom: 4%; height: 38%; border-radius: 50%;
                 background: radial-gradient(closest-side, rgba(255,150,90,.85), rgba(169,17,53,.45) 55%, transparent 100%);
                 filter: blur(12px); opacity: calc(.3 + var(--p) * .5); transform: translateY(8px); transition: opacity .25s ease, transform .25s ease; }
.tuile-face { position: absolute; inset: 0; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
              background: linear-gradient(160deg, #ffffff 0%, #8f96a3 35%, #f1f3f6 55%, #6c727d 100%); }
.tuile-face::after { content: ""; position: absolute; inset: 3px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
                     background:
                       radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.85) 0%, rgba(255,255,255,.25) 28%, transparent 58%),
                       repeating-linear-gradient(100deg, rgba(255,255,255,.10) 0 2px, rgba(0,0,0,.05) 2px 4px),
                       linear-gradient(150deg, #dfe2e8 0%, #a3a9b4 42%, #cfd3da 62%, #8b919c 100%); }
.tuile-contenu { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 0 20px;
                 transform: translateZ(18px); text-align: center; }
.tuile-ico { font-size: 42px; line-height: 1.1; filter: drop-shadow(0 2px 2px rgba(0,0,0,.28)); }
.tuile-nb { font-size: 20px; font-weight: 800; color: #3b0a18; line-height: 1.15; text-shadow: 0 1px 0 rgba(255,255,255,.6); }
.tuile-titre { font-size: 12px; font-weight: 600; line-height: 1.15; color: #2a303b; max-width: 104px; }
.tuile:hover, .tuile:focus-visible { z-index: 6; transform: perspective(620px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-8px) scale(calc(var(--e) * 1.12)); outline: none; }
.tuile:hover::before, .tuile:focus-visible::before { opacity: .95; transform: translateY(26px) scale(1.25); }
.tuile:hover .tuile-face, .tuile:focus-visible .tuile-face { filter: drop-shadow(0 14px 10px rgba(0,0,0,.45)) brightness(1.04); }
@media (prefers-reduced-motion: reduce) { .tuile, .tuile::before { transition: none; } }

table { width: 100%; border-collapse: collapse; background: var(--carte);
        border: 1px solid var(--bord); border-radius: 10px; overflow: hidden; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--bord); }
th { background: #f3eded; font-size: 13px; text-transform: uppercase; letter-spacing: .03em; }
tr:hover td { background: #faf5f6; }
.table-scroll { overflow-x: auto; }

form.fiche { background: var(--carte); border: 1px solid var(--bord); border-radius: 10px;
             padding: 20px; max-width: 720px; }
label { display: block; margin: 12px 0 4px; font-weight: 600; font-size: 14px; }
input, select, textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--bord);
  border-radius: 7px; font: inherit; background: #fff; }
textarea { min-height: 90px; } textarea.grand { min-height: 220px; font-family: monospace; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.aide { color: var(--gris); font-size: 12.5px; margin-top: 3px; }

button, .btn { background: var(--accent); color: #fff; border: none; padding: 9px 18px;
  border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
  display: inline-block; }
button:hover, .btn:hover { background: var(--accent-fonce); }
.btn-secondaire { background: #fff; color: var(--texte); border: 1px solid var(--bord); }
.btn-danger { background: var(--rouge); }
.actions { margin-top: 18px; display: flex; gap: 10px; align-items: center; }

.flash { padding: 10px 14px; border-radius: 8px; margin: 12px 0; }
.flash-ok { background: var(--rose-pale); color: var(--accent-fonce); border: 1px solid #f0c7d1; }
.flash-erreur { background: #fbe9e7; color: var(--rouge); border: 1px solid #f0c4c0; }
.flash-info { background: #e8effc; color: #1d4ed8; border: 1px solid #c4d4f0; }

.barre-outils { display: flex; justify-content: space-between; align-items: center;
                gap: 12px; margin: 14px 0; flex-wrap: wrap; }
.barre-outils form { display: flex; gap: 8px; }
.barre-outils input[type=search] { width: 260px; }

.login-box { max-width: 380px; margin: 60px auto; background: var(--carte);
             border: 1px solid var(--bord); border-radius: 12px; padding: 28px; }
.login-box button { width: 100%; margin-top: 16px; }

.progression { background: var(--bord); border-radius: 6px; height: 10px; overflow: hidden; }
.progression > div { background: var(--accent); height: 100%; }
.module-ligne { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  background: var(--carte); border: 1px solid var(--bord); border-radius: 10px;
  padding: 14px 16px; margin: 10px 0; }
.statut-pill { font-size: 12px; padding: 3px 10px; border-radius: 10px; white-space: nowrap; }
.statut-completed, .statut-passed { background: var(--rose-pale); color: var(--accent-fonce); }
.statut-incomplete { background: #fdf3e0; color: var(--ambre); }
.statut-notattempted { background: #f3eded; color: var(--gris); }
.statut-failed { background: #fbe9e7; color: var(--rouge); }

/* Lecteur SCORM */
.lecteur-cadre { width: 100%; height: calc(100vh - 130px); border: 1px solid var(--bord);
                 border-radius: 10px; background: #fff; }

/* Menu « ⋯ » des lignes de suivi : pas de triangle natif */
details summary { list-style: none; }
details summary::-webkit-details-marker { display: none; }
details summary::marker { content: ''; }

/* Grille de saisie rapide des apprenants */
table input { padding: 6px 8px; font-size: 13px; }

/* Onglets d'une session */
.onglets { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 2px solid var(--bord);
           margin-bottom: 18px; }
.onglet { padding: 9px 15px; text-decoration: none; color: var(--gris); font-size: 14px;
          font-weight: 600; border-radius: 8px 8px 0 0; border: 2px solid transparent;
          border-bottom: none; margin-bottom: -2px; }
.onglet:hover { color: var(--accent-fonce); background: #f3eded; }
.onglet.actif { color: var(--accent-fonce); background: #fff; border-color: var(--bord);
                border-bottom: 2px solid #fff; }

/* Grille d'émargement */
.grille-emargement th, .grille-emargement td { padding: 6px 8px; font-size: 13px; }
.grille-emargement th.jour { background: var(--rose-pale); }
.case-presence { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.case-presence input[type=checkbox] { width: 20px; height: 20px; }
.miniature-signature { height: 26px; max-width: 90px; border: 1px solid var(--bord);
                       border-radius: 4px; background: #fff; }
.zone-signature { border: 2px dashed var(--accent); border-radius: 10px; background: #fff;
                  touch-action: none; display: block; width: 100%; max-width: 460px; height: 180px; }

/* Questionnaires */
.echelle { display: flex; gap: 6px; flex-wrap: wrap; }
.echelle label { display: flex; align-items: center; gap: 5px; border: 1px solid var(--bord);
                 border-radius: 8px; padding: 7px 11px; margin: 0; font-weight: 400;
                 cursor: pointer; background: #fff; font-size: 13.5px; }
.echelle label:has(input:checked) { border-color: var(--accent); background: var(--rose-pale);
                                    font-weight: 600; }
.echelle input { width: auto; }
.question { border-bottom: 1px solid var(--bord); padding: 14px 0; }
.question:last-child { border-bottom: none; }
.a-verifier { background: #fdf3e0; border-left: 3px solid var(--ambre); padding-left: 10px; }
.note-globale { font-size: 42px; font-weight: 800; color: var(--accent-fonce); line-height: 1; }


/* ------------------------------------------------ identité de marque ---- */
.topbar .brand { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.topbar .logo { height: 32px; width: auto; display: block; }
.topbar nav { flex: 1 1 auto; justify-content: flex-end; }
.topbar .horloge { color: var(--rose); font-size: 12px; text-align: right;
                   line-height: 1.2; white-space: nowrap; margin-left: 4px; }
.topbar .horloge strong { display: block; color: #fff; font-weight: 600; font-size: 13.5px; }

.login-marque { text-align: center; margin: 34px 0 6px; }
.login-marque img { height: 110px; width: auto; max-height: 110px; }
.login-marque + .login-box { margin-top: 22px; }
.login-marque .accroche { color: var(--gris); font-size: 13.5px; margin-top: 12px; }

/* En-tête et pied de page « papier à lettres » des documents imprimables */
.lettre-entete { display: flex; align-items: center; gap: 14px;
                 border-bottom: 2px solid var(--accent); padding-bottom: 10px; margin-bottom: 22px; }
.lettre-entete img { height: 62px; width: auto; max-height: 62px; }
.lettre-entete .accroche { font-size: 13px; color: var(--texte); }
.lettre-pied { margin-top: 30px; padding-top: 10px; border-top: 2px solid var(--accent);
               font-size: 10.5px; color: var(--gris); text-align: right; line-height: 1.5; }
.lettre-pied strong { color: var(--texte); font-size: 11.5px; }
@media print {
  .lettre-entete, .lettre-pied { break-inside: avoid; }
}

/* ------------------------------------------- listes : filtres et tri ----- */
.barre-filtres { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 14px 0; }
.barre-filtres input[type=search] { width: 280px; }
.barre-filtres select { width: auto; min-width: 150px; }
table.liste th a.tri { color: inherit; text-decoration: none; white-space: nowrap; }
table.liste th a.tri:hover { text-decoration: underline; }
table.liste th a.tri-actif { color: var(--accent); }
table.liste tr:has(.coche:checked) td { background: var(--rose-pale); }
.actions-groupees { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13.5px; }
.actions-groupees select { width: auto; max-width: 320px; }
.pagination { display: flex; gap: 12px; align-items: center; font-size: 13.5px; color: var(--gris); }
.pagination a { font-weight: 600; }

/* ===================================================== espace stagiaire === */
.bloc-vedette { background: var(--carte); border: 1px solid var(--bord);
  border-left: 5px solid var(--accent); border-radius: 10px; padding: 20px 22px; margin: 18px 0 26px; }
.bloc-vedette .chapeau { text-transform: uppercase; letter-spacing: 1px; font-size: 11px;
  font-weight: 700; color: var(--accent); margin-bottom: 6px; }
.bloc-vedette h2 { margin: 0 0 6px; font-size: 22px; }
.bloc-vedette h2 a { color: var(--texte); text-decoration: none; }
.bloc-vedette h2 a:hover { color: var(--accent); }
.meta { color: var(--gris); font-size: 14px; margin: 4px 0 12px; }
.actions-vedette { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.btn-grand { font-size: 16px; padding: 13px 24px; font-weight: 600; }

.module-suivant { border-color: var(--accent); background: var(--rose-pale); }

.fiche-lecture { background: var(--carte); border: 1px solid var(--bord); border-radius: 10px;
  padding: 6px 18px; margin-bottom: 8px; }
.ligne-info { display: flex; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--bord); }
.ligne-info:last-child { border-bottom: none; }
.ligne-info .cle { flex: 0 0 150px; color: var(--gris); font-size: 14px; }

ol.deroule { list-style: none; padding: 0; margin: 0 0 8px; }
ol.deroule li { background: var(--carte); border: 1px solid var(--bord); border-radius: 8px;
  padding: 11px 16px; margin-bottom: 8px; border-left: 4px solid var(--taupe); }
ol.deroule li.passe { color: var(--gris); border-left-color: var(--bord); }

details.rubrique { background: var(--carte); border: 1px solid var(--bord); border-radius: 8px;
  margin-bottom: 8px; }
details.rubrique > summary { padding: 12px 16px; cursor: pointer; font-weight: 600; }
details.rubrique > summary:hover { color: var(--accent); }
details.rubrique .texte { padding: 0 16px 16px; line-height: 1.65; }

@media (max-width: 600px) {
  .ligne-info { flex-direction: column; gap: 2px; }
  .ligne-info .cle { flex: none; }
  .btn-grand { width: 100%; text-align: center; }
}

/* --- Catalogue en ligne (v3.9) --- */
label.case { display: flex; align-items: center; gap: 8px; font-weight: normal; }
label.case input { width: auto; margin: 0; }
.cases-domaines { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 6px 0 14px; }
.galerie-admin { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0 14px; }
.galerie-admin figure { margin: 0; width: 190px; background: #fff; border: 1px solid var(--bord); border-radius: 10px; overflow: hidden; }
.galerie-admin img { width: 100%; height: 120px; object-fit: cover; display: block; }
.galerie-admin figcaption { padding: 6px 8px; font-size: 12.5px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
img.vignette { width: 72px; height: 48px; object-fit: cover; border-radius: 6px; display: block; }
.btn-mini, button.btn-mini { padding: 4px 10px; font-size: 13px; }

/* -------------------------------------------- pied de page légal (v3.14) -- */
.pied-page { max-width: 1100px; margin: 34px auto 18px; padding: 12px 16px 0; border-top: 1px solid var(--bord);
             font-size: 12.5px; color: var(--gris); text-align: center; }
.pied-page a { color: var(--gris); }
.pied-page a:hover { color: var(--accent); }
.mention-donnees { font-size: 12.5px; color: var(--gris); margin-top: 12px; }
.page-legale { max-width: 820px; }
.page-legale h2 { margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--bord); font-size: 19px; }
.page-legale li { margin-bottom: 5px; }
.page-legale .sommaire { background: var(--carte); border: 1px solid var(--bord); border-radius: 10px; padding: 12px 18px; }
.page-legale .sommaire ol { margin: 6px 0; padding-left: 20px; }
.page-legale .table-scroll { overflow-x: auto; }
@media print { .pied-page { display: none; } }

/* ------------------------------------------------ Finances (v3.18) -------- */
.creer-piece { position: relative; }
.creer-piece > summary { list-style: none; display: inline-block; cursor: pointer; }
.creer-piece > summary::-webkit-details-marker { display: none; }
.creer-piece .creer-choix { display: block; margin-top: 8px; padding: 12px 14px; background: var(--carte);
                            border: 1px solid var(--bord); border-radius: 10px; }
.creer-piece .creer-choix > div { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.grille-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px 14px; }
form.piece h2 { font-size: 16px; margin: 22px 0 8px; }
table.lignes-piece td { padding: 4px 5px; vertical-align: top; border-bottom: none; }
table.lignes-piece th { padding: 7px 8px; }
table.lignes-piece input, table.lignes-piece select { padding: 6px 7px; font-size: 13px; }
table.lignes-piece textarea { min-height: 0; padding: 6px 7px; font: inherit; font-size: 13px; resize: vertical; }
table.lignes-piece td.l-total { padding-top: 10px; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.lignes-piece select.verrouille { background: #f3eded; color: var(--gris); }
table.totaux-piece { width: auto; min-width: 280px; }
table.totaux-piece td { padding: 6px 12px; }
table.totaux-piece td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.totaux-piece tr.total td { font-weight: 700; font-size: 16px; border-top: 2px solid var(--accent); border-bottom: none; }
button.btn-valider { background: var(--accent-fonce); }
.piece-lecture { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-bottom: 14px; }
table.journal { font-size: 12.5px; }
table.journal th, table.journal td { padding: 6px 8px; white-space: nowrap; }
table.journal td.n, table.journal th.n { text-align: right; font-variant-numeric: tabular-nums; }
table.journal td.intitule { white-space: normal; min-width: 220px; }
table.journal tr.total td, table.journal tr.total th { font-weight: 700; background: #f3eded; }
table.journal tr.avoir td { color: var(--rouge); }

/* ------------------------------------------ Formateurs / Qualiopi (v3.19.1) -- */
.fq-bloc { background: var(--carte); border: 1px solid var(--bord); border-radius: 12px; padding: 16px 18px; margin: 16px 0; }
.fq-tete { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.fq-tete > div:nth-child(2) { flex: 1; min-width: 220px; }
.fq-photo { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; flex: none; }
.fq-initiales { display: flex; align-items: center; justify-content: center; background: #f3eded; color: var(--gris); font-size: 26px; font-weight: 700; }
.fq-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.fq-pastille { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.fq-ok { background: #e3f3e6; color: #1e6b32; }
.fq-wa { background: #fff1d6; color: #8a5a00; }
.fq-ko { background: #fbe0e0; color: #a12020; }
.fq-ne { background: #eee9e9; color: #5b5353; }
table.fq-table { width: 100%; }
table.fq-table td { vertical-align: top; }
.fq-details > summary { cursor: pointer; padding: 6px 4px; font-size: 13px; color: var(--accent); }
.fq-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 14px; padding: 8px 4px 14px; align-items: end; }
.fq-form label { font-size: 13px; display: block; }
.fq-form .large { grid-column: 1 / -1; }
.fq-histo { padding: 0 4px 12px; font-size: 13px; }
.fq-histo ul { margin: 4px 0 0; padding-left: 18px; }
.fq-alertes li { margin: 3px 0; }

/* v3.19.3 — dossier formateur : lignes multiples */
.fq-table tr.fq-type td { background: var(--fond-doux, #f4f1ec); border-top: 2px solid var(--bord, #ddd); }
.fq-table tr.fq-archivee td { opacity: .6; }
.fq-etapes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0 10px; font-size: 13px; }
.fq-etapes .fq-etape { padding: 3px 10px; border-radius: 12px; background: #eee; color: #666; }
.fq-etapes .fq-etape.fait { background: #dff3e4; color: #1d6b34; }
.fq-etapes .fq-etape.actuel { background: #fff0cf; color: #8a5a00; font-weight: 600; }

/* v3.20.2 — tri par clic et listes repliables */
th.tri-js { cursor: pointer; user-select: none; }
th.tri-js:hover { color: var(--accent, #a91135); }
th.tri-js::after { content: ' ↕'; opacity: .3; font-size: 11px; }
th.tri-js[data-sens=asc]::after { content: ' ▲'; opacity: 1; }
th.tri-js[data-sens=desc]::after { content: ' ▼'; opacity: 1; }
.plie-bouton { margin: 6px 0 14px; font-size: 13px; padding: 4px 12px; }

/* v3.20.6 — blocs repliables de la fiche formateur */
details.fq-pli > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; }
details.fq-pli > summary::-webkit-details-marker { display: none; }
details.fq-pli > summary::before { content: '▸'; color: var(--accent, #a91135); transition: transform .15s; }
details.fq-pli[open] > summary::before { transform: rotate(90deg); }
details.fq-pli > summary h2 { margin: 0; }
details.fq-pli[open] > summary { margin-bottom: 10px; }

/* v3.21 — repères Qualiopi */
.q-ico { border: 0; background: none; cursor: pointer; font-size: 15px; opacity: .45; padding: 0 4px; vertical-align: middle; transition: opacity .15s; }
.q-ico:hover, .q-ico:focus-visible { opacity: 1; }
.q-dlg { border: 0; border-radius: 14px; padding: 0; max-width: min(640px, 94vw); width: 100%; box-shadow: 0 18px 40px rgba(0,0,0,.25); }
.q-dlg::backdrop { background: rgba(12,12,22,.5); }
.q-in { padding: 22px 26px; position: relative; max-height: 86vh; overflow: auto; }
.q-in h3 { margin: 0 0 6px; font-size: 18px; }
.q-ferme { position: absolute; top: 10px; right: 12px; border: 0; background: var(--rose-pale, #fbeaee); color: var(--accent, #a91135); width: 30px; height: 30px; border-radius: 50%; cursor: pointer; }
.q-liste { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.q-liste li { display: flex; gap: 12px; align-items: flex-start; }
.q-num { flex: none; min-width: 32px; height: 32px; border-radius: 50%; background: var(--accent, #a91135); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.q-reste { margin: 16px 0 4px; }
.q-dlg ul:not(.q-liste) { margin: 0; padding-left: 18px; }

/* v3.21.3 — onglets formateur et présentation en lignes */
.fq-onglets { display: flex; gap: 4px; border-bottom: 2px solid var(--bord, #ddd); margin: 14px 0 16px; }
.fq-onglets a { padding: 8px 18px; border: 1px solid var(--bord, #ddd); border-bottom: 0; border-radius: 8px 8px 0 0; text-decoration: none; background: #f6f1f1; color: var(--gris, #555); font-weight: 600; margin-bottom: -2px; }
.fq-onglets a.actif { background: #fff; color: var(--accent, #a91135); border-bottom: 2px solid #fff; }
.fq-pres { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px 16px; padding: 8px 4px 14px; align-items: start; }
.fq-pres label { font-size: 13px; display: block; }
.fq-pres input[type=text], .fq-pres textarea { width: 100%; box-sizing: border-box; }
.fq-pres .p-comp { grid-column: span 8; } .fq-pres .p-qual { grid-column: span 4; }
.fq-pres .p-bio { grid-column: span 7; } .fq-pres .p-dip { grid-column: span 5; } .fq-pres .p-ok { grid-column: 1 / -1; }
@media (max-width: 800px) { .fq-pres .p-comp, .fq-pres .p-qual, .fq-pres .p-soc, .fq-pres .p-bio, .fq-pres .p-dip { grid-column: 1 / -1; } }
.fq-ind { display: inline-block; padding: 1px 7px; border-radius: 6px; background: #eef1f6; color: #34425c; font-size: 12px; font-weight: 700; white-space: nowrap; }
.pagi-js { display: inline-flex; gap: 6px; align-items: center; margin-left: 8px; font-size: 13px; }
.pagi-js button { padding: 3px 10px; }
.barre-plie { margin: 6px 0; }

/* v3.44 — menus déroulants du bandeau : au survol, le titre mène au 1er onglet */
.nav-menu { position: relative; padding: 6px 0; }
.nav-menu .nav-tete { color: #e6d6db; }
.nav-menu:hover .nav-tete, .nav-menu:focus-within .nav-tete { color: #fff; }
.nav-menu-liste { display: none; position: absolute; top: 100%; left: -10px; z-index: 50; min-width: 220px; background: #fff; border-radius: 8px;
                  box-shadow: 0 8px 22px rgba(0,0,0,.25); padding: 6px; flex-direction: column; }
.nav-menu:hover .nav-menu-liste, .nav-menu:focus-within .nav-menu-liste { display: flex; }
.topbar .nav-menu-liste a { color: var(--texte, #222); padding: 8px 12px; border-radius: 6px; white-space: nowrap; }
.topbar .nav-menu-liste a:hover { background: #f6f1f1; color: var(--accent, #a91135); }

/* v3.23.1 — puces de compétences */
.fc-puces { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 8px; }
.fc-puce { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border: 1px solid var(--bord, #ddd); border-radius: 999px; background: #fff; cursor: pointer; font-weight: 500; }
.fc-puce:has(input:checked) { background: #fbeaee; border-color: var(--accent, #a91135); color: var(--accent, #a91135); }
.fc-puce input { width: auto; margin: 0; }

/* v3.23.1 — bandeau fixe, effet verre dépoli */
.topbar { position: sticky; top: 0; z-index: 100; background: rgba(12, 12, 22, .72);
          -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px);
          border-bottom: 1px solid rgba(255, 255, 255, .14);
          box-shadow: 0 6px 24px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .12); }
@media print { .topbar { display: none; } }

/* v3.31 : statuts de session — projet jaune, validé vert, réalisée rouge, clôturée bleu, archivée gris, annulée noir */
.st-pill { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 11px; border-radius: 10px; white-space: nowrap; }
.st-jaune { background: #ffe58a; color: #5c4600; }
.st-vert  { background: #bfe8c7; color: #14532d; }
.st-rouge { background: #f7b9b2; color: #7f1d1d; }
.st-bleu  { background: #bcd8f7; color: #123c73; }
.st-gris  { background: #dcdcdc; color: #444; }
.st-noir  { background: #222; color: #fff; }
.st-choix { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.st-choix button { border: 2px solid transparent; cursor: pointer; font: inherit; font-size: 13px; }
.st-choix button.st-actuel { border-color: #000; box-shadow: 0 0 0 2px #fff inset; }
.st-choix button:disabled { opacity: .9; cursor: default; }

/* ===== E-learning : parcours, composer, utilisation (v3.35) ===== */
.el-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: 600; white-space: nowrap; background: #eee; color: #555; }
.el-badge.el-libre { background: #e6f4ea; color: #1e6b34; }
.el-badge.el-avertissement { background: #fff3d6; color: #8a5a00; }
.el-badge.el-verrouille { background: #fde3e3; color: #a31515; }
.el-suivis { font-size: 12px; color: #666; margin-left: 4px; }
.el-bandeau { padding: 10px 14px; border-radius: 8px; border-left: 5px solid #999; background: #f4f4f4; margin: 10px 0 14px; line-height: 1.5; }
.el-bandeau.el-libre { border-color: #2e9d4f; background: #eef8f1; }
.el-bandeau.el-avertissement { border-color: var(--ambre, #e0a100); background: #fff8e6; }
.el-bandeau.el-verrouille { border-color: var(--rouge, #c0392b); background: #fdeeee; }
.el-barre { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin: 10px 0 14px; }
.el-choix, .el-nouveau { display: flex; gap: 8px; align-items: center; }
.el-choix select { min-width: 260px; }
.el-nouveau input[type=text] { min-width: 260px; }
.el-seq { margin: 6px 0 14px; }
.el-grille { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
.el-col { border: 1px solid var(--bord, #ddd); border-radius: 10px; padding: 12px 16px; background: #fff; }
.el-col h2 { margin-top: 0; font-size: 18px; }
.el-ordre { list-style: none; margin: 0; padding: 0; }
.el-ordre li { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid #eee; }
.el-rang { flex: 0 0 26px; height: 26px; line-height: 26px; text-align: center; border-radius: 50%; background: var(--accent, #a91135); color: #fff; font-weight: 700; font-size: 13px; }
.el-titre { flex: 1; min-width: 0; }
.el-titre small { display: block; color: #777; font-size: 12px; }
.el-gestes { display: flex; gap: 4px; align-items: center; }
.el-biblio { list-style: none; margin: 8px 0 12px; padding: 0; max-height: 460px; overflow-y: auto; }
.el-biblio li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 4px; border-bottom: 1px solid #eee; }
.el-biblio li[hidden] { display: none; }
.el-biblio label { display: flex; gap: 8px; align-items: flex-start; flex: 1; cursor: pointer; }
.el-actions { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.el-confirme { display: flex; flex-direction: column; gap: 6px; max-width: 420px; }
.el-liste-simple { margin: 4px 0 12px 20px; }

/* tableaux compacts : une ligne par module, défilement horizontal */
.el-defile { overflow-x: auto; max-height: 460px; overflow-y: auto; border: 1px solid var(--bord, #ddd); border-radius: 8px; }
.el-tableau { border-collapse: collapse; width: 100%; font-size: 14px; }
.el-tableau th, .el-tableau td { white-space: nowrap; padding: 5px 10px; border-bottom: 1px solid #eee; text-align: left; vertical-align: middle; }
.el-tableau thead th { position: sticky; top: 0; background: #f6f1f1; z-index: 1; font-size: 12px; text-transform: uppercase; color: #666; }
.el-tableau tr[hidden] { display: none; }
.el-tableau code { font-size: 12px; color: #555; }
.el-tableau td.el-rang { text-align: center; font-weight: 700; color: var(--accent, #a91135); }
.el-tableau td.el-gestes { display: table-cell; }
.el-outils { display: flex; gap: 12px; align-items: center; margin: 8px 0; flex-wrap: wrap; }
.el-outils input[type=search] { min-width: 260px; flex: 1; max-width: 420px; }
.el-tableau td.el-rang { background: none; height: auto; line-height: normal; border-radius: 0; flex: none; width: 1%; }
.el-seq label { display: inline-flex; gap: 8px; align-items: center; font-weight: 600; }
.el-seq input[type=checkbox] { margin: 0; }
.el-seq label { display: inline-flex !important; flex-direction: row !important; width: auto !important; max-width: none !important; }
.el-seq input[type=checkbox] { width: auto !important; flex: none; }
.el-gestes .btn-petit, .el-tableau .btn-petit { padding: 2px 10px; min-height: 0; }

/* Listes : colonnes au choix, 2 lignes max par cellule, pastilles d'intervenants (v3.35) */
table.liste td .cel { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 340px; line-height: 1.3; }
table.liste-sessions { font-size: 13px; }
table.liste-sessions th, table.liste-sessions td { padding: 5px 8px; }
table.liste-sessions th { white-space: nowrap; }
table.liste [hidden] { display: none; }
.menu-colonnes { position: relative; display: inline-block; }
.menu-colonnes > summary { list-style: none; cursor: pointer; }
.menu-colonnes-liste { position: absolute; right: 0; z-index: 30; background: #fff; border: 1px solid var(--bord, #ddd); border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.15); min-width: 220px; padding: 8px 12px; display: flex; flex-direction: column; gap: 4px; }
.menu-colonnes-liste label { display: flex !important; flex-direction: row !important; gap: 8px; align-items: center; font-weight: 500; width: auto !important; }
.menu-colonnes-liste input { width: auto !important; margin: 0; }
.int-pastille { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; font-size: 11px; font-weight: 700; overflow: hidden; border: 2px solid transparent; box-sizing: border-box; }
.int-pastille img { width: 100%; height: 100%; object-fit: cover; }
.int-interne { background: #d9f2e0; color: #17622f; border-color: #2e9d4f; }
.int-ext { background: #fff0b8; color: #7a5a00; border-color: #e0a100; }
.st-barre { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 4px 0 10px; padding: 6px 10px; background: #faf7f7; border: 1px solid var(--bord, #ddd); border-radius: 8px; }
.st-choix-barre { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }

/* Parcours granulaires (v3.36) */
.cu-resume { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 12px 0 16px; }
.cu-resume div { border: 1px solid var(--bord, #ddd); border-radius: 8px; padding: 8px 12px; background: #fff; }
.cu-resume span { display: block; color: #777; font-size: 12px; }
.cu-resume b { font-size: 20px; font-variant-numeric: tabular-nums; }
.cu-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cu-etape { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: start; background: #fff; border: 1px solid var(--bord, #ddd); border-radius: 10px; padding: 10px 12px; }
.el-rang-rond { width: 30px; height: 30px; line-height: 30px; text-align: center; border-radius: 50%; background: var(--accent, #a91135); color: #fff; font-weight: 700; }
.cu-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; color: #666; font-size: 13px; margin-top: 4px; }
.cu-obj { font-size: 13px; margin-top: 4px; }
.cu-pill { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 10px; white-space: nowrap; margin-left: 4px; }
.cu-pres { background: #f6e3e8; color: #a91135; } .cu-el { background: #e1f2e7; color: #2e7d4f; } .cu-quiz { background: #fff1cf; color: #a46a00; } .cu-eval { background: #eee; color: #333; }
.cu-gestes { display: flex; gap: 4px; }
.cu-edition { margin-top: 6px; }
.cu-edition summary { cursor: pointer; color: var(--accent, #a91135); font-size: 13px; }
.cu-form { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; max-width: 640px; }
.cu-form label { display: flex !important; flex-direction: column !important; gap: 3px; font-weight: 600; font-size: 13px; width: auto !important; }
.cu-form .cu-ligne { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.cu-form .cu-ligne label { flex: 1 1 140px; }
.cu-form label.cu-coche { flex-direction: row !important; align-items: center; gap: 6px; flex: 0 0 auto; }
.cu-form label.cu-coche input { width: auto !important; }
.cu-ajout { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 10px; }
.cu-ajout-forme { display: flex; gap: 8px; align-items: center; border: 1px solid var(--bord, #ddd); border-radius: 8px; padding: 8px 10px; background: #fff; }
.cu-ajout-forme select { flex: 1; min-width: 0; }
.cu-ajout-forme label { width: auto !important; flex: 0 0 auto; }
@media (max-width: 640px) { .cu-etape { grid-template-columns: 34px minmax(0, 1fr); } .cu-gestes { grid-column: 2; } }
.cu-ajout { grid-template-columns: 1fr; max-width: 760px; }
.cu-ajout-forme label { flex: 0 0 150px !important; }
.cu-ajout-forme select { min-width: 0; width: 100%; }
.el-coche-simple { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 6px; font-weight: 500; width: auto !important; }
.el-coche-simple input { width: auto !important; margin: 0; }