/* Espace professeur et page de connexion : pages qui défilent, contrairement à l'écran élève. */
body.page-prof { overflow: auto; font-size: 16px; }
.p-entete { display: flex; align-items: center; gap: 10px 22px; flex-wrap: wrap; padding: 8px 20px; background: var(--carte); border-bottom: 1px solid var(--trait); }
.p-haut { display: flex; gap: 4px; }
.p-haut button, .p-haut-bouton { border: none; background: none; padding: 8px 14px; border-radius: 10px; font: inherit; font-weight: 600; color: var(--encre); cursor: pointer; }
.p-haut button:hover, .p-haut-bouton:hover { background: var(--fond); }
.p-haut button[aria-current="page"], .p-haut-bouton[aria-current="page"] { background: var(--doux); color: var(--accent); }
.p-droite { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.p-moi:not([hidden]) { display: inline-block; }
/* Maison (Accueil) et Aide : icônes de la barre du haut, nom en infobulle. */
.p-haut .p-maison { padding: 8px 10px; color: var(--encre); }
.p-aide-bouton { width: 38px; height: 38px; padding: 0; border-radius: 50%; }
.p-haut .p-maison[aria-current="page"], .p-aide-bouton[aria-current="page"] { background: var(--doux); color: var(--accent); }
.p-haut .p-maison svg, .p-aide-bouton svg { display: block; }
/* Menu de l'avatar : titre du bloc réservé à l'administrateur. */
.p-compte-groupe { display: block; margin-top: 6px; padding: 8px 10px 2px; border-top: 1px solid var(--trait); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--discret); }
.p-compte-groupe[hidden] { display: none; }
.p-compte-menu { position: relative; }
.p-avatar-bouton { width: 38px; height: 38px; font-size: 0.95rem; border: none; cursor: pointer; }
.p-compte-liste { position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; display: grid; gap: 4px; min-width: 240px; max-width: calc(100vw - 24px); padding: 8px; box-sizing: border-box; background: var(--carte); border: 1px solid var(--trait); border-radius: 12px; box-shadow: 4px 4px 0 var(--ombre-dure); }
.p-compte-liste[hidden] { display: none; }
/* Menu de l'avatar : nom et adresse en tête, puis une ligne-bouton par action, « Se déconnecter » à part en bas. */
.p-compte-tete { display: grid; gap: 2px; padding: 6px 10px 10px; margin-bottom: 2px; border-bottom: 1px solid var(--trait); }
.p-compte-tete .p-email { font-size: 0.85rem; overflow-wrap: anywhere; }
.p-compte-bouton { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; border: none; border-radius: 8px; background: none; font: inherit; font-weight: 600; color: var(--encre); text-align: left; cursor: pointer; }
.p-compte-bouton svg { flex: none; color: var(--discret); }
.p-compte-bouton:hover, .p-compte-bouton:focus-visible { background: var(--doux); color: var(--accent); outline: none; }
.p-compte-bouton:hover svg, .p-compte-bouton:focus-visible svg { color: inherit; }
.p-compte-bouton.p-deconnexion { position: relative; margin-top: 7px; }
.p-compte-bouton.p-deconnexion::before { content: ""; position: absolute; left: 2px; right: 2px; top: -5px; border-top: 1px solid var(--trait); }
.p-compte-bouton.p-deconnexion:hover, .p-compte-bouton.p-deconnexion:focus-visible { background: var(--faux-fond); color: var(--faux); }
.p-discret { color: var(--discret); font-weight: 400; }
.p-page { width: 100%; box-sizing: border-box; margin: 0; padding: 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.p-page h1 { font-size: 1.5rem; margin: 4px 0; }
.p-page h2 { font-size: 1.15rem; margin: 0 0 10px; }
.p-maj { font-size: 0.8rem; margin-left: 6px; }
.p-carte { background: var(--carte); border: 1px solid var(--trait); border-radius: 14px; padding: 16px 18px; }
.p-premier, .p-inscription { max-width: 440px; margin: 24px auto; width: 100%; }
.p-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.p-form label { display: grid; gap: 4px; font-weight: 600; font-size: 0.9rem; }
.p-form input, .p-form select, .p-liste, .p-table input { font: inherit; padding: 8px 10px; border: 1.5px solid var(--trait); border-radius: 8px; background: var(--fond); color: var(--encre); }
.p-form input:focus, .p-liste:focus, .p-table input:focus { border-color: var(--accent); outline: none; }
.p-ligne { grid-template-columns: repeat(auto-fit, minmax(160px, max-content)); align-items: end; margin-top: 12px; }
.p-erreur { color: var(--faux); margin: 0; grid-column: 1 / -1; }
.p-alerte { background: var(--faux-fond); color: var(--faux); border-radius: 10px; padding: 10px 14px; margin: 0; }
.p-lien { border: none; background: none; color: var(--accent); padding: 0; text-decoration: underline; font-size: inherit; }
.p-classe-lien { border: none; background: none; color: var(--accent); padding: 0; font-weight: 700; font-size: inherit; }
.p-classe-lien:hover { text-decoration: underline; }
.p-retour { justify-self: start; }
.p-classes { margin: 12px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
/* Carte d'une classe : même allure que les tuiles de « Travaux à faire », avec une rangée d'icônes en bas. */
.p-classe-carte { position: relative; display: flex; flex-direction: column; border: 1px solid var(--trait); border-radius: 12px; background: var(--carte); touch-action: pan-y; }
.p-classe-carte:hover, .p-classe-carte:focus-within { border-color: var(--accent); }
.p-classe-carte .p-tuile.p-classe-ouvrir { border: none; background: none; padding: 10px 12px 6px; flex: 1; }
.p-classe-outils { display: flex; align-items: center; gap: 2px; padding: 0 8px 6px; }
.p-classe-outils .p-espace { flex: 1; }
.p-classe-outils .p-poignee { margin-left: 0; }
.p-classe-carte:has(.p-poignee) { cursor: grab; }
.p-classe-carte.p-glisse { z-index: 2; box-shadow: 5px 5px 0 var(--ombre-dure); }
/* Dans la grille, la place de dépôt est un trait vertical à gauche ou à droite de la carte. */
.p-classe-carte.p-cible-avant::before, .p-classe-carte.p-cible-apres::after { top: 0; bottom: 0; left: auto; right: auto; width: 3px; height: auto; }
.p-classe-carte.p-cible-avant::before { left: -8px; }
.p-classe-carte.p-cible-apres::after { right: -8px; }
@media (max-width: 600px) { .p-classes { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); } }

/* Élèves connectés : une carte par classe */
.p-appli { display: grid; grid-template-columns: minmax(0, 1fr); }
.p-appli.avec-menu { grid-template-columns: minmax(0, 1fr) 260px; min-height: calc(100vh - 56px); }
.p-appli.avec-menu.sans-connectes { grid-template-columns: minmax(0, 1fr); }
/* Vues d'ensemble : tuiles des niveaux (Mes activités) et des classes (Travaux à faire). */
.p-tuiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.p-tuiles[hidden] { display: none; }
.p-tuile { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 12px; border: 1px solid var(--trait); border-radius: 12px; background: var(--carte); color: var(--encre); font: inherit; text-align: left; cursor: pointer; }
.p-tuile:hover { border-color: var(--accent); }
.p-tuile-titre { font-size: 1.05rem; font-weight: 700; }
.p-select-court { max-width: 12em; }
.p-suite-niveau { display: grid; gap: 12px; }
.p-attente-niveau { margin: 0; }
.p-avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--accent); color: var(--accent-encre); display: grid; place-items: center; font-size: 1.5rem; font-weight: 700; flex: none; }
.p-icone { border: none; background: none; color: var(--discret); padding: 4px; border-radius: 8px; cursor: pointer; display: inline-grid; place-items: center; vertical-align: middle; }
.p-bascule { margin: 14px 0 0; text-align: center; font-size: 0.92rem; }
.p-code-saisie { display: flex; gap: 8px; }
.p-code-saisie input { flex: 1; min-width: 0; }
.p-code-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; }
.p-actions-eleve { white-space: nowrap; }
.p-col-case { width: 1px; }
.p-eleves tr.p-choisi td { background: var(--doux); }
.p-selection { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-weight: 600; }
.p-selection[hidden], .p-deplace-info[hidden] { display: none; }
.p-menu-classes { min-width: 12em; }
.p-deplace-info { margin: 0 0 6px; }
.p-icone:hover, .p-icone:focus-visible { color: var(--accent); background: var(--doux); }
/* Infobulle des icônes : le libellé (aria-label) s'affiche au survol ou au clavier */
.p-icone { position: relative; }
.p-icone[aria-label]:hover::after, .p-icone[aria-label]:focus-visible::after {
  content: attr(aria-label); position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); z-index: 10;
  background: var(--encre); color: var(--carte); font-size: 0.78rem; font-weight: 500; line-height: 1.3; white-space: nowrap;
  padding: 4px 8px; border-radius: 6px; pointer-events: none;
}
/* Dans un tableau défilant, l'infobulle ne doit pas dépasser du cadre (barres de défilement) : alignée à droite, au-dessus pour la dernière ligne */
.p-defile .p-icone[aria-label]:hover::after, .p-defile .p-icone[aria-label]:focus-visible::after { left: auto; right: 0; transform: none; }
.p-defile tbody tr:last-child .p-icone[aria-label]:hover::after, .p-defile tbody tr:last-child .p-icone[aria-label]:focus-visible::after { top: auto; bottom: calc(100% + 6px); }
.p-avatar.p-avatar-bouton { width: 38px; height: 38px; font-size: 0.95rem; }
.p-form fieldset.p-choix { display: flex; }
.p-temps-plus { font-size: 0.75rem; font-weight: 700; color: var(--remediation); border: 1px solid currentColor; border-radius: 999px; padding: 0 6px; white-space: nowrap; }
.p-nouvelle-classe .btn { align-self: end; }
.p-pastille[data-type=entrainement], .p-ligne-act[data-type=entrainement] { --type: var(--entrainement); }
.p-pastille[data-type=evaluation], .p-ligne-act[data-type=evaluation] { --type: var(--evaluation); }
.p-pastille[data-type=remediation], .p-ligne-act[data-type=remediation] { --type: var(--remediation); }
.p-titre-ligne { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; }

