/* Parcours du site séance (06/11/2026), commun à la visionneuse et à Séance 2. Codes du site séance
   (hth-seance/app/static/styles.css) : Rubik, noir #1a1a1a, jaune hi-vis #FFD100, fond #faf9f5, cartes blanches arrondies.
   États : bleu = ça va, jaune = à regarder, rouge qui clignote = alerte seulement ; toujours un mot en plus de la teinte. */
:root{ --jaune:#FFD100; --jaune-vif:#FFDE33; --jaune-fonce:#E0A500; --jaune-soft:#FFF6D6; --noir:#1a1a1a; --texte:#1a1a1a;
  --texte-doux:#6b6a64; --bordure:#e4e2da; --fond:#faf9f5; --blanc:#fff; --radius:12px; --bleu:#11596b; --bleu-doux:rgba(17,89,107,.12);
  --rouge:#b3261e; }
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:'Rubik','Helvetica Neue',Helvetica,Arial,sans-serif;background:var(--fond);color:var(--texte);font-size:14px;line-height:1.45}
.topbar{display:flex;align-items:center;gap:18px;padding:12px 22px;background:var(--blanc);border-bottom:1px solid var(--bordure);position:sticky;top:0;z-index:20}
.wordmark{font-weight:800;letter-spacing:1px;font-size:17px;white-space:nowrap}
.wordmark i{color:var(--jaune);font-style:normal}
.topbar-title{font-weight:600;color:var(--texte-doux)}
.topbar-meta{margin-left:auto;font-size:12px;color:var(--texte-doux);display:flex;align-items:center;gap:10px}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;padding:22px;align-items:start;max-width:1500px;margin:0 auto}
@media (max-width:1000px){.layout{grid-template-columns:minmax(0,1fr)}.panel{position:static!important;max-height:none!important}}
@media (max-width:600px){.layout{padding:12px 16px;gap:14px}.topbar{padding:10px 16px;gap:10px}.topbar-title{display:none}}

/* filtres */
.filters{background:var(--blanc);border:1px solid var(--bordure);border-radius:var(--radius);padding:16px;margin-bottom:14px}
.filter-row{display:flex;gap:10px;margin-bottom:14px}
.search{flex:1;min-width:0;padding:9px 12px;border:1px solid var(--bordure);border-radius:8px;font-size:14px;font-family:inherit;background:var(--fond)}
.search:focus{outline:2px solid var(--jaune-soft);border-color:var(--jaune-fonce)}
.filter-group{margin-bottom:12px}
.filter-inline{display:flex;flex-wrap:wrap;gap:10px 26px}
.filter-label{display:block;font-size:10.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--texte-doux);margin-bottom:7px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--bordure);background:var(--blanc);border-radius:999px;padding:5px 12px;font-size:12.5px;font-weight:600;color:var(--texte);cursor:pointer;font-family:inherit;transition:all .12s ease}
.chip:hover{border-color:var(--jaune-fonce)}
.chip .n{color:var(--texte-doux);font-weight:500;margin-left:5px;font-size:11px}
.chip[aria-pressed="true"]{background:var(--jaune);border-color:var(--jaune-fonce)}
.btn-ghost{border:1px solid var(--bordure);background:var(--blanc);border-radius:8px;padding:8px 14px;font-size:13px;font-weight:600;cursor:pointer;color:var(--texte-doux);font-family:inherit}
.btn-ghost:hover{border-color:var(--jaune-fonce);color:var(--noir)}
.btn-ghost.sm{padding:3px 9px;font-size:11.5px}
.results-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:0 2px 12px;font-size:12.5px;color:var(--texte-doux)}
.mini-toggle{display:flex;align-items:center;gap:6px;cursor:pointer}
.empty{text-align:center;color:var(--texte-doux);padding:40px 0}

