:root {
  --ink: #233c38;
  --green: #246956;
  --mint: #e6f0e6;
  --paper: #f7f7ef;
  --muted: #626f68;
  --line: #dde2d7;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font:
    16px/1.6 'Segoe UI',
    system-ui,
    sans-serif;
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 46px;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 10px 20px;
  background: var(--green);
  color: white;
  cursor: pointer;
  font-weight: 650;
  text-decoration: none;
}
button:hover,
.button:hover {
  filter: brightness(0.93);
}
button:disabled {
  opacity: 0.55;
  cursor: default;
}
button.secondary,
.button.secondary {
  background: white;
  color: var(--ink);
  border-color: var(--line);
}
button.small {
  padding: 6px 12px;
  min-height: 44px;
  font-size: 14px;
}
a {
  color: var(--green);
}
:focus-visible {
  outline: 3px solid #d68b22;
  outline-offset: 4px;
}
header {
  min-height: 90px;
  padding: 20px 4%;
  display: flex;
  align-items: center;
  gap: 22px;
  border-bottom: 1px solid var(--line);
  background: #fffef8;
}
.brand {
  font-size: 24px;
  font-weight: 450;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.brand strong {
  font-weight: 750;
}
.logo {
  display: inline-grid;
  place-items: center;
  border-radius: 13px;
  background: var(--green);
  color: #f8df99;
  width: 43px;
  height: 43px;
  margin-right: 8px;
}
#account {
  margin-left: auto;
  display: flex;
  gap: 14px;
  align-items: center;
}
.badge,
.tag {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 1px;
  font-weight: 750;
  border-radius: 6px;
  background: #ecefdf;
  padding: 5px 9px;
}
#shell {
  display: grid;
  grid-template-columns: 225px minmax(0, 1fr);
  max-width: 1500px;
  margin: auto;
}
/* Les pages publiques fabriquées par le build (matière, classe, jeu) n'ont pas de colonne latérale :
   sans cette règle, leur contenu occupe la colonne de 225 px réservée au menu de l'application.
   La seconde règle répare aussi les pages déjà en ligne, qui ne portent pas encore la classe : elle
   reconnaît l'absence de colonne plutôt que sa déclaration. */