/* Lignes d'activités (Mes activités, Travaux à faire) : bande de couleur du type à gauche */
.p-lignes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.p-ligne-act { background: var(--carte); border: 1px solid var(--trait); border-left: 6px solid var(--type); border-radius: 12px; padding: 10px 14px; display: grid; gap: 4px; }
.p-ligne-act p { margin: 0; }
.p-ligne-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 1.05rem; }
.p-niveau-act { font-size: 1rem; font-weight: 800; line-height: 1; padding: 6px 10px; border-radius: 8px; background: var(--accent); color: var(--accent-encre); }
.p-pastille { font-size: 0.75rem; font-weight: 700; color: var(--type); border: 1.5px solid var(--type); border-radius: 999px; padding: 1px 8px; }
.p-classes-act { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0.9rem; }
.p-puce-classe { border: 1px solid var(--trait); background: var(--doux); color: var(--encre); border-radius: 999px; padding: 2px 10px; font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
.p-puce-classe:hover { border-color: var(--accent); }
.p-actions { font-size: 0.9rem; }
.p-ligne-vide { padding: 8px 0; }

/* Formulaire d'une activité */
.p-form-activite { max-width: 760px; }
.p-form fieldset { min-width: 0; border: 1px solid var(--trait); border-radius: 12px; padding: 10px 14px 14px; margin: 0; display: grid; gap: 10px; }
.p-form fieldset legend { font-weight: 700; padding: 0 6px; }
.p-form fieldset:disabled { opacity: 0.6; }
.p-choix { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.p-form .p-choix label, .p-form .p-case-ligne { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.p-types { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.p-form .p-types label { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; border: 1.5px solid var(--trait); border-left: 5px solid var(--type); border-radius: 10px; padding: 8px 10px; cursor: pointer; }
.p-form .p-types label:has(input:checked) { border-color: var(--type); background: color-mix(in srgb, var(--type) 10%, transparent); }
.p-types label > span { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.p-types small { font-size: 0.82rem; color: var(--discret); font-weight: 400; line-height: 1.3; }
@media (max-width: 640px) { .p-types { grid-template-columns: minmax(0, 1fr); } }
.p-reglages-grille { display: grid; gap: 10px; }
.p-reglages-grille fieldset { padding: 6px 12px 10px; }
.p-ligne-champs { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: end; }
.p-ligne-champs input[type=number] { width: 7em; }
.p-date { display: grid; gap: 4px; }
.p-date-titre { font-weight: 600; font-size: 0.9rem; }
.p-date-ligne { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.p-form .actions { display: flex; gap: 10px; }
.p-cartes-exercices { display: flex; flex-direction: column; gap: 22px; }
.p-grille-exos { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); align-items: stretch; }
.p-carte-exercice h2 { margin: 0 0 6px; }
.p-carte-exercice p { margin: 4px 0; }
.p-petit { font-size: 0.85rem; margin: 10px 0 0; }
.p-col-connectes { align-self: start; position: sticky; top: 16px; max-height: calc(100vh - 88px); overflow: hidden; margin: 16px 16px 16px 0; background: var(--carte); border: 1px solid var(--trait); border-radius: 14px; padding: 10px 12px; }
.p-col-connectes h2 { font-size: 1rem; }
/* Connectés et échéances défilent dans leur zone : l'avatar du professeur reste toujours visible en bas */
.p-col-connectes:not([hidden]) { display: flex; flex-direction: column; }
.p-col-haut { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.p-connectes { display: grid; gap: 12px; }
.p-groupe { padding: 0; }
.p-col-connectes h2 { margin-bottom: 6px; }
.p-groupe h3 { margin-bottom: 4px; font-size: 0.9rem; }
.p-groupe h3 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0 0 10px; font-size: 1.05rem; }
.p-compte { font-size: 0.85rem; color: var(--discret); font-weight: 400; }
.p-puces { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.p-puces li { padding: 2px 8px; border-radius: 999px; background: var(--juste-fond); font-size: 0.8rem; white-space: nowrap; cursor: default; }
.p-puces li.p-aucun { background: none; color: var(--discret); padding: 0; }

/* Tableaux */
.p-defile { overflow-x: auto; }
.p-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.p-table th { text-align: left; color: var(--discret); font-weight: 600; border-bottom: 2px solid var(--trait); padding: 6px 8px; white-space: nowrap; }
.p-table td { border-bottom: 1px solid var(--trait); padding: 6px 8px; vertical-align: middle; }
.p-mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }
.p-point { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--trait); }
.p-point.on { background: var(--juste); }
.p-ajout summary { font-weight: 700; cursor: pointer; }
.p-ajout[open] { display: grid; gap: 10px; }
.p-ajout p { margin: 0; }
.p-liste { width: 100%; resize: vertical; }
.p-ajout > .btn, .p-apercu > .btn { justify-self: start; }
.p-apercu { display: grid; gap: 10px; }

dialog.p-codes, dialog.p-detail, dialog.p-modif, dialog.p-modif-classe, dialog.p-attrib, dialog.p-impr, dialog.p-modif-travail, dialog.p-dlg-vue { border: none; border-radius: 16px; padding: 20px 22px; max-width: min(720px, calc(100vw - 32px)); width: 100%; background: var(--carte); color: var(--encre); }
dialog::backdrop { background: rgb(0 0 0 / 0.45); }
.p-attention { background: var(--faux-fond); color: var(--faux); border-radius: 8px; padding: 8px 12px; font-weight: 600; }
dialog .actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 14px; }


@media (max-width: 640px) {
  .p-entete { padding: 10px 16px; }
  .p-page { padding: 12px 16px; }
  .p-appli.avec-menu, .p-appli.avec-menu.sans-connectes { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .p-col-connectes { position: static; max-height: none; margin: 0 16px 16px; }
  /* Barre du haut : titre et icônes à droite sur une ligne, puis la maison et les trois onglets. */
  .p-entete { display: grid; grid-template-columns: auto repeat(4, minmax(0, 1fr)); gap: 6px 4px; padding: 8px 12px; }
  .p-entete > strong { grid-column: 1 / 3; align-self: center; }
  .p-entete > .logo-marque { grid-column: 1 / 3; align-self: center; justify-self: start; } /* sur deux colonnes : sinon la colonne de la maison prend la largeur du logo */
  .p-droite { grid-column: 3 / 6; grid-row: 1; justify-self: end; gap: 4px; }
  .p-haut { display: contents; }
  .p-haut button { grid-row: 2; padding: 8px 4px; text-align: center; }
  .p-haut .p-maison { padding: 8px 10px; }
  .p-haut .p-long { display: none; }
  .p-haut .p-court { display: inline; }
}

/* Exports des codes : boutons avec icône, cadre d'impression caché */
dialog.p-codes .actions { position: sticky; bottom: -20px; margin: 14px -22px -20px; padding: 12px 22px 16px; background: var(--carte); border-top: 1px solid var(--trait); }
dialog.p-codes .actions .btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; }
iframe.p-cadre-impression { position: fixed; right: 0; bottom: 0; width: 0; height: 0; border: 0; }

/* Impression : seulement la liste des codes */
@media print {
  body.page-prof > *:not(dialog.p-codes) { display: none !important; }
  dialog.p-codes { position: static; display: block; max-width: none; max-height: none; height: auto; overflow: visible; inset: auto; margin: 0; box-shadow: none; padding: 0; }
  dialog.p-codes thead { display: table-header-group; }
  dialog.p-codes tr { break-inside: avoid; }
  dialog.p-codes .actions, dialog.p-codes .p-attention, dialog.p-codes .p-info-codes { display: none; }
  dialog::backdrop { display: none; }
  .p-table td { padding: 10px 8px; font-size: 1rem; }
}

/* Tableau d'une activité */
.p-tableau-cadre { border: 1px solid var(--trait); border-radius: 12px; background: var(--carte); }
.p-tableau { border-collapse: separate; border-spacing: 0; width: 100%; table-layout: fixed; font-size: 0.9rem; }
.p-tableau th, .p-tableau td { border-bottom: 1px solid var(--trait); border-right: 1px solid var(--trait); padding: 0; }
.p-tableau .p-tableau-eleve { position: sticky; left: 0; background: var(--carte); z-index: 1; padding: 8px 12px; text-align: left; white-space: nowrap; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.p-tableau-eleve .p-point { margin-right: 8px; }
.p-tableau-eleve .p-copie { color: inherit; text-decoration: none; }
.p-tableau-eleve .p-copie:hover, .p-tableau-eleve .p-copie:focus-visible { color: var(--accent); text-decoration: underline; }
.p-tableau thead th:first-child { position: sticky; left: 0; z-index: 2; background: var(--carte); }
.p-vignette { min-width: 0; max-width: none; overflow: hidden; padding: 6px 8px; text-align: left; font-weight: 400; vertical-align: top; white-space: nowrap; }
/* En-tête sur deux lignes alignées d'une colonne à l'autre : numéro et formes, puis modèle (2 lignes au plus). */
.p-vignette .p-vignette-tete { display: flex; align-items: center; gap: 6px; height: 1.8em; font-size: 0.95rem; font-weight: 700; }
.p-vignette .p-vignette-modele { height: 2.7em; margin-top: 2px; font-size: 0.8rem; line-height: 1.35; overflow: hidden; }
.p-vignette .p-vignette-ligne { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-vignette .p-alerte-temps { display: flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 0.75rem; font-weight: 600; color: var(--faux); cursor: help; }
.p-vignette .p-vignette-math { overflow: hidden; max-height: 4.5em; font-size: 0.8rem; margin: 4px 0; }
.p-case { min-width: 0; height: 38px; white-space: nowrap; text-align: center; font-weight: 700; position: relative; background: var(--fond); color: var(--encre); }
.p-case small { display: block; font-weight: 400; font-size: 0.7rem; opacity: 0.8; }
.p-case.courante { outline: 3px solid var(--evaluation); outline-offset: -3px; }
/* Note /20 : dernière colonne du tableau, chiffre à recopier dans Pronote. */
.p-vignette.p-vignette-note { min-width: 72px; max-width: none; vertical-align: middle; text-align: center; font-weight: 700; font-size: 0.85rem; }
.p-case.p-note { min-width: 72px; background: var(--carte); font-variant-numeric: tabular-nums; }
/* Notes relevées : case à côté des boutons du travail, dans l'en-tête du tableau et sur l'accueil. */
.p-notes-tableau { display: inline-flex; align-items: center; gap: 10px; margin-left: 4px; }
.p-statut.p-cloturee { color: var(--discret, inherit); }
.p-statut.p-en-pause { color: var(--remediation); border-color: var(--remediation); background: color-mix(in srgb, var(--remediation) 14%, var(--carte)); }
.p-statut.p-a-relever { color: var(--evaluation); border-color: var(--evaluation); background: color-mix(in srgb, var(--evaluation) 14%, var(--carte)); }

/* Domaines du programme : une couleur par domaine (bande à gauche des exercices). */
[data-domaine] { --domaine: var(--trait); }
[data-domaine="nombres-calculs"] { --domaine: var(--theme-nombres); }
[data-domaine="espace-geometrie"] { --domaine: var(--theme-geometrie); }
[data-domaine="donnees-probabilites"] { --domaine: var(--theme-donnees); }
[data-domaine="proportionnalite-fonctions"] { --domaine: var(--theme-fonctions); }
[data-domaine="pensee-informatique"] { --domaine: var(--theme-informatique); }

/* Exercices d'une activité (création) et banque d'exercices */
.p-exos, .p-banque-liste { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.p-exo { background: var(--carte); border: 1px solid var(--trait); border-left: 6px solid var(--domaine); border-radius: 10px; padding: 8px 12px; display: grid; gap: 2px; }
.p-exo p { margin: 0; }
.p-exos-vide { padding: 6px 0; }
.p-petit-btn { padding: 4px 12px; font-size: 0.9rem; margin-left: auto; }
.p-exos-resume { margin: 0; padding-left: 1.3em; color: var(--discret); }
/* Bouton « Voir les exercices » d'une carte d'activité, avec un chevron qui pivote. */
.p-voir-exos { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; }
.p-voir-exos:hover { text-decoration: underline; }
.p-chevron { width: 0; height: 0; border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform 0.15s; }
.p-voir-exos[aria-expanded="true"] .p-chevron { transform: rotate(90deg); }
.p-exos-resume li { border-left: 4px solid var(--domaine); padding-left: 6px; margin: 2px 0; }
dialog.p-banque { border: none; border-radius: 16px; padding: 20px 22px; max-width: min(720px, calc(100vw - 32px)); width: 100%; background: var(--carte); color: var(--encre); }
dialog.p-banque h2 { margin-top: 0; }
.p-reglages-exo .r-chemin, .p-reglages-exo .r-niveau { margin: 2px 0 6px; }
.p-domaine { display: grid; gap: 10px; }
.p-domaine > h2 { margin: 0; font-size: 1.05rem; border-left: 6px solid var(--domaine); padding-left: 8px; }
.p-carte-exercice[data-domaine] { border-left: 6px solid var(--domaine); }
.p-carte-exercice h3 { margin: 0 0 4px; }

/* Fiches de l'onglet Exercices : une par ligne, texte à gauche, niveaux et formes au milieu, boutons à droite */
.p-grille-exos { display: flex; flex-direction: column; gap: 10px; }
.p-carte-exercice { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px 20px; margin: 0; }
.p-exo-texte { display: grid; gap: 4px; min-width: 0; }
.p-exo-texte h3 { margin: 0; font-size: 1.1rem; line-height: 1.3; }
.p-exo-titre { display: flex; align-items: center; gap: 6px; min-width: 0; }
.p-exo-titre .mini-monstre { margin: -6px 0 -6px -4px; }
.p-exo-repere { display: grid; justify-items: end; gap: 6px; }
.p-exo-actions { display: flex; gap: 2px; }
.p-exo-actions .p-icone svg { width: 22px; height: 22px; }
.p-exo-notion { margin: 0; font-size: 0.9rem; line-height: 1.4; }
.p-exo-contenu { flex-wrap: nowrap; overflow: hidden; white-space: nowrap; }
.p-exo-contenu .p-element[hidden] { display: none; }
.p-exo-plus { flex: none; font-weight: 700; color: var(--discret); cursor: help; }
@media (max-width: 700px) { .p-carte-exercice { grid-template-columns: minmax(0, 1fr) auto; } .p-exo-repere { grid-column: 1 / -1; grid-row: 2; justify-items: start; } }
.p-pastilles-niveaux { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.p-pastilles-niveaux li { font-size: 0.75rem; font-weight: 700; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--trait); color: var(--discret); opacity: 0.45; }
.p-pastilles-niveaux li.vise { opacity: 1; background: var(--domaine); border-color: var(--domaine); color: var(--sur-couleur); }
.p-forme-lettre { font-weight: 700; width: 18px; text-align: center; }
[data-domaine="proportionnalite-fonctions"] .p-pastilles-niveaux li.vise, [data-domaine="donnees-probabilites"] .p-pastilles-niveaux li.vise { color: var(--nuit); }

/* Exercices d'une activité : glisser-déposer (poignée), trait de dépôt. */
.p-exo { position: relative; }
.p-exos:has(.p-poignee) .p-exo { cursor: grab; }
.p-poignee { display: inline-flex; color: var(--discret); cursor: grab; touch-action: none; padding: 2px; margin-left: -4px; }
.p-exo.p-glisse { z-index: 2; cursor: grabbing; box-shadow: 5px 5px 0 var(--ombre-dure); opacity: 0.95; user-select: none; }
.p-cible-avant::before, .p-cible-apres::after { content: ""; position: absolute; left: 0; right: 0; height: 3px; border-radius: 2px; background: var(--accent); }
.p-cible-avant::before { top: -6px; }
.p-cible-apres::after { bottom: -6px; }
.p-retard label { display: flex !important; flex-wrap: wrap; margin: 4px 0; }
.p-form input.p-nombre { width: 4.5em; padding: 4px 6px; text-align: right; }
/* Statut d'un travail : En cours, À venir, Terminé, Suspendue. */
.p-statut { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; border: 1.5px solid currentColor; white-space: nowrap; }
.p-statut[data-statut="en-cours"] { background: var(--accent); border-color: var(--accent); color: var(--accent-encre); }
.p-statut[data-statut="a-venir"] { color: var(--accent); }
.p-statut[data-statut="termine"] { background: var(--discret); border-color: var(--discret); color: var(--carte); }
.p-statut[data-statut="suspendue"] { color: var(--faux); }
.p-ligne-act.p-suspendue { opacity: .75; }
/* Exercice bilan : même carte que les exercices, bande de la couleur principale ; estompée tant qu'il n'est pas coché. */
.p-exo.p-bilan { --domaine: var(--accent); margin-top: 12px; }
.p-exo.p-bilan:not(:has(input[name=avecBilan]:checked)) { border-style: dashed; border-left-style: solid; border-left-color: var(--trait); }
.p-exo.p-bilan:not(:has(input[name=avecBilan]:checked)) .p-bilan-num { color: var(--discret); }
.p-bilan label { display: flex !important; flex-wrap: wrap; align-items: center; gap: 6px; }
.p-bilan-titre strong { font-size: 1rem; }
.p-activites .p-titre-ligne { margin-bottom: 18px; }
/* Boutons de retour (« Mes activités », « Gérer mes classes »…) : un vrai bouton avec une flèche, qui s'éclaire au survol. */
.p-retour-btn { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 7px 14px 7px 10px; border: 1.5px solid var(--trait); border-radius: 999px;
  background: var(--carte); color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s, color .15s, box-shadow .15s; }
.p-retour-btn::before { content: ""; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .15s; }
.p-retour-btn:hover, .p-retour-btn:focus-visible { background: var(--accent); border-color: var(--accent); color: var(--accent-encre); }
.p-retour-btn:hover::before { transform: translateX(-3px); }
.p-retour-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 40%, transparent); outline-offset: 2px; }

/* Titres des deux parties (« Réglages » à gauche, « Test de l'exercice » à droite), bien visibles. */
.r-partie { margin: 0 0 12px; padding: 4px 0 6px; font-size: 1.35rem; font-weight: 800; color: var(--accent); border-bottom: 3px solid var(--accent); }
.t-apercu > .r-partie { margin: 0; padding: 10px 12px 6px; background: var(--carte); }
/* Aperçu élève d'un exercice (page « Tester l'exercice », fenêtre d'ajout à une activité). */
.t-apercu { min-height: 0; display: flex; flex-direction: column; background: var(--fond); }
.t-barre { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 8px 12px; border-bottom: 1px solid var(--trait); background: var(--carte); }
.t-outils { display: flex; align-items: center; gap: 6px; margin-left: auto; }
/* Pastilles des questions : numéro + icône de la forme ; couleur du résultat, question affichée entourée. */
.t-questions { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; flex: 1; min-width: 0; }
.t-q { display: inline-flex; align-items: center; gap: 4px; border: 1.5px solid var(--trait); background: var(--fond); color: var(--encre); border-radius: 999px; padding: 2px 9px 2px 10px; font-size: 0.85rem; font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; }
.t-q:hover { border-color: var(--accent); }
.t-q[aria-current="true"] { outline: 3px solid var(--accent); outline-offset: 1px; }
.t-q[data-etat="juste"] { background: var(--juste); border-color: var(--juste); color: var(--sur-couleur); }
.t-q[data-etat="partiel"] { background: var(--evaluation); border-color: var(--evaluation); color: var(--sur-couleur); }
.t-q[data-etat="faux"] { background: var(--faux); border-color: var(--faux); color: var(--sur-couleur); }
.t-q .icone-forme { display: inline-flex; }
.t-q .icone-forme svg { width: 14px; height: 14px; }
/* Menu « Variante » : rubriques où plusieurs cases sont cochées. */
.t-cas { position: relative; }
.t-cas > summary { list-style: none; cursor: pointer; border: 1.5px solid var(--trait); border-radius: 999px; background: var(--fond); padding: 4px 12px; font-weight: 700; font-size: 0.9rem; white-space: nowrap; }
.t-cas > summary::-webkit-details-marker { display: none; }
.t-cas > summary::after { content: " ▾"; }
.t-cas[open] > summary, .t-cas.t-cas-force > summary { border-color: var(--accent); }
.t-cas.t-cas-force > summary { background: color-mix(in srgb, var(--accent) 16%, var(--fond)); }
.t-cas-menu { position: absolute; z-index: 20; right: 0; top: calc(100% + 4px); width: min(420px, 90vw); display: grid; gap: 6px; padding: 10px 12px; background: var(--carte); border: 1px solid var(--trait); border-radius: 12px; box-shadow: 4px 4px 0 var(--ombre-dure); }
.t-aide { margin: 0; font-size: 0.8rem; color: var(--discret); }
.t-rangee { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.t-legende { font-size: 0.8rem; font-weight: 700; margin-right: 2px; }
.t-pastille { border: 1.5px solid var(--trait); background: var(--fond); border-radius: 999px; padding: 1px 10px; font-size: 0.85rem; }
.t-pastille:hover { border-color: var(--accent); }
.t-pastille[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-encre); }
.t-autre { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; white-space: nowrap; }
.t-marche { display: inline-flex; align-items: center; padding: 6px 10px; color: var(--accent); }
.t-marche[hidden], .t-cas[hidden] { display: none; }
.t-cadre { flex: 1; width: 100%; border: none; background: var(--fond); }

/* Fenêtre de réglages d'un exercice d'activité : réglages à gauche, aperçu élève à droite. */
dialog.r-avec-apercu { width: min(1400px, calc(100vw - 32px)); height: calc(100dvh - 32px); max-height: none; padding: 0; overflow: hidden; display: grid; grid-template-columns: minmax(380px, 40%) minmax(0, 1fr); }
dialog.r-avec-apercu:not([open]) { display: none; }
.r-avec-apercu .r-colonne { min-height: 0; overflow-y: auto; padding: 14px 18px 0; border-right: 1px solid var(--trait); }
.r-avec-apercu .r-entete { flex-wrap: wrap; }
.r-avec-apercu .reglages-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.r-avec-apercu fieldset.large { grid-column: span 2; }
.r-avec-apercu .actions { bottom: 0; }
.r-avec-apercu[data-domaine] .r-entete > div:first-child { border-left: 6px solid var(--domaine); padding-left: 10px; }
@media (max-width: 900px) {
  dialog.r-avec-apercu { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 75dvh; overflow-y: auto; }
  .r-avec-apercu .r-colonne { overflow: visible; border-right: none; border-bottom: 1px solid var(--trait); }
}
/* Niveau et difficulté d'un exercice de l'activité, alignés à droite de son en-tête. */
.p-exo-niveau { margin: 0 0 0 auto; color: var(--discret); font-weight: 400; white-space: nowrap; }
.p-exo-etoiles { letter-spacing: 1px; }

/* Tableau de bord en grand (onglet #tableau-7) : ni barre du haut, ni menu, ni colonne des connectés.
   Le tableau prend toute la place ; en-têtes des exercices et noms des élèves restent visibles au défilement. */
.p-activite-tete { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 16px; }
.plein-ecran .p-entete, .plein-ecran .p-col-connectes,
.plein-ecran .p-retour-travaux, .plein-ecran .p-activite-boutons, .plein-ecran .p-legende-tableau { display: none !important; }
.plein-ecran .p-appli, .plein-ecran .p-appli.avec-menu { display: block; min-height: 0; }
.plein-ecran .p-page { max-width: none; height: 100vh; padding: 8px 12px; gap: 0; }
.plein-ecran .p-activite:not([hidden]) { display: flex; flex-direction: column; gap: 8px; height: 100%; min-height: 0; }
.plein-ecran .p-activite-tete { flex-wrap: nowrap; align-items: center; }
.plein-ecran .p-activite-titre { font-size: 1.15rem; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plein-ecran .p-activite-info { margin: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plein-ecran .p-plein-fermer { flex: none; }
.plein-ecran .p-tableau-cadre { flex: 1; min-height: 0; overflow: auto; }
.plein-ecran .p-tableau thead th { position: sticky; top: 0; background: var(--carte); z-index: 2; }
.plein-ecran .p-tableau thead th:first-child { left: 0; z-index: 3; }

/* Formulaire d'activité : des boutons à sélectionner plutôt que des cases. */
.p-form .boutons-forme label { display: block; font-weight: 700; cursor: pointer; }
.p-form .boutons-forme input { padding: 0; margin: 0; }
.p-form .boutons-forme svg { flex: none; }
.p-form .boutons-forme label:hover span { border-color: var(--accent); }
.p-form .boutons-forme input:disabled + span { opacity: .5; cursor: not-allowed; }
/* Explication du choix sélectionné seulement. */
.p-form .p-si { display: none; margin: 0; }
.p-retard:has(input[value=fermer]:checked) .p-si[data-si=fermer],
.p-retard:has(input[value=ouvrir]:checked) .p-si[data-si=ouvrir],
.p-temps:has(input[value=question]:checked) .p-si[data-si=question],
.p-temps:has(input[value=global]:checked) .p-si[data-si=global],
.p-temps:has(input[value=aucun]:checked) .p-si[data-si=aucun] { display: grid; gap: 6px; }
.p-retard .p-si label { display: inline-flex !important; margin: 0; }
/* Temps adaptatif : avec le temps par question, sauf en évaluation. */
.p-form-activite:has(input[name=type][value=evaluation]:checked) .p-adaptatif { display: none; }
.p-adaptatif-ligne { display: flex; align-items: center; gap: 6px; }
.p-adaptatif-ligne .p-bascule { margin: 0; }
.p-aide-point { color: var(--discret); width: 26px; height: 26px; padding: 0; vertical-align: middle; }
.p-aide-point[aria-expanded="true"] { color: var(--accent); background: var(--doux); }
.p-explication { border-left: 3px solid var(--entrainement); padding: 4px 10px; background: var(--doux); border-radius: 6px; }
.p-explication p, .p-explication ul { margin: 4px 0; }
.p-explication ul { padding-left: 1.2em; }
.p-explication[hidden] { display: none; }
.p-types .p-explication { grid-column: 1 / -1; }
.p-ligne-aide { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* Niveaux, classes : pastilles à sélectionner (plusieurs possibles), comme dans les réglages d'exercice. */
.p-form .p-pastilles-choix { gap: 6px; }
.p-form .p-pastilles-choix label { position: relative; display: inline-block; cursor: pointer; }
.p-form .p-pastilles-choix input { position: absolute; opacity: 0; inset: 0; margin: 0; padding: 0; cursor: pointer; }
.p-form .p-pastilles-choix label > span { display: inline-block; padding: 4px 14px; border: 1.5px solid var(--trait); border-radius: 16px; background: var(--fond); font-weight: 600; transition: background .12s, border-color .12s; }
.p-form .p-pastilles-choix label:hover > span { border-color: var(--accent); }
.p-form .p-pastilles-choix input:checked + span { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--fond)); }
.p-form .p-pastilles-choix input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--accent) 40%, transparent); outline-offset: 2px; }
/* Type : la carte entière est le bouton (rond caché). */
.p-form .p-types label { position: relative; }
.p-form .p-types input { position: absolute; opacity: 0; inset: 0; margin: 0; padding: 0; cursor: pointer; }
.p-form .p-types label:hover { border-color: var(--type); }
.p-form .p-types label:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--type) 40%, transparent); outline-offset: 2px; }
.p-form .p-types label:has(input:checked) { box-shadow: inset 0 0 0 1px var(--type); }

