/* Atelier Collège : composants ajoutés (matières, comptes, infographies, tableaux de bord). */

:root {
  --ig-1: #dbe8ff; --ig-1-ink: #123a7a;
  --ig-2: #fff1b8; --ig-2-ink: #5c4300;
  --ig-3: #ffdcc2; --ig-3-ink: #7a3300;
  --cal-0: #e7ebf5; --cal-1: #c9d6f6; --cal-2: #93acec; --cal-3: #5079d8; --cal-4: #1d3d8f;
  --danger: #b4332b;
  --ombre: 0 1px 2px rgb(19 33 63 / .06), 0 8px 24px rgb(19 33 63 / .08);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    --ig-1: #1e3360; --ig-1-ink: #cfe0ff;
    --ig-2: #4a3c0d; --ig-2-ink: #ffe9a3;
    --ig-3: #4f2a14; --ig-3-ink: #ffd2b0;
    --cal-0: #1c2640; --cal-1: #24386a; --cal-2: #3b5aa6; --cal-3: #5f83db; --cal-4: #9db8ff;
    --danger: #ff8a80;
    --ombre: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px rgb(0 0 0 / .25);
  }
}
:root[data-theme=dark] {
  --ig-1: #1e3360; --ig-1-ink: #cfe0ff;
  --ig-2: #4a3c0d; --ig-2-ink: #ffe9a3;
  --ig-3: #4f2a14; --ig-3-ink: #ffd2b0;
  --cal-0: #1c2640; --cal-1: #24386a; --cal-2: #3b5aa6; --cal-3: #5f83db; --cal-4: #9db8ff;
  --danger: #ff8a80;
  --ombre: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px rgb(0 0 0 / .25);
}

html { overflow-x: hidden; }
.evitement { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--paper); padding: 8px 12px; border-radius: 8px; }
.evitement:focus { left: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.muted { color: var(--muted); }
.petit { font-size: 14px; }
.btn.small { padding: 6px 12px; font-size: 14px; }
.btn.danger { background: var(--danger); color: var(--paper); }
.btn.ghost { background: transparent; color: var(--accent); border: 1.5px solid var(--line); }
#app:focus { outline: none; }

/* --- En-tête : matière, niveaux, compte --- */
.logo-mark { font-size: 13px; letter-spacing: -.02em; }
.fil-matiere { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mat-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 14px; color: var(--paper); background: var(--mc); }
.compte { display: flex; align-items: center; }
nav.links + .compte { margin-left: 4px; }
.fil-matiere:empty + nav.links:empty + .compte { margin-left: auto; }
.moi-btn { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border: 1.5px solid var(--line); border-radius: 999px; text-decoration: none; color: var(--ink); background: var(--paper); font-weight: 600; font-size: 14px; }
.moi-btn:hover { border-color: var(--accent); }
.avatar { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent-soft); font-size: 18px; line-height: 1; }
.avatar.xl { width: 64px; height: 64px; font-size: 38px; }
.xp-chip, .serie-chip { font-family: var(--f-mono); font-size: 12px; padding: 2px 8px; border-radius: 99px; background: var(--bg); border: 1px solid var(--line); }
.serie-chip { background: var(--ko-soft); border-color: transparent; }
@media (max-width: 560px) { .moi-nom { display: none; } }

/* --- Accueil : matières --- */
.hero .wrap > div > h1 > span[aria-hidden] { font-size: .8em; }
.mat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; padding-block: 16px 56px; }
.mat-card { position: relative; display: grid; grid-template-rows: auto 1fr auto auto; gap: 12px; padding: 20px; border-radius: 16px; background: var(--paper); border: 1px solid var(--line); border-top: 6px solid var(--mc); text-decoration: none; color: var(--ink); transition: transform .15s, box-shadow .15s; }
.mat-card:hover { transform: translateY(-3px); box-shadow: var(--ombre); }
.mat-card h3 { font-size: 21px; }
.mat-card p { margin: 6px 0 0; font-size: 14px; color: var(--muted); }
.mat-ico { width: 48px; height: 48px; display: grid; place-items: center; font-size: 26px; border-radius: 14px; background: color-mix(in srgb, var(--mc) 14%, var(--paper)); }
.mat-niv { display: flex; gap: 6px; }
.mat-niv span { font-family: var(--f-mono); font-weight: 700; font-size: 12px; padding: 2px 8px; border-radius: 99px; color: var(--lc); background: color-mix(in srgb, var(--lc) 12%, var(--paper)); }
.mat-card .bar span { background: var(--mc); }
.progress-card.invite { text-align: left; }
.invite-ico { font-size: 34px; letter-spacing: 6px; }
.progress-card p { margin: 6px 0 12px; }
.num-unite { font-size: 15px; font-weight: 500; color: var(--muted); }
.hero.ma-mathematiques h1 em, .hero h1 em { white-space: normal; }