#shell.sans-colonne,
#shell:not(:has(> aside)) {
  display: block;
  max-width: 1100px;
}
aside {
  border-right: 1px solid var(--line);
  padding: 35px 20px;
  color: var(--muted);
  font-size: 14px;
}
aside nav {
  display: grid;
  gap: 9px;
}
aside nav button {
  justify-content: flex-start;
  background: none;
  color: var(--muted);
  font-size: 15px;
  font-weight: 600;
}
aside nav button.active {
  background: #dcebdd;
  color: #214f3c;
}
aside .note {
  margin-top: 40px;
  padding: 18px;
  background: #efefdd;
  border-radius: 14px;
}
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 1.6px;
  font-size: 11px;
  font-weight: 800;
  color: #557361;
}
main {
  padding: 38px 4.5%;
  min-width: 0;
}
h1 {
  font-size: 40px;
  line-height: 1.17;
  letter-spacing: -1.3px;
  margin: 10px 0 18px;
}
h2 {
  font-size: 23px;
  line-height: 1.3;
  margin: 0 0 20px;
  letter-spacing: -0.4px;
}
h3 {
  font-size: 19px;
  line-height: 1.3;
  margin: 14px 0 9px;
}
p {
  margin: 10px 0 18px;
}
section {
  margin-bottom: 30px;
}
.welcome {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  background: #e6eddb;
  padding: 35px 38px;
  min-height: 315px;
}
.welcome > p {
  max-width: 57%;
  color: #43584a;
}
.welcome h1 {
  max-width: 65%;
}
.orbit {
  position: absolute;
  width: 190px;
  height: 190px;
  border: 1px dashed #a3b295;
  border-radius: 50%;
  right: 40px;
  top: 60px;
  transform: rotate(-12deg);
}
.orbit span {
  position: absolute;
  left: 48px;
  top: 35px;
  font-size: 85px;
  color: #317454;
}
.orbit i,
.orbit b,
.orbit em {
  display: grid;
  place-items: center;
  position: absolute;
  width: 58px;
  height: 58px;
  border-radius: 16px;
  font-style: normal;
  background: #ffdc94;
  box-shadow: 0 8px 0 #bcc8ac55;
  font-size: 28px;
}
.orbit i {
  top: -15px;
  left: 30px;
}
.orbit b {
  right: -20px;
  top: 70px;
  background: #e6b6a4;
}
.orbit em {
  bottom: -12px;
  left: 15px;
  background: #fffdf0;
}
.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.card {
  background: #fffef9;
  border: 1px solid var(--line);
  border-radius: 17px;
  padding: 24px;
  min-width: 0;
}
.card p {
  color: var(--muted);
  font-size: 14px;
}
.subject-icon {
  display: grid;
  place-items: center;
  width: 49px;
  height: 49px;
  border-radius: 14px;
  font-size: 25px;
  font-weight: 600;
}
.math {
  background: #e6ecd1;
  color: #46662d;
}
.french {
  background: #f7e1d8;
  color: #8d4b37;
}
.history {
  background: #e6e2f3;
  color: #625480;
}
.muted {
  color: var(--muted);
  font-size: 14px;
}
.row {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.between {
  justify-content: space-between;
}
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 24px 0;
}
.stat {
  border: 1px solid var(--line);
  background: #fffef9;
  border-radius: 14px;
  padding: 16px;
}
.stat strong {
  display: block;
  font-size: 26px;
}
.stat span {
  font-size: 13px;
  color: var(--muted);
}
.progress {
  height: 7px;
  background: #e5e9dd;
  border-radius: 8px;
  margin: 18px 0;
  overflow: hidden;
}
.progress progress {
  width: 100%;
  height: 10px;
  accent-color: var(--green);
  display: block;
}
.card .button,
.card > button {
  margin-top: 12px;
}
label {
  display: block;
  font-weight: 650;
  font-size: 14px;
  margin: 12px 0;
}
input,
select,
textarea {
  display: block;
  width: 100%;
  border: 1px solid #bfcabd;
  border-radius: 9px;
  background: white;
  color: var(--ink);
  padding: 12px;
  margin-top: 6px;
  min-height: 46px;
}
textarea {
  min-height: 120px;
}
input[type='radio'] {
  width: 20px;
  min-height: 20px;
  margin: 0;
  accent-color: var(--green);
}
.login {
  max-width: 650px;
}
.game {
  max-width: 820px;
  margin: auto;
}
.game h1 {
  font-size: 30px;
}
.lesson {
  padding: 18px 22px;
  background: #edf2e5;
  border-radius: 12px;
  margin: 20px 0;
}
.options {
  display: grid;
  gap: 12px;
  margin: 24px 0;
}
.option {
  display: flex;
  gap: 14px;
  align-items: center;
  background: #fff;
  border: 1px solid #cbd5c8;
  border-radius: 12px;
  padding: 17px;
  cursor: pointer;
  font-size: 16px;
}
.option:has(input:checked) {
  background: #e8f2e4;
  border: 2px solid var(--green);
  padding: 16px;
}
.option button {
  margin-left: auto;
}
.feedback {
  border-left: 5px solid var(--green);
  background: #e9f2e7;
  padding: 24px;
  border-radius: 10px;
  margin: 24px 0;
}
.feedback.retry {
  border-color: #be8034;
  background: #fcf1da;
}
.hint {
  padding: 12px 18px;
  border-radius: 8px;
  background: #fff2d2;
}
.list {
  display: grid;
  gap: 12px;
}
.list .card {
  padding: 18px;
}
.chip {
  font-size: 12px;
  border-radius: 20px;
  background: #eef0e6;
  padding: 4px 10px;
}
.empty {
  padding: 30px;
  background: #edf0e4;
  border-radius: 16px;
}
.filters {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 25px;
}
.filters label {
  min-width: 150px;
  margin: 0;
}
.error {
  color: #8b3425;
  background: #fcebe4;
  padding: 14px;
  border-radius: 8px;
}
.note {
  font-size: 13px;
  color: var(--muted);
}
#notice {
  position: fixed;
  bottom: 24px;
  right: 24px;
  max-width: 440px;
  background: #214f3c;
  color: white;
  padding: 0;
  border-radius: 12px;
  z-index: 3;
}
#notice:not(:empty) {
  padding: 16px 22px;
  box-shadow: 0 8px 30px #0003;
}
footer {
  border-top: 1px solid var(--line);
  padding: 24px 4%;
  font-size: 12px;
  color: var(--muted);
}
footer span {
  float: right;
}
.skip {
  position: absolute;
  top: -100px;
}
.skip:focus {
  top: 0;
  z-index: 10;
  background: white;
  padding: 15px;
}
.admin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
details summary {
  cursor: pointer;
  padding: 10px;
  font-weight: 600;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
td,
th {
  text-align: left;
  padding: 12px;
  border-bottom: 1px solid var(--line);
}
.table-wrap {
  overflow: auto;
}
.save {
  font-size: 12px;
  color: #477b48;
}
.status {
  margin: 20px 0;
  padding: 14px;
  background: #fff2d2;
  border-radius: 10px;
}
@media (max-width: 1050px) {
  .orbit {
    right: 25px;
    transform: scale(0.8);
  }
  .welcome > p {
    max-width: 60%;
  }
  .grid {
    grid-template-columns: 1fr 1fr;
  }
  header .badge {
    display: none;
  }
  #shell {
    grid-template-columns: 190px 1fr;
  }
  .welcome {
    padding: 26px;
  }
  h1 {
    font-size: 34px;
  }
}
@media (max-width: 720px) {
  header {
    padding: 15px 18px;
    gap: 8px;
    flex-wrap: wrap;
  }
  .brand {
    font-size: 20px;
  }
  #account {
    font-size: 12px;
  }
  #shell {
    display: block;
  }
  aside {
    border: 0;
    padding: 12px;
  }
  aside > p,
  aside > .eyebrow,
  aside .note {
    display: none;
  }
  aside nav {
    display: flex;
    overflow-x: auto;
    gap: 4px;
  }
  aside nav button {
    white-space: nowrap;
    font-size: 13px;
    padding: 8px 12px;
  }
  main {
    padding: 20px 16px;
  }
  .welcome {
    min-height: auto;
  }
  .welcome h1,
  .welcome > p {
    max-width: 100%;
  }
  .orbit {
    display: none;
  }
  h1 {
    font-size: 32px;
  }
  .grid,
  .admin-grid {
    grid-template-columns: 1fr;
  }
  .stats {
    gap: 8px;
  }
  .stat {
    padding: 12px;
  }
  .stat strong {
    font-size: 22px;
  }
  .card {
    padding: 20px;
  }
  .game h1 {
    font-size: 26px;
  }
  footer span {
    float: none;
    display: block;
    margin-top: 8px;
  }
  #notice {
    left: 16px;
    right: 16px;
    bottom: 16px;
  }
  .filters label {
    flex: 1;
  }
  .row > button {
    flex-grow: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
  }
}
.public-nav {
  display: flex;
  gap: 18px;
  font-size: 14px;
}
.public-nav a {
  white-space: nowrap;
}
.class-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.class-card {
  text-decoration: none;
  display: grid;
  gap: 8px;
  background: #edf1df;
}
.class-card strong {
  font-size: 34px;
}
.class-card span {
  font-size: 13px;
}
.consent {
  width: 22px;
  min-height: 22px;
}
.grid .card {
  box-shadow: 0 3px 0 #e0e7d9;
}
.game .card {
  border-top: 4px solid #93b88c;
}
.welcome {
  background: radial-gradient(ellipse at 95% 95%, #c3dca9, transparent 55%), #e9efdc;
}
@media (max-width: 950px) {
  .public-nav {
    flex-wrap: wrap;
    font-size: 12px;
    gap: 10px;
  }
}
@media (max-width: 720px) {
  .class-grid {
    grid-template-columns: 1fr 1fr;
  }
  .public-nav {
    order: 3;
    width: 100%;
  }
}
.admin-group {
  margin: 10px 0;
  padding: 4px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}
.admin-group > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  font-weight: 700;
}
.admin-group > .list {
  margin: 4px 0 14px;
}
.history-correction {
  flex-basis: 100%;
}
.avatar {
  display: inline-grid;
  place-items: center;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: #f4db94;
  color: #285644;
  font-weight: 750;
  margin-right: 6px;
}
.reward-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0;
}
.reward-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 700;
}
.reward-badge.earned {
  background: #fff2d2;
  border-color: #e5c26b;
  color: #604b16;
}
.reward-badge.locked {
  background: #f3f4ef;
  color: var(--muted);
}
.rewards progress {
  width: 100%;
  height: 12px;
  accent-color: var(--green);
}
.celebration {
  font-weight: 750;
  color: #315f3d !important;
  background: #fff2d2;
  border-radius: 10px;
  padding: 10px 14px;
}
@media (prefers-reduced-motion: reduce) {
  .celebration,
  .reward-badge {
    animation: none !important;
    transition: none !important;
  }
}
.day-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border: 0;
  padding: 0;
  margin: 18px 0;
}
.day-picker legend {
  font-weight: 650;
  font-size: 14px;
  margin-bottom: 6px;
}
.day-picker label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  font-size: 13px;
}
.day-picker input {
  width: 18px;
  min-height: 18px;
  margin: 0;
  accent-color: var(--green);
}
.parent-block {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f4f6ee;
}
.parent-block.is-blocked {
  background: #fff2d2;
  border-color: #e5c26b;
}
.parent-block h3 {
  margin-top: 0;
}
.parent-block p {
  font-size: 14px;
}

