@font-face { font-family: "Geist"; src: url("/polices/geist.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/polices/geist-mono.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --fond: #0E0D0B;
  --panneau: #131210;
  --saisie: #0B0A09;
  --trait: #2A2722;
  --trait-fort: #3A3630;
  --texte: #EDE7DA;
  --doux: #9C9384;
  --muet: #625B4F;
  --or: #D4A24C;
  --sur-or: #0E0D0B;
  --hausse: #93B48B;
  --baisse: #C4654B;
  --rayon: 8px;
  --rayon-grand: 12px;
  --sans: "Geist", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--fond); }
body { margin: 0; min-height: 100vh; background: var(--fond); color: var(--texte); font: 400 15px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; border-radius: 4px; }
.chiffres { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 500; }
.hausse { color: var(--hausse); }
.baisse { color: var(--baisse); }
.doux { color: var(--doux); }

.barre { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 28px; height: 56px; padding: 0 28px; background: rgba(14, 13, 11, .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--trait); }
.marque { display: flex; align-items: baseline; gap: 8px; text-decoration: none; font-weight: 600; letter-spacing: -.01em; }
.marque span { color: var(--doux); font-weight: 400; }
.barre nav { display: flex; gap: 4px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.barre nav a { position: relative; display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 12px; color: var(--doux); text-decoration: none; white-space: nowrap; }
.barre nav a:hover { color: var(--texte); }
.barre nav a[aria-current="page"] { color: var(--or); }
.barre nav a[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 1px; background: var(--or); }
.pastille { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--or); color: var(--sur-or); font: 600 11px/18px var(--mono); text-align: center; }
.barre .qui { color: var(--doux); font-size: 13px; white-space: nowrap; }
.tiroir { display: contents; }
.menu { display: none; }

.page { max-width: 1120px; margin: 0 auto; padding: 40px 28px 96px; }
.page.etroite { max-width: 440px; padding-top: 12vh; }
.entete { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 28px; flex-wrap: wrap; }
.titre { font-size: 30px; line-height: 1.15; font-weight: 600; letter-spacing: -.025em; }
.sous-titre { margin-top: 6px; color: var(--doux); max-width: 62ch; }
.section { margin-top: 44px; }
.section > h2 { font-size: 17px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 14px; }
.retour-lien { display: inline-block; margin-bottom: 18px; color: var(--doux); text-decoration: none; font-size: 14px; }
.retour-lien:hover { color: var(--texte); }