/* Accueil : en cours, à surveiller, en difficulté */
.p-accueil { display: grid; gap: 18px; align-content: start; }
.p-accueil-bloc h2 { margin-bottom: 8px; }
.p-accueil-bloc[hidden], .p-accueil-deux[hidden] { display: none; }
.p-accueil-deux { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 18px; align-items: start; }
.p-accueil-deux .p-accueil-bloc { background: var(--carte); border: 1px solid var(--trait); border-radius: 14px; padding: 14px 16px; }
.p-accueil-deux .p-accueil-bloc > p { margin: -4px 0 8px; }
.p-accueil-liste { list-style: none; margin: 0; padding: 0; display: grid; }
.p-accueil-liste > li { display: grid; gap: 2px; padding: 8px 0; border-top: 1px solid var(--trait); }
.p-accueil-liste > li:first-child { border-top: none; padding-top: 0; }
.p-accueil-liste .p-ligne-tete { font-size: 1rem; }
.p-accueil-surveiller > li { padding-left: 10px; border-left: 3px solid var(--alerte, var(--trait)); }
.p-accueil-surveiller > li:first-child { padding-top: 2px; }
.p-accueil-surveiller .p-classe-lien { text-align: left; }
.p-accueil-eleves, .p-accueil-liste .p-petit { margin: 0; }
.p-puce-fixe { cursor: default; }
.p-puce-fixe:hover { border-color: var(--trait); }
.p-avance { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.p-jauge { width: 140px; height: 8px; border-radius: 4px; background: var(--doux); overflow: hidden; position: relative; flex: none; }
.p-jauge::before { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--part, 0) * 100%); background: var(--type, var(--accent)); border-radius: 4px; }