/* grille et cartes */
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(158px,1fr))}
@media (max-width:600px){.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
.card{background:var(--blanc);border:1px solid var(--bordure);border-radius:var(--radius);overflow:hidden;cursor:pointer;position:relative;text-align:left;transition:border-color .12s,box-shadow .12s;-webkit-tap-highlight-color:transparent}
.card:hover{border-color:var(--jaune-fonce);box-shadow:0 3px 12px rgba(224,165,0,.18)}
.card:focus-visible{outline:2px solid var(--jaune-fonce);outline-offset:2px}
.card[aria-pressed="true"]{border-color:var(--jaune-fonce);box-shadow:0 0 0 3px var(--jaune) inset}
.card-thumb{background:#fff;aspect-ratio:3/4;position:relative;overflow:hidden;border-bottom:1px solid var(--bordure);touch-action:pan-y}
.card-thumb img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;user-select:none;-webkit-user-drag:none}
.card-dots{position:absolute;left:0;right:0;bottom:6px;display:flex;gap:4px;justify-content:center;pointer-events:none}
.card-dots i{width:5px;height:5px;border-radius:50%;background:rgba(26,26,26,.22)}
.card-dots i.on{background:var(--jaune-fonce)}
.card-order{position:absolute;top:8px;left:8px;min-width:24px;height:24px;padding:0 6px;border-radius:999px;background:var(--jaune);color:var(--noir);font-size:12px;font-weight:800;display:none;align-items:center;justify-content:center;z-index:3;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.card[aria-pressed="true"] .card-order{display:flex}
.card-bars{position:absolute;top:8px;right:8px;display:flex;align-items:flex-end;gap:2px;height:14px;z-index:3}
.card-bars i{width:4px;border-radius:1px;background:var(--jaune-fonce)}
.card-bars i.off{background:#d9d7ce}
.card-toucher{position:absolute;left:8px;right:8px;bottom:18px;background:rgba(26,26,26,.86);color:#fff;font-size:11.5px;font-weight:600;text-align:center;border-radius:8px;padding:6px;display:none;pointer-events:none}
.card.armee{border-color:var(--jaune-fonce);box-shadow:0 0 0 2px var(--jaune-fonce) inset}
.card.armee .card-toucher{display:block}
.card-body{padding:8px 10px 10px}
.card-id{font-size:10px;font-weight:700;letter-spacing:.5px;color:var(--texte-doux)}
.card-title{font-size:12.5px;font-weight:700;line-height:1.3;margin:2px 0 6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.card-tags{display:flex;flex-wrap:wrap;gap:4px}
.tag{font-size:10px;font-weight:600;padding:2px 7px;border-radius:999px;background:var(--fond);color:var(--texte-doux)}
.tag.zone{background:var(--jaune-soft);color:var(--noir)}
.tag.reps{background:transparent;border:1px solid var(--bordure)}
/* exercice retenu hors de la version publique (licence ou modélisation à reprendre) : carte grisée, pas d'ajout */
.card.modelisation{cursor:default}
.card.modelisation:hover{border-color:var(--bordure);box-shadow:none}
.card-attente{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:var(--fond);color:var(--texte-doux);text-align:center;padding:12px;font-size:12px;font-weight:600;line-height:1.3}
.card-attente svg{width:34px;height:68px;fill:#d9d7ce}

/* panneau */
.panel{background:var(--blanc);border:1px solid var(--bordure);border-radius:var(--radius);padding:16px;position:sticky;top:78px;max-height:calc(100vh - 100px);overflow:auto}
.panel-title{font-size:15px;margin:0 0 12px;font-weight:700}
.form{display:flex;flex-direction:column;gap:11px}
.form label{display:flex;flex-direction:column;gap:4px;font-size:11.5px;font-weight:700;letter-spacing:.3px;color:var(--texte-doux);text-transform:uppercase}
.form input,.form textarea,.form select{padding:8px 10px;border:1px solid var(--bordure);border-radius:8px;font-size:13.5px;font-family:inherit;font-weight:400;color:var(--texte);text-transform:none;letter-spacing:0;background:var(--fond)}
.form input:focus,.form textarea:focus,.form select:focus{outline:2px solid var(--jaune-soft);border-color:var(--jaune-fonce)}
.form textarea{resize:vertical;line-height:1.5}
.actions{display:flex;gap:8px;margin-top:4px}
.btn-primary,.btn-secondary{flex:1;padding:11px 12px;border-radius:9px;font-size:13.5px;font-weight:700;cursor:pointer;font-family:inherit;border:1px solid transparent}
.btn-primary{border-color:var(--jaune-fonce);background:var(--jaune);color:var(--noir)}
.btn-primary:hover{background:var(--jaune-vif)}
.btn-secondary{background:var(--blanc);border-color:var(--bordure);color:var(--noir)}
.btn-secondary:hover{border-color:var(--jaune-fonce)}
.btn-primary:disabled,.btn-secondary:disabled{background:#efe7c4;border-color:transparent;color:#9a9784;cursor:not-allowed}
.hint{font-size:11.5px;color:var(--texte-doux);margin:8px 0 0;line-height:1.4}
.hint a{color:var(--noir);font-weight:700}
.status{font-size:12.5px;margin:2px 0 0;min-height:1.2em}
.status.err{color:var(--noir);background:var(--jaune-soft);border-radius:6px;padding:4px 8px}
.status a{color:var(--noir);font-weight:700}

/* fiche au survol */
.fiche{position:fixed;right:22px;bottom:22px;width:300px;background:var(--blanc);border:1px solid var(--bordure);border-radius:var(--radius);box-shadow:0 10px 30px rgba(0,0,0,.12);padding:14px;z-index:30;display:none;pointer-events:none}
.fiche.on{display:block}
.fiche h4{margin:0 0 6px;font-size:14px}
.fiche ul{margin:6px 0 0;padding-left:18px;font-size:12.5px}
.fiche .mods{display:flex;gap:6px;margin:8px 0}
.mod{flex:1;border:1px solid var(--bordure);border-radius:8px;padding:6px;text-align:center}
.mod b{display:block;font-size:9.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--texte-doux);font-weight:700}
.mod span{font-size:13px;font-weight:700}
.fiche .lab{font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--texte-doux);font-weight:700;display:block;margin-top:8px}
.fiche .intention{margin:0 0 6px;font-size:12.5px;color:#3a3a37;line-height:1.4}
.fiche .tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
@media (max-width:1000px){.fiche{display:none!important}}

/* états (pastille de la barre du haut, messages) : bleu = ça va, jaune = à regarder, rouge qui clignote = alerte */
.etat{padding:2px 10px;border-radius:999px;font-size:11.5px;font-weight:600;white-space:nowrap}
.etat-bleu{background:var(--bleu-doux);color:var(--bleu)}
.etat-jaune{background:var(--jaune-soft);color:#6b5200}
.etat-rouge{background:#fbe3e1;color:var(--rouge);animation:clignote 1s steps(2) infinite}
@keyframes clignote{to{opacity:.45}}