/* Guided public game flow. */
.game-steps {
  display: flex;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 24px 0;
  flex-wrap: wrap;
}
.game-steps li {
  flex: 1;
  min-width: 145px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #ecefe5;
  color: var(--muted);
  font-size: 13px;
}
.game-steps [aria-current] {
  background: var(--green);
  color: white;
  font-weight: 700;
}
.next-game {
  border-top: 1px solid var(--line);
  padding-top: 18px;
  margin-top: 24px;
}
.order-answer {
  padding: 14px;
  background: var(--mint);
  border-radius: 10px;
  overflow-wrap: anywhere;
}
.search-panel .filters label:first-child {
  flex: 2;
  min-width: 0;
}
.search-panel .filters label {
  flex: 1;
}
.game .card > h2 {
  font-size: 24px;
}
.game .feedback p {
  font-size: 16px;
}
.game .options button {
  text-align: left;
  justify-content: flex-start;
}
.game .lesson summary {
  padding: 4px;
}
.game .lesson p {
  margin-bottom: 0;
}
@media (max-width: 720px) {
  .game-steps {
    gap: 6px;
  }
  .game-steps li {
    min-width: 0;
    font-size: 12px;
    padding: 9px;
  }
  .next-game .row {
    align-items: stretch;
  }
  .next-game .row button {
    width: 100%;
  }
  .search-panel .filters {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .search-panel .filters label {
    min-width: 0;
  }
  .search-panel .filters label:first-child {
    grid-column: 1/-1;
  }
}

/* ---- Navigation. On a wide screen the signed-in menu is a side list with full names. */
.nav-short {
  display: none;
}
aside nav button {
  gap: 10px;
}

/* ---- Navigation on a phone.
   Signed in: a tab bar fixed at the bottom, every entry visible and within thumb reach.
   Public pages: links big enough to be touched (44 px), instead of 19 px text links. */
@media (max-width: 720px) {
  /* One row whatever the number of links: each takes an equal share, its label on two lines if needed. */
  .public-nav {
    flex-wrap: nowrap;
    gap: 6px;
  }
  .public-nav a {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 44px;
    padding: 4px 8px;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    color: var(--ink);
    font-size: 12.5px;
    font-weight: 650;
    text-decoration: none;
  }
  footer a {
    display: inline-block;
    padding: 13px 4px;
  }

  body.is-signed-in .public-nav,
  body.is-signed-in header .badge {
    display: none;
  }
  body.is-signed-in header {
    min-height: 0;
    padding: 10px 16px;
    flex-wrap: nowrap;
  }
  body.is-signed-in .logo {
    width: 36px;
    height: 36px;
  }
  body.is-signed-in #account {
    gap: 8px;
    min-width: 0;
  }
  body.is-signed-in #account > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body.is-signed-in aside {
    padding: 0;
  }
  body.is-signed-in aside nav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 5;
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: 0;
    overflow: visible;
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: #fffef8;
    box-shadow: 0 -4px 18px #0000000f;
  }
  body.is-signed-in aside nav button {
    flex-direction: column;
    gap: 2px;
    min-height: 56px;
    padding: 6px 2px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 650;
    line-height: 1.2;
    white-space: nowrap;
  }
  body.is-signed-in .nav-icon {
    font-size: 20px;
    line-height: 1;
  }
  /* Hidden from sight only: a screen reader still announces the full name of each tab. */
  body.is-signed-in .nav-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  body.is-signed-in .nav-short {
    display: block;
  }
  /* Room for the tab bar under the page, and the notice above it. */
  body.is-signed-in footer {
    padding-bottom: calc(24px + 72px + env(safe-area-inset-bottom));
  }
  body.is-signed-in #notice {
    bottom: calc(80px + env(safe-area-inset-bottom));
  }
}

/* ---- On a phone a table of mistakes becomes one card per row, each cell under its label:
   nothing to scroll sideways, nothing cut off. */
@media (max-width: 720px) {
  table.stacked thead {
    display: none;
  }
  table.stacked,
  table.stacked tbody,
  table.stacked tr,
  table.stacked td,
  table.stacked td:first-child {
    display: block;
    width: auto;
  }
  table.stacked tr {
    margin: 0 0 12px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
  }
  table.stacked td {
    padding: 4px 0;
    border: 0;
    overflow-wrap: anywhere;
  }
  table.stacked td::before {
    content: attr(data-label);
    display: block;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
  }
}

/* Fil d'Ariane des pages construites par matière, classe et jeu. */
.trail {
  margin: 0 0 12px;
  color: var(--muted, #5b6b63);
  font-size: 14px;
  line-height: 1.6;
}
.trail a {
  color: inherit;
}
.trail span {
  font-weight: 650;
}

/* « Reprends ton exercice là où tu l'as arrêté » : en tête de page, discret mais visible. */
.reprise {
  display: flex;
  align-items: stretch;
  gap: 8px;
  max-width: 520px;
  margin: 0 0 18px auto;
  border: 1px solid #cfe3d4;
  border-radius: 14px;
  background: #f2f9f3;
}
.reprise-lien {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  padding: 12px 14px;
  text-decoration: none;
  color: inherit;
}
.reprise-fleche {
  font-size: 26px;
  line-height: 1;
  color: #246956;
}
.reprise-texte {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.reprise-jeu {
  font-weight: 650;
}
.reprise-reste,
.reprise-jeu {
  font-size: 0.92rem;
}
.reprise-reste {
  color: #4a544c;
}
.reprise-fermer {
  border: 0;
  background: none;
  font-size: 22px;
  line-height: 1;
  padding: 0 12px;
  color: #4a544c;
  cursor: pointer;
}
.rappel-zone {
  margin-top: 28px;
}
@media (max-width: 600px) {
  .reprise {
    max-width: none;
  }
}

/* Le texte d'entrée d'une page publique : il situe la page pour le visiteur et pour les moteurs. */
.intro {
  font-size: 1.05rem;
  max-width: 62ch;
}

/* Courbe de l'écran Statistiques : une barre par jour, en CSS pur. La politique de sécurité
   interdit tout script tiers, et une bibliothèque graphique n'apporterait rien à trente valeurs. */
.courbe {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 120px;
  margin: 12px 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fffef9;
}
.courbe .barre {
  flex: 1 1 0;
  display: flex;
  align-items: flex-end;
  height: 100%;
  min-width: 4px;
}
.courbe .barre i {
  display: block;
  width: 100%;
  height: var(--h);
  min-height: 2px;
  border-radius: 3px 3px 0 0;
  background: var(--green);
}
/* Un jour sans partie reste visible, en creux : l'absence est une information. */
.courbe .barre.vide i {
  background: var(--line);
}
@media (max-width: 720px) {
  .courbe {
    height: 90px;
  }
}

/* Sur téléphone, le bouton d'action passe juste sous le titre : on décide de jouer avant de lire.
   Mesuré en recette, il se trouvait à 1 178 px du haut d'une page de jeu, soit un écran et demi de
   texte avant de pouvoir faire quoi que ce soit — et c'est par ces pages qu'arrivent les visiteurs
   venus d'un moteur de recherche. Sur écran large, rien ne change : tout tient dans un regard.
   La règle ne vise que les sections qui portent un bouton marqué, pour ne pas déranger l'accueil. */
@media (max-width: 720px) {
  .welcome:has(.jouer) {
    display: flex;
    flex-direction: column;
  }
  .welcome:has(.jouer) > * {
    order: 4;
  }
  .welcome:has(.jouer) > .eyebrow {
    order: 1;
  }
  .welcome:has(.jouer) > h1 {
    order: 2;
  }
  .welcome:has(.jouer) > .jouer {
    order: 3;
    margin-top: 4px;
  }
}

/* Chercher un jeu, depuis n'importe quelle page (public/chercher.js).
   Un collégien tape le mot de la leçon — « thalès » — pas le nom poétique du jeu. Le champ vit dans
   l'en-tête, occupe la place restante sur grand écran et passe pleine largeur sur téléphone, sous la
   navigation. Les propositions s'affichent par-dessus la page, sans la pousser vers le bas. */
.chercher {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 240px;
  max-width: 420px;
}
.chercher label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.chercher input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fffef9;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
}
.chercher input:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 1px;
}
.chercher button {
  min-height: 44px;
  padding: 0 14px;
  white-space: nowrap;
}
.chercher-resultats {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 60vh;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fffef9;
  box-shadow: 0 10px 30px rgb(35 60 56 / 14%);
}
.chercher-resultats ul {
  margin: 0;
  padding: 6px;
  list-style: none;
}
.chercher-resultats a {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink);
}
.chercher-resultats a strong {
  display: block;
  font-weight: 600;
}
.chercher-resultats a span {
  display: block;
  color: var(--muted);
  font-size: 13px;
}
.chercher-resultats a:hover,
.chercher-resultats [aria-selected='true'] a {
  background: var(--mint);
}
.chercher-vide {
  margin: 0;
  padding: 14px;
  color: var(--muted);
  font-size: 14px;
}

@media (max-width: 720px) {
  /* Sous la navigation, pleine largeur : le champ ne doit pas grignoter la place du logo. */
  .chercher {
    flex: 1 0 100%;
    max-width: none;
    order: 5;
  }
  .chercher button {
    padding: 0 12px;
    font-size: 14px;
  }
}

/* ---- Outils scolaires (/outils/…). Le formulaire est écrit dans la page ; le résultat, ses
   étapes et sa figure sont posés par outils.js. */
.outil-tete {
  min-height: 0;
}
.outil-tete h1,
.outil-tete > p {
  max-width: 100%;
}
.outil-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 4px 18px;
  align-items: start;
}
.outil-form .champ[hidden] {
  display: none;
}
.outil-form .champ:has(textarea),
.outil-form > .row,
.outil-form > .revision-question {
  grid-column: 1 / -1;
}
.outil-form label {
  margin: 10px 0 6px;
}
.outil-form .note {
  margin: 6px 0 0;
}
.outil-form textarea {
  min-height: 108px;
  font-family: inherit;
}
.outil-sortie:not(:empty) {
  margin: 18px 0 6px;
  padding: 18px 20px;
  border-radius: 14px;
  background: var(--mint, #e6eddb);
}
.outil-sortie h3:first-child {
  margin-top: 0;
}
.outil-sortie .error {
  margin: 0;
}
.outil-resultats {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 8px 18px;
  margin: 0;
}
.outil-resultats dt {
  color: var(--muted);
  font-size: 14px;
}
.outil-resultats dd {
  margin: 0;
  font-weight: 700;
  font-size: 18px;
  overflow-wrap: anywhere;
}
.outil-actions {
  margin: 14px 0 0;
}
.etapes {
  margin: 0;
  padding-left: 22px;
}
.etapes li {
  margin: 0 0 8px;
  overflow-wrap: anywhere;
}
.outil-sortie caption {
  caption-side: top;
  text-align: left;
  font-weight: 700;
  padding: 12px 0 6px;
}
.outil-cadre {
  margin: 16px 0 4px;
}
.outil-pose {
  display: inline-block;
  max-width: 100%;
  margin: 16px 0 4px;
  padding: 14px 18px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fffef9;
  color: var(--ink);
  font: 600 17px/1.45 ui-monospace, 'Cascadia Mono', Consolas, 'Courier New', monospace;
}
.outil-figure {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  background: #fffef9;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.outil-figure .axe {
  stroke: #9aa89f;
  stroke-width: 1;
}
.outil-figure .courbe {
  fill: none;
  stroke: var(--green);
  stroke-width: 2.5;
  stroke-linejoin: round;
}
.outil-figure .racine {
  fill: #b4532a;
}
.outil-figure .sommet {
  fill: var(--ink);
}
.outil-figure .trait {
  stroke: var(--ink);
  stroke-width: 2;
}
.outil-figure .boite {
  fill: #cfe3bf;
  stroke: var(--ink);
  stroke-width: 2;
}
.outil-figure .mediane {
  stroke: #b4532a;
  stroke-width: 3;
}
.outil-figure .legende {
  fill: var(--ink);
  font-size: 11px;
}
.outil-carte {
  display: grid;
  gap: 6px;
  align-content: start;
  text-decoration: none;
  color: var(--ink);
}
.outil-carte strong {
  font-size: 17px;
  line-height: 1.3;
}
.outil-carte span {
  color: var(--muted);
  font-size: 14px;
}
.outil-carte:hover,
.outil-carte:focus-visible {
  border-color: var(--green);
}
.outil-jeux {
  margin: 0;
  padding-left: 20px;
}
.outil-jeux li {
  margin: 0 0 8px;
}
.outil-jeux a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.outil-faq h3 {
  margin-top: 22px;
}
.revision-question {
  margin: 14px 0 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
}
.revision [data-retour]:not(:empty) {
  margin-top: 14px;
  font-size: 15px;
}
@media (max-width: 600px) {
  /* Sur téléphone, l'outil doit se voir sans défiler : la tête de page se resserre. */
  .welcome.outil-tete {
    padding: 18px 20px;
  }
  .outil-tete h1 {
    font-size: 26px;
    margin: 6px 0 8px;
  }
  .outil-tete .intro {
    font-size: 15px;
    line-height: 1.5;
    margin: 0;
  }
  .card.outil {
    padding-top: 16px;
  }
  .card.outil > h2 {
    font-size: 18px;
    margin-top: 0;
  }
  .outil-resultats {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .outil-resultats dd {
    margin-bottom: 10px;
  }
}
/* « Imprimer la table » : seule la zone de résultat part à l'imprimante. */
@media print {
  body:has(.outil-sortie) header,
  body:has(.outil-sortie) footer,
  body:has(.outil-sortie) .trail,
  body:has(.outil-sortie) #notice,
  body:has(.outil-sortie) main > section:not(.outil),
  body:has(.outil-sortie) .outil > :not(.outil-sortie),
  body:has(.outil-sortie) .outil-actions {
    display: none;
  }
  body:has(.outil-sortie) .outil,
  body:has(.outil-sortie) .outil-sortie {
    border: 0;
    padding: 0;
    background: none;
  }
}

/* ---- Kit de promotion (/partager.html). Les visuels sont des canvas dessinés par studio.js. */
/* Police de titrage des visuels : Bricolage Grotesque, licence SIL OFL 1.1 (public/fonts/OFL.txt). */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/bricolage-grotesque-800.woff2') format('woff2');
}
.promo-tete h1 {
  font-family: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.promo-chiffres {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.promo-chiffres li {
  padding: 10px 16px;
  border-radius: 14px;
  background: #fffef9;
  border: 1px solid var(--line);
  font-size: 14px;
}
.promo-chiffres strong {
  font: 800 22px 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  color: var(--green);
  margin-right: 4px;
}
.promo-publics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
}
.promo-libelle {
  font-weight: 650;
  font-size: 14px;
  margin-right: 4px;
}
.promo-publics button[aria-pressed='true'] {
  background: var(--ink);
  border-color: var(--ink);
  color: #fffef9;
}
.promo-onglets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}
.promo-onglet {
  min-height: 46px;
  padding: 0 16px;
  border-radius: 999px;
  background: #fffef9;
  border: 1px solid var(--line);
  color: var(--ink);
  font-weight: 700;
  box-shadow: none;
}
.promo-onglet[aria-selected='true'] {
  background: var(--green);
  border-color: var(--green);
  color: #fffef9;
}
.promo-panneau > .intro {
  margin-top: 0;
  color: var(--ink);
  font-size: 16px;
}
.promo-bloc {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.promo-bloc > h3 {
  margin-top: 0;
  font-size: 21px;
}
.promo-bloc h4 {
  margin: 18px 0 6px;
  font-size: 16px;
}
.promo-reglages {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 16px;
  margin: 12px 0 18px;
}
.promo-choix {
  margin: 0;
  min-width: 190px;
}
.promo-choix select {
  margin-top: 6px;
}
.promo-second:empty {
  display: none;
}
.promo-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 18px;
  align-items: start;
}
.promo-grille-paysage,
.promo-grille-x {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.promo-grille-banniere,
.promo-grille-couverture {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr));
}
.promo-grille-story,
.promo-grille-pinterest {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.promo-carte {
  min-width: 0;
}
.promo-visuel {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 6px 20px rgb(35 60 56 / 16%);
  background: #e6eddb;
}
.promo-actions {
  gap: 8px;
  margin: 10px 0 0;
}
.promo-actions .button,
.promo-actions button {
  margin-top: 0;
}
a.button.small {
  min-height: 44px;
  padding: 0 14px;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
}
.promo-carrousel {
  margin-top: 8px;
}
.promo-defile {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 2px 14px;
  scroll-snap-type: x proximity;
}
.promo-defile .promo-visuel {
  flex: 0 0 auto;
  width: 200px;
  scroll-snap-align: start;
}
.promo-texte {
  margin: 14px 0 0;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fffef9;
}
.promo-texte h4 {
  margin-top: 0;
}
.card .promo-citation {
  margin: 8px 0 0;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.promo-long {
  white-space: pre-line;
  font-size: 15px;
}
.promo-conseils {
  margin: 0;
  padding-left: 20px;
}
.promo-conseils li {
  margin: 0 0 8px;
}
.promo-scene {
  max-width: 320px;
}
.promo-scene:has(.promo-anim-carre),
.promo-scene:has(.promo-anim-portrait) {
  max-width: 400px;
}
.promo-affiche .promo-visuel {
  max-width: 340px;
}
.promo-code {
  font: 13px/1.5 ui-monospace, 'Cascadia Mono', Consolas, monospace;
  min-height: 0;
}
.outil-form .promo-large {
  grid-column: 1 / -1;
}
.promo-studio-apercu {
  max-width: 520px;
  margin: 16px 0 0;
}
.promo-semaine {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
  align-items: start;
}
.promo-jour .promo-visuel {
  margin: 10px 0 0;
}
.promo-jour .promo-citation {
  font-size: 14px;
}

/* ---- Page des établissements (/etablissements.html). */
.etab-tete h1 {
  font-size: 34px;
  line-height: 1.12;
}
.etab-actions {
  margin: 20px 0 0;
}
.etab-actions .button {
  margin-top: 0;
}
.etab-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}
.etab-duo .promo-visuel {
  margin-bottom: 14px;
}
.etab-affiche {
  max-width: 340px;
  margin: 0 auto;
}
.etab-atout {
  position: relative;
}
.etab-pastille {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 12px;
  border-radius: 16px;
  background: var(--green);
  color: #ffd23f;
  font: 800 22px 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
}
.etab-usages {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.etab-usages .card {
  background: #edf1df;
}
.etab-lien {
  border: 2px solid var(--green);
}
.etab-trois {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}
.etab-option {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fffef9;
  min-width: 0;
}
.etab-option h3 {
  margin-top: 0;
  font-size: 17px;
}
.etab-option .promo-citation {
  font-size: 14px;
}
@media (max-width: 950px) {
  .etab-usages,
  .etab-trois {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 720px) {
  .etab-duo,
  .etab-usages,
  .etab-trois {
    grid-template-columns: 1fr;
  }
  .etab-tete h1 {
    font-size: 26px;
  }
}