/* Onglet « Matières ». Surface claire posée sur le fond sombre du tableau de
   bord — comme les autres panneaux ; écrire directement sur le dégradé est ce
   qui avait rendu le panneau SNT illisible. */

/* ══════════════════════════════════════════════════════════════════════
   31/08/2026 — LE PLAN CLAIR QUI MANQUAIT

   L'en-tête de ce fichier annonçait la règle depuis le premier jour :
   « écrire directement sur le dégradé est ce qui avait rendu le panneau SNT
   illisible ». Les CARTES avaient bien leur fond blanc, mais rien n'en
   portait le titre de groupe ni son chapeau : « Mes matières » (#1e1b4b) et
   son sous-titre (#64748b) tombaient sur le dégradé sombre du tableau de
   bord (--bg-main : #0f0e17 → #1a0033). Mesuré : 1,18:1 et 1,61:1, pour un
   minimum de 4,5:1. C'est ce qui obligeait à surligner le texte pour le lire.

   Le correctif n'est pas d'éclaircir ces deux textes — il faudrait
   recommencer à chaque élément ajouté — mais de donner à l'onglet SON PLAN,
   comme #content-snt > div (18/08) et #refCroisement (30/08) l'ont fait
   avant lui. Tout ce qui viendra s'y poser sera dès lors sombre sur clair,
   ce que le reste de la feuille suppose déjà.

   Le plan est gris ardoise très clair et non blanc : les cartes, elles,
   sont blanches, et il faut qu'elles se détachent.
   ══════════════════════════════════════════════════════════════════════ */
.mat-shell {
  max-width: 1240px; margin: 0 auto; padding: 22px; color: #0f172a;
  background: #f1f5f9; border: 1px solid #cbd5e1; border-radius: 16px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
}
.mat-shell * { box-sizing: border-box; }

