/* EchoAcademie charte 2026 — palette and typefaces from Projects/charte-2026
   and the call-assist app (logistique-echoacademie/Index.html). */
@font-face { font-family: "Afacad"; src: url("/static/fonts/Afacad-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Afacad"; src: url("/static/fonts/Afacad-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Afacad"; src: url("/static/fonts/Afacad-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/static/fonts/Inter-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/static/fonts/Inter-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/static/fonts/Inter-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/static/fonts/Inter-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  /* primary palette */
  --noir: #272626; --urgence: #C60B21; --osteo: #F49830; --inject: #155CA8;
  /* secondary palette */
  --bleugris: #6C8399; --fond: #F5F4F1; --rose: #E8D8D2;
  /* interface */
  --carte: #FFFFFF; --ligne: #E3E1DC; --gris: #7A7674; --corps: #55514F; --creme: #FFFCF8;
  --ok: #15803D; --okf: #E8F5EC; --okb: #BFE3CB;
  --warn: #9A5B00; --warnf: #FFF1DC; --warnb: #F0D3A8;
  --ko: #C60B21; --kof: #FBE9EB; --kob: #F3C2C8;
  --vc: var(--bleugris);
  --titre: "Afacad", system-ui, sans-serif;
  --ui: "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color-scheme: light;
}
.v-urg { --vc: var(--urgence); } .v-osteo { --vc: var(--osteo); } .v-inject { --vc: var(--inject); } .v-neutral { --vc: var(--bleugris); }

* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.5 var(--ui); color: var(--noir); background: var(--fond); -webkit-font-smoothing: antialiased; }
a { color: var(--inject); }
header { position: sticky; top: 0; z-index: 10; display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; align-items: center; justify-content: space-between;
  padding: .7rem 1.2rem; background: var(--carte); border-bottom: 4px solid var(--osteo); box-shadow: 0 2px 10px rgba(39,38,38,.08); }
header .brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--noir); }
header .brand img { height: 22px; width: auto; display: block; }
header .brand span { font-family: var(--titre); font-weight: 600; font-size: 1.15rem; color: var(--gris); border-left: 1px solid var(--ligne); padding-left: .7rem; }
header nav { display: flex; gap: 1.2rem; }
header nav a { color: var(--noir); text-decoration: none; font-weight: 600; font-size: .95rem; }
header nav a:hover { color: var(--osteo); }
header form.inline { display: flex; align-items: center; gap: .5rem; }
.who { color: var(--gris); font-size: .85rem; }
main { max-width: 64rem; margin: 0 auto; padding: 1.4rem 1.2rem 3rem; }

h1 { font-family: var(--titre); font-weight: 700; font-size: 1.9rem; line-height: 1.15; margin: .2rem 0 1rem; }
h2 { font-family: var(--titre); font-weight: 700; font-size: 1.25rem; margin: 0; }
h1.vtitle { border-left: 6px solid var(--vc); padding-left: .7rem; }
.manuel h2 { margin: 2rem 0 .6rem; }
.manuel h3 { font-family: var(--titre); margin: 1.4rem 0 .4rem; }