/* Mon compte et Aide */
.p-page-compte, .p-aide { display: grid; gap: 16px; max-width: 640px; align-content: start; }
.p-page-compte[hidden], .p-aide[hidden] { display: none; }
.p-page-compte h2, .p-aide h2 { margin: 0; }
.p-ok { color: var(--juste); margin: 0; }
.p-aide-nouveau { margin: 0; padding-left: 22px; display: grid; gap: 8px; }

/* Aide : liste « Pour commencer » (accueil, colonne de droite) et page Aide */
.p-commencer { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: etape; }
.p-commencer li { display: flex; gap: 12px; align-items: flex-start; counter-increment: etape; line-height: 1.4; }
.p-commencer-marque { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--trait); font-weight: 700; font-size: 0.85rem; }
.p-commencer li:not(.fait) .p-commencer-marque::before { content: counter(etape); color: var(--discret); }
.p-commencer li.fait .p-commencer-marque { background: var(--entrainement); border-color: var(--entrainement); color: var(--sur-couleur); }
.p-commencer li > span:last-child { display: grid; gap: 2px; }
.p-commencer-titre { font-weight: 600; text-align: left; padding: 0; margin: 0; min-height: 0; line-height: 1.4; }
.p-commencer li.fait .p-commencer-titre { color: var(--discret); text-decoration: line-through; }
.p-hors-ecran { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.p-commencer .p-petit { margin: 0; }

.p-col-commencer { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--trait); }
.p-col-commencer[hidden] { display: none; }
.p-col-commencer .p-ligne-tete h2 { flex: 1; margin: 0; }
.p-col-commencer > p { margin: 2px 0 10px; }
.p-col-commencer .p-commencer { gap: 8px; font-size: 0.95rem; }
.p-aide-texte { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; }
/* Page Aide : les mots « entraînement », « évaluation », « remédiation » dans la couleur de leur type */
.p-mot-type { font-weight: 700; }
.p-mot-type[data-type="entrainement"] { color: var(--entrainement); }
.p-mot-type[data-type="evaluation"] { color: var(--evaluation); }
.p-mot-type[data-type="remediation"] { color: var(--remediation); }

/* Page Aide : schéma, types en cartes, parties repliables, icônes dans le texte */
.p-aide-partie > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; }
.p-aide-partie > summary::-webkit-details-marker { display: none; }
.p-aide-partie > summary::before { content: ""; flex: none; width: 8px; height: 8px; border-right: 2px solid var(--discret); border-bottom: 2px solid var(--discret); transform: rotate(-45deg); transition: transform 0.15s; }
.p-aide-partie[open] > summary::before { transform: rotate(45deg); }
.p-aide-partie > summary h2 { display: inline; }
.p-aide-partie[open] > summary { margin-bottom: 10px; }
.p-aide-partie, .p-aide .p-carte[id] { scroll-margin-top: 12px; }
.p-schema { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; counter-reset: etape; }
.p-schema li { position: relative; display: grid; gap: 2px; align-content: start; padding: 8px 8px 8px 10px; background: var(--doux); border-radius: 8px; font-size: 0.85rem; counter-increment: etape; }
.p-schema li:not(:last-child)::after { content: "→"; position: absolute; right: -9px; top: 50%; transform: translateY(-50%); z-index: 1; color: var(--discret); font-weight: 700; background: var(--carte); border-radius: 50%; width: 14px; text-align: center; line-height: 14px; font-size: 0.8rem; }
.p-schema li > strong { font-size: 0.95rem; }
.p-schema li > strong::before { content: counter(etape) ". "; color: var(--discret); }
.p-schema li > span { color: var(--discret); line-height: 1.3; }
.p-types-aide { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.p-type-carte { display: grid; gap: 4px; align-content: start; padding: 10px 12px; border: 1px solid var(--trait); border-left: 5px solid var(--type); border-radius: 10px; font-size: 0.9rem; }
.p-type-carte[data-type="entrainement"] { --type: var(--entrainement); }
.p-type-carte[data-type="evaluation"] { --type: var(--evaluation); }
.p-type-carte[data-type="remediation"] { --type: var(--remediation); }
.p-aide-ico { display: inline-grid; place-items: center; vertical-align: middle; width: 26px; height: 26px; border-radius: 7px; background: var(--doux); color: var(--encre); }
.p-aide-ico svg { width: 16px; height: 16px; }
.p-aide { max-width: 760px; }
@media (max-width: 640px) { .p-schema, .p-types-aide { grid-template-columns: 1fr; } .p-schema li:not(:last-child)::after { content: "↓"; right: auto; left: 12px; top: auto; bottom: -11px; transform: none; } }

/* Imprimer une activité : réglages repliables */
.p-impr-form { display: grid; gap: 8px; margin-top: 10px; }
.p-impr-sec { border: 1px solid var(--trait); border-radius: 10px; padding: 8px 12px; }
.p-impr-sec[open] { display: grid; gap: 8px; }
.p-impr-sec > summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; align-items: center; gap: 10px; }
.p-impr-sec > summary::-webkit-details-marker { display: none; }
.p-impr-sec > summary::before { content: ""; flex: none; width: 8px; height: 8px; border-right: 2px solid var(--discret); border-bottom: 2px solid var(--discret); transform: rotate(-45deg); transition: transform 0.15s; }
.p-impr-sec[open] > summary::before { transform: rotate(45deg); }
.p-impr-recap { font-weight: 400; color: var(--discret); font-size: 0.9rem; margin-left: auto; text-align: right; }
.p-impr-sec p { margin: 0; }
.p-impr-champ { display: grid; gap: 4px; font-weight: 500; }

/* Mise en page : listes de travaux en deux colonnes (une seule sur téléphone), titres fixes du menu de gauche. */
.p-lignes-deux { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); align-items: start; }
.p-activites .p-titre-ligne { margin-bottom: 12px; }
/* Page d'une classe : titre, effectif et boutons sur une seule ligne. */
.p-classe { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; }
.p-classe[hidden] { display: none; }
.p-classe-tete { gap: 4px 12px; }
.p-classe-tete h1 { margin: 0; }
.p-classe-tete .p-classe-info { font-size: 0.95rem; }
.p-classe-boutons { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.p-classe > .p-retour-btn { margin-bottom: 0; }
.p-activites-classe h2 { margin-bottom: 8px; }
/* Exercices : barre de filtres (niveaux en pastilles, thèmes en menu coloré). */
.p-filtres { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 10px 14px; background: var(--carte); border: 1px solid var(--trait); border-radius: 12px; }
.p-court { display: none; }
.p-filtre-niveaux { display: flex; flex-wrap: wrap; gap: 6px; }
.p-filtre-niveaux button { border: 1.5px solid var(--trait); background: var(--fond); color: var(--encre); border-radius: 999px; padding: 4px 12px; font: inherit; font-size: 0.9rem; font-weight: 700; cursor: pointer; }
.p-filtre-niveaux button:hover { border-color: var(--accent); }
.p-filtre-niveaux button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-encre); }
/* Page d'une classe : onglets « Élèves » et « En plus » (entraînement libre) */
.p-onglets { display: flex; gap: 4px; border-bottom: 2px solid var(--trait); margin-top: 18px; }
.p-onglet { border: none; background: none; color: var(--discret); font: inherit; font-weight: 700; padding: 8px 14px; margin-bottom: -2px; border-bottom: 3px solid transparent; cursor: pointer; }
.p-onglet:hover { color: var(--encre); }
.p-onglet[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.p-en-plus { display: grid; gap: 10px; margin-top: 12px; }
.p-niveaux-classe { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.p-niveaux-libres { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.p-niveaux-libres button { border: 1.5px solid var(--trait); background: var(--fond); color: var(--encre); border-radius: 999px; padding: 1px 8px; font: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer; }
.p-niveaux-libres button:hover:not(:disabled) { border-color: var(--accent); }
.p-niveaux-libres button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-encre); }
.p-niveaux-libres button:disabled { cursor: default; opacity: 0.6; }
.p-table-en-plus td { vertical-align: top; }
.p-table-en-plus .p-cliquable { cursor: pointer; }
.p-table-en-plus tr:hover .p-cliquable { background: var(--doux); }
.p-detail-questions { font-size: 0.85rem; }
.p-tuile[aria-pressed="true"] { border-color: var(--accent); background: var(--doux); box-shadow: inset 0 0 0 1px var(--accent); }
.p-activites, .p-travaux-classes { display: grid; gap: 14px; align-content: start; }
.p-activites[hidden], .p-travaux-classes[hidden] { display: none; }
.p-activites h2, .p-travaux-classes h2 { margin: 0; }
/* Colonne de droite : connectés, puis échéances, dernières réponses et raccourcis. */
.p-col-bloc { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--trait); display: grid; gap: 8px; }
.p-col-bloc h2 { margin: 0; }
.p-col-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.p-col-liste li { display: grid; gap: 1px; font-size: 0.88rem; line-height: 1.3; }
.p-col-liste .p-classe-lien { text-align: left; font-size: 0.88rem; }
.p-exo-contenu { flex-wrap: nowrap; overflow: hidden; white-space: nowrap; }
.p-exo-contenu .p-element[hidden] { display: none; }
.p-exo-plus { flex: none; font-weight: 700; color: var(--discret); cursor: help; }
@media (max-width: 700px) { .p-carte-exercice { grid-template-columns: minmax(0, 1fr) auto; } .p-exo-repere { grid-column: 1 / -1; grid-row: 2; justify-items: start; } }
.p-pastilles-niveaux { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.p-pastilles-niveaux li { font-size: 0.75rem; font-weight: 700; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--trait); color: var(--discret); opacity: 0.45; }
.p-pastilles-niveaux li.vise { opacity: 1; background: var(--domaine); border-color: var(--domaine); color: var(--sur-couleur); }
.p-forme-lettre { font-weight: 700; width: 18px; text-align: center; }
[data-domaine="proportionnalite-fonctions"] .p-pastilles-niveaux li.vise, [data-domaine="donnees-probabilites"] .p-pastilles-niveaux li.vise { color: var(--nuit); }