.mat-hero {
  background: linear-gradient(135deg, #1e1b4b, #4c1d95);
  color: #fff; border-radius: 18px; padding: 22px 26px; margin-bottom: 18px;
}
/* Le bandeau est le SEUL bloc volontairement sombre de l'onglet. Il doit donc
   annoncer ses couleurs, sinon deux règles balai de dashboard.css les lui
   reprennent : « h1..h6 → #1a202c !important » (mesuré 1,06:1 sur le violet)
   et « .tab-content p → #2d3748 !important » (1,03:1). Les !important
   ci-dessous les battent : à spécificité au moins égale, c'est la feuille
   chargée en dernier qui l'emporte, et matieres.css est chargée après
   dashboard.css (teacher-dashboard.html, l. 130 puis 572). L'opacité de .88
   est retirée : elle diluait le texte dans le fond au lieu de l'assombrir. */
.mat-hero h1 { margin: 0 0 6px; font-size: 1.5rem; color: #ffffff !important; }
.mat-hero p {
  margin: 0; font-size: .95rem; line-height: 1.5; max-width: 820px;
  color: #e3dcff !important;            /* 9,4:1 sur #4c1d95, 12,6:1 sur #1e1b4b */
}

.mat-barre {
  display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 14px;
  padding: 14px 16px; margin-bottom: 14px;
}
.mat-f { display: flex; flex-direction: column; gap: 4px; font-size: .82rem; color: #475569; }
.mat-f > span { font-weight: 600; }
.mat-f select, .mat-f input {
  padding: 8px 12px; border: 1px solid #cbd5e1; border-radius: 10px;
  background: #fff; font-size: .92rem; color: #0f172a; min-width: 180px;
}
.mat-note { font-size: .82rem; color: #475569; align-self: center; }

.mat-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 18px; }
.mat-kpi {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 2px;
}
.mat-kpi > span { font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; color: #475569; font-weight: 700; }
.mat-kpi > strong { font-size: 1.45rem; color: #1e1b4b; }
.mat-kpi > small { font-size: .78rem; color: #475569; }        /* lisible aussi sur le fond rosé de .mat-kpi-alerte : 4,35:1 → 6,54:1 */
.mat-kpi-alerte { border-color: #fca5a5; background: #fef2f2; }
.mat-kpi-alerte > strong { color: #b91c1c; }

.mat-sec { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 18px 20px; margin-bottom: 16px; }
.mat-sec > header { margin-bottom: 12px; }
.mat-sec h2 { margin: 0 0 2px; font-size: 1.08rem; color: #1e1b4b; }
.mat-sec header p { margin: 0; font-size: .85rem; color: #475569; }

.mat-vide { padding: 22px; text-align: center; color: #475569; background: #f8fafc; border-radius: 12px; font-size: .92rem; }
.mat-aide { font-size: .82rem; color: #475569; margin: 10px 0 0; line-height: 1.5; }

.mat-creneaux { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.mat-cr {
  display: grid; grid-template-columns: auto 1fr auto; gap: 4px 10px; align-items: center;
  border: 1px solid #e2e8f0; border-radius: 12px; padding: 10px 12px; cursor: pointer; background: #f8fafc;
}
.mat-cr.pris { border-color: #a78bfa; background: #f5f3ff; }
.mat-cr b { grid-column: 2; font-size: .9rem; }
.mat-cr span { grid-column: 2; font-size: .76rem; color: #475569; }
.mat-cr em { grid-column: 3; grid-row: 1 / span 2; font-style: normal; font-weight: 700; color: #6d28d9; }
.mat-cr input { grid-row: 1 / span 2; }

.mat-tablewrap { overflow-x: auto; }
.mat-table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 900px; }
.mat-table th {
  text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .04em;
  color: #475569; padding: 8px 10px; border-bottom: 2px solid #e2e8f0;
}
.mat-table td { padding: 10px; border-bottom: 1px solid #f1f5f9; vertical-align: top; }
.mat-table tr.mat-faite { background: #f0fdf4; }
.mat-rang { font-weight: 800; color: #475569; width: 34px; }   /* 2,56:1 → 4,76:1 */
.mat-comp { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.mat-comp span {
  font-size: .68rem; background: #eef2ff; color: #4338ca; border-radius: 999px; padding: 2px 8px; font-weight: 600;
}
.mat-comp-vide { background: #f1f5f9 !important; color: #475569 !important; }  /* son propre fond est déjà gris : 4,34:1 → 6,4:1 */
.mat-h input { width: 78px; padding: 6px 8px; border: 1px solid #cbd5e1; border-radius: 8px; }
.mat-h small { display: block; font-size: .72rem; color: #475569; margin-top: 3px; }  /* 2,56:1 → 4,76:1 */
.mat-quand { white-space: nowrap; font-variant-numeric: tabular-nums; }
.mat-coupee { font-style: normal; font-size: .72rem; color: #b45309; display: block; }
.mat-prog { min-width: 170px; }
.mat-prog small { display: block; font-size: .72rem; color: #475569; margin-top: 4px; }
.mat-barreprog { display: block; height: 8px; border-radius: 999px; background: #e2e8f0; overflow: hidden; }
.mat-barreprog i { display: block; height: 100%; border-radius: 999px; transition: width .3s; }
.mat-actions { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.mat-tag { font-size: .66rem; background: #fef3c7; color: #92400e; border-radius: 999px; padding: 1px 7px; font-weight: 700; }

.mat-verrou, .mat-fait, .mat-btn, .mat-lien {
  font: inherit; cursor: pointer; border-radius: 999px; border: 1px solid transparent; padding: 6px 12px;
}
.mat-verrou { font-size: .8rem; font-weight: 700; }
.mat-verrou.ouvert { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; }
.mat-verrou.ferme { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.mat-fait { font-size: .74rem; background: #f8fafc; border-color: #e2e8f0; color: #475569; }
.mat-fait.on { background: #dcfce7; border-color: #86efac; color: #166534; font-weight: 700; }
.mat-btn { background: #7c3aed; color: #fff; font-weight: 700; padding: 9px 18px; }
.mat-btn:hover { background: #6d28d9; }
.mat-lien { background: none; color: #6d28d9; font-weight: 600; font-size: .84rem; text-decoration: underline; padding: 6px 8px; }
.mat-sup { color: #b91c1c; }

.mat-verrous-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }

.mat-frise { display: flex; gap: 3px; flex-wrap: wrap; margin-bottom: 12px; }
.mat-sem {
  width: 30px; height: 38px; border-radius: 6px; border: 1px solid #e2e8f0;
  background: var(--c, transparent); display: flex; align-items: flex-end; justify-content: center;
  font-size: .62rem; font-weight: 700; color: #fff; padding-bottom: 2px; position: relative;
}
/* ── Le numéro de semaine porte son propre fond ────────────────────────
   31/08/2026. Il était écrit en blanc directement sur l'aplat de la matière.
   Or cet aplat est --mat-c, donc n'importe laquelle des dix-sept couleurs du
   registre : blanc sur #2563eb donne 3,68:1, sur #eab308 seulement 1,92:1 —
   pour du texte de 10 px, quand il en faut 4,5. Une pastille sombre
   translucide sous le chiffre rend le rapport indépendant de la couleur :
   au pire du registre il reste au-dessus de 7:1, et la bande de couleur,
   qui est tout l'intérêt de la frise, ne bouge pas. */
.mat-sem > span {
  background: rgba(15, 23, 42, .72); border-radius: 5px;
  padding: 0 4px; line-height: 1.35; display: inline-block;
}
.mat-sem[style*="transparent"] { color: #64748b; background: #f8fafc; }
/* Semaine sans cours : pas d'aplat, donc pas de pastille — du gris foncé
   sur le blanc cassé suffit (7,4:1). */
.mat-sem[style*="transparent"] > span { background: none; color: #475569; }
/* Semaine amputée : le voile s'applique à la BANDE DE COULEUR, pas à la case
   entière. « opacity: .55 » sur .mat-sem diluait aussi la pastille du numéro
   et son texte — mesuré 3,42:1 —, et aucune règle sur l'enfant ne peut
   défaire l'opacité d'un parent. Le voile est donc un calque posé sous le
   chiffre, qui garde ainsi sa pleine opacité. */
.mat-sem.amputee::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: rgba(255, 255, 255, .55); pointer-events: none; z-index: 0;
}
.mat-sem > span { position: relative; z-index: 1; }
.mat-sem.tp { outline: 2px dashed #f59e0b; outline-offset: -3px; }
.mat-sem.auj { box-shadow: 0 0 0 3px #0f172a; }
.mat-legende { display: flex; gap: 12px; flex-wrap: wrap; font-size: .78rem; color: #475569; }
.mat-leg { display: inline-flex; align-items: center; gap: 5px; }
.mat-leg i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

.mat-alerte-bloc {
  margin-top: 12px; padding: 12px 14px; border-radius: 12px;
  background: #fffbeb; border: 1px solid #fcd34d; color: #92400e; font-size: .86rem; line-height: 1.5;
}
.mat-alerte-txt { color: #b91c1c; font-style: normal; font-size: .82rem; }

.mat-form { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-top: 12px; }
.mat-tps { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-direction: column; gap: 6px; }
.mat-tps li {
  background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px;
  padding: 8px 12px; font-size: .88rem; display: flex; align-items: center; gap: 8px;
}
.mat-sim { margin-top: 14px; padding: 14px 16px; border-radius: 12px; background: #f5f3ff; border: 1px solid #ddd6fe; }
.mat-sim ul { margin: 8px 0; padding-left: 20px; font-size: .86rem; line-height: 1.6; }
.mat-sim-actions { display: flex; gap: 10px; align-items: center; margin-top: 10px; }

@media (max-width: 720px) {
  .mat-shell { padding: 12px; }
  .mat-f select, .mat-f input { min-width: 140px; }
}

/* ── Cartes de matières ─────────────────────────────────────────────────
   Une carte par matière, y compris celles dont les cours restent à écrire :
   voir la matière absente est ce qui donne envie de la construire. Chaque
   matière apporte sa couleur et son glyphe depuis son propre fichier
   (apps/teacher/matieres/subjects/<id>.js), l'écran ne fait que les poser. */

.mat-groupe { margin-bottom: 26px; }
.mat-groupe > header { margin-bottom: 12px; }
.mat-groupe h2 { margin: 0 0 2px; font-size: 1.12rem; color: #1e1b4b; }
.mat-groupe header p { margin: 0; font-size: .86rem; color: #475569; max-width: 760px; }

.mat-grille {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
}

.mat-carte {
  position: relative; display: flex; gap: 14px; text-align: left; font: inherit;
  color: #0f172a; cursor: pointer; padding: 18px 18px 16px; border-radius: 18px;
  border: 1px solid #e2e8f0; border-top: 4px solid var(--mat-c, #94a3b8);
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--mat-c, #94a3b8) 12%, transparent) 0%, transparent 62%),
    #fff;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
/* Repli pour les navigateurs sans color-mix : la carte reste blanche, lisible. */
@supports not (background: color-mix(in srgb, red 10%, white)) {
  .mat-carte { background: #fff; }
}
.mat-carte:hover, .mat-carte:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(15, 23, 42, .13);
  border-color: var(--mat-c, #7c3aed);
  outline: none;
}
.mat-carte.future { border-top-style: dashed; overflow: hidden; }
.mat-carte.future .mat-carte-glyphe { opacity: .62; }

/* 07/09/2026 — ruban diagonal rouge : la pastille "à construire" dans les
   étiquettes (.mat-e-future, plus bas) est trop discrète pour éviter la
   déconvenue d'un enseignant qui croit la matière prête. Overflow: hidden
   sur .future ci-dessus fait que le coin du ruban se coupe proprement sur
   le rayon de la carte, comme un vrai ruban de coin. */
.mat-carte-ruban {
  position: absolute; top: 15px; right: -36px; z-index: 2;
  width: 150px; padding: 4px 0; text-align: center;
  transform: rotate(38deg); transform-origin: center;
  background: #dc2626; color: #fff;
  font-size: .64rem; font-weight: 800; letter-spacing: .03em;
  text-transform: uppercase; line-height: 1.3;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .28);
  pointer-events: none;
}

.mat-carte-glyphe {
  flex: 0 0 46px; width: 46px; height: 46px; color: var(--mat-c, #64748b);
  display: flex; align-items: center; justify-content: center;
}
.mat-carte-glyphe svg { width: 100%; height: 100%; }
.mat-carte-emoji { font-size: 1.9rem; line-height: 1; }

.mat-carte-corps { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.mat-carte-corps > b { font-size: 1.02rem; line-height: 1.25; }
/* ── La couleur d'une matière n'est pas toujours une couleur de texte ──
   --mat-c vient du fichier de la matière (subjects/<id>.js) et sert d'abord
   d'aplat : bordure haute de la carte, barre de progression, pastilles. Neuf
   des dix-sept couleurs du registre échouent en texte sur blanc — #eab308
   tombe à 1,92:1, #f59e0b à 2,15:1, #0ea5e9 à 2,77:1. Les assombrir de la
   même façon pour toutes garde l'identité de la matière ET la lisibilité :
   au mélange retenu, la pire du registre remonte à 4,93:1.
   Ne pas remplacer par une couleur fixe : c'est justement ce qui rendait
   toutes les cartes identiques. */
.mat-carte-niveau, .mat-entete small {
  color: color-mix(in srgb, var(--mat-c, #475569) 55%, #111827);
}
@supports not (color-mix(in srgb, red 50%, white)) {
  .mat-carte-niveau, .mat-entete small { color: #475569; }
}
.mat-carte-niveau { font-size: .76rem; font-weight: 700; }
.mat-carte-resume { font-size: .8rem; color: #475569; line-height: 1.45; }  /* la carte est teintée par --mat-c : 4,29:1 → 6,4:1 */

.mat-carte-etiquettes { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.mat-e { font-size: .68rem; font-weight: 700; border-radius: 999px; padding: 2px 9px; }
.mat-e-prete { background: #dcfce7; color: #166534; }
.mat-e-future { background: #f1f5f9; color: #475569; }
.mat-e-perso { background: #f5f3ff; color: #6d28d9; }
.mat-e-edt { background: #eff6ff; color: #1d4ed8; }
.mat-e-alerte { background: #fef2f2; color: #b91c1c; }

.mat-carte-chiffres {
  display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px;
  font-size: .74rem; color: #475569;
}
.mat-carte-chiffres b { color: #0f172a; font-size: .88rem; }
.mat-carte-prog { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.mat-carte-prog .mat-barreprog { flex: 1; }
.mat-carte-prog i { font-style: normal; font-size: .72rem; color: #475569; white-space: nowrap; }

.mat-carte-neuve {
  border: 2px dashed #cbd5e1; border-top: 2px dashed #cbd5e1; background: #fff;
  align-items: center; color: #475569;
}
.mat-carte-neuve:hover { border-color: #7c3aed; color: #6d28d9; }
.mat-carte-neuve .mat-carte-emoji { color: #475569; }

/* ── Vue d'une matière ──────────────────────────────────────────────── */
.mat-retour {
  font: inherit; background: none; border: none; color: #6d28d9; font-weight: 600;
  cursor: pointer; padding: 4px 0; margin-bottom: 10px; font-size: .9rem;
}
.mat-retour:hover { text-decoration: underline; }

.mat-entete {
  display: flex; gap: 16px; align-items: flex-start; padding: 18px 20px; margin-bottom: 14px;
  border-radius: 16px; background: #fff; border: 1px solid #e2e8f0;
  border-left: 5px solid var(--mat-c, #7c3aed);
}
.mat-entete-glyphe { flex: 0 0 52px; width: 52px; height: 52px; color: var(--mat-c, #64748b); }
.mat-entete-glyphe svg { width: 100%; height: 100%; }
.mat-entete h2 { margin: 0; font-size: 1.28rem; color: #0f172a; }
.mat-entete small { font-weight: 700; font-size: .8rem; }  /* couleur : voir le bloc --mat-c plus haut */
.mat-entete p { margin: 6px 0 0; font-size: .88rem; color: #475569; max-width: 760px; line-height: 1.5; }

.mat-futur {
  padding: 14px 16px; border-radius: 14px; margin-bottom: 14px;
  background: #fffbeb; border: 1px solid #fcd34d; color: #92400e;
  font-size: .87rem; line-height: 1.55;
}
.mat-futur-note { margin-top: 6px; font-size: .82rem; opacity: .92; }
.mat-futur code { background: rgba(146, 64, 14, .1); border-radius: 5px; padding: 1px 5px; font-size: .82em; }

@media (max-width: 620px) {
  .mat-grille { grid-template-columns: 1fr; }
  .mat-entete { flex-direction: column; }
}

/* Le suivi détaillé est ACCUEILLI dans la fiche : le panneau d'origine est
   déplacé ici, pas recopié. On neutralise donc les marges qu'il portait quand
   il était un onglet plein écran. */
.mat-suivi { padding-bottom: 8px; }
.mat-suivi #matSuiviHote > div { display: block !important; }
.mat-suivi #matSuiviHote .ac-shell,
.mat-suivi #matSuiviHote > div > div { padding: 0 !important; max-width: none !important; }
.mat-suivi #matSuiviHote h1 { font-size: 1.05rem; margin-top: 0; }
.mat-suivi #matSuiviHote .ac-hero { display: none; }

/* TP programmés — lus dans l'outil TP, pas saisis ici. */
.mat-tp-resume { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 10px; font-size: .8rem; color: #475569; }
.mat-tp-resume b { color: #0f172a; font-size: 1.05rem; }
.mat-tps li {
  display: grid; grid-template-columns: 150px 1fr auto; gap: 10px; align-items: center;
}
.mat-tp-quand { display: flex; flex-direction: column; }
.mat-tp-quand em { font-style: normal; font-size: .74rem; opacity: .8; }
.mat-tp-quoi { display: flex; flex-direction: column; min-width: 0; }
.mat-tp-quoi small { font-size: .75rem; opacity: .8; }
.mat-tp-etat { font-size: .74rem; font-weight: 700; white-space: nowrap; }
.mat-tps li.mat-tp-fait { background: #f0fdf4; border-color: #bbf7d0; }
.mat-tps li.mat-tp-fait .mat-tp-etat { color: #166534; }
.mat-btn-clair { background: #fff; color: #6d28d9; border: 1px solid #ddd6fe; }
.mat-btn-clair:hover { background: #f5f3ff; }
@media (max-width: 620px) { .mat-tps li { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════════════════
   31/08/2026 — LES GRIS SECONDAIRES NE DÉPENDENT PLUS D'UNE RÈGLE BALAI

   19 déclarations de couleur employaient #94a3b8 (2,56:1 sur blanc) ou
   #64748b (4,76:1 sur blanc, mais 4,34:1 sur le plan gris de l'onglet :
   sous le seuil). À l'écran elles ne se voyaient pas, parce que la règle
   « .tab-content span/p/li → #2d3748 !important » de dashboard.css les
   écrasait au passage. Autrement dit : ce fichier était illisible et un
   balai global le rattrapait sans le dire. Le jour où un élément prend
   data-couleurs — ce que l'onglet fait désormais pour ses boutons — le
   balai le lâche et la vraie couleur réapparaît.

   Les gris sont donc corrigés à la source : #94a3b8 → #64748b, #64748b →
   #475569. Sur le plan (#f1f5f9) comme sur une carte blanche, tous
   dépassent 6:1. Le contraste ne dépend plus d'une règle écrite ailleurs.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Activités/projets intégrés à la fiche Matière ─────────────────────── */
.mat-projet-actions { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px; margin-top:12px; }
.mat-projet-action { display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:14px 16px;
  border:1px solid #fde68a; border-radius:12px; background:#fffbeb; color:#78350f; text-align:left; cursor:pointer; }
.mat-projet-action:hover:not(:disabled),.mat-projet-action:focus-visible:not(:disabled) { border-color:#f59e0b; background:#fef3c7; }
.mat-projet-action b { font-size:14px; }
.mat-projet-action span { font-size:12.5px; color:#92400e; }
.mat-projet-action:disabled { opacity:.52; cursor:not-allowed; }
/* 18/09/2026 — l'année scolaire : un texte, et une liste qui ne se déplie que
   si on la demande. Le repère d'écart est volontairement voyant : une année
   choisie puis oubliée fausse tout le reste de la session. */
.mat-annee { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.mat-annee-valeur { font-size:15px; }
.mat-annee--ecart { background:#fef3c7; border:1px solid #fcd34d; border-radius:9px;
  padding:4px 10px; }
.mat-annee--ecart .mat-annee-valeur { color:#92400e; }
.mat-annee-repli[hidden] { display:none; }
/* 18/09/2026 — l'activité ouverte se voit, les autres s'effacent : on arrive
   ici en ayant DÉJÀ choisi, la rangée n'est plus un choix mais un repère. */
.mat-projet-action.est-ouverte { border-color:#b45309; border-width:2px; background:#fffbeb;
  box-shadow:0 0 0 3px rgba(180,83,9,.14); }
.mat-projet-action.est-ouverte b { color:#7c2d12; }
.mat-projet-actions:has(.est-ouverte) .mat-projet-action:not(.est-ouverte) { opacity:.6; }
.mat-projet-action.est-faite:not(.est-ouverte) b::after { content:' ✓'; color:#15803d; }
.mat-projet-aide { margin:0; }

/* ══════════════════════════════════════════════════════════════════════════
   LE PANNEAU D'ACTIVITÉ — 05/09/2026

   Il s'ouvrait dans un <dialog> plein écran, qui chargeait un second document
   en iframe. Il se déplie maintenant DANS la fiche, sous les boutons
   d'activité. Ce qui suit habille son cadre ; l'intérieur vit dans une racine
   fantôme et se coiffe tout seul avec parcours.css — c'est pourquoi il n'y a
   rien ici sur ses cartes, ses champs ou ses boutons.
   ══════════════════════════════════════════════════════════════════════════ */
.mat-projet-hote:empty { display:none; }
.mat-projet-hote { margin-top:14px; }

.mat-projet-panneau {
  border:1px solid #fcd34d; border-radius:14px; overflow:hidden; background:#fffbeb;
}
.mat-projet-panneau__tete {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:11px 15px; color:#fff; background:linear-gradient(135deg,#92400e,#b45309);
}
.mat-projet-panneau__tete span { display:flex; flex-direction:column; min-width:0; }
.mat-projet-panneau__tete b { font-size:14.5px; }
/* 16/09/2026 : dégradé assombri (#92400e → #b45309). Le blanc tombait à
   3,2:1 sur #d97706. Les deux extrémités sont vérifiées par
   scripts/test-lisibilite-matieres.js (§ 6).
   #fef3c7 sur #b45309 : 4,9:1 — l'ambre clair d'origine (#fffbeb) tombait à
   3,1:1 sur le début du dégradé, en dessous du seuil. */
.mat-projet-panneau__tete small { font-size:12.5px; color:#fef3c7; }
.mat-projet-fermer {
  flex:0 0 auto; font:inherit; font-size:13px; font-weight:700; cursor:pointer;
  padding:7px 13px; border-radius:9px; color:#fff;
  border:1px solid rgba(255,255,255,.65); background:rgba(15,23,42,.24);
}
.mat-projet-fermer:hover, .mat-projet-fermer:focus-visible { background:rgba(15,23,42,.38); }
.mat-projet-panneau__corps { display:block; background:#f8fafc; }

/* ══════════════════════════════════════════════════════════════════════════
   CORRIGÉ PROFESSEUR — 05/09/2026
   Réaffiche, en lecture seule, le même contenu que l'élève (exemple résolu,
   corrigé du travail guidé, corrigé de la mission de transfert, réponses de
   quiz justifiées). Le corps interne (.snt-card, .ac-*…) vient de la feuille
   de style élève, chargée à la demande — voir matieres.js#chargerCorrigeCss.
   ══════════════════════════════════════════════════════════════════════════ */
.mat-corrige-overlay {
  position: fixed; inset: 0; z-index: 10050; background: rgba(15,23,42,.55);
  display: flex; align-items: flex-start; justify-content: center; padding: 28px 16px;
  overflow-y: auto;
}
.mat-corrige-panneau {
  width: min(880px, 100%); background: #fff; border-radius: 16px; overflow: hidden;
  box-shadow: 0 25px 60px rgba(0,0,0,.35); display: flex; flex-direction: column; max-height: calc(100vh - 56px);
}
.mat-corrige-tete {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 22px; color: #fff; background: linear-gradient(135deg,#6d28d9,#7c3aed);
  flex: 0 0 auto;
}
.mat-corrige-tete span { font-size: 15px; }
.mat-corrige-fermer {
  flex: 0 0 auto; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  padding: 8px 14px; border-radius: 9px; color: #fff;
  border: 1px solid rgba(255,255,255,.65); background: rgba(15,23,42,.24);
}
.mat-corrige-fermer:hover, .mat-corrige-fermer:focus-visible { background: rgba(15,23,42,.38); }
.mat-corrige-scroll { overflow-y: auto; padding: 20px 24px 32px; background: #f8fafc; }
.mat-corrige-seance {
  background: #fff; border: 1px solid #e5e7eb; border-left: 7px solid #cbd5e1; border-radius: 14px; padding: 18px 20px;
  margin-bottom: 20px;
}
.mat-corrige-seance h3 { margin: 0 0 12px; font-size: 16px; color: #4c1d95; }
/* 22/09/2026 — UN SEUL MOT LONG POUSSAIT TOUTE LA MODALE EN TRAVERS.
   Mesuré en 390 px sur le corrigé d'Innovation technologique : un chemin de
   fichier (« Barèmes/bareme_projet_IT_Premiere_STI2D_2026.docx »), à six
   niveaux d'imbrication, disposait de 180 px et n'était sécable nulle part.
   Le panneau passait de 358 à 434 px de large et se mettait à défiler
   horizontalement — le professeur perdait le début de chaque ligne.
   Le défaut ne tient pas à cette matière : un code, une URL ou un nom de
   fichier dans n'importe quel corrigé produirait le même effet. La coupure
   est donc posée sur le corps réutilisé, pour les trois matières.
   Elle ne touche pas les tableaux larges, qui défilent dans leur propre
   cadre .ac-table-scroll. */
.mat-corrige-corps { overflow-wrap: anywhere; }
/* 22/09/2026 — SUR TÉLÉPHONE, LES MARGES MANGEAIENT LE TEXTE. Mesuré en
   390 px : panneau, zone défilante, carte de séance et cartes du corps
   empilent quatre padding ; il restait 228 px de texte utile sur 390, soit
   trois à quatre mots par ligne. On resserre les deux marges qui nous
   appartiennent, sans toucher à celles du corps réutilisé (snt.css, partagé
   avec l'élève). Vaut pour SNT, AC et IT. */
/* 22/09/2026 — LE BLOC PROFESSEUR DOIT SE VOIR AU PREMIER COUP D'ŒIL.
   Il est ajouté à la suite du cours de l'élève, dans le même corps : sans
   rupture visuelle, le professeur qui fait défiler ne sait pas où finit ce
   que voit sa classe et où commence ce qui lui est réservé. */
#sntApp .snt-prof-corrige {
  margin-top: 26px; padding: 4px 14px 14px; border-radius: 14px;
  background: #fffbeb; border: 1px solid #fcd34d; border-left: 7px solid #d97706;
}
#sntApp .snt-prof-corrige .snt-phase { background: transparent; }
/* Un sélecteur de plus que « #sntApp .snt-phase .snt-ph-n » de snt.css, qui
   est chargé APRÈS cette feuille et gagnerait à spécificité égale. Fond
   #92400e plutôt que #d97706 : l'étiquette fait 0,7 rem, donc du petit texte,
   qui demande 4,5:1 — le premier n'atteignait que 3,6:1 sur blanc. */
#sntApp .snt-prof-corrige .snt-phase .snt-ph-n {
  background: #92400e; color: #fff; padding: 3px 9px; border-radius: 999px;
}
#sntApp .snt-prof-corrige .snt-phase h4 { color: #7c2d12; }

@media (max-width: 560px) {
  .mat-corrige-overlay { padding: 8px; }
  #sntApp .snt-prof-corrige { padding: 4px 8px 10px; }
  .mat-corrige-scroll { padding: 12px 10px 24px; }
  .mat-corrige-seance { padding: 14px 11px; border-left-width: 5px; }
}
/* Une teinte par séance (07/09/2026) : au défilement, une séquence de six
   ou sept séances de 90 min sur un fond blanc uniforme se confondait — le
   professeur ne voyait plus où l'une finissait et l'autre commençait. Le
   cycle est purement un repère de lecture, sans lien avec le contenu. */
.mat-corrige-seance--bleu     { background: #eff6ff; border-color: #bfdbfe; border-left-color: #3b82f6; }
.mat-corrige-seance--bleu h3     { color: #1d4ed8; }
.mat-corrige-seance--violet   { background: #f5f3ff; border-color: #ddd6fe; border-left-color: #8b5cf6; }
.mat-corrige-seance--violet h3   { color: #6d28d9; }
.mat-corrige-seance--sarcelle { background: #f0fdfa; border-color: #99f6e4; border-left-color: #14b8a6; }
.mat-corrige-seance--sarcelle h3 { color: #0f766e; }
.mat-corrige-seance--ambre    { background: #fffbeb; border-color: #fde68a; border-left-color: #f59e0b; }
.mat-corrige-seance--ambre h3    { color: #b45309; }
.mat-corrige-seance--rose     { background: #fdf2f8; border-color: #fbcfe8; border-left-color: #ec4899; }
.mat-corrige-seance--rose h3     { color: #be185d; }
.mat-corrige-seance--vert     { background: #f0fdf4; border-color: #bbf7d0; border-left-color: #22c55e; }
.mat-corrige-seance--vert h3     { color: #15803d; }
/* Le corps réutilisé (#sntApp) porte son propre fond clair (--snt-bg) qui
   écraserait sinon la teinte de la séance : on le rend transparent ici pour
   laisser respirer la couleur de la section, tout en gardant ses cartes
   internes (.snt-card, .ac-*) inchangées. */
.mat-corrige-seance .mat-corrige-corps #sntApp { background: transparent; border: 0; padding: 0; }
.mat-corrige-qcm {
  background: #f5f3ff; border: 1px solid #ddd6fe; border-radius: 10px; padding: 12px 16px; margin-top: 14px;
}
.mat-corrige-qcm ol { margin: 8px 0; padding-left: 20px; }
.mat-corrige-bonne { color: #15803d; font-weight: 700; }
.mat-corrige-justif { margin: 8px 0 0; font-size: 13.5px; color: #4c1d95; }

/* ══════════════════════════════════════════════════════════════════════
   17/09/2026 — FICHE EN ONGLETS ET ZONES DE COULEUR (voir matieres.js,
   « UNE FICHE EN CINQ ONGLETS »). Chaque onglet a une teinte de fond très
   claire et une couleur de bordure ; ses blocs restent des cartes blanches
   bordées à gauche de cette couleur. Les teintes sont plus claires que le
   plan (#f1f5f9) : tous les textes gardent leur contraste.
   ══════════════════════════════════════════════════════════════════════ */
.mat-fiche { --o-accueil: #2563eb; --o-programme: #7c3aed; --o-eleves: #15803d; --o-ressources: #b45309; --o-reglages: #475569; }
.mat-onglets {
  position: sticky; top: 0; z-index: 20;
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin;
  margin: 0 -22px; padding: 10px 22px 0; background: #f1f5f9;
  border-bottom: 3px solid #cbd5e1;
}
.mat-onglet {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 8px 16px; font: inherit; font-size: .95rem; font-weight: 700;
  color: #334155; background: #e2e8f0; border: 2px solid transparent; border-bottom: 0;
  border-radius: 12px 12px 0 0; cursor: pointer;
}
.mat-onglet:hover { background: #fff; }
.mat-onglet:focus-visible { outline: 3px solid #1e40af; outline-offset: -3px; }
.mat-onglet[aria-selected="true"] { color: #0f172a; background: #fff; }
.mat-onglet.mat-o-accueil[aria-selected="true"]    { border-color: var(--o-accueil);    background: #eff6ff; }
.mat-onglet.mat-o-programme[aria-selected="true"]  { border-color: var(--o-programme);  background: #f5f3ff; }
.mat-onglet.mat-o-eleves[aria-selected="true"]     { border-color: var(--o-eleves);     background: #f0fdf4; }
.mat-onglet.mat-o-ressources[aria-selected="true"] { border-color: var(--o-ressources); background: #fffbeb; }
.mat-onglet.mat-o-reglages[aria-selected="true"]   { border-color: var(--o-reglages);   background: #f8fafc; }
.mat-pastille-alerte {
  display: inline-block; min-width: 22px; padding: 0 6px; border-radius: 999px;
  background: #b91c1c; color: #fff; font-size: .75rem; line-height: 22px; text-align: center;
}
.mat-panneau { margin: 0 -22px -22px; padding: 18px 22px 22px; border-radius: 0 0 16px 16px; }
.mat-panneau[hidden] { display: none !important; }
.mat-p-accueil    { background: #eff6ff; --o: var(--o-accueil); }
.mat-p-programme  { background: #f5f3ff; --o: var(--o-programme); }
.mat-p-eleves     { background: #f0fdf4; --o: var(--o-eleves); }
.mat-p-ressources { background: #fffbeb; --o: var(--o-ressources); }
.mat-p-reglages   { background: #f8fafc; --o: var(--o-reglages); }
.mat-panneau .mat-sec { border-left: 6px solid var(--o); }
.mat-panneau > .mat-vide { background: #fff; border-radius: 12px; }

/* Accueil : alertes et raccourcis vers les autres onglets */
.mat-alertes { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.mat-alertes li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px;
  padding: 8px 12px; border-radius: 10px; background: #fef2f2; border: 1px solid #fecaca; }
.mat-alertes li span { color: #7f1d1d; font-size: .9rem; }
.mat-raccourcis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.mat-raccourci { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-height: 64px;
  padding: 10px 14px; text-align: left; font: inherit; cursor: pointer; background: #fff;
  border: 1px solid #e2e8f0; border-left: 6px solid #94a3b8; border-radius: 12px; color: #0f172a; }
.mat-raccourci:hover, .mat-raccourci:focus-visible { background: #f8fafc; outline: 2px solid #1e40af; outline-offset: 1px; }
.mat-raccourci b { font-size: .95rem; }
.mat-raccourci span { font-size: .82rem; color: #475569; }
.mat-raccourci.mat-o-programme  { border-left-color: var(--o-programme); }
.mat-raccourci.mat-o-eleves     { border-left-color: var(--o-eleves); }
.mat-raccourci.mat-o-ressources { border-left-color: var(--o-ressources); }
.mat-raccourci.mat-o-reglages   { border-left-color: var(--o-reglages); }

/* Compétences repliées dans le tableau du programme */
.mat-comp-plier summary { cursor: pointer; font-size: .8rem; font-weight: 700; color: #5b21b6; margin-top: 4px; }

/* « Préparer mon projet » en frise compacte */
.mat-prepa-tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 6px 16px; }
.mat-prepa-choix { max-width: 420px; margin: 0; }
.mat-prepa-bilan { margin: 0; font-size: .9rem; color: #334155; }
.mat-prepa-liste { list-style: none; margin: 10px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.mat-prepa-etape { flex: 1 1 130px; display: flex; align-items: center; gap: 8px; min-height: 44px;
  padding: 4px 8px; border: 1px solid #e2e8f0; border-radius: 10px; background: #f8fafc; }
.mat-prepa-etape.est-prochaine { border: 2px solid #d97706; background: #fffbeb; }
.mat-prepa-etape.est-faite { background: #f0fdf4; border-color: #bbf7d0; }
.mat-prepa-etape input[type="checkbox"] { flex: 0 0 22px; width: 22px; height: 22px; margin: 0; accent-color: #15803d; cursor: pointer; }
.mat-prepa-auto { flex: 0 0 24px; display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center;
  border-radius: 50%; background: #e2e8f0; color: #334155; font-weight: 700; font-size: 12px; }
.mat-prepa-etape.est-faite .mat-prepa-auto { background: #15803d; color: #fff; }  /* 5:1 */
.mat-prepa-nom { flex: 1 1 auto; min-height: 36px; padding: 4px 2px; text-align: left; font: inherit; font-size: .9rem;
  font-weight: 700; color: #1e1b4b; background: none; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.mat-prepa-etape.est-faite .mat-prepa-nom { color: #14532d; }
.mat-prepa-continuer { margin: 2px 0 8px; }
.mat-prepa-detail summary { cursor: pointer; font-size: .85rem; font-weight: 700; color: #5b21b6; }
.mat-prepa-detail ol { margin: 6px 0 0; padding-left: 1.2rem; font-size: .85rem; color: #334155; }
.mat-prepa-detail span { color: #475569; }

/* En-tête et barre de portée resserrés : ils se répètent au-dessus de
   chaque onglet, ils ne doivent pas prendre un écran à eux seuls. */
.mat-fiche .mat-retour { margin-bottom: 6px; }
.mat-fiche .mat-entete { padding: 12px 16px; margin-bottom: 10px; gap: 12px; align-items: center; }
.mat-fiche .mat-entete-glyphe { flex-basis: 40px; width: 40px; height: 40px; }
.mat-fiche .mat-barre { margin-bottom: 12px; }
.mat-fiche .mat-f { min-width: 0; max-width: 100%; }
.mat-fiche .mat-f select { max-width: 100%; }
.mat-prepa-choix select { width: 100%; }

@media (max-width: 720px) {
  .mat-fiche .mat-entete { flex-direction: row; }
  .mat-fiche .mat-entete p { display: none; }
  .mat-fiche .mat-entete-glyphe { flex-basis: 32px; width: 32px; height: 32px; }
  .mat-fiche .mat-f select { min-width: 0; width: 100%; }
  .mat-raccourcis { grid-template-columns: 1fr 1fr; }
  .mat-raccourci { padding: 8px 10px; }
  .mat-onglets { margin: 0 -12px; padding: 8px 12px 0; }
  .mat-onglet { padding: 8px 12px; font-size: .88rem; }
  .mat-panneau { margin: 0 -12px -12px; padding: 12px; }
  .mat-prepa-etape { flex-basis: 45%; }
}

/* ══════════════════════════════════════════════════════════════════════
   17/09/2026 — SNT ET ARCHITECTURE-CONSTRUCTION DANS LA NOUVELLE FICHE
   Les panneaux de suivi embarqués (content-snt, content-ac) doublaient ce
   que la fiche offre déjà : un titre, un sélecteur de classe, et un bloc de
   déverrouillage qui écrit dans le MÊME document sntConfig que les verrous
   de l'onglet Programme. On les masque dans la fiche (ils restent intacts
   pour le panneau d'origine) ; la liste des élèves défile dans son cadre.
   ══════════════════════════════════════════════════════════════════════ */
.mat-sous-onglets { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.mat-sous-onglet { min-height: 44px; padding: 8px 14px; font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer;
  color: #14532d; background: #fff; border: 2px solid #bbf7d0; border-radius: 999px; }
.mat-sous-onglet[aria-pressed="true"] { background: #15803d; border-color: #15803d; color: #fff; }
.mat-sous-onglet:focus-visible { outline: 3px solid #1e40af; outline-offset: 2px; }
[data-mat-sous-panneau][hidden] { display: none !important; }

.mat-suivi #matSuiviHote #content-snt h1,
.mat-suivi #matSuiviHote #content-snt h1 + p,
.mat-suivi #matSuiviHote .ac-unlock-panel { display: none !important; }
.mat-suivi #matSuiviHote span:has(> #sntClassSel),
.mat-suivi #matSuiviHote div:has(> #sntLockBtns),
.mat-suivi #matSuiviHote .ac-field:has(> #acClassSel) { display: none !important; }
.mat-suivi #matSuiviHote #snt-teacher-body,
.mat-suivi #matSuiviHote #acProgressBody,
.mat-suivi #matParcoursHote #pySuiviCorps { max-height: 70vh; overflow: auto; overscroll-behavior: contain; }

/* 17/09/2026 — Planificateur de l'année (grille « Mes matières »). */
.mat-planif { border-left: 6px solid #2563eb; }
.mat-planif-table td { vertical-align: middle; }
.mat-planif-table .mat-num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.mat-planif-pastille { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 50%; background: var(--mat-c, #64748b); }
.mat-statut { font-weight: 700; white-space: nowrap; color: #0f172a; }
.mat-planif-table small { display: block; color: #475569; }
.mat-planif-deborde { background: #fef2f2; }
.mat-planif-sans-creneau { background: #f8fafc; }
.mat-planif-large { background: #fffbeb; }
.mat-planif-actions { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: flex-end; }
.mat-planif-orphelins { margin-top: 10px; }
.mat-planif-orphelins summary { cursor: pointer; font-weight: 700; color: #92400e; }
.mat-planif-orphelins ul { margin: 6px 0; padding-left: 1.2rem; font-size: .88rem; color: #334155; }
.mat-planif-conseil { font-size: .82rem; color: #7f1d1d; }
.mat-planif-mat { display: inline-flex; align-items: center; margin-left: 6px; color: #334155; }
.mat-shell .mat-f select { max-width: 100%; }
@media (max-width: 720px) {
  .mat-shell .mat-f { min-width: 0; max-width: 100%; }
  .mat-shell .mat-f select { width: 100%; min-width: 0; }
  /* Le tableau du planificateur devient une pile de fiches. */
  .mat-planif .mat-tablewrap { overflow: visible; }
  .mat-planif-table, .mat-planif-table tbody, .mat-planif-table tr, .mat-planif-table td { display: block; width: 100%; min-width: 0; }
  .mat-planif-table thead { display: none; }
  .mat-planif-table tr { margin-bottom: 10px; padding: 8px 10px; border: 1px solid #e2e8f0; border-radius: 12px; }
  .mat-planif-table td { padding: 3px 0; border: 0; }
  .mat-planif-table td.mat-num { display: inline-block; width: auto; margin-right: 14px; }
  .mat-planif-table td.mat-num::before { content: attr(data-label) " : "; color: #475569; font-size: .8rem; }
  .mat-planif-actions { justify-content: flex-start; }
}

/* 28/09/2026 — « les cases de correction sont vides ». Dans le corrigé du
   professeur, les trois aides graduées sont des boutons que l'élève ouvre
   un à un : sans le script élève, leur texte restait masqué, et les règles
   « balai » des boutons du tableau de bord peignaient l'intitulé en blanc
   sur blanc. Le professeur voit désormais les trois aides, en clair. */
.mat-corrige-overlay #sntApp .ac-aides-intro,
.mat-corrige-overlay #sntApp .ac-ia,
.mat-corrige-overlay #sntApp .ac-ia-note { display: none !important; }
.mat-corrige-overlay #sntApp .ac-aide-btn { color: #1e293b !important; background: #fff !important; opacity: 1 !important; cursor: default; }
.mat-corrige-overlay #sntApp .ac-aide-btn .ac-aide-num { background: #4f46e5 !important; color: #fff !important; }
.mat-corrige-overlay #sntApp .ac-aide-txt { display: block !important; color: #1e293b !important; }
.mat-corrige-overlay #sntApp .snt-ta { display: none !important; }
/* 05/10/2026 — « je clique sur Voir la correction et rien ne se passe ».
   Les exercices SNT (ancien format) cachent la réponse derrière un bouton
   .snt-reveal que seul le script élève (snt.js) sait ouvrir. Dans le corrigé
   professeur ce script n'est pas chargé : le bouton était mort et la réponse
   restait invisible. Le professeur voit désormais la réponse en clair. */
.mat-corrige-overlay #sntApp .snt-reveal { display: none !important; }
.mat-corrige-overlay #sntApp .snt-ex-a { display: block !important; }
.mat-corrige-tete { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mat-corrige-imprimer { margin-left: auto; min-height: 36px; padding: 6px 12px; border-radius: 8px; border: 1px solid #c7d2fe; background: #3730a3; color: #fff; font-weight: 700; cursor: pointer; }
.mat-corrige-choix { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 10px 24px; background: #eef2ff; border-bottom: 1px solid #c7d2fe; color: #1e1b4b; font-size: 14px; }
.mat-corrige-choix[hidden] { display: none !important; }
.mat-corrige-choix label { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.mat-corrige-choix input { width: 18px; height: 18px; }
.mat-corrige-choix button { min-height: 36px; padding: 6px 14px; border-radius: 8px; border: 1px solid #4f46e5; background: #fff; color: #3730a3; font-weight: 700; cursor: pointer; }
.mat-corrige-choix button.primaire { background: #4f46e5; color: #fff; }

/* 28/09/2026 — méthode « avis / de mémoire / trace verrouillée » : le corrigé
   professeur montre la trace en clair et masque les zones propres à l'élève. */
.mat-corrige-scroll .snt-trace-ouvrir,
.mat-corrige-scroll .ac-avis,
.mat-corrige-scroll .snt-ex-avis,
.mat-corrige-scroll .snt-ex-memo,
.mat-corrige-scroll .snt-rappel-express { display: none !important; }
.mat-corrige-scroll .snt-trace-verrou > * { filter: none !important; user-select: auto !important; }