.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 16px; border: 1px solid var(--trait-fort); border-radius: var(--rayon); background: transparent; color: var(--texte); font: 500 14px var(--sans); text-decoration: none; cursor: pointer; transition: border-color .15s, background .15s; }
.bouton:hover { border-color: var(--doux); }
.bouton.principal { background: var(--or); border-color: var(--or); color: var(--sur-or); font-weight: 600; }
.bouton.principal:hover { background: #E0B160; border-color: #E0B160; }
.bouton.danger { color: var(--baisse); }
.bouton.danger:hover { border-color: var(--baisse); }
.bouton.petit { height: 30px; padding: 0 11px; font-size: 13px; }
.bouton:disabled { opacity: .45; cursor: default; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.formulaire { display: grid; gap: 16px; }
.champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; }
.champ { display: grid; gap: 6px; align-content: start; }
.champ.large { grid-column: 1 / -1; }
.champ > span { color: var(--doux); font-size: 13px; }
.champ small { color: var(--muet); font-size: 12px; }
input, select, textarea { width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--saisie); color: var(--texte); font: 400 15px var(--sans); }
input[type="number"], input[type="datetime-local"], input[type="date"], input[type="time"], input.code { font-family: var(--mono); font-variant-numeric: tabular-nums; }
textarea { height: auto; min-height: 120px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--or); }
.champ.invalide input, .champ.invalide select, .champ.invalide textarea { border-color: var(--baisse); }
.message { padding: 10px 14px; border-radius: var(--rayon); border: 1px solid var(--trait); color: var(--doux); font-size: 14px; }
.message.erreur { border-color: rgba(196, 101, 75, .5); color: #E0907A; }
.message.succes { border-color: rgba(147, 180, 139, .45); color: var(--hausse); }
.segments { display: inline-flex; border: 1px solid var(--trait); border-radius: var(--rayon); overflow: hidden; }
.segments label { position: relative; }
.segments input { position: absolute; opacity: 0; inset: 0; height: 100%; cursor: pointer; }
.segments span { display: block; padding: 8px 16px; color: var(--doux); font-size: 14px; }
.segments input:checked + span { background: var(--panneau); color: var(--texte); box-shadow: inset 0 -2px var(--or); }
.segments input:focus-visible + span { outline: 2px solid var(--or); outline-offset: -2px; }

.panneau { border: 1px solid var(--trait); border-radius: var(--rayon-grand); background: var(--panneau); padding: 22px; }
.vide { padding: 44px 22px; border: 1px dashed var(--trait-fort); border-radius: var(--rayon-grand); color: var(--doux); text-align: center; }
.vide p + .bouton { margin-top: 16px; }

.bilan { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0; border: 1px solid var(--trait); border-radius: var(--rayon-grand); background: var(--panneau); overflow: hidden; }
.bilan .courbe { min-height: 190px; padding: 18px 8px 8px 18px; }
.bilan .courbe svg { display: block; width: 100%; height: 170px; }
.bilan dl { display: grid; grid-template-columns: auto auto; align-content: center; gap: 10px 22px; margin: 0; padding: 20px 24px; border-left: 1px solid var(--trait); }
.bilan dt { color: var(--doux); font-size: 13px; }
.bilan dd { margin: 0; text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 500; }
.courbe-trait { fill: none; stroke: var(--or); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.courbe-aire { fill: rgba(212, 162, 76, .09); stroke: none; }
.courbe-zero { stroke: var(--trait-fort); stroke-width: 1; stroke-dasharray: 3 4; }
.courbe-point { fill: var(--or); }
.courbe-texte { fill: var(--muet); font: 500 11px var(--mono); }

.filtres { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; margin: 28px 0 14px; }
.filtres .champ { width: 150px; }
.filtres input, .filtres select { height: 34px; font-size: 14px; }

.registre { width: 100%; border-collapse: collapse; }
.registre th { padding: 10px 12px; border-bottom: 1px solid var(--trait-fort); color: var(--muet); font-size: 12px; font-weight: 500; text-align: left; white-space: nowrap; }
.registre td { padding: 12px; border-bottom: 1px solid var(--trait); vertical-align: middle; }
.registre .droite { text-align: right; }
.registre td.chiffres, .registre td .sens { white-space: nowrap; }
.registre .court { display: none; }
.registre tbody tr { cursor: pointer; }
.registre tbody tr:hover { background: var(--panneau); }
.registre tbody tr.inerte { cursor: default; }
.registre tbody tr.inerte:hover { background: none; }
.registre a.ligne { color: inherit; text-decoration: none; }
.cadre-registre { overflow-x: auto; }
.sens { font: 600 11px var(--mono); padding: 2px 7px; border-radius: 4px; border: 1px solid currentColor; }
.etiquette { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 12px; border: 1px solid var(--trait-fort); color: var(--doux); white-space: nowrap; }
.etiquette.bon, .etiquette.actif, .etiquette.confirme { border-color: rgba(147, 180, 139, .5); color: var(--hausse); }
.etiquette.a_revoir, .etiquette.attente, .etiquette.ouverte { border-color: rgba(212, 162, 76, .55); color: var(--or); }
.etiquette.erreur, .etiquette.suspendu, .etiquette.refuse, .etiquette.annule { border-color: rgba(196, 101, 75, .5); color: #E0907A; }
.point-neuf { display: inline-block; width: 7px; height: 7px; margin-left: 7px; border-radius: 50%; background: var(--or); vertical-align: middle; }
.pagination { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; color: var(--doux); font-size: 14px; }

.fiche { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.resultat-vif { display: flex; gap: 28px; padding: 16px 0 4px; }
.resultat-vif div { display: grid; gap: 2px; }
.resultat-vif strong { font: 500 26px var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.resultat-vif span { color: var(--doux); font-size: 13px; }
.captures { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.capture { position: relative; aspect-ratio: 4 / 3; border: 1px solid var(--trait); border-radius: var(--rayon); overflow: hidden; background: var(--saisie); }
.capture img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
.capture button { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border: 0; border-radius: 6px; background: rgba(14, 13, 11, .85); color: var(--texte); cursor: pointer; font-size: 15px; line-height: 1; }
.depot { display: grid; place-items: center; aspect-ratio: 4 / 3; border: 1px dashed var(--trait-fort); border-radius: var(--rayon); color: var(--doux); font-size: 13px; text-align: center; padding: 10px; cursor: pointer; }
.depot.survol { border-color: var(--or); color: var(--or); }
.depot input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.visionneuse { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 24px; background: rgba(8, 7, 6, .94); cursor: zoom-out; }
.visionneuse img { max-width: 100%; max-height: 100%; border-radius: var(--rayon); }
.retour-formateur { border-left: 2px solid var(--or); padding: 4px 0 4px 16px; }
.retour-formateur p { margin-top: 8px; white-space: pre-wrap; overflow-wrap: anywhere; }
.notes { white-space: pre-wrap; overflow-wrap: anywhere; }
.historique { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; color: var(--doux); font-size: 14px; }
.historique .chiffres { color: var(--texte); }
.definitions { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 0; }
.definitions dt { color: var(--doux); font-size: 14px; }
.definitions dd { margin: 0; overflow-wrap: anywhere; }

.agenda { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 36px; align-items: start; }
.mois { border: 1px solid var(--trait); border-radius: var(--rayon-grand); background: var(--panneau); padding: 18px; }
.mois header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.mois header strong { font-weight: 600; text-transform: capitalize; }
.mois .grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.mois .jour-nom { padding: 4px 0; color: var(--muet); font-size: 12px; text-align: center; }
.mois button.jour { position: relative; aspect-ratio: 1; border: 1px solid transparent; border-radius: var(--rayon); background: none; color: var(--muet); font: 500 14px var(--mono); cursor: default; }
.mois button.jour.libre { color: var(--texte); cursor: pointer; }
.mois button.jour.libre::after { content: ""; position: absolute; left: 50%; bottom: 6px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--or); }
.mois button.jour.libre:hover { border-color: var(--trait-fort); }
.mois button.jour.choisi { background: var(--or); color: var(--sur-or); }
.mois button.jour.choisi::after { background: var(--sur-or); }
.creneaux { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; margin-top: 14px; }
.creneaux button { height: 42px; border: 1px solid var(--trait-fort); border-radius: var(--rayon); background: none; color: var(--texte); font: 500 15px var(--mono); cursor: pointer; }
.creneaux button:hover { border-color: var(--or); color: var(--or); }
.creneaux button[aria-pressed="true"] { background: var(--or); border-color: var(--or); color: var(--sur-or); }
.rdv { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 20px 22px; border: 1px solid var(--trait); border-left: 2px solid var(--or); border-radius: var(--rayon-grand); background: var(--panneau); }
.rdv strong { display: block; font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.plage { display: grid; grid-template-columns: 150px 120px 120px auto; gap: 10px; align-items: center; margin-bottom: 8px; }

.accueil { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: center; min-height: calc(100vh - 56px); max-width: 1120px; margin: 0 auto; padding: 40px 28px; }
.accueil h1 { font-size: clamp(34px, 5vw, 54px); line-height: 1.04; font-weight: 600; letter-spacing: -.035em; }
.accueil p { margin: 20px 0 30px; color: var(--doux); font-size: 17px; max-width: 46ch; }
.apercu { border: 1px solid var(--trait); border-radius: var(--rayon-grand); background: var(--panneau); padding: 20px 20px 6px; }
.apercu svg { display: block; width: 100%; height: 150px; }
.apercu table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 14px; }
.apercu td { padding: 9px 4px; border-top: 1px solid var(--trait); }
.apercu td:last-child { text-align: right; }

@media (max-width: 820px) {
  .barre { gap: 14px; padding: 0 16px; justify-content: space-between; }
  .menu { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px 0 12px; border: 1px solid var(--trait-fort); border-radius: var(--rayon); background: none; color: var(--texte); font: 500 14px var(--sans); cursor: pointer; }
  .menu .point-menu { width: 7px; height: 7px; border-radius: 50%; background: var(--or); }
  .menu .traits { position: relative; width: 16px; height: 10px; }
  .menu .traits::before, .menu .traits::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; border-radius: 1px; background: currentColor; transition: transform .18s, top .18s; }
  .menu .traits::before { top: 1px; }
  .menu .traits::after { top: 8px; }
  .barre.ouverte .menu { border-color: var(--or); color: var(--or); }
  .barre.ouverte .menu .traits::before { top: 4.5px; transform: rotate(45deg); }
  .barre.ouverte .menu .traits::after { top: 4.5px; transform: rotate(-45deg); }
  .tiroir { display: none; position: absolute; top: 56px; left: 0; right: 0; flex-direction: column; max-height: calc(100vh - 56px); max-height: calc(100dvh - 56px); padding: 4px 16px 20px; overflow-y: auto; background: var(--fond); border-bottom: 1px solid var(--trait-fort); box-shadow: 0 24px 40px rgba(0, 0, 0, .5); }
  .barre.ouverte .tiroir { display: flex; }
  .barre nav { flex: none; flex-direction: column; gap: 0; overflow: visible; }
  .barre nav a { justify-content: space-between; height: 52px; padding: 0 4px; border-bottom: 1px solid var(--trait); font-size: 16px; }
  .barre nav a[aria-current="page"]::after { content: none; }
  .barre .qui { margin: 16px 4px 10px; }
  .tiroir > .bouton { height: 44px; font-size: 14px; }
  .page { padding: 28px 16px 80px; }
  .titre { font-size: 25px; }
  .bilan { grid-template-columns: 1fr; }
  .bilan dl { border-left: 0; border-top: 1px solid var(--trait); grid-template-columns: 1fr auto; }
  .fiche, .agenda, .accueil { grid-template-columns: 1fr; gap: 28px; }
  .accueil { padding: 32px 16px; min-height: 0; }
  .registre .secondaire { display: none; }
  .registre .long { display: none; }
  .registre .court { display: inline; }
  .registre th, .registre td { padding: 11px 6px; font-size: 14px; }
  .filtres .champ { width: calc(50% - 5px); }
  .bilan .courbe { padding: 14px 4px 4px 10px; }
  .plage { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

.calendrier-journal { margin-top: 28px; border: 1px solid var(--trait); border-radius: var(--rayon-grand); background: var(--panneau); overflow: hidden; }
.mois-journal > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--trait); }
.mois-journal > header strong { min-width: 150px; text-align: center; font-weight: 600; text-transform: capitalize; }
.total-mois { display: flex; gap: 18px; align-items: baseline; font-size: 14px; }
.semaine { display: grid; grid-template-columns: repeat(7, 1fr); padding: 10px 10px 0; }
.semaine span { padding: 0 8px 6px; color: var(--muet); font-size: 12px; }
.cases { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; padding: 0 10px 10px; }
.case { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 78px; padding: 8px 10px; border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--fond); color: var(--muet); font: 400 13px var(--sans); text-align: left; cursor: pointer; transition: border-color .15s; }
.case.vide-case { border-color: transparent; background: none; cursor: default; }
button.case:hover { border-color: var(--doux); }
.case .numero { font: 500 13px var(--mono); }
.case.actif .numero { color: var(--texte); }
.case .valeur { margin-top: auto; font-size: 14px; }
.case .compte { font-size: 11px; color: var(--muet); }
.case.hausse { background: rgba(147, 180, 139, .08); border-color: rgba(147, 180, 139, .28); }
.case.hausse .valeur { color: var(--hausse); }
.case.baisse { background: rgba(196, 101, 75, .08); border-color: rgba(196, 101, 75, .3); }
.case.baisse .valeur { color: var(--baisse); }
.case.aujourdhui .numero { color: var(--or); }
.case.aujourdhui .numero::after { content: " ·"; }
.case.choisi { border-color: var(--or); box-shadow: inset 0 0 0 1px var(--or); }
.jour-detail { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 18px; border-top: 1px solid var(--trait); }
.jour-detail strong { display: block; font-weight: 600; }
.jour-detail strong::first-letter { text-transform: uppercase; }
@media (max-width: 820px) {
  .cases { gap: 3px; padding: 0 6px 6px; }
  .semaine { padding: 8px 6px 0; }
  .semaine span { padding: 0 2px 4px; text-align: center; }
  .case { min-height: 54px; padding: 5px 4px; align-items: center; }
  .case .valeur { font-size: 10px; letter-spacing: -.03em; }
  .case .compte { display: none; }
  .mois-journal > header strong { min-width: 110px; }
}

.page.large { max-width: 1280px; }
.avancement { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center; padding: 24px 26px; border: 1px solid var(--trait); border-radius: var(--rayon-grand); background: var(--panneau); }
.avancement .compte { font: 500 30px/1 var(--mono); letter-spacing: -.03em; }
.avancement .compte small { color: var(--doux); font-size: 15px; letter-spacing: 0; font-family: var(--sans); font-weight: 400; margin-left: 8px; }
.jauge { height: 4px; margin-top: 16px; border-radius: 2px; background: var(--trait); overflow: hidden; }
.jauge > span { display: block; height: 100%; border-radius: 2px; background: var(--or); }
.jauge.fine { height: 2px; margin-top: 0; }
.module { margin-top: 44px; }
.module > header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--trait-fort); }
.module > header h2 { font-size: 19px; font-weight: 600; letter-spacing: -.015em; }
.module > header .chiffres { color: var(--doux); font-size: 13px; white-space: nowrap; }
.module > p { margin-top: 10px; color: var(--doux); max-width: 70ch; white-space: pre-wrap; }
.lecons { margin: 0; padding: 0; list-style: none; counter-reset: lecon; }
.lecons li { counter-increment: lecon; border-bottom: 1px solid var(--trait); }
.lecons a, .lecons .rangee { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 15px 6px; color: inherit; text-decoration: none; }
.lecons a:hover { background: var(--panneau); }
.lecons a::before, .lecons .rangee::before { content: counter(lecon, decimal-leading-zero); color: var(--muet); font: 500 13px var(--mono); }
.lecons .titre-lecon { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lecons .meta { color: var(--doux); font: 500 13px var(--mono); white-space: nowrap; }
.lecons li.courante a { background: var(--panneau); box-shadow: inset 2px 0 var(--or); }
.lecons li.courante .titre-lecon { color: var(--or); }
.etat-lecon { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--trait-fort); border-radius: 50%; color: transparent; font-size: 12px; line-height: 1; }
.etat-lecon.terminee { border-color: var(--hausse); background: rgba(147, 180, 139, .14); color: var(--hausse); }
.etat-lecon.en-cours { border-color: var(--or); background: conic-gradient(var(--or) var(--part, 25%), transparent 0); }
.salle { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 36px; align-items: start; }
.ecran { position: relative; aspect-ratio: 16 / 9; border-radius: var(--rayon-grand); background: #000; overflow: hidden; border: 1px solid var(--trait); }
.ecran video { display: block; width: 100%; height: 100%; background: #000; }
.ecran .sans-video { display: grid; place-items: center; height: 100%; padding: 24px; color: var(--doux); text-align: center; }
.sous-ecran { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 22px; }
.sous-ecran h1 { font-size: 26px; line-height: 1.2; font-weight: 600; letter-spacing: -.02em; }
.texte-lecon { margin-top: 22px; max-width: 72ch; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--texte); line-height: 1.65; }
.fichiers { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.fichiers a, .fichiers .fichier { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; border: 1px solid var(--trait); border-radius: var(--rayon); color: inherit; text-decoration: none; }
.fichiers a:hover { border-color: var(--doux); }
.fichiers .doux { font: 500 13px var(--mono); white-space: nowrap; }
.voisines { display: flex; justify-content: space-between; gap: 12px; margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--trait); }
.voisines a { display: grid; gap: 2px; max-width: 48%; color: inherit; text-decoration: none; }
.voisines a span { color: var(--doux); font-size: 13px; }
.voisines a strong { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voisines a:hover strong { color: var(--or); }
.voisines a.droite { text-align: right; margin-left: auto; }
.sommaire { position: sticky; top: 80px; border: 1px solid var(--trait); border-radius: var(--rayon-grand); background: var(--panneau); overflow: hidden; }
.sommaire > header { padding: 16px 18px; border-bottom: 1px solid var(--trait); }
.sommaire > header strong { display: block; font-weight: 600; }
.sommaire .lecons a { grid-template-columns: 26px minmax(0, 1fr) auto; padding: 12px 14px; font-size: 14px; }
.sommaire .lecons li:last-child { border-bottom: 0; }
.bandeau { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; padding: 10px 14px; border: 1px solid rgba(212, 162, 76, .5); border-radius: var(--rayon); color: var(--or); font-size: 14px; }
.interrupteur { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.interrupteur input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.interrupteur .piste { position: relative; width: 38px; height: 22px; border-radius: 11px; background: var(--trait-fort); transition: background .15s; }
.interrupteur .piste::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--texte); transition: transform .15s; }
.interrupteur input:checked + .piste { background: var(--or); }
.interrupteur input:checked + .piste::after { transform: translateX(16px); background: var(--sur-or); }
.interrupteur input:focus-visible + .piste { outline: 2px solid var(--or); outline-offset: 2px; }
.module-admin { margin-top: 26px; border: 1px solid var(--trait); border-radius: var(--rayon-grand); background: var(--panneau); }
.module-admin > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 16px 18px; border-bottom: 1px solid var(--trait); }
.module-admin > header h2 { font-size: 17px; font-weight: 600; }
.module-admin .lecons .rangee { grid-template-columns: 34px minmax(0, 1fr) auto auto auto; padding: 12px 18px; }
.module-admin .lecons .rangee a { display: inline; padding: 0; color: inherit; }
.module-admin .lecons .rangee a::before { content: none; }
.module-admin .lecons .rangee a:hover { background: none; color: var(--or); }
.module-admin footer { padding: 14px 18px; }
.ligne-ajout { display: flex; gap: 10px; }
.ligne-ajout input { flex: 1; }
.fleches { display: inline-flex; gap: 4px; }
.fleches button { width: 28px; height: 28px; border: 1px solid var(--trait); border-radius: 6px; background: none; color: var(--doux); cursor: pointer; font-size: 13px; line-height: 1; }
.fleches button:hover:not(:disabled) { border-color: var(--doux); color: var(--texte); }
.fleches button:disabled { opacity: .3; cursor: default; }
.depot-video { display: grid; place-items: center; gap: 6px; min-height: 180px; padding: 24px; border: 1px dashed var(--trait-fort); border-radius: var(--rayon-grand); color: var(--doux); text-align: center; cursor: pointer; }
.depot-video.survol { border-color: var(--or); color: var(--or); }
.depot-video strong { color: var(--texte); font-weight: 500; }
.depot-video input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.envoi { display: grid; gap: 10px; padding: 18px; border: 1px solid var(--trait); border-radius: var(--rayon-grand); }
.envoi .ligne { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
@media (max-width: 980px) {
  .salle { grid-template-columns: 1fr; }
  .sommaire { position: static; }
}
@media (max-width: 820px) {
  .avancement { grid-template-columns: 1fr; gap: 18px; padding: 20px; }
  .lecons a, .lecons .rangee { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; }
  .lecons a .meta { display: none; }
  .module-admin .lecons .rangee { grid-template-columns: 28px minmax(0, 1fr) auto; }
  .module-admin .lecons .rangee .secondaire { display: none; }
  .sous-ecran h1 { font-size: 21px; }
  .ecran { border-radius: var(--rayon); }
}
.bloc-edition:has(form:not([hidden])), .bloc-edition:has(.message) { padding: 16px 18px; border-bottom: 1px solid var(--trait); }
label.bouton input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.fichiers .fichier a { border: 0; padding: 0; }

@media (max-width: 820px) {
  input, select, textarea { font-size: 16px; }
  input, select { height: 44px; }
  .bouton { height: 44px; }
  .bouton.petit { height: 38px; padding: 0 14px; }
  .filtres input, .filtres select { height: 42px; font-size: 16px; }
  .fleches button { width: 38px; height: 38px; font-size: 15px; }
  .segments { display: flex; }
  .segments label { flex: 1; text-align: center; }
  .segments span { padding: 11px 8px; }
  .entete { margin-bottom: 22px; }
  .section { margin-top: 36px; }
  .panneau { padding: 18px 16px; }
  .resultat-vif strong { font-size: 23px; }
  .definitions { gap: 9px 16px; }
  .pagination { flex-wrap: wrap; gap: 10px; }
  .mois-journal > header button { min-width: 40px; min-height: 40px; }

  .registre.trades, .registre.trades tbody, .registre.empile, .registre.empile tbody { display: block; }
  .registre.trades thead, .registre.empile thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .registre.trades td, .registre.empile td { padding: 0; border: 0; min-width: 0; }
  .registre.trades tr { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto; align-items: center; gap: 7px 12px; padding: 14px 2px; border-bottom: 1px solid var(--trait); }
  .registre.trades .c-inst { grid-area: 1 / 1; font-weight: 600; font-size: 15px; }
  .registre.trades .c-sens { grid-area: 1 / 2; }
  .registre.trades .c-r { grid-area: 1 / 4; }
  .registre.trades .c-res { grid-area: 1 / 5; min-width: 92px; }
  .registre.trades .c-date { grid-area: 2 / 1 / 3 / 4; color: var(--doux); font-size: 13px; font-weight: 400; }
  .registre.trades .c-retour { grid-area: 2 / 4 / 3 / 6; justify-self: end; }
  .registre.empile tr { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 14px 2px; border-bottom: 1px solid var(--trait); }
  .registre.empile td { overflow-wrap: anywhere; }
  .registre.empile td:first-child { font-weight: 500; }
  .registre.empile td:empty { display: none; }
  .registre.empile td.plein { flex-basis: 100%; font-size: 13px; font-weight: 400; }
  .registre.empile td.droite { margin-left: auto; text-align: left; }
  .registre.empile td:has(.actions) { flex-basis: 100%; }
  .registre.empile td:has(.etiquette) { display: flex; flex-wrap: wrap; gap: 6px; }

  .plage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; margin-bottom: 0; padding: 14px 0; border-bottom: 1px solid var(--trait); }
  .plage > :first-child { grid-column: 1 / -1; }
  .ligne-ajout { flex-direction: column; }
  .ligne-ajout input { flex: none; }
  .module-admin > header { padding: 16px; }
  .module-admin .lecons .rangee { padding: 12px 16px; }
  .module-admin footer { padding: 14px 16px; }
  .fichiers a, .fichiers .fichier { flex-wrap: wrap; }
  .voisines a { max-width: 47%; }
  .rdv { padding: 18px 16px; }
  .rdv .bouton, .vide .bouton { width: 100%; }
  .creneaux button { height: 46px; }
  .visionneuse { padding: 8px; }
}
@media (max-width: 820px) {
  .module-admin .lecons .rangee .fleches { grid-column: 2 / -1; justify-self: end; }
}
@media (max-width: 820px) {
  .plage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plage > :first-child { grid-area: 1 / 1; }
  .plage > .bouton { grid-area: 1 / 2; justify-self: end; }
}