/* Exercices d'une activité : glisser-déposer (poignée), trait de dépôt. */
.p-exo { position: relative; }
.p-exos:has(.p-poignee) .p-exo { cursor: grab; }
.p-poignee { display: inline-flex; color: var(--discret); cursor: grab; touch-action: none; padding: 2px; margin-left: -4px; }
.p-exo.p-glisse { z-index: 2; cursor: grabbing; box-shadow: 5px 5px 0 var(--ombre-dure); opacity: 0.95; user-select: none; }
.p-cible-avant::before, .p-cible-apres::after { content: ""; position: absolute; left: 0; right: 0; height: 3px; border-radius: 2px; background: var(--accent); }
.p-cible-avant::before { top: -6px; }
.p-cible-apres::after { bottom: -6px; }
.p-retard label { display: flex !important; flex-wrap: wrap; margin: 4px 0; }
.p-form input.p-nombre { width: 4.5em; padding: 4px 6px; text-align: right; }
/* Statut d'un travail : En cours, À venir, Terminé, Suspendue. */
.p-statut { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; border: 1.5px solid currentColor; white-space: nowrap; }
.p-statut[data-statut="en-cours"] { background: var(--accent); border-color: var(--accent); color: var(--accent-encre); }
.p-statut[data-statut="a-venir"] { color: var(--accent); }
.p-statut[data-statut="termine"] { background: var(--discret); border-color: var(--discret); color: var(--carte); }
.p-statut[data-statut="suspendue"] { color: var(--faux); }
.p-ligne-act.p-suspendue { opacity: .75; }
/* Exercice bilan : même carte que les exercices, bande de la couleur principale ; estompée tant qu'il n'est pas coché. */
.p-exo.p-bilan { --domaine: var(--accent); margin-top: 12px; }
.p-exo.p-bilan:not(:has(input[name=avecBilan]:checked)) { border-style: dashed; border-left-style: solid; border-left-color: var(--trait); }
.p-exo.p-bilan:not(:has(input[name=avecBilan]:checked)) .p-bilan-num { color: var(--discret); }
.p-bilan label { display: flex !important; flex-wrap: wrap; align-items: center; gap: 6px; }
.p-bilan-titre strong { font-size: 1rem; }
.p-activites .p-titre-ligne { margin-bottom: 18px; }
/* Boutons de retour (« Mes activités », « Gérer mes classes »…) : un vrai bouton avec une flèche, qui s'éclaire au survol. */
.p-retour-btn { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 7px 14px 7px 10px; border: 1.5px solid var(--trait); border-radius: 999px;
  background: var(--carte); color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s, color .15s, box-shadow .15s; }
.p-retour-btn::before { content: ""; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .15s; }
.p-retour-btn:hover, .p-retour-btn:focus-visible { background: var(--accent); border-color: var(--accent); color: var(--accent-encre); }
.p-retour-btn:hover::before { transform: translateX(-3px); }
.p-retour-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 40%, transparent); outline-offset: 2px; }

/* Titres des deux parties (« Réglages » à gauche, « Test de l'exercice » à droite), bien visibles. */
.r-partie { margin: 0 0 12px; padding: 4px 0 6px; font-size: 1.35rem; font-weight: 800; color: var(--accent); border-bottom: 3px solid var(--accent); }
.t-apercu > .r-partie { margin: 0; padding: 10px 12px 6px; background: var(--carte); }
/* Aperçu élève d'un exercice (page « Tester l'exercice », fenêtre d'ajout à une activité). */
.t-apercu { min-height: 0; display: flex; flex-direction: column; background: var(--fond); }
.t-barre { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 8px 12px; border-bottom: 1px solid var(--trait); background: var(--carte); }
.t-outils { display: flex; align-items: center; gap: 6px; margin-left: auto; }
/* Pastilles des questions : numéro + icône de la forme ; couleur du résultat, question affichée entourée. */
.t-questions { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; flex: 1; min-width: 0; }
.t-q { display: inline-flex; align-items: center; gap: 4px; border: 1.5px solid var(--trait); background: var(--fond); color: var(--encre); border-radius: 999px; padding: 2px 9px 2px 10px; font-size: 0.85rem; font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; }
.t-q:hover { border-color: var(--accent); }
.t-q[aria-current="true"] { outline: 3px solid var(--accent); outline-offset: 1px; }
.t-q[data-etat="juste"] { background: var(--juste); border-color: var(--juste); color: var(--sur-couleur); }
.t-q[data-etat="partiel"] { background: var(--evaluation); border-color: var(--evaluation); color: var(--sur-couleur); }
.t-q[data-etat="faux"] { background: var(--faux); border-color: var(--faux); color: var(--sur-couleur); }
.t-q .icone-forme { display: inline-flex; }
.t-q .icone-forme svg { width: 14px; height: 14px; }
/* Menu « Variante » : rubriques où plusieurs cases sont cochées. */
.t-cas { position: relative; }
.t-cas > summary { list-style: none; cursor: pointer; border: 1.5px solid var(--trait); border-radius: 999px; background: var(--fond); padding: 4px 12px; font-weight: 700; font-size: 0.9rem; white-space: nowrap; }
.t-cas > summary::-webkit-details-marker { display: none; }
.t-cas > summary::after { content: " ▾"; }
.t-cas[open] > summary, .t-cas.t-cas-force > summary { border-color: var(--accent); }
.t-cas.t-cas-force > summary { background: color-mix(in srgb, var(--accent) 16%, var(--fond)); }
.t-cas-menu { position: absolute; z-index: 20; right: 0; top: calc(100% + 4px); width: min(420px, 90vw); display: grid; gap: 6px; padding: 10px 12px; background: var(--carte); border: 1px solid var(--trait); border-radius: 12px; box-shadow: 4px 4px 0 var(--ombre-dure); }
.t-aide { margin: 0; font-size: 0.8rem; color: var(--discret); }
.t-rangee { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.t-legende { font-size: 0.8rem; font-weight: 700; margin-right: 2px; }
.t-pastille { border: 1.5px solid var(--trait); background: var(--fond); border-radius: 999px; padding: 1px 10px; font-size: 0.85rem; }
.t-pastille:hover { border-color: var(--accent); }
.t-pastille[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-encre); }
.t-autre { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; white-space: nowrap; }
.t-marche { display: inline-flex; align-items: center; padding: 6px 10px; color: var(--accent); }
.t-marche[hidden], .t-cas[hidden] { display: none; }
.t-cadre { flex: 1; width: 100%; border: none; background: var(--fond); }

/* Fenêtre de réglages d'un exercice d'activité : réglages à gauche, aperçu élève à droite. */
dialog.r-avec-apercu { width: min(1400px, calc(100vw - 32px)); height: calc(100dvh - 32px); max-height: none; padding: 0; overflow: hidden; display: grid; grid-template-columns: minmax(380px, 40%) minmax(0, 1fr); }
dialog.r-avec-apercu:not([open]) { display: none; }
.r-avec-apercu .r-colonne { min-height: 0; overflow-y: auto; padding: 14px 18px 0; border-right: 1px solid var(--trait); }
.r-avec-apercu .r-entete { flex-wrap: wrap; }
.r-avec-apercu .reglages-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.r-avec-apercu fieldset.large { grid-column: span 2; }
.r-avec-apercu .actions { bottom: 0; }
.r-avec-apercu[data-domaine] .r-entete > div:first-child { border-left: 6px solid var(--domaine); padding-left: 10px; }
@media (max-width: 900px) {
  dialog.r-avec-apercu { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 75dvh; overflow-y: auto; }
  .r-avec-apercu .r-colonne { overflow: visible; border-right: none; border-bottom: 1px solid var(--trait); }
}
/* Niveau et difficulté d'un exercice de l'activité, alignés à droite de son en-tête. */
.p-exo-niveau { margin: 0 0 0 auto; color: var(--discret); font-weight: 400; white-space: nowrap; }
.p-exo-etoiles { letter-spacing: 1px; }

/* Tableau de bord en grand (onglet #tableau-7) : ni barre du haut, ni menu, ni colonne des connectés.
   Le tableau prend toute la place ; en-têtes des exercices et noms des élèves restent visibles au défilement. */
.p-activite-tete { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 16px; }
.plein-ecran .p-entete, .plein-ecran .p-col-connectes,
.plein-ecran .p-retour-travaux, .plein-ecran .p-activite-boutons, .plein-ecran .p-legende-tableau { display: none !important; }
.plein-ecran .p-appli, .plein-ecran .p-appli.avec-menu { display: block; min-height: 0; }
.plein-ecran .p-page { max-width: none; height: 100vh; padding: 8px 12px; gap: 0; }
.plein-ecran .p-activite:not([hidden]) { display: flex; flex-direction: column; gap: 8px; height: 100%; min-height: 0; }
.plein-ecran .p-activite-tete { flex-wrap: nowrap; align-items: center; }
.plein-ecran .p-activite-titre { font-size: 1.15rem; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plein-ecran .p-activite-info { margin: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plein-ecran .p-plein-fermer { flex: none; }
.plein-ecran .p-tableau-cadre { flex: 1; min-height: 0; overflow: auto; }
.plein-ecran .p-tableau thead th { position: sticky; top: 0; background: var(--carte); z-index: 2; }
.plein-ecran .p-tableau thead th:first-child { left: 0; z-index: 3; }

/* Formulaire d'activité : des boutons à sélectionner plutôt que des cases. */
.p-form .boutons-forme label { display: block; font-weight: 700; cursor: pointer; }
.p-form .boutons-forme input { padding: 0; margin: 0; }
.p-form .boutons-forme svg { flex: none; }
.p-form .boutons-forme label:hover span { border-color: var(--accent); }
.p-form .boutons-forme input:disabled + span { opacity: .5; cursor: not-allowed; }
/* Explication du choix sélectionné seulement. */
.p-form .p-si { display: none; margin: 0; }
.p-retard:has(input[value=fermer]:checked) .p-si[data-si=fermer],
.p-retard:has(input[value=ouvrir]:checked) .p-si[data-si=ouvrir],
.p-temps:has(input[value=question]:checked) .p-si[data-si=question],
.p-temps:has(input[value=global]:checked) .p-si[data-si=global],
.p-temps:has(input[value=aucun]:checked) .p-si[data-si=aucun] { display: grid; gap: 6px; }
.p-retard .p-si label { display: inline-flex !important; margin: 0; }
/* Temps adaptatif : avec le temps par question, sauf en évaluation. */
.p-form-activite:has(input[name=type][value=evaluation]:checked) .p-adaptatif { display: none; }
.p-adaptatif-ligne { display: flex; align-items: center; gap: 6px; }
.p-adaptatif-ligne .p-bascule { margin: 0; }
.p-aide-point { color: var(--discret); width: 26px; height: 26px; padding: 0; vertical-align: middle; }
.p-aide-point[aria-expanded="true"] { color: var(--accent); background: var(--doux); }
.p-explication { border-left: 3px solid var(--entrainement); padding: 4px 10px; background: var(--doux); border-radius: 6px; }
.p-explication p, .p-explication ul { margin: 4px 0; }
.p-explication ul { padding-left: 1.2em; }
.p-explication[hidden] { display: none; }
.p-types .p-explication { grid-column: 1 / -1; }
.p-ligne-aide { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* Niveaux, classes : pastilles à sélectionner (plusieurs possibles), comme dans les réglages d'exercice. */
.p-form .p-pastilles-choix { gap: 6px; }
.p-form .p-pastilles-choix label { position: relative; display: inline-block; cursor: pointer; }
.p-form .p-pastilles-choix input { position: absolute; opacity: 0; inset: 0; margin: 0; padding: 0; cursor: pointer; }
.p-form .p-pastilles-choix label > span { display: inline-block; padding: 4px 14px; border: 1.5px solid var(--trait); border-radius: 16px; background: var(--fond); font-weight: 600; transition: background .12s, border-color .12s; }
.p-form .p-pastilles-choix label:hover > span { border-color: var(--accent); }
.p-form .p-pastilles-choix input:checked + span { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--fond)); }
.p-form .p-pastilles-choix input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--accent) 40%, transparent); outline-offset: 2px; }
/* Type : la carte entière est le bouton (rond caché). */
.p-form .p-types label { position: relative; }
.p-form .p-types input { position: absolute; opacity: 0; inset: 0; margin: 0; padding: 0; cursor: pointer; }
.p-form .p-types label:hover { border-color: var(--type); }
.p-form .p-types label:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--type) 40%, transparent); outline-offset: 2px; }
.p-form .p-types label:has(input:checked) { box-shadow: inset 0 0 0 1px var(--type); }

/* Accueil : en cours, à surveiller, en difficulté */
.p-accueil { display: grid; gap: 18px; align-content: start; }
.p-accueil-bloc h2 { margin-bottom: 8px; }
.p-accueil-bloc[hidden], .p-accueil-deux[hidden] { display: none; }
.p-accueil-deux { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 18px; align-items: start; }
.p-accueil-deux .p-accueil-bloc { background: var(--carte); border: 1px solid var(--trait); border-radius: 14px; padding: 14px 16px; }
.p-accueil-deux .p-accueil-bloc > p { margin: -4px 0 8px; }
.p-accueil-liste { list-style: none; margin: 0; padding: 0; display: grid; }
.p-accueil-liste > li { display: grid; gap: 2px; padding: 8px 0; border-top: 1px solid var(--trait); }
.p-accueil-liste > li:first-child { border-top: none; padding-top: 0; }
.p-accueil-liste .p-ligne-tete { font-size: 1rem; }
.p-accueil-surveiller > li { padding-left: 10px; border-left: 3px solid var(--alerte, var(--trait)); }
.p-accueil-surveiller > li:first-child { padding-top: 2px; }
.p-accueil-surveiller .p-classe-lien { text-align: left; }
.p-accueil-eleves, .p-accueil-liste .p-petit { margin: 0; }
.p-puce-fixe { cursor: default; }
.p-puce-fixe:hover { border-color: var(--trait); }
.p-avance { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.p-jauge { width: 140px; height: 8px; border-radius: 4px; background: var(--doux); overflow: hidden; position: relative; flex: none; }
.p-jauge::before { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--part, 0) * 100%); background: var(--type, var(--accent)); border-radius: 4px; }

/* Mon compte et Aide */
.p-page-compte, .p-aide { display: grid; gap: 16px; max-width: 640px; align-content: start; }
.p-page-compte[hidden], .p-aide[hidden] { display: none; }
.p-page-compte h2, .p-aide h2 { margin: 0; }
.p-ok { color: var(--juste); margin: 0; }
.p-aide-nouveau { margin: 0; padding-left: 22px; display: grid; gap: 8px; }

/* Aide : liste « Pour commencer » (accueil, colonne de droite) et page Aide */
.p-commencer { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: etape; }
.p-commencer li { display: flex; gap: 12px; align-items: flex-start; counter-increment: etape; line-height: 1.4; }
.p-commencer-marque { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--trait); font-weight: 700; font-size: 0.85rem; }
.p-commencer li:not(.fait) .p-commencer-marque::before { content: counter(etape); color: var(--discret); }
.p-commencer li.fait .p-commencer-marque { background: var(--entrainement); border-color: var(--entrainement); color: var(--sur-couleur); }
.p-commencer li > span:last-child { display: grid; gap: 2px; }
.p-commencer-titre { font-weight: 600; text-align: left; padding: 0; margin: 0; min-height: 0; line-height: 1.4; }
.p-commencer li.fait .p-commencer-titre { color: var(--discret); text-decoration: line-through; }
.p-hors-ecran { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.p-commencer .p-petit { margin: 0; }

.p-col-commencer { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--trait); }
.p-col-commencer[hidden] { display: none; }
.p-col-commencer .p-ligne-tete h2 { flex: 1; margin: 0; }
.p-col-commencer > p { margin: 2px 0 10px; }
.p-col-commencer .p-commencer { gap: 8px; font-size: 0.95rem; }
.p-aide-texte { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; }
/* Page Aide : les mots « entraînement », « évaluation », « remédiation » dans la couleur de leur type */
.p-mot-type { font-weight: 700; }
.p-mot-type[data-type="entrainement"] { color: var(--entrainement); }
.p-mot-type[data-type="evaluation"] { color: var(--evaluation); }
.p-mot-type[data-type="remediation"] { color: var(--remediation); }

/* Page Aide : schéma, types en cartes, parties repliables, icônes dans le texte */
.p-aide-partie > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; }
.p-aide-partie > summary::-webkit-details-marker { display: none; }
.p-aide-partie > summary::before { content: ""; flex: none; width: 8px; height: 8px; border-right: 2px solid var(--discret); border-bottom: 2px solid var(--discret); transform: rotate(-45deg); transition: transform 0.15s; }
.p-aide-partie[open] > summary::before { transform: rotate(45deg); }
.p-aide-partie > summary h2 { display: inline; }
.p-aide-partie[open] > summary { margin-bottom: 10px; }
.p-aide-partie, .p-aide .p-carte[id] { scroll-margin-top: 12px; }
.p-schema { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; counter-reset: etape; }
.p-schema li { position: relative; display: grid; gap: 2px; align-content: start; padding: 8px 8px 8px 10px; background: var(--doux); border-radius: 8px; font-size: 0.85rem; counter-increment: etape; }
.p-schema li:not(:last-child)::after { content: "→"; position: absolute; right: -9px; top: 50%; transform: translateY(-50%); z-index: 1; color: var(--discret); font-weight: 700; background: var(--carte); border-radius: 50%; width: 14px; text-align: center; line-height: 14px; font-size: 0.8rem; }
.p-schema li > strong { font-size: 0.95rem; }
.p-schema li > strong::before { content: counter(etape) ". "; color: var(--discret); }
.p-schema li > span { color: var(--discret); line-height: 1.3; }
.p-types-aide { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.p-type-carte { display: grid; gap: 4px; align-content: start; padding: 10px 12px; border: 1px solid var(--trait); border-left: 5px solid var(--type); border-radius: 10px; font-size: 0.9rem; }
.p-type-carte[data-type="entrainement"] { --type: var(--entrainement); }
.p-type-carte[data-type="evaluation"] { --type: var(--evaluation); }
.p-type-carte[data-type="remediation"] { --type: var(--remediation); }
.p-aide-ico { display: inline-grid; place-items: center; vertical-align: middle; width: 26px; height: 26px; border-radius: 7px; background: var(--doux); color: var(--encre); }
.p-aide-ico svg { width: 16px; height: 16px; }
.p-aide { max-width: 760px; }
@media (max-width: 640px) { .p-schema, .p-types-aide { grid-template-columns: 1fr; } .p-schema li:not(:last-child)::after { content: "↓"; right: auto; left: 12px; top: auto; bottom: -11px; transform: none; } }

/* Imprimer une activité : réglages repliables */
.p-impr-form { display: grid; gap: 8px; margin-top: 10px; }
.p-impr-sec { border: 1px solid var(--trait); border-radius: 10px; padding: 8px 12px; }
.p-impr-sec[open] { display: grid; gap: 8px; }
.p-impr-sec > summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; align-items: center; gap: 10px; }
.p-impr-sec > summary::-webkit-details-marker { display: none; }
.p-impr-sec > summary::before { content: ""; flex: none; width: 8px; height: 8px; border-right: 2px solid var(--discret); border-bottom: 2px solid var(--discret); transform: rotate(-45deg); transition: transform 0.15s; }
.p-impr-sec[open] > summary::before { transform: rotate(45deg); }
.p-impr-recap { font-weight: 400; color: var(--discret); font-size: 0.9rem; margin-left: auto; text-align: right; }
.p-impr-sec p { margin: 0; }
.p-impr-champ { display: grid; gap: 4px; font-weight: 500; }

/* Mise en page : listes de travaux en deux colonnes (une seule sur téléphone), titres fixes du menu de gauche. */
.p-lignes-deux { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); align-items: start; }
.p-activites .p-titre-ligne { margin-bottom: 12px; }
/* Page d'une classe : titre, effectif et boutons sur une seule ligne. */
.p-classe { display: grid; gap: 14px; align-content: start; }
.p-classe[hidden] { display: none; }
.p-classe-tete { gap: 4px 12px; }
.p-classe-tete h1 { margin: 0; }
.p-classe-tete .p-classe-info { font-size: 0.95rem; }
.p-classe-boutons { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.p-classe > .p-retour-btn { margin-bottom: 0; }
.p-activites-classe h2 { margin-bottom: 8px; }
/* Exercices : barre de filtres (niveaux en pastilles, thèmes en menu coloré). */
.p-filtres { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 10px 14px; background: var(--carte); border: 1px solid var(--trait); border-radius: 12px; }
.p-court { display: none; }
.p-filtre-niveaux { display: flex; flex-wrap: wrap; gap: 6px; }
.p-filtre-niveaux button { border: 1.5px solid var(--trait); background: var(--fond); color: var(--encre); border-radius: 999px; padding: 4px 12px; font: inherit; font-size: 0.9rem; font-weight: 700; cursor: pointer; }
.p-filtre-niveaux button:hover { border-color: var(--accent); }
.p-filtre-niveaux button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-encre); }
/* Page d'une classe : onglets « Élèves » et « En plus » (entraînement libre) */
.p-onglets { display: flex; gap: 4px; border-bottom: 2px solid var(--trait); margin-top: 18px; }
.p-onglet { border: none; background: none; color: var(--discret); font: inherit; font-weight: 700; padding: 8px 14px; margin-bottom: -2px; border-bottom: 3px solid transparent; cursor: pointer; }
.p-onglet:hover { color: var(--encre); }
.p-onglet[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.p-en-plus { display: grid; gap: 10px; margin-top: 12px; }
.p-niveaux-classe { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.p-niveaux-libres { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.p-niveaux-libres button { border: 1.5px solid var(--trait); background: var(--fond); color: var(--encre); border-radius: 999px; padding: 1px 8px; font: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer; }
.p-niveaux-libres button:hover:not(:disabled) { border-color: var(--accent); }
.p-niveaux-libres button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-encre); }
.p-niveaux-libres button:disabled { cursor: default; opacity: 0.6; }
.p-table-en-plus td { vertical-align: top; }
.p-table-en-plus .p-cliquable { cursor: pointer; }
.p-table-en-plus tr:hover .p-cliquable { background: var(--doux); }
.p-detail-questions { font-size: 0.85rem; }
.p-tuile[aria-pressed="true"] { border-color: var(--accent); background: var(--doux); box-shadow: inset 0 0 0 1px var(--accent); }
.p-activites, .p-travaux-classes { display: grid; gap: 14px; align-content: start; }
.p-activites[hidden], .p-travaux-classes[hidden] { display: none; }
.p-activites h2, .p-travaux-classes h2 { margin: 0; }
/* Colonne de droite : connectés, puis échéances, dernières réponses et raccourcis. */
.p-col-bloc { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--trait); display: grid; gap: 8px; }
.p-col-bloc h2 { margin: 0; }
.p-col-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.p-col-liste li { display: grid; gap: 1px; font-size: 0.88rem; line-height: 1.3; }
.p-col-liste .p-classe-lien { text-align: left; font-size: 0.88rem; }
.p-exo-contenu { display: flex; align-items: center; gap: 4px 6px; font-size: 0.85rem; }
.p-exo-contenu-titre { font-weight: 700; margin-right: 2px; }

/* Tableau de bord : tri, anonymat, pause */
.p-tableau-outils { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.p-tri-champ { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.p-tri-champ select { max-width: 100%; }
.p-tableau-outils .btn { display: inline-flex; align-items: center; gap: 6px; }
.p-anonymiser[aria-pressed="true"] { background: var(--doux); border-color: var(--accent); color: var(--accent); }
.p-activite-tete .p-suspendue-mot { color: var(--faux); font-weight: 600; }
.p-activite { min-width: 0; }
.plein-ecran .p-tableau-outils { flex: none; }
/* Liste dépliable des élèves d'un travail */
.p-noms-eleves { list-style: none; margin: 8px 0 0; padding: 0; columns: 3; column-gap: 16px; font-size: 0.85rem; }
.p-noms-eleves li { break-inside: avoid; padding: 1px 0; }
@media (max-width: 700px) { .p-noms-eleves { columns: 2; } }
/* Travaux à faire : filtres, pastille des élèves, dates */
.p-filtres-travaux { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.p-filtre-groupe { display: flex; flex-wrap: wrap; gap: 6px; }
.p-filtre-groupe .p-filtre { border: 1.5px solid var(--trait); background: var(--fond); color: var(--encre); border-radius: 999px; padding: 4px 12px; font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; }
.p-filtre-groupe .p-filtre:hover { background: var(--doux); }
.p-filtre-groupe .p-filtre[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-encre); }
.p-info-travail { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; margin: 4px 0 0; }
.p-info-travail > span + span::before, .p-info-travail > .p-pastille-eleves + span::before { content: '·'; margin: 0 6px; }
.p-pastille-eleves { display: inline-flex; align-items: center; gap: 2px; background: var(--doux); border: none; color: var(--encre); border-radius: 999px; padding: 1px 6px 1px 10px; font: inherit; cursor: pointer; }
.p-pastille-eleves svg { width: 16px; height: 16px; transition: transform 0.15s; }
.p-pastille-eleves[aria-expanded="true"] svg { transform: rotate(180deg); }
.p-periode { margin: 0; }
.p-bientot { display: inline-flex; color: var(--faux); cursor: help; }
.p-attrib-activite { display: grid; gap: 6px; }
.p-attrib-activite[hidden] { display: none; }
.p-attrib-etiquette { margin: 4px 0 0; font-weight: 600; }
/* Boutons de type : même couleur que les pastilles Entraînement / Évaluation / Remédiation */
.p-filtre-groupe .p-filtre[data-type] { --type: var(--accent); border-color: var(--type); color: var(--type); }
.p-filtre-groupe .p-filtre[data-type=entrainement] { --type: var(--entrainement); }
.p-filtre-groupe .p-filtre[data-type=evaluation] { --type: var(--evaluation); }
.p-filtre-groupe .p-filtre[data-type=remediation] { --type: var(--remediation); }
.p-filtre-groupe .p-filtre[data-type][aria-pressed="true"] { background: var(--type); border-color: var(--type); color: var(--fond); }
/* « Donner une activité à une classe » : page, même bloc « Donner à » que dans la création d'une activité */
.p-attrib-activite { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px 12px; }
.p-attrib-activite > label { grid-column: 1 / -1; }
.p-attrib-etiquette { margin: 0; }
.p-form-donner { max-width: 760px; }
.p-attribution legend, .p-form-activite legend { display: inline-flex; align-items: center; gap: 6px; }
.p-attribution .p-ligne-champs { flex-wrap: nowrap; align-items: start; }
.p-attribution .p-date-ligne { flex-wrap: nowrap; }
@media (max-width: 700px) { .p-attribution .p-ligne-champs, .p-attribution .p-date-ligne { flex-wrap: wrap; } }
.p-attrib-etiquette-type, .p-attrib-types { grid-column: 1 / -1; }
.p-champ-code { width: 7em; letter-spacing: 0.15em; font-variant-numeric: tabular-nums; }

/* Menu déroulant restylé (tri) */
.p-menu { position: relative; display: inline-block; }
.p-menu-bouton { font: inherit; font-weight: 500; padding: 7px 32px 7px 12px; border: 1.5px solid var(--trait); border-radius: 8px; background: var(--fond); color: var(--encre); cursor: pointer; position: relative; text-align: left; min-width: 9em; }
.p-menu-bouton::after { content: ""; position: absolute; right: 12px; top: 50%; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-70%) rotate(45deg); }
.p-menu-bouton:hover, .p-menu-bouton[aria-expanded="true"] { border-color: var(--accent); }
.p-menu-liste { position: absolute; left: 0; top: calc(100% + 4px); z-index: 6; min-width: 100%; margin: 0; padding: 4px; list-style: none; background: var(--carte); border: 1px solid var(--trait); border-radius: 10px; box-shadow: 4px 4px 0 var(--ombre-dure); }
.p-menu-liste[hidden] { display: none; }
.p-menu-choix { display: block; width: 100%; border: none; background: none; font: inherit; color: var(--encre); text-align: left; padding: 7px 10px; border-radius: 7px; cursor: pointer; white-space: nowrap; }
.p-menu-choix:hover { background: var(--fond); }
.p-menu-choix[aria-selected="true"] { background: var(--doux); color: var(--accent); font-weight: 600; }

/* Exercices : niveaux à gauche, thèmes à droite en menu déroulant, chaque thème dans sa couleur */
.p-filtre-domaines .p-menu-bouton[data-domaine], .p-filtre-domaines .p-menu-choix[data-domaine] { color: color-mix(in srgb, var(--domaine) 78%, var(--encre)); font-weight: 600; }
.p-filtre-domaines .p-menu-bouton[data-domaine]:not([data-domaine=""]) { border-color: var(--domaine); }
.p-filtre-domaines .p-menu-liste { left: auto; right: 0; }
.p-filtre-domaines .p-menu-choix[data-domaine=""] { color: var(--encre); }
.p-filtre-domaines { position: relative; flex: 0 0 auto; margin-left: auto; }
.p-autres-travaux > summary { cursor: pointer; font-weight: 600; padding: 6px 0; }
.p-autres-travaux > .p-lignes { margin-top: 6px; }

/* Page de départ d'une activité */
.p-accueil { border: 1px solid var(--trait); border-radius: 12px; padding: 8px 14px; background: var(--carte); display: grid; gap: 10px; }
.p-accueil > summary { cursor: pointer; font-weight: 600; }
.p-accueil textarea { width: 100%; font: inherit; }
.p-accueil-liens { display: grid; gap: 6px; }
.p-lien-ligne { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.p-lien-ligne input:last-of-type { flex: 1 1 14em; }
.p-accueil-image { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.p-image-apercu { margin: 0; display: grid; gap: 6px; flex-basis: 100%; }
.p-image-apercu img { max-width: min(100%, 360px); border-radius: 8px; border: 1px solid var(--trait); }
.p-humeur { margin-left: 6px; }

/* Inscrits (superAdmin) */
.p-table-inscrits tr.p-desactive td { opacity: 0.55; }
.p-etat-compte { font-size: 0.75rem; font-weight: 700; border: 1.5px solid var(--discret); color: var(--discret); border-radius: 999px; padding: 1px 8px; margin-left: 6px; white-space: nowrap; }
.p-inscrit-classes { display: grid; gap: 12px; }
.p-inscrit-classes h3 { margin: 0 0 4px; font-size: 1rem; }
.p-inscrit-classes p { margin: 0; }

/* Vue élève du haut */
.p-vue-eleve-haut { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; }
.p-vue-eleve-haut svg { display: block; }
.p-vue-classes { display: flex; flex-wrap: wrap; gap: 8px; }
.p-vue-groupe { display: inline-flex; }
.p-vue-groupe .btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.p-vue-fleche { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -2px; padding-inline: 8px; }
.p-vue-fleche[aria-expanded="true"] { background: var(--selection, var(--doux)); }
.p-vue-eleves { margin-top: 12px; }
.p-vue-eleves-liste { display: flex; flex-wrap: wrap; gap: 4px 6px; max-height: 38vh; overflow-y: auto; margin-top: 6px; }
.p-vue-eleve-lien { padding: 3px 10px; border: 1.5px solid var(--encre); border-radius: var(--rayon-petit); color: var(--encre); background: var(--fond); font-size: 0.85rem; font-weight: 600; text-decoration: none; }
.p-vue-eleve-lien:hover, .p-vue-eleve-lien:focus-visible { background: var(--selection, var(--doux)); }

/* Tableau de bord : note en pastille, états, moyenne de la classe, ligne du haut compacte */
.p-pastille-note { display: inline-block; min-width: 2.6em; padding: 2px 8px; border-radius: 999px; color: var(--sur-couleur); font-weight: 700; font-variant-numeric: tabular-nums; }
.p-pastille-note.ok { background: var(--juste); }
.p-pastille-note.bas { background: var(--evaluation); }
.p-case .p-etat-eleve { display: block; font-weight: 400; font-size: 0.75rem; color: var(--discret); opacity: 1; }
.p-case .p-etat-eleve.p-en-cours { color: var(--accent); font-weight: 600; }
.p-tableau tfoot th, .p-tableau tfoot td { border-top: 2px solid var(--trait); }
.p-tableau tfoot .p-tableau-eleve { font-weight: 700; }
.p-case.p-moyenne { font-weight: 600; font-style: italic; }
.p-activite-tete { margin-bottom: 2px; }
.p-activite-tete h1 { font-size: 1.25rem; margin: 0; }
.p-activite-tete .p-activite-info { margin: 0; }
.p-tableau-outils .p-activite-boutons { display: inline-flex; align-items: center; gap: 4px; }
.btn.p-btn-avion { display: inline-flex; align-items: center; gap: 6px; }

/* Tableau de bord : mise en page de la grille (lot « rendu du tableau »). */
.p-tableau thead th:first-child { width: 170px; }
.p-tableau thead th.p-vignette-note { width: 88px; }
.p-tableau-cadre { overflow: auto; max-height: calc(100vh - 270px); scrollbar-gutter: stable; } /* un seul défilement, en-tête et noms figés */
.p-tableau thead th { position: sticky; top: 0; z-index: 2; background: var(--carte); }
.p-tableau thead th:first-child { left: 0; z-index: 4; }
.p-tableau thead th.p-vignette-note, .p-tableau td.p-note, .p-tableau tfoot td.p-note { position: sticky; right: 0; background: var(--carte); border-left: 1px solid var(--trait); }
.p-tableau thead th.p-vignette-note { z-index: 3; }
.p-tableau td.p-note { z-index: 1; }
.p-tableau tfoot th, .p-tableau tfoot td { position: sticky; bottom: 0; z-index: 1; background: var(--carte); }
.p-tableau tfoot .p-tableau-eleve { z-index: 3; }
.p-tableau tfoot td.p-case:not(.p-note):empty { background: var(--carte); }
.p-vignette svg { width: 18px; height: 18px; flex: none; }
.p-case.vide { color: var(--trait); font-weight: 400; cursor: default; }
.p-case .p-pas-commence { font-size: 0.9rem; color: var(--trait); }
.p-tirage.p-invisible { visibility: hidden; }
/* Boutons du tableau : icône seule (infobulle), même taille, qui ne bougent pas. */
.p-icone-bordee { display: inline-grid !important; place-items: center; width: 38px; height: 38px; padding: 0 !important; }
.p-tableau-outils .p-menu-bouton { min-width: 7.5em; padding: 6px 28px 6px 10px; }
.p-tableau-outils { gap: 8px; }
.p-tableau th.p-vignette { padding: 10px 14px 12px; } /* plus fort que « .p-tableau th { padding: 0 } » */
.p-tableau th.p-vignette-note { padding: 10px 6px; }
.p-tableau .p-tableau-eleve { padding-left: 14px; }
.p-tableau tfoot .p-tableau-eleve { padding-bottom: 10px; }
.plein-ecran .p-tableau-cadre { max-height: none; }

/* ==========================================================================
   Habillage Arcademia, version sobre (espace professeur) : objets à plat, trait d'encre et ombre dure,
   coins peu arrondis, sans cadre autour des contenus ni rectangle de sélection. Ne change ni la mise en page ni les fonctions.
   Couleurs, polices et formes : uniquement les variables de arcadia.css.
   ========================================================================== */

/* Barre du haut : bande arc-en-ciel ancrée au bord bas, menu en simples mots (l'entrée courante s'allume, sans rectangle) */
.p-entete { position: relative; border-bottom: none; padding-bottom: 8px; }
.p-entete::before { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 6px; background: var(--bande); pointer-events: none; }
.p-page, .p-col-connectes { position: relative; }
.p-appli { padding-top: 6px; }
.p-haut button, .p-haut-bouton { border-radius: 0; font-family: var(--police-texte); font-weight: 700; padding: 8px 12px; transition: transform 0.08s; }
.p-haut button:hover, .p-haut-bouton:hover { background: none; color: var(--accent); }
.p-haut button[aria-current="page"], .p-haut-bouton[aria-current="page"] { background: none; color: var(--accent); font-weight: 800; transform: scale(1.08); }
/* Téléphone : le menu tient sur une ligne (le remplissage de la règle ci-dessus remplacerait celui de la barre du haut) */
@media (max-width: 640px) {
  .p-haut button:not(.p-maison) { padding: 8px 2px; font-size: 0.86rem; }
  .p-haut .p-maison { padding: 8px 10px; }
  .p-haut button[aria-current="page"] { transform: none; }
}
.p-haut .p-maison[aria-current="page"], .p-aide-bouton[aria-current="page"] { background: none; color: var(--accent); }
/* Infobulles de la barre du haut : entièrement sous la bande */
.p-entete .p-icone[aria-label]:hover::after, .p-entete .p-icone[aria-label]:focus-visible::after, .p-entete .p-maison[aria-label]:hover::after { top: calc(100% + 12px); }
.p-aide-bouton { border-radius: var(--rayon-petit); }
.p-avatar-bouton { border-radius: var(--rayon-petit); border: var(--trait-fort) solid var(--encre); }

/* Titres : grotesque très grasse dehors */
.p-page h1, .p-activite-tete h1 { font-family: var(--police-titre); font-weight: 400; letter-spacing: 0.01em; }
.p-page h2 { font-weight: 800; }

/* Objets : activités, tuiles, classes, cartes, tableau. Trait d'encre, ombre dure décalée, s'enfonce quand on les sélectionne. */
.p-carte, .p-ligne-act, .p-tuile, .p-classe-carte, .p-tableau-cadre { border: var(--trait-fort) solid var(--encre); border-radius: var(--rayon-petit); box-shadow: 3px 3px 0 var(--ombre-dure); }
.p-ligne-act { border-left-width: 8px; border-left-color: var(--type); }
.p-tuile, .p-classe-carte { transition: transform 0.06s, box-shadow 0.06s; }
.p-tuile:hover, .p-classe-carte:hover, .p-classe-carte:focus-within { border-color: var(--encre); background: var(--doux); }
.p-tuile:active, .p-classe-carte:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ombre-dure); }
.p-tuile[aria-pressed="true"], .p-tuile.p-choisie, .p-tuile[aria-current="true"] { background: var(--jaune); color: var(--nuit); }
.p-tuile[aria-pressed="true"] *, .p-tuile.p-choisie *, .p-tuile[aria-current="true"] * { color: var(--nuit); }
.p-ligne-act p, .p-ligne-act .p-discret { overflow-wrap: anywhere; }

/* Colonne de droite : plus de cadre, un filet vertical d'encre à gauche */
.p-col-connectes { margin: 0; top: 0; height: calc(100vh - 66px); max-height: none; padding: 14px 16px; border: none; border-left: var(--trait-fort) solid var(--encre); border-radius: 0; background: var(--colonne); box-shadow: none; }

/* Accueil : pas de cadre autour des blocs, des titres et des filets */
.p-accueil, .p-accueil-deux .p-accueil-bloc { border: none; border-radius: 0; background: none; padding-left: 0; padding-right: 0; box-shadow: none; }
.p-accueil-bloc h2 { padding-bottom: 4px; border-bottom: var(--trait-fort) solid var(--encre); }
.p-accueil-liste > li { border-top-color: var(--trait); }

/* Étiquettes : types d'activité = petite étiquette pleine de la couleur du type ; niveaux = étiquette carrée */
.p-pastille { border: none; border-radius: 3px; background: var(--type); color: var(--sur-couleur); padding: 2px 8px; letter-spacing: 0.03em; text-transform: uppercase; font-size: 0.7rem; }
.p-pastille[data-type=entrainement] { color: var(--sur-entrainement); }
.p-pastille[data-type=evaluation] { color: var(--sur-evaluation); }
.p-pastille[data-type=remediation] { color: var(--sur-remediation); }
.p-niveau-act { border-radius: 3px; }
.p-puce-classe, .p-puces li, .p-pastilles-niveaux li, .p-temps-plus { border-radius: 3px; }
.p-puce-classe { border: var(--trait-fort) solid var(--encre); background: var(--carte); padding: 0 8px; }
.p-puce-classe:hover { background: var(--jaune); color: var(--nuit); border-color: var(--encre); }

/* Filtres : simples mots ; l'entrée choisie s'allume en jaune de la bande */
.p-filtres { background: none; border: none; border-bottom: var(--trait-fort) solid var(--encre); border-radius: 0; padding-left: 0; padding-right: 0; }
.p-filtre-niveaux button, .p-form .p-pastilles-choix label > span { border-radius: var(--rayon-petit); border: var(--trait-fort) solid var(--encre); background: var(--carte); font-family: var(--police-texte); }
.p-filtre-niveaux button:hover, .p-form .p-pastilles-choix label:hover > span { background: var(--doux); border-color: var(--encre); }
.p-filtre-niveaux button[aria-pressed="true"], .p-form .p-pastilles-choix input:checked + span { background: var(--jaune); border-color: var(--encre); color: var(--nuit); }

/* Filtres, étiquettes d'état et boutons de retour : coins peu arrondis, même famille que les menus */
.p-filtre-groupe .p-filtre, .p-niveaux-libres button, .p-retour-btn, .t-cas > summary, .t-pastille, .t-q { border-radius: var(--rayon-petit); border: var(--trait-fort) solid var(--encre); background: var(--carte); }
.p-filtre-groupe .p-filtre { font-family: var(--police-texte); font-weight: 700; }
.p-filtre-groupe .p-filtre:hover, .p-niveaux-libres button:hover, .p-retour-btn:hover { background: var(--doux); }
.p-filtre-groupe .p-filtre[aria-pressed="true"], .p-niveaux-libres button[aria-pressed="true"] { background: var(--jaune); border-color: var(--encre); color: var(--nuit); }
.p-statut, .p-pastille-eleves, .p-pastille-note, .p-etat-compte { border-radius: 3px; }
.p-statut { border-width: var(--trait-fort); }

/* Boutons de choix des formulaires (temps, formes…) : même famille que les filtres ; le choix s'allume en jaune */
.p-form .boutons-forme span { border: var(--trait-fort) solid var(--encre); border-radius: var(--rayon-petit); background: var(--carte); }
.p-form .boutons-forme label:hover span { background: var(--doux); border-color: var(--encre); }
.p-form .boutons-forme input:checked + span { background: var(--jaune); border-color: var(--encre); color: var(--nuit); }

/* Champs et fenêtres */
.p-form input, .p-form select, .p-liste, .p-table input { border: var(--trait-fort) solid var(--encre); border-radius: var(--rayon-petit); }
.p-form input:focus, .p-liste:focus, .p-table input:focus { border-color: var(--accent); box-shadow: 3px 3px 0 var(--ombre-dure); }
.p-form fieldset { border: var(--trait-fort) solid var(--encre); border-radius: var(--rayon-petit); }
.p-form .p-types label { border: var(--trait-fort) solid var(--encre); border-left: 8px solid var(--type); border-radius: var(--rayon-petit); }
.p-form .p-types label:has(input:checked) { border-color: var(--encre); background: var(--doux); box-shadow: 3px 3px 0 var(--ombre-dure); }
dialog.p-codes, dialog.p-detail, dialog.p-modif, dialog.p-modif-classe, dialog.p-attrib, dialog.p-impr, dialog.p-modif-travail, dialog.p-dlg-vue, dialog.p-banque, dialog.r-avec-apercu { border: var(--trait-fort) solid var(--encre); border-radius: var(--rayon-petit); box-shadow: 6px 6px 0 var(--ombre-dure); }
.p-compte-liste { border: var(--trait-fort) solid var(--encre); border-radius: var(--rayon-petit); }
.p-compte-bouton { border-radius: var(--rayon-petit); }
.p-icone { border-radius: var(--rayon-petit); }
.p-icone[aria-label]:hover::after, .p-icone[aria-label]:focus-visible::after { border-radius: 3px; }
/* Téléphone : l'infobulle s'aligne sur le bord droit de l'icône et passe à la ligne (sinon elle sort de l'écran et fait défiler la page) */
@media (max-width: 640px) {
  .p-icone:not(.p-maison)[aria-label]:hover::after, .p-icone:not(.p-maison)[aria-label]:focus-visible::after { left: auto; right: 0; transform: none; white-space: normal; width: max-content; max-width: min(220px, calc(100vw - 32px)); }
}
.p-alerte { border-radius: var(--rayon-petit); border: var(--trait-fort) solid var(--faux); }

/* Tableau de bord d'activité : mêmes colonnes et en-têtes figés, trait d'encre sous l'en-tête */
.p-tableau thead th { border-bottom: var(--trait-fort) solid var(--encre); }
.p-tableau tfoot th, .p-tableau tfoot td { border-top: var(--trait-fort) solid var(--encre); }

@media (max-width: 640px) {
  .p-vue-eleve-haut { font-size: 0; gap: 0; padding: 6px 8px; } /* icône seule (infobulle « Voir la plateforme comme un élève… ») */
  .p-haut button, .p-haut-bouton { padding: 8px 2px; font-size: 0.85rem; }
  .p-haut button[aria-current="page"], .p-haut-bouton[aria-current="page"] { transform: none; }
  .p-col-connectes { position: static; height: auto; margin: 0; border-left: none; border-top: var(--trait-fort) solid var(--encre); } }

/* Impression (feuille des codes) : ni trait ni ombre autour de la feuille */
@media print { dialog.p-codes, dialog.p-impr, dialog.p-detail { border: none; box-shadow: none; } }

/* Avant connexion : même cadre que la connexion élève (logo et thème dans les coins, carte centrée, pas de bande d'en-tête). */
body.avant-connexion .p-entete { position: fixed; top: 0; left: 0; right: 0; z-index: 10; display: flex; justify-content: space-between; align-items: flex-start; padding: 12px 16px; background: none; }
body.avant-connexion .p-entete::before { display: none; }
body.avant-connexion .p-appli { min-height: 100dvh; }
body.avant-connexion .p-page { min-height: 100dvh; align-content: center; padding: 16px; box-sizing: border-box; }
body.avant-connexion .p-connexion { max-width: 380px; margin: 0 auto; }

/* Badges de classement (formulaire de l'activité) : interrupteur aligné à gauche, sous le seuil du boss */
.p-form-activite > .p-bascule { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; text-align: left; }

/* Classe ouverte : sa carte reste en évidence dans la rangée du haut */
.p-classe-carte:has([aria-pressed="true"]) { border-color: var(--accent); background: var(--doux); box-shadow: inset 0 0 0 1px var(--accent); }
.p-mes-classes + .p-classe { margin-top: 16px; }