.status { background: var(--carte); border: 1px solid var(--ligne); border-radius: 10px; padding: .9rem 1.1rem; margin-bottom: 1.2rem; }
.session { position: relative; overflow: hidden; background: var(--carte); border: 1px solid var(--ligne); border-left: 6px solid var(--vc); border-radius: 10px; padding: .9rem 1.1rem; margin: 1rem 0; }
.session h3 { font-family: var(--titre); font-weight: 700; font-size: 1.25rem; margin: 0; color: var(--noir); }
/* Anomalies, one part per person who follows them. */
.person { margin: 1.6rem 0 0; }
.person > h2 { border-bottom: 3px solid var(--osteo); padding-bottom: .2rem; }
.person .count { font-family: var(--ui); font-weight: 600; font-size: .85rem; color: var(--gris); margin-left: .4rem; }
nav.filters { display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: center; margin: 0 0 1rem; font-size: .9rem; }
nav.filters span { color: var(--gris); font-weight: 600; margin-left: .4rem; }
nav.filters a { text-decoration: none; padding: .15rem .55rem; border: 1px solid var(--ligne); border-radius: 999px; background: var(--carte); color: var(--noir); }
nav.filters a.on { background: var(--noir); border-color: var(--noir); color: #fff; }
form.followup { display: flex; flex-wrap: wrap; gap: .35rem .5rem; align-items: center; margin: 0; min-width: 12rem; }
form.followup select { width: auto; padding: .3rem .4rem; font-size: .85rem; }
form.followup label.tick { display: inline-flex; align-items: center; gap: .3rem; margin: 0; font-size: .85rem; }
form.followup input[type="checkbox"] { width: auto; margin: 0; }
form.followup button { padding: .3rem .7rem; font-size: .8rem; }
form.followup .small { flex-basis: 100%; word-break: normal; }
form.login .small { word-break: normal; }
tr.done td { color: var(--gris); }
tr.done td:nth-child(3) { text-decoration: line-through; }
/* The charte's oblique lines, sparingly: watermark behind section titles only. */
.session::after { content: ""; position: absolute; right: 0; top: 0; height: 3rem; width: 120px; pointer-events: none; opacity: .12;
  background: repeating-linear-gradient(-60deg, var(--vc) 0 5px, transparent 5px 12px); }
.start { font-family: var(--ui); font-weight: 500; color: var(--gris); font-size: .85rem; margin-left: .5rem; }
.name { margin: .2rem 0 .7rem; color: var(--corps); font-size: .9rem; }

table { width: 100%; border-collapse: collapse; font-size: .9rem; background: var(--carte); }
th, td { text-align: left; padding: .5rem .6rem; border-top: 1px solid var(--ligne); vertical-align: top; }
thead th { background: #FCEAD3; color: var(--noir); font-weight: 600; border-top: none; }
tbody tr:nth-child(even) td { background: #FDF0E0; }

.banner { display: block; padding: .65rem .9rem; border-radius: 8px; margin: .6rem 0; border: 1px solid; border-left-width: 5px; }
.banner.red { background: var(--kof); border-color: var(--kob); border-left-color: var(--ko); color: #7A1020; }
.banner.orange { background: var(--warnf); border-color: var(--warnb); border-left-color: var(--osteo); color: #5C3A00; }
.banner.info { background: #EDF1F5; border-color: #D6DFE7; border-left-color: var(--bleugris); color: #3D5468; }
.banner ul { margin: .3rem 0 0 1.1rem; padding: 0; }
table.details th { text-align: left; width: 9rem; }
tr.waiting td, tr.check td { background: var(--warnf); }
tr.excluded td { color: #888; }
.ok { padding: .8rem 1rem; background: var(--okf); border: 1px solid var(--okb); border-left: 5px solid var(--ok); border-radius: 8px; color: var(--ok); font-weight: 600; }
.error { color: var(--ko); }
.info { color: #3D5468; }
.inline { display: inline; }
.secret code { font-size: 1.2rem; letter-spacing: .1rem; }
.small { font-size: .85rem; color: var(--gris); word-break: break-all; }

form { margin: .6rem 0; }
label { display: block; margin: .4rem 0; font-weight: 500; }
input, select, textarea { font: 15px var(--ui); color: var(--noir); padding: .55rem .7rem; border: 1.5px solid var(--ligne); border-radius: 8px; background: var(--carte); width: 100%; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--bleugris); box-shadow: 0 0 0 3px rgba(108,131,153,.18); }
button { font: 600 14px var(--ui); color: #fff; background: var(--noir); border: none; border-radius: 8px; padding: .55rem 1rem; cursor: pointer; }
button:hover { background: #3a3838; }
button[disabled] { background: var(--ligne); color: var(--gris); cursor: default; }
header button { background: none; color: var(--gris); padding: 0; font-weight: 500; text-decoration: underline; }
form.stack { display: grid; gap: .7rem; max-width: 32rem; margin: 1rem 0; background: var(--carte); border: 1px solid var(--ligne); border-radius: 10px; padding: 1.1rem; }
form.stack label { display: grid; gap: .25rem; margin: 0; }
/* « Salarié·e » ticked shows the company part — CSS only, the box and the fieldset are siblings. */
form.stack .employee { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
form.stack .employee > input[type="checkbox"] { width: auto; margin: 0; }
form.stack .employee > label { display: inline; font-weight: 600; }
fieldset.company { display: none; flex-basis: 100%; gap: .7rem; margin: .3rem 0 0; padding: .8rem 1rem; border: 1.5px solid var(--ligne); border-left: 5px solid var(--osteo); border-radius: 8px; }
#employee:checked ~ fieldset.company { display: grid; }
fieldset.company legend { font-weight: 600; padding: 0 .3rem; }
td.notes { white-space: pre-wrap; }
form.stack button { justify-self: start; background: var(--osteo); color: var(--noir); }
form.stack button:hover { background: #E3871F; }
details { margin-top: 1.2rem; }
details.help { margin: 0 0 .6rem; background: var(--carte); border: 1px solid var(--ligne); border-left: 5px solid var(--bleugris); border-radius: 8px; padding: .5rem .9rem; font-size: .9rem; color: var(--corps); }
details.help.tech { border-left-color: var(--noir); }
details.help summary { color: var(--noir); }
details.help ul { margin: .3rem 0 .2rem 1.1rem; padding: 0; }
details.help code { font-size: .82rem; }
summary { cursor: pointer; font-weight: 600; color: var(--gris); }
ol.steps code { white-space: pre-wrap; word-break: break-word; font-size: .8rem; color: var(--corps); }

/* The enrolment checklist: numbered steps, one mark each. */
ol.checklist { list-style: none; padding: 0; margin: 1rem 0; counter-reset: step; background: var(--carte); border: 1px solid var(--ligne); border-radius: 10px; }
ol.checklist li { display: flex; gap: .8rem; align-items: flex-start; padding: .8rem 1rem; border-top: 1px solid var(--ligne); counter-increment: step; }
ol.checklist li:first-child { border-top: none; }
ol.checklist li::before { content: counter(step); font-family: var(--titre); font-weight: 700; font-size: 1.2rem; min-width: 1.6rem; text-align: right; color: var(--vc); line-height: 1.6rem; }
ol.checklist .sign { display: inline-grid; place-items: center; flex: 0 0 1.7rem; height: 1.7rem; border-radius: 50%; font-weight: 700; color: #fff; background: #B9B4AF; }
ol.checklist strong { font-weight: 600; }
.mark-ok .sign { background: var(--ok); }
.mark-fail .sign { background: var(--ko); }
.mark-wait .sign { background: var(--bleugris); }
.mark-sim .sign { background: #A8776A; }
.mark-info .sign { background: var(--warn); }
.mark-ok { background: #F7FBF8; }
ol.checklist .detail { color: var(--corps); font-size: .88rem; }
ol.checklist form.inline { display: inline-block; margin: .4rem 0 0; }
ol.checklist form.inline button { background: var(--osteo); color: var(--noir); }

/* The assistant — pop-punk, floral, rock. Hot pink, black, acid yellow, cyan; the charte's red for the roses. */
:root { --punk-noir: #17111A; --punk-rose: #FF2E88; --punk-jaune: #F7F052; --punk-cyan: #2EE6D6; --punk-rouge: #C60B21; --punk-blanc: #FFF8F2;
  --punk-titre: Impact, Haettenschweiler, "Arial Narrow Bold", "Afacad", sans-serif; }
.sprites { position: absolute; width: 0; height: 0; overflow: hidden; }
.pink { color: var(--punk-rose); } .white { color: var(--punk-blanc); } .yellow { color: var(--punk-jaune); } .cyan { color: var(--punk-cyan); } .red { color: var(--punk-rouge); }

body.punk { background-color: var(--punk-noir);
  background-image: radial-gradient(circle at 20% 15%, rgba(255,46,136,.22) 0 18rem, transparent 18rem), radial-gradient(circle at 85% 80%, rgba(46,230,214,.16) 0 16rem, transparent 16rem);
  background-repeat: no-repeat; background-attachment: fixed; min-height: 100vh; }
body.punk header { border-bottom: 6px solid transparent; border-image: repeating-linear-gradient(90deg, var(--punk-noir) 0 14px, var(--punk-blanc) 14px 28px) 6; }
body.punk main { max-width: 60rem; }
body.punk details.help { background: var(--punk-blanc); }

.stage { position: relative; overflow: hidden; padding: 2.4rem 1.6rem 2rem; margin-top: 1rem; color: var(--punk-blanc); text-align: center;
  border: 4px solid var(--punk-blanc); border-radius: 18px; box-shadow: 10px 10px 0 var(--punk-rose); background: #22182A; }
.stage::before, .stage::after { content: ""; position: absolute; left: 0; right: 0; height: 18px; opacity: .9;
  background: repeating-conic-gradient(var(--punk-noir) 0 25%, var(--punk-blanc) 0 50%) 0 0 / 18px 18px; }
.stage::before { top: 0; } .stage::after { bottom: 0; }
.stage .kicker { margin: .6rem 0 0; font: 700 .95rem var(--ui); letter-spacing: .25rem; text-transform: uppercase; color: var(--punk-cyan); }
.shout { position: relative; z-index: 1; margin: .2rem 0 .3rem; font-family: var(--punk-titre); font-weight: 400; font-size: clamp(2.6rem, 8vw, 5.4rem); line-height: 1;
  letter-spacing: .04em; text-transform: uppercase; color: var(--punk-jaune); transform: rotate(-3deg);
  text-shadow: 4px 4px 0 var(--punk-rose), 8px 8px 0 var(--punk-noir), -2px -2px 0 var(--punk-cyan); }
.shout .bang { color: var(--punk-rose); text-shadow: 4px 4px 0 var(--punk-jaune), 8px 8px 0 var(--punk-noir); }
.stage .sub { position: relative; z-index: 1; margin: .8rem 0 1.4rem; font: 600 1.05rem var(--ui); color: var(--punk-blanc); opacity: .9; }

.quote { position: relative; z-index: 1; max-width: 40rem; margin: 0 auto 1.6rem; padding: 2rem 1.8rem 1.2rem; background: var(--punk-blanc); color: var(--punk-noir);
  border: 4px solid var(--punk-noir); border-radius: 6px; box-shadow: 8px 8px 0 var(--punk-cyan); transform: rotate(1deg); text-align: left; }
.quote .sticker { position: absolute; top: -1.1rem; left: 1.2rem; padding: .25rem .8rem; font-family: var(--punk-titre); font-size: 1.15rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--punk-noir); background: var(--punk-jaune); border: 3px solid var(--punk-noir); transform: rotate(-4deg); }
.quote blockquote { margin: 0; font-family: var(--titre); font-weight: 700; font-size: clamp(1.3rem, 2.6vw, 1.75rem); line-height: 1.3; }
.quote blockquote::before { content: "«\202F"; color: var(--punk-rose); }
.quote blockquote::after { content: "\202F»"; color: var(--punk-rose); }
.quote .by { margin: .7rem 0 0; font-family: var(--punk-titre); font-size: 1.2rem; letter-spacing: .04em; text-transform: uppercase; color: var(--punk-rose); text-align: right; }
.quote .by .tr { font-family: var(--ui); font-size: .75rem; letter-spacing: 0; text-transform: none; color: var(--gris); }
.quote figcaption { margin-top: .6rem; font-size: .72rem; line-height: 1.35; color: var(--gris); word-break: break-word; }

.go { position: relative; z-index: 1; margin: 0; }
a.big { display: inline-block; padding: .8rem 1.6rem; font-family: var(--punk-titre); font-size: 1.5rem; letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  color: var(--punk-noir); background: var(--punk-rose); border: 4px solid var(--punk-noir); border-radius: 999px; box-shadow: 5px 5px 0 var(--punk-jaune); transform: rotate(-1.5deg); }
a.big:hover, a.big:focus { background: var(--punk-jaune); box-shadow: 5px 5px 0 var(--punk-rose); }
.stage .note { position: relative; z-index: 1; margin: 1.4rem 0 0; font-size: .82rem; color: var(--punk-blanc); opacity: .75; }
.stage .note code { color: var(--punk-jaune); }

.deco { position: absolute; width: 5.5rem; height: 5.5rem; pointer-events: none; }
.deco.f1 { top: 1.6rem; left: 1.2rem; width: 7rem; height: 7rem; transform: rotate(-18deg); }
.deco.f2 { top: 2.4rem; right: 2rem; transform: rotate(12deg); }
.deco.f3 { top: 9rem; right: 7rem; width: 2.6rem; height: 2.6rem; transform: rotate(14deg); }
.deco.f4 { bottom: 2rem; left: 2.4rem; width: 6.4rem; height: 6.4rem; transform: rotate(10deg); }
.deco.f5 { top: 10rem; left: 5.5rem; width: 3rem; height: 3rem; transform: rotate(-12deg); }
.deco.f6 { bottom: 2.2rem; right: 1.6rem; width: 6rem; height: 6rem; transform: rotate(-8deg); }
.deco.f7 { bottom: 7.5rem; right: 5.5rem; width: 3.6rem; height: 3.6rem; transform: rotate(25deg); }
.deco.f8 { bottom: 8rem; left: 8rem; width: 2.4rem; height: 2.4rem; }
@media (max-width: 40rem) { .deco.f3, .deco.f5, .deco.f7, .deco.f8 { display: none; } .deco { opacity: .55; } }
.deco.inline { position: static; display: inline-block; vertical-align: -0.35rem; width: 2.2rem; height: 2.2rem; }

.desk-title { font-family: var(--punk-titre); font-weight: 400; letter-spacing: .03em; text-transform: uppercase; font-size: 2.2rem; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; margin: 0 0 1.2rem; }
.card { background: var(--carte); border: 3px solid var(--punk-noir); border-radius: 12px; padding: .9rem 1.1rem; box-shadow: 6px 6px 0 var(--punk-rose); }
.card:nth-child(2) { box-shadow: 6px 6px 0 var(--punk-cyan); }
.card h2 { font-family: var(--punk-titre); font-weight: 400; letter-spacing: .04em; text-transform: uppercase; }
.card .big-number { margin: .2rem 0 0; font-family: var(--punk-titre); font-size: 3rem; line-height: 1; color: var(--punk-rose); }
.card a.button { display: inline-block; padding: .5rem .9rem; border-radius: 8px; background: var(--punk-noir); color: #fff; text-decoration: none; font-weight: 600; }
.card a.button:hover { background: var(--punk-rose); color: var(--punk-noir); }
.card.pending { background: repeating-linear-gradient(-45deg, #FFF8F2 0 14px, #FCEFF4 14px 28px); box-shadow: 6px 6px 0 var(--punk-jaune); }
.card.pending .tag { display: inline-block; margin: .3rem 0; padding: .15rem .6rem; font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .05em;
  background: var(--punk-jaune); border: 2px solid var(--punk-noir); border-radius: 4px; }