/* --- Onglets fiche / infographie --- */
.onglets { display: flex; width: fit-content; max-width: 100%; gap: 4px; padding: 4px; border-radius: 14px; background: var(--paper); border: 1px solid var(--line); margin-top: 16px; flex-wrap: wrap; }
.onglet { border: 0; background: transparent; padding: 8px 16px; border-radius: 10px; font-weight: 600; cursor: pointer; color: var(--muted); }
.onglet[aria-selected=true] { background: var(--ink); color: var(--paper); }
.ig-actions { display: flex; gap: 8px; justify-content: flex-end; margin-bottom: 10px; flex-wrap: wrap; }

/* --- Infographie --- */
.infographie {
  margin: 0 0 40px; border-radius: 20px; overflow: hidden; border: 1px solid var(--line);
  background:
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--ink) 14%, transparent) 1px, transparent 1.5px) 0 0 / 18px 18px,
    color-mix(in srgb, var(--tc, var(--accent)) 6%, var(--bg));
  box-shadow: var(--ombre);
}
.infographie:fullscreen { overflow: auto; border-radius: 0; padding-bottom: 24px; }
.ig-bandeau { display: flex; align-items: center; gap: 14px; padding: 14px 22px; background: var(--mc, var(--accent)); color: #fff; }
.ig-code { font-family: var(--f-mono); font-weight: 700; font-size: 13px; padding: 3px 10px; border-radius: 99px; background: rgb(255 255 255 / .2); white-space: nowrap; }
.ig-h { font-family: var(--f-display); font-weight: 800; font-size: clamp(20px, 3vw, 30px); line-height: 1.15; flex: 1; }
.ig-mat { font-size: 30px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) .ig-bandeau { color: #0f1527; } :root:not([data-theme=light]) .ig-code { background: rgb(0 0 0 / .15); } }
:root[data-theme=dark] .ig-bandeau { color: #0f1527; }
.ig-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; padding: 30px 26px 10px; }
.ig-carte { position: relative; background: var(--paper); border-radius: 6px; padding: 30px 20px 20px; box-shadow: var(--ombre); display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ig-carte.r0 { rotate: -.6deg; } .ig-carte.r1 { rotate: .5deg; } .ig-carte.r2 { rotate: .4deg; } .ig-carte.r3 { rotate: -.5deg; }
.ig-scotch { position: absolute; top: -11px; left: 50%; width: 92px; height: 24px; translate: -50% 0; rotate: -3deg; background: color-mix(in srgb, var(--mark) 55%, transparent); border-left: 2px dashed rgb(255 255 255 / .5); border-right: 2px dashed rgb(255 255 255 / .5); }
.ig-carte.r1 .ig-scotch, .ig-carte.r3 .ig-scotch { rotate: 4deg; background: color-mix(in srgb, var(--tc, var(--accent)) 35%, transparent); }
.ig-titre { display: flex; align-items: center; gap: 10px; align-self: flex-start; font-family: var(--f-display); font-weight: 800; font-size: 19px; text-transform: uppercase; letter-spacing: .01em; padding: 6px 16px 6px 10px; background: var(--mark); color: var(--mark-ink); clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); rotate: -1deg; }
.ig-ico { font-size: 24px; }
.ig-corps { display: flex; flex-direction: column; gap: 12px; }
.ig-formule { display: grid; place-items: center; padding: 6px 0; }
.ig-formule span { font-family: var(--f-display); font-weight: 800; font-size: clamp(30px, 5vw, 46px); line-height: 1.1; padding: 8px 24px; border: 4px solid var(--tc, var(--accent)); border-radius: 999px; background: color-mix(in srgb, var(--tc, var(--accent)) 8%, var(--paper)); text-align: center; }
.ig-point { display: flex; gap: 12px; align-items: baseline; font-size: 17px; }
.ig-puce { flex: none; width: 12px; height: 12px; border-radius: 3px; background: var(--tc, var(--accent)); rotate: 45deg; translate: 0 -1px; }
.ig-point small, .ig-vf small { display: block; color: var(--muted); font-size: 14px; margin-top: 2px; }
.ig-conclusion { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border: 3px solid var(--ok); border-radius: 12px; font-weight: 600; font-size: 18px; rotate: -1.2deg; align-self: flex-start; background: var(--ok-soft); }
.ig-coche { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--ok); color: var(--paper); font-size: 20px; flex: none; }
.ig-exemple { font-size: 16px; padding: 14px 16px; border-left: 5px solid var(--tc, var(--accent)); background: var(--bg); border-radius: 0 10px 10px 0; line-height: 1.7; }
.ig-texte { margin: 0; }
.ma-mathematiques .ig-exemple { font-family: var(--f-mono); font-size: 15px; }
.ig-etapes { list-style: none; margin: 0; padding: 0; display: flex; gap: 0; }
.ig-etape { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 14px 22px 14px 26px; min-width: 0; clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%, 16px 50%); margin-left: -8px; text-align: center; justify-content: center; }
.ig-etape:first-child { margin-left: 0; padding-left: 16px; clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%); border-radius: 10px 0 0 10px; }
.ig-etape:last-child { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 16px 50%); padding-right: 16px; border-radius: 0 10px 10px 0; }
.ig-etape:only-child { clip-path: none; border-radius: 10px; }
.ig-etape.e0 { background: var(--ig-1); color: var(--ig-1-ink); }
.ig-etape.e1 { background: var(--ig-2); color: var(--ig-2-ink); }
.ig-etape.e2 { background: var(--ig-3); color: var(--ig-3-ink); }
.ig-num { font-family: var(--f-display); font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; opacity: .85; }
.ig-t { font-size: 15px; line-height: 1.35; }
.ig-t b { font-size: 17px; text-transform: uppercase; display: block; }
.ig-ex { font-size: 14px; font-weight: 500; background: var(--paper); color: var(--ink); border-radius: 8px; padding: 6px 8px; margin-top: auto; }
.ig-vf { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; }
.ig-pastille { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-weight: 800; font-size: 19px; color: var(--paper); }
.ig-vf.vrai .ig-pastille { background: var(--ok); }
.ig-vf.piege .ig-pastille { background: var(--ko); }
.ig-pied { text-align: right; font-size: 12px; color: var(--muted); padding: 10px 26px 16px; }
@media (max-width: 820px) {
  .ig-grille { grid-template-columns: 1fr; padding: 26px 14px 6px; gap: 24px; }
  .ig-carte { rotate: 0deg !important; }
  .ig-etapes { flex-direction: column; gap: 6px; }
  .ig-etape, .ig-etape:first-child, .ig-etape:last-child { margin: 0; clip-path: none; border-radius: 10px; padding: 12px 16px; }
  .ig-bandeau { padding: 12px 16px; }
}
@media (prefers-reduced-motion: reduce) { .ig-carte, .ig-titre, .ig-conclusion { rotate: 0deg !important; } }

