/* courses.css — squelette v2 (SPEC.md §4.4) : Mes cours, jobs, .gen-tag, .report-btn,
   formulaires du portail, toast. Les vues « Mes cours » / signalement complètent ce fichier. */

/* --- groupes sem au-delà de S1/S2 (SPEC.md §13.3) --- */
/* --s1/--s2 vivent dans tokens.css ; un pack de cursus peut grouper par libellé libre
   (pack STAPS : « Écrit 1/2 », « Oral 1/2 », « Transverse ») — 4 couleurs de plus. home.js pose
   la classe sem-c0…sem-c5 par index de groupe (SEM_CLASSES, cyclée au-delà de 6 groupes) sur la
   pastille .scard .tag et l'intertitre .sem-title : leurs couleurs sont réglées en bas de ce
   fichier pour tenir 4,5:1 (les teintes --s1/--s2/--semN, trop claires pour du texte, n'y servent plus). */
:root{ --sem3:#2f9e6e; --sem4:#c2478a; --sem5:#0ea5a3; --sem6:#a3762c; }

/* --- portail : 3 formulaires --- */
.gate-form{display:grid;gap:12px;text-align:left;margin-top:6px}
.gate-form[hidden]{display:none}
.gate-field{display:grid;gap:4px;font-size:.8rem;font-weight:700;color:var(--muted)}
.gate-field input{width:100%;padding:11px 12px;border:1.5px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink);font-size:1rem;font-weight:600}
.gate-field input:focus{border-color:var(--accent)}
.gate-field input:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.gate-field input[aria-invalid="true"]{border-color:var(--bad)}
/* « Afficher le mot de passe » : case à gauche, cible tactile 44 px */
.gate-show{display:flex;align-items:center;gap:10px;min-height:44px;font-size:.86rem;font-weight:600;color:var(--muted);cursor:pointer;text-align:left}
.gate-show input{width:20px;height:20px;accent-color:var(--accent);flex-shrink:0;margin:0}
.gate-form .btn.primary{width:100%;justify-content:center;margin-top:4px}
.gate-link{background:none;border:none;color:var(--accent-ink);font-weight:700;font-size:.88rem;cursor:pointer;padding:6px 8px;min-height:44px;text-decoration:underline}
.gate-note{font-size:.86rem;color:var(--ink);background:rgba(224,163,46,.14);border-radius:10px;padding:10px 12px}
.gate-card p[hidden]{display:none}
/* « Mot de passe oublié ? » : note discrète sous la connexion */
.gate-note.gate-forgot{background:none;color:var(--muted);padding:0 4px;font-size:.8rem;text-align:center}

/* --- badge « généré automatiquement » et bouton signaler --- */
.gen-tag{display:inline-block;font-size:.72rem;font-weight:800;padding:2px 8px;border-radius:99px;margin:0 0 6px;background:rgba(224,163,46,.18);color:var(--warn-ink);letter-spacing:.2px}
/* Badge « 🙋 Personnel » (cours visible par son autrice seule) */
.private-tag{display:inline-block;font-size:.72rem;font-weight:800;padding:2px 8px;border-radius:99px;background:rgba(108,140,255,.16);color:var(--accent-ink);white-space:nowrap}
.report-btn{background:none;border:1px dashed var(--line);color:var(--muted);border-radius:9px;padding:4px 9px;font-size:.74rem;font-weight:700;cursor:pointer}
.report-btn:hover{border-color:var(--accent);color:var(--accent)}
.report-btn.done{opacity:.75;cursor:default}
/* État d'un signalement déjà traité par Tom */
.report-btn.fixed{border-style:solid;border-color:rgba(47,170,106,.5);color:var(--good-ink);background:rgba(47,170,106,.08);opacity:1}
.report-btn.rejected{border-style:solid;color:var(--muted);opacity:1}
.report-note{display:block;font-size:.76rem;color:var(--muted);margin-top:4px;line-height:1.4}
/* Modale de signalement : ce que l'on signale */
.report-snap-h{margin:10px 0 4px;font-weight:700}
.report-snap{white-space:pre-wrap;word-break:break-word;max-height:30vh;overflow:auto;font-family:inherit;font-size:.8rem;line-height:1.45;background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:0 0 10px;color:var(--ink)}

/* --- barre globale des générations (#jobBar, §7.12) --- */
#jobBar{position:static;margin:0 0 14px;padding:10px 14px;border-radius:12px;border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow);display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;font-size:.86rem;font-weight:700}
#jobBar[hidden]{display:none}
/* v2 : le texte prend sa propre ligne (2 lignes au plus), la jauge et les boutons passent dessous */
#jobBar .jb-bar,.gen-row .jb-bar{flex:1 1 120px;height:6px;border-radius:99px;background:var(--bg2);overflow:hidden}
#jobBar .jb-bar i,.gen-row .jb-bar i{display:block;height:100%;background:var(--accent);border-radius:99px;transition:width .3s}
.gen-row .jb-bar{margin-top:8px}
#jobBar.done{border-color:var(--good)}
#jobBar.done .jb-bar i{background:var(--good)}
/* échec : bord rouge, pas de jauge pleine violette qui contredit le message */
#jobBar.failed{border-color:var(--bad);border-left-width:4px}
#jobBar.failed .jb-bar{display:none}
#jobBar.failed .jb-txt{color:var(--bad-ink)}
/* Collante seulement sur grand écran et seulement tant qu'un envoi ou une génération est en cours :
   sur téléphone (texte + jauge + bouton = ~130 px) elle masquait le quiz, et un état terminé
   (prêt, échec) ou discret n'a pas à rester collé en haut. */
@media(min-width:720px){#jobBar:not(.done):not(.failed):not(.quiet){position:sticky;top:0;z-index:40}}
/* seuls des dépôts d'autres sont en cours : barre discrète, texte seul */
#jobBar.quiet{background:var(--bg2);box-shadow:none;padding:6px 12px;font-size:.8rem;font-weight:600;color:var(--muted)}

/* --- toasts --- */
/* v2 : pleine largeur utile (plus de colonne de 188 px), au-dessus du portail (z-index 100) */
#toasts{position:fixed;left:16px;right:16px;bottom:max(22px,calc(env(safe-area-inset-bottom) + 12px));z-index:120;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.toast{background:var(--ink);color:var(--card);padding:11px 16px;border-radius:12px;font-size:.88rem;font-weight:700;line-height:1.4;box-shadow:var(--shadow);animation:fade .25s;max-width:min(100%,460px);text-align:center}

/* --- Mes cours : mise en page générale (SPEC.md §7.1) --- */
.courses-sec{margin-bottom:28px}
.courses-sec h3{margin:0 0 10px;font-size:1rem;font-weight:800}
.course-note{font-size:.82rem;color:var(--muted);margin:6px 0}

/* --- bibliothèque du cursus --- */
#coursesBody .course-row{display:block;padding:12px 14px;border:1px solid var(--line);border-radius:12px;margin-bottom:10px;background:var(--card)}
.course-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.course-head .name{flex:1 1 55%;min-width:0;font-weight:800;overflow-wrap:anywhere}
.course-ic{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px;font-size:1rem}
.course-ver{font-size:.72rem;color:var(--muted);font-weight:700}
.building-tag{display:inline-block;font-size:.72rem;font-weight:800;padding:2px 8px;border-radius:99px;background:rgba(122,92,255,.15);color:var(--accent-ink)}
.course-sub{font-size:.8rem;color:var(--muted);margin-top:4px}
.course-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.course-edit{margin-top:4px}
.course-edit summary{cursor:pointer;font-size:.84rem;font-weight:700;color:var(--muted);display:flex;align-items:center;gap:6px;min-height:40px;padding:4px 0;list-style:none}
.course-edit summary::-webkit-details-marker{display:none}
.course-edit summary::before{content:"▸";font-size:.8rem;transition:transform .18s}
.course-edit[open] > summary::before{transform:rotate(90deg)}
.course-edit-form{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:8px}
.course-edit-form input{padding:8px 10px;border:1.5px solid var(--line);border-radius:9px;background:var(--bg);color:var(--ink);font:inherit;font-size:.92rem;min-width:0}
.exam-form label{display:flex;flex-direction:column;gap:3px;font-size:.76rem;color:var(--muted);font-weight:700}
.exam-form .course-note{width:100%;margin:0}
.exam-by{font-style:italic}
.course-edit-actions{display:flex;gap:8px}

/* --- nouveau cours : dépôt immédiat (SPEC v2, remplace le formulaire titre/sem/indications) --- */
/* v2 : zone nettement visible (bordure --muted, fond carte), vrai faux-bouton « 📷 Choisir des photos » */
.dropzone{display:block;border:2px dashed var(--muted);border-radius:16px;padding:22px;text-align:center;color:var(--muted);position:relative;background:var(--card);cursor:pointer}
.dropzone.over{border-color:var(--accent);background:var(--bg2)}
.dropzone:focus-within{outline:3px solid var(--accent);outline-offset:2px}
.dropzone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.dropzone-main{padding:24px 16px 20px;margin-top:6px;border-color:color-mix(in srgb,var(--accent) 55%,var(--muted))}
.dropzone-main p{margin:0 0 12px;font-size:1rem;font-weight:800;color:var(--ink)}
.dz-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:48px;padding:12px 22px;border-radius:12px;background:linear-gradient(135deg,var(--btn-a),var(--btn-b));color:var(--on-btn);font-weight:800;font-size:.95rem;box-shadow:var(--shadow);pointer-events:none}
.dropzone-main small{display:block;margin-top:12px;font-size:.78rem;line-height:1.4}
@media (hover:hover) and (pointer:fine){.dropzone-main:hover{border-color:var(--accent);background:var(--bg2)}.dropzone-main.dz-blocked:hover{border-color:var(--line);background:var(--bg2)}}
/* Plafond du jour atteint (mycourses.js pose .dz-blocked) : la zone ne doit plus avoir l'air cliquable */
.dropzone.dz-blocked{cursor:default;border-style:solid;border-color:var(--line);background:var(--bg2)}
.dropzone.dz-blocked input[type=file]{cursor:default}
/* Conseils photo sous la zone de dépôt */
.dz-tips{list-style:none;margin:10px 2px 4px;padding:0;display:grid;gap:2px;font-size:.8rem}
.dz-tips li{position:relative;padding-left:20px}
.dz-tips li::before{content:"✓";position:absolute;left:3px;color:var(--good-ink);font-weight:800}
.append-wrap{position:relative;display:inline-block}

/* --- ligne d'état inline d'un envoi (dépôt ou ajout, §7.6/§7.12) --- */
.send-status{margin-top:10px;padding:8px 12px;border-radius:10px;background:var(--card);border:1px solid var(--line);font-size:.86rem;font-weight:700}
.send-status[hidden]{display:none}
.send-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.send-txt.send-ok{color:var(--good-ink)}
.send-txt.send-err{color:var(--bad-ink)}
.send-files{list-style:none;margin:6px 0 0;padding:0;font-weight:400;color:var(--muted);font-size:.8rem;overflow-wrap:anywhere}

/* --- demande unique de notification post-envoi (push.js shouldAskOnce) --- */
.notify-ask{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;font-size:.86rem;font-weight:700}
.notify-ask[hidden]{display:none}
.notify-ask-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.notify-ask-row > span{flex:1 1 220px;line-height:1.45}
/* Carte « installe l'app » de l'accueil : même rendu que la ligne de Mes cours, bouton à droite */
.install-hint{margin:0 0 16px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--card);box-shadow:var(--shadow);font-size:.86rem;font-weight:700}
.install-hint > .btn{margin-left:auto;flex:0 0 auto}
.notify-ask .course-note{width:100%;font-weight:400;margin:2px 0 0}

/* --- générations --- */
.gen-row{padding:10px 12px;border:1px solid var(--line);border-radius:12px;margin-bottom:8px;background:var(--card)}
.gen-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.gen-head .name{flex:1;font-weight:800}
.gen-state{font-size:.72rem;font-weight:800;padding:2px 8px;border-radius:99px;background:var(--bg2);color:var(--muted);white-space:nowrap}
.gen-row.gen-running .gen-state,.gen-row.gen-awaiting_choice .gen-state{background:rgba(122,92,255,.15);color:var(--accent-ink)}
.gen-row.gen-done .gen-state{background:rgba(47,170,106,.15);color:var(--good-ink)}
.gen-row.gen-failed .gen-state{background:rgba(224,74,74,.15);color:var(--bad-ink)}
.gen-row.gen-deposit .gen-state{background:var(--bg2);color:var(--muted)}
.gen-row.gen-failed{border-left:4px solid var(--bad)}
.gen-row.gen-awaiting_choice{border-left:4px solid var(--accent)}
.gen-author{font-size:.76rem;color:var(--muted)}
.gen-step,.gen-dur{font-size:.76rem;color:var(--muted);margin-top:4px}
.gen-error{font-size:.84rem;color:var(--bad-ink);margin-top:4px;font-weight:700}
.gen-actions{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.gen-actions:empty{display:none}
/* Dépôt scindé en plusieurs matières : une ligne par matière */
.gen-children{list-style:none;margin:8px 0 0;padding:0}
.gen-child{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:8px 0;border-top:1px solid var(--line);font-size:.88rem}
.gen-child .name{flex:1 1 140px;font-weight:700;min-width:0}
.gen-child-state{font-size:.78rem;font-weight:800;color:var(--muted)}
.gen-child.gen-done .gen-child-state{color:var(--good-ink)}
.gen-child.gen-failed .gen-child-state{color:var(--bad-ink)}
.gen-child .btn{padding:8px 14px;font-size:.82rem}

/* --- #jobBar : texte, action, fermeture (structure posée par jobs.js) --- */
#jobBar .jb-txt{flex:1 1 100%;min-width:0;white-space:normal;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:1.35}
#jobBar.failed .jb-txt{-webkit-line-clamp:4}
#jobBar.quiet .jb-txt{flex-basis:auto}
#jobBar .jb-action{padding:6px 12px;font-size:.8rem;min-height:36px}
#jobBar .jb-close{background:none;border:none;color:var(--muted);cursor:pointer;font-weight:800;font-size:1rem;min-width:44px;min-height:44px;margin:-8px -10px -8px auto;display:grid;place-items:center;border-radius:10px}
#jobBar .jb-close:hover{background:var(--bg2);color:var(--ink)}
#jobBar .jb-extra{font-size:.76rem;color:var(--muted);font-weight:600}
@media(max-width:560px){#jobBar .jb-action{min-height:44px}}
/* Écran large : texte et jauge partagent la ligne quand il y a la place */
@media(min-width:720px){#jobBar .jb-txt{flex:1 1 auto}}

/* --- signalement --- */
.report-ta{width:100%;min-height:90px;padding:10px 12px;border:1.5px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink);font:inherit;resize:vertical}

/* --- versions côté utilisatrice (SPEC.md §11 Phase 5, §7.10) --- */
.version-list{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px}
.version-item{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 10px;border:1px solid var(--line);border-radius:9px;font-size:.84rem}
.version-label{font-weight:800}
.version-note{color:var(--muted);font-size:.78rem;flex:1;min-width:120px}
.version-preview{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
.version-preview h4{margin:0 0 8px;font-size:.9rem}
.version-section{margin-bottom:10px}
.version-section h5{margin:0 0 4px;font-size:.82rem;color:var(--muted)}
.version-html{font-size:.86rem}

/* ===================== Lot C (2026-10-07) ===================== */
/* Mes cours : « À toi de choisir » (cours en double, §6) */
#coursesChoiceSec{background:rgba(122,92,255,.07);border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));border-radius:16px;padding:14px}
#coursesChoiceSec h3{margin-bottom:8px}
.choice-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.choice-card + .choice-card{margin-top:12px}
.choice-title{font-weight:800;line-height:1.4;margin:0 0 4px}
.choice-reason{display:block;font-style:italic}
.choice-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.choice-actions .btn{flex:1 1 200px}
.choice-actions .btn:disabled{opacity:.5}
@media(max-width:560px){.choice-actions{flex-direction:column}.choice-actions .btn{flex:none;width:100%}}
/* Cours archivés (restaurables par leur autrice) : plus discrets que la bibliothèque */
#coursesBody .course-row.archived-row{background:var(--bg2);border-style:dashed}
.archived-row .name{color:var(--muted)}
/* Accueil vide : premier cours / erreur de chargement */
.empty.first-course,.empty.load-error{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:28px 18px;margin:4px 0 16px}
.empty.first-course p:first-child,.empty.load-error p:first-child{font-weight:800;color:var(--ink);font-size:1.02rem;margin:0 0 8px}
.lvl-empty-sub{max-width:34em;margin:0 auto 16px;font-size:.88rem;line-height:1.5}
.empty.load-error{border-left:4px solid var(--bad)}
.myrow-more{background:none;border:none;padding:4px 2px;font:inherit;font-size:.8rem;font-weight:700;color:var(--muted);text-decoration:underline;cursor:pointer;min-height:36px}
.myrow-more:hover{color:var(--accent-ink)}
/* Pastilles de semestre et intertitres : fond foncé + texte blanc (>= 4,5:1, deux thèmes) */
.scard .tag{color:#fff;font-size:.72rem}
.scard .tag.sem-c0{background:#3d5bd9}.scard .tag.sem-c1{background:#b5571c}.scard .tag.sem-c2{background:#1f7a54}
.scard .tag.sem-c3{background:#ad3a78}.scard .tag.sem-c4{background:#0a7472}.scard .tag.sem-c5{background:#7d5a1c}
.sem-title.sem-c0{color:#3d5bd9}.sem-title.sem-c1{color:#a14c14}.sem-title.sem-c2{color:#186b48}
.sem-title.sem-c3{color:#a8326f}.sem-title.sem-c4{color:#086664}.sem-title.sem-c5{color:#7d5a1c}
[data-theme="dark"] .sem-title.sem-c0{color:#8fa6ff}[data-theme="dark"] .sem-title.sem-c1{color:#f0a36d}
[data-theme="dark"] .sem-title.sem-c2{color:#4fc49a}[data-theme="dark"] .sem-title.sem-c3{color:#e27bb5}
[data-theme="dark"] .sem-title.sem-c4{color:#3cc8c6}[data-theme="dark"] .sem-title.sem-c5{color:#d6a85a}
/* Mobile : boutons d'action des cours sur une grille propre, champs à 16 px */
@media(max-width:560px){
  .course-actions .btn,.course-actions .append-wrap{flex:1 1 calc(50% - 4px)}
  .course-actions .append-wrap .btn{width:100%}
  .course-actions .btn{min-height:44px;padding:9px 10px;font-size:.84rem}
  .course-edit summary{min-height:44px}
  .course-edit-form input{font-size:16px}
  .exam-form label{flex:1 1 130px}
  .exam-form input{width:100%}
  .course-edit-actions{width:100%}
  .course-edit-actions .btn{flex:1}
  .gen-actions .btn{flex:1 1 auto}
}