/* --- Formulaires de compte --- */
.auth { max-width: 460px; margin: 24px auto 56px; background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: 28px; box-shadow: var(--ombre); }
.auth.large { max-width: 600px; }
.auth-deco { font-size: 38px; }
.form { display: grid; gap: 14px; margin-top: 14px; }
.form label { display: grid; gap: 6px; font-weight: 500; font-size: 15px; }
.form label small { font-weight: 400; color: var(--muted); }
.form label.case { display: flex; gap: 10px; align-items: flex-start; }
.form label.case input { margin-top: 5px; width: 18px; height: 18px; }
.form .inp, select.inp, textarea.inp { font-family: var(--f-body); width: 100%; }
.code-inp { font-family: var(--f-mono) !important; text-transform: uppercase; letter-spacing: .15em; }
.deux { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .deux { grid-template-columns: 1fr; } }
.avatars { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.avatars legend { font-weight: 500; font-size: 15px; margin-bottom: 6px; }
.av-choix input { position: absolute; opacity: 0; }
.av-choix span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; font-size: 24px; border: 2px solid var(--line); cursor: pointer; background: var(--bg); }
.av-choix input:checked + span { border-color: var(--accent); background: var(--accent-soft); scale: 1.08; }
.av-choix input:focus-visible + span { outline: 3px solid var(--mark); }
.auth .onglets { margin: 8px 0 4px; }

/* --- Tableau de bord --- */
.moi-tete { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 8px 0 24px; }
.moi-tete p { margin: 2px 0 0; }
.moi-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.dash { display: grid; gap: 18px; margin-bottom: 18px; }
.dash-haut { display: grid; grid-template-columns: minmax(260px, 1fr) 2fr; gap: 18px; }
.dash-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.dash .dash-deux { margin-bottom: 0; }
.dash .panel, .dash-deux > .panel { align-content: start; }
.dash-deux.large-gauche { grid-template-columns: 3fr 2fr; }
@media (max-width: 860px) { .dash-haut, .dash-deux, .dash-deux.large-gauche { grid-template-columns: 1fr; } }
.rang-carte { display: grid; gap: 10px; align-content: start; }
.rang-tete { display: flex; align-items: center; gap: 12px; }
.rang-ico { font-size: 40px; }
.rang-nom { font-family: var(--f-display); font-weight: 800; font-size: 26px; line-height: 1; }
.xp-gros { margin-left: auto; font-family: var(--f-mono); color: var(--muted); }
.xp-gros b { font-size: 28px; color: var(--ink); }
.tuiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.dash .tuiles { margin: 0; }
@media (max-width: 700px) { .tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tuile { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 16px; display: grid; gap: 2px; }
.tuile-ico { font-size: 22px; }
.tuile-val { font-family: var(--f-mono); font-weight: 700; font-size: 30px; line-height: 1.1; }
.tuile-label { font-size: 13px; color: var(--muted); }

.cal { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.cal-jours { display: grid; grid-template-rows: repeat(7, 14px); gap: 3px; font-size: 10px; color: var(--muted); line-height: 14px; }
.cal-grille { display: grid; grid-template-rows: repeat(7, 14px); grid-auto-flow: column; grid-auto-columns: 14px; gap: 3px; }
.cal-j { display: inline-block; width: 14px; height: 14px; border-radius: 3px; background: var(--cal-0); }
.cal-j.n1 { background: var(--cal-1); } .cal-j.n2 { background: var(--cal-2); } .cal-j.n3 { background: var(--cal-3); } .cal-j.n4 { background: var(--cal-4); }
.cal-legende { display: flex; align-items: center; gap: 3px; font-size: 12px; color: var(--muted); }
.cal-legende .cal-j { width: 12px; height: 12px; }

.ev { width: 100%; height: auto; display: block; }
.ev-grille { stroke: var(--line); stroke-width: 1; }
.ev-axe { fill: var(--muted); font-size: 11px; font-family: var(--f-body); }
.ev-val { fill: var(--ink); font-size: 12px; font-weight: 600; font-family: var(--f-mono); }
.ev-barre { fill: var(--accent); }
.ev-vide { stroke: var(--line); stroke-width: 2; stroke-dasharray: 3 3; }
.ev-g:hover .ev-barre, .ev-g:focus .ev-barre { fill: color-mix(in srgb, var(--accent) 75%, var(--ink)); }
.ev-g:focus { outline: none; }
.ev-g:focus rect { stroke: var(--mark); stroke-width: 2; }

.jauges { display: grid; gap: 10px; }
.jauge { display: grid; grid-template-columns: minmax(110px, 1.2fr) 2fr auto; gap: 12px; align-items: center; text-decoration: none; color: var(--ink); font-size: 14px; }
.jauge-nom { font-weight: 600; min-width: 0; }
.jauge-nom small { display: block; font-weight: 400; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jauge-barre { height: 10px; border-radius: 99px; background: var(--bg); border: 1px solid var(--line); overflow: hidden; }
.jauge-barre span { display: block; height: 100%; border-radius: 99px; background: var(--mc, var(--accent)); }
.jauge-val { font-family: var(--f-mono); font-size: 13px; text-align: right; }
.jauge-val small { display: block; font-family: var(--f-body); color: var(--muted); font-size: 11px; }
a.jauge:hover .jauge-nom { color: var(--accent); }

.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.badge-c { display: grid; justify-items: center; text-align: center; gap: 2px; padding: 12px 8px; border-radius: 14px; border: 1.5px dashed var(--line); color: var(--muted); }
.badge-c .badge-ico { font-size: 30px; filter: grayscale(1); opacity: .35; }
.badge-c b { font-size: 13px; }
.badge-c small { font-size: 11px; line-height: 1.3; }
.badge-c.ok { border-style: solid; border-color: color-mix(in srgb, var(--mark) 70%, var(--line)); background: color-mix(in srgb, var(--mark) 10%, var(--paper)); color: var(--ink); }
.badge-c.ok .badge-ico { filter: none; opacity: 1; }

.revoir { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.revoir li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.revoir li:last-child { border: 0; }
.panel.import { border-color: var(--mark); background: color-mix(in srgb, var(--mark) 8%, var(--paper)); margin-bottom: 18px; }
.panel.import p { margin: 0; }
details summary { cursor: pointer; font-weight: 600; }
details[open] summary { margin-bottom: 10px; }

/* --- Tables --- */
.tab-scroll { overflow-x: auto; }
.tab { width: 100%; border-collapse: collapse; font-size: 14px; }
.tab th, .tab td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tab th { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
.tab td a { font-weight: 600; text-decoration: none; }
.tri { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; }
.mini-jauge { display: inline-block; width: 40px; height: 6px; border-radius: 99px; vertical-align: middle; background: linear-gradient(90deg, var(--accent) var(--v), var(--line) var(--v)); }

/* --- Espace professeur --- */
.classes-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin-bottom: 24px; }
.classe-carte .big { font-size: 34px; }
.code-classe { font-family: var(--f-mono); font-size: 14px; }
.nouvelle-classe { align-content: start; }
.aide-prof ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.classe-tete { display: flex; justify-content: space-between; gap: 16px; align-items: flex-end; flex-wrap: wrap; margin: 8px 0 20px; }
.code-gros { display: grid; gap: 4px; justify-items: end; }
.code-gros b { font-family: var(--f-mono); font-size: 34px; letter-spacing: .18em; padding: 4px 14px; border-radius: 12px; background: var(--paper); border: 2px dashed var(--lc, var(--accent)); }
.comptes-crees { margin: 10px 0; padding: 16px; border: 2px dashed var(--line); border-radius: 12px; }
.comptes-crees code { font-size: 15px; }
textarea.inp { font-family: var(--f-body); resize: vertical; }

/* --- Notifications --- */
.toasts { position: fixed; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 40; display: grid; gap: 8px; justify-items: end; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 10px; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 12px; box-shadow: var(--ombre); font-size: 15px; animation: toast-in .35s cubic-bezier(.2, 1.4, .4, 1); max-width: min(360px, calc(100vw - 32px)); }
.toast.badge { background: var(--mark); color: var(--mark-ink); }
.toast.ko { background: var(--danger); }
.toast.sort { opacity: 0; translate: 0 8px; transition: opacity .5s, translate .5s; }
.toast-ico { font-size: 28px; }
@keyframes toast-in { from { opacity: 0; translate: 0 20px; scale: .9; } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }

.invite-mini p { margin: 0; font-size: 14px; color: var(--muted); }

/* --- Impression --- */
@media print {
  header.top, footer, .toasts, .ig-actions, .onglets { display: none !important; }
  body { background: #fff; }
  body.imprime-info #vue-fiche, body.imprime-info .crumb, body.imprime-info .fiche-head { display: none !important; }
  body.imprime-info #vue-info { display: block !important; }
  body.imprime-info .infographie { box-shadow: none; break-inside: avoid; }
  body.imprime-comptes main > .wrap > *:not(section:has(#comptes)) { display: none !important; }
  body.imprime-comptes #fce, body.imprime-comptes #impcc, body.imprime-comptes section:has(#comptes) > :not(#comptes) { display: none !important; }
  .ig-carte { break-inside: avoid; }
}