/*
 * Mon Lycée – pages de la plateforme (connexion, inscription, espaces famille,
 * eleve, professeur et administration).
 *
 * S'ajoute a site.css, dont il reprend les variables. Style « tableau de
 * bord » : cartes blanches a bord fin sur fond gris, boutons legers, couleurs
 * d'etat en fonds doux. Aucun style en ligne : la CSP n'autorise que les
 * feuilles du site.
 */

/* ==========================================================================
   Boutons
   ========================================================================== */
.button:disabled {
  opacity: 0.55;
  cursor: wait;
}

/* Bouton secondaire : blanc, bord fin. */
.button--outline {
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
}

.button--outline:hover {
  border-color: var(--ink);
  background: var(--surface);
  color: var(--ink);
}

/* Action sur une surface rouge : jamais un bouton rouge sur le rouge, mais
   un bouton blanc a texte rouge. */
.button--white {
  border: 0;
  background: var(--white);
  color: var(--red);
}

.button--white:hover {
  background: var(--red-soft);
  color: var(--red-dark);
}

/* Bouton tertiaire : un fond doux, plus soutenu au survol. */
.button--ghost {
  background: var(--hover);
  color: var(--ink);
}

.button--ghost:hover {
  background: var(--line);
  color: var(--ink);
}

.link-button {
  min-height: 44px;
  margin-left: 10px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-dark);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* ==========================================================================
   Parcours (connexion, inscription, confirmation)
   ========================================================================== */
.flow {
  max-width: 1080px;
  margin: 0 auto;
  padding: 40px var(--gutter) 88px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Connexion et inscription : deux colonnes sur toute la hauteur de l'ecran.
   A gauche, le panneau rouge uni de la marque : logo blanc, pastille
   « Soutien scolaire », accroche, cartes d'arguments. A droite, sur le fond
   de la plateforme, le formulaire en carte blanche. Sur ecran etroit, le
   panneau passe au-dessus. */
.signup {
  flex: 1 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
  min-height: 100vh;
}

.signup__brand {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(32px, 5vw, 64px);
  background: var(--red);
  color: var(--white);
}

.signup__logo {
  align-self: flex-start;
  border-radius: var(--radius-sm);
}

.signup__logo img {
  width: auto;
  height: 56px;
}

.signup__logo:focus-visible,
.signup__brand a:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: 3px;
  box-shadow: none;
}

/* La pastille blanche a texte rouge, sous le logo. */
.signup__chip {
  align-self: flex-start;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--red);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* L'accroche et ce qui l'accompagne descendent vers le bas du panneau. */
.signup__pitch {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: auto;
  padding-top: 40px;
  color: var(--white);
}

.signup__tagline {
  max-width: 13em;
  color: var(--white);
  font-family: var(--font-title);
  font-size: clamp(34px, 4.2vw, 60px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.035em;
}

/* Les quatre arguments : cartes blanches droites, ombre pleine. */
.stickers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  max-width: 540px;
}

.sticker {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--white);
  box-shadow: var(--shadow-sticker);
  color: var(--ink);
}

.sticker b {
  font-size: 15px;
  font-weight: 600;
}

.sticker small {
  color: var(--muted);
  font-size: 13px;
}

/* Le formulaire : une carte blanche, centree dans sa colonne. */
.signup__form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  background: var(--bg);
}

.flow--home,
.flow--signup {
  flex: none;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding-block: clamp(32px, 6vh, 72px);
}

.flow__title {
  font-size: clamp(26px, 2.6vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.flow__note {
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

.access {
  display: grid;
  gap: 16px;
}

/* La seconde carte (nouvelle famille) est plus discrete : elle propose
   seulement d'aller vers l'inscription. */
.panel.access__signup {
  gap: 12px;
  padding-block: 22px;
}

.panel.access__signup h2 {
  font-size: 18px;
}

/* Inscription : les etapes, en blanc sur le rouge, numerotees ; la premiere
   en jaune. */
.signup__pack .summary {
  position: static;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--white);
}

.flow--signup .group {
  padding: 0;
  border: 0;
  border-radius: 0;
}

.flow--signup .group legend {
  margin-bottom: 4px;
  padding: 0;
}

/* Deux champs par ligne ; l'adresse prend toute la largeur. */
.flow--signup .fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: clamp(22px, 3.5vw, 32px);
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.panel h2 {
  font-size: clamp(22px, 2vw, 26px);
  font-weight: 600;
  line-height: 1.15;
}

.panel > p {
  color: var(--muted);
}

/* Les actions d'une etape : « Retour » a gauche, l'action principale a droite. */
.panel .actions {
  justify-content: flex-end;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.panel .actions [data-back] {
  margin-right: auto;
}

/* Compte connecte, au-dessus des informations a saisir : l'adresse et de
   quoi en changer, sur une ligne. */
.identity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.identity[hidden] {
  display: none;
}

.panel .actions #auth-logout {
  order: -1;
}

.flow--home .panel .actions,
.flow--signup .panel .actions {
  padding-top: 0;
  border-top: 0;
}

/* Sur la page de connexion, les boutons prennent la largeur de la carte. */
.flow--home .panel .actions .button {
  flex: 1 1 auto;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.stack[hidden],
.panel[hidden],
.field[hidden],
.consent[hidden],
.sheet[hidden] {
  display: none;
}

/* ==========================================================================
   Champs
   ========================================================================== */
.fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 16px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field label,
.field__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.field__optional {
  font-weight: 500;
  color: var(--subtle);
}

.field input,
.field select,
.field textarea,
.feed__link {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  /* 16 px : pas de zoom automatique a la saisie sur iOS. */
  font-size: 16px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* En lecture seule (adresse e-mail, identifiant), un fond gris. */
.field input[readonly] {
  background: var(--surface-2);
  color: var(--muted);
}

.field textarea {
  resize: vertical;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--subtle);
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--muted);
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible,
.feed__link:focus-visible {
  outline: 2px solid transparent;
  border-color: var(--red);
  box-shadow: var(--ring);
}

/* Code de connexion : chiffres espaces, faciles a relire. */
#auth-code {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.3em;
  font-variant-numeric: tabular-nums;
}

.field--inline {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.field--inline select {
  width: auto;
}

.field[hidden] {
  display: none;
}

/* --- Groupes de champs (adresse, eleve) ----------------------------------- */
.group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  margin: 0;
  padding: 18px 20px 20px;
  border: 1px solid var(--line);
  border-radius: 20px;
}

.group legend {
  padding: 0 6px;
  font-size: 15px;
  font-weight: 700;
}

.field--wide {
  grid-column: 1 / -1;
}

/* Telephone : l'indicatif du pays, puis le numero national. */
.phone {
  display: grid;
  grid-template-columns: minmax(0, 13.5em) minmax(0, 1fr);
  gap: 8px;
}

@media (max-width: 560px) {
  .phone {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- Choix en cartes (niveau, filiere) ------------------------------------- */
.choices {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.choices[hidden] {
  display: none;
}

.choices legend {
  margin-bottom: 10px;
  padding: 0;
  font-size: 13px;
  font-weight: 700;
}

/* Une carte par ligne : le libelle et sa precision tiennent sans couper. */
.choices__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.choice {
  position: relative;
}

/* Le bouton radio reste dans le flux d'accessibilite ; la carte porte le
   style et le focus clavier. */
.choice input {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

/* Pastille (abreviation, `data-badge`), libelle et precision, coche. */
.choice span {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 24px;
  column-gap: 14px;
  align-items: center;
  min-height: 76px;
  padding: 14px 18px 14px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  background: var(--surface);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.choice span::before {
  content: attr(data-badge);
  /* L'abreviation double le libelle : les lecteurs d'ecran la taisent. */
  content: attr(data-badge) / '';
  grid-column: 1;
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--red-soft);
  color: var(--red-dark);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.choice small {
  grid-column: 2;
  grid-row: 2;
  color: var(--subtle);
  font-size: 13px;
  font-weight: 500;
}

.choice span::after {
  content: '';
  grid-column: 3;
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  box-sizing: border-box;
  border: 2px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--white);
  font-size: 13px;
  font-weight: 700;
}

.choice input:hover + span {
  border-color: var(--ink);
  transform: translateY(-1px);
}

/* Choix retenu : bordure rouge de 2 px, fond rose tres clair, puce rouge. */
.choice input:checked + span {
  border: 2px solid var(--red);
  padding: 13px 17px 13px 13px;
  background: #FFF5F4;
}

.choice input:checked + span::before {
  background: var(--red);
  color: var(--white);
}

.choice input:checked + span::after {
  content: '✓';
  border-color: var(--red);
  background: var(--red);
}

.choice input:focus-visible + span {
  box-shadow: var(--ring);
}

@media (prefers-reduced-motion: reduce) {
  .choice span,
  .choice span::before {
    transition: none;
  }

  .choice input:hover + span {
    transform: none;
  }
}

/* --- Consentements --------------------------------------------------------- */
.consent {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted-2);
  cursor: pointer;
}

.consent:has(input:checked) {
  border-color: var(--red);
  background: #FFF5F4;
}

.consent input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--accent);
}

/* --- Messages -------------------------------------------------------------- */
/* Message de validation ou d'erreur : un bandeau fixe en bas de l'ecran,
   visible ou que l'on soit dans la page ; un clic le referme (dom.js). */
.form-status {
  position: fixed;
  bottom: max(16px, env(safe-area-inset-bottom));
  left: 50%;
  z-index: 1000;
  width: max-content;
  max-width: min(640px, calc(100% - 32px));
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  transform: translateX(-50%);
  cursor: pointer;
}

/* Croix visuelle : un clic referme le bandeau (le texte reste seul lu). */
.form-status::after {
  content: "×" / "";
  margin-left: 12px;
  font-weight: 800;
}

/* Dans une fenetre, le bandeau se place au-dessus des boutons et reste
   colle en bas de la fenetre pendant le defilement, sans les couvrir. */
.dialog .form-status {
  position: sticky;
  bottom: 0;
  left: auto;
  width: auto;
  max-width: none;
  transform: none;
}

/* Un message de reussite s'efface seul apres 6 secondes ; une erreur reste
   jusqu'a ce qu'on la ferme. */
.form-status[data-kind="success"] {
  border-color: var(--mint);
  background: var(--green-soft);
  color: var(--green);
  animation: status-out 0.4s ease 6s forwards;
}

@keyframes status-out {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

.form-status[hidden] {
  display: none;
}

.form-status[data-kind="error"] {
  border-color: var(--red-line);
  background: var(--red-soft);
  color: var(--red-darker);
}

.form-note {
  font-size: 13px;
  color: var(--muted);
}

/* --- Contrat a lire avant le paiement ------------------------------------- */
/* Un document replie : son titre seul, il se deplie d'un clic. */
.accordion {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
}

.accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 8px 12px 8px 18px;
  border-radius: var(--radius);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.accordion summary:hover {
  background: var(--hover);
}

.accordion summary::-webkit-details-marker {
  display: none;
}

.accordion summary::after {
  content: "+";
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  font-size: 20px;
  line-height: 1;
}

.accordion[open] summary::after {
  content: "−";
}

.accordion .document {
  margin: 0 12px 12px;
}
.document {
  max-height: 420px;
  overflow-y: auto;
  padding: 20px 24px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface-2);
  color: var(--muted-2);
  font-size: 14px;
  line-height: 1.6;
}

.document:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--ring);
  box-shadow: var(--ring);
}

.document h3 {
  margin-bottom: 4px;
  color: var(--ink);
  font-size: 18px;
}

.document h4 {
  margin: 18px 0 8px;
  color: var(--ink);
  font-size: 16px;
}

.document p + p,
.document p + ul,
.document p + table,
.document table + p {
  margin-top: 10px;
}

.document ul {
  margin: 8px 0 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.document strong {
  color: var(--ink);
}

/* Les tableaux a remplir du contrat ont un en-tete vide : il ne s'affiche pas. */
.document thead:not(:has(th:not(:empty))) {
  display: none;
}

.document table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.document th,
.document td {
  padding: 6px 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  text-align: left;
  vertical-align: top;
}

/* ==========================================================================
   Recapitulatif (inscription : les etapes, sur le panneau rouge)
   ========================================================================== */
.summary {
  position: sticky;
  top: 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--red);
  color: var(--white);
  font-size: 15px;
}

.summary__label {
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.journey {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  counter-reset: journey;
}

/* Chaque etape numerotee : la premiere en jaune, les suivantes cerclees de
   blanc (le numero, blanc pur, reste pose sur le rouge). */
.journey li {
  counter-increment: journey;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  column-gap: 14px;
  row-gap: 2px;
}

.journey li::before {
  content: counter(journey);
  grid-row: span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--white);
  color: var(--white);
  font-weight: 700;
}

.journey li:first-child::before {
  background: var(--yellow);
  box-shadow: none;
  color: var(--ink);
}

.journey strong {
  color: var(--white);
  font-weight: 700;
}

.journey span {
  color: var(--white);
  font-size: 14px;
}

/* ==========================================================================
   Espaces : barre laterale rouge, une vue par entree de menu
   ========================================================================== */
.app-body {
  margin: 0;
  background: var(--bg);
}

/* La barre est un panneau rouge pose sur la page, aux coins arrondis, qui
   reste en place quand la vue defile. */
.app {
  display: grid;
  grid-template-columns: 288px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 24px;
  align-self: start;
  height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 24px 0 24px 24px;
  padding: 20px 16px 16px;
  border-radius: var(--radius-xl);
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  overflow-y: auto;
}

.sidebar__brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 8px 18px;
}

.sidebar__brand a {
  display: block;
  border-radius: var(--radius-sm);
}

.sidebar__brand img {
  display: block;
  flex: none;
  width: 116px;
  height: auto;
}

/* Etiquette d'espace : sur le rouge, une pilule noire a texte blanc. */
.role-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Le menu : sur grand ecran, il remplit la barre (pied en bas). */
.sidebar__menu {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
}

/* Bouton hamburger : seulement sur ecran etroit. */
.sidebar__toggle {
  display: none;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}

.sidebar__toggle:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--ring);
}

.sidebar__toggle-close,
.sidebar[data-open="true"] .sidebar__toggle-open {
  display: none;
}

.sidebar[data-open="true"] .sidebar__toggle-close {
  display: inline;
}

/* Voile sous le tiroir mobile (cree par shell.js) : jamais sur grand ecran. */
.sidebar__backdrop {
  display: none;
}

.sidebar__label {
  padding: 14px 10px 6px;
  color: var(--sidebar-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Sur le rouge, tout le texte est blanc ; l'entree active devient une pilule
   blanche a texte rouge. */
.navlink {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  color: var(--sidebar-text);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.navlink svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: currentColor;
}

.navlink:hover {
  background: var(--sidebar-card);
  color: var(--sidebar-text);
}

.navlink:focus-visible,
.sidebar__help:focus-visible,
.sidebar__legal a:focus-visible,
.sidebar__logout:focus-visible,
.sidebar__brand a:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: 2px;
}

.navlink[aria-current="page"],
.navlink[aria-current="page"]:hover {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active-text);
}

/* Pastille de non-lus : jaune sur le rouge, rouge sur l'entree active. */
.navlink__badge {
  margin-left: auto;
}

.sidebar .navlink__badge {
  background: var(--badge-bg);
  color: var(--badge-text);
}

.sidebar .navlink[aria-current="page"] .navlink__badge {
  background: var(--red);
  color: var(--white);
}

.sidebar__footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 16px;
}

.sidebar__help {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border: 0;
  border-radius: var(--radius);
  background: var(--sidebar-card);
  color: var(--sidebar-text);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.sidebar__help:hover {
  color: var(--sidebar-text);
  text-decoration: underline;
}

/* Documents de reference, toujours a portee depuis l'espace famille. */
.sidebar__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  padding: 0 6px;
  font-size: 13px;
  font-weight: 600;
}

.sidebar__legal a {
  color: var(--sidebar-text);
}

.sidebar__legal a[aria-current="page"] {
  font-weight: 700;
  text-decoration-thickness: 2px;
}

.sidebar__user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 6px 0;
  border-top: 1px solid var(--sidebar-line);
}

/* Avatars : eleve jaune, initiale noire en gras ; parent gris clair ;
   professeur rouge (blanc sur la barre rouge, pour rester visible). */
.avatar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--white);
  font-size: 13px;
  font-weight: 700;
}

.avatar--parent { background: var(--avatar-parent-bg); color: var(--avatar-parent-text); }
.avatar--eleve { background: var(--avatar-eleve-bg); color: var(--avatar-eleve-text); }
.avatar--professeur { background: var(--avatar-professeur-bg); color: var(--avatar-professeur-text); }
.sidebar .avatar--professeur,
.sidebar .avatar:not([class*="avatar--"]) { background: var(--white); color: var(--red); }

.sidebar__who {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sidebar__who strong {
  overflow: hidden;
  font-size: 14px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar__logout {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--sidebar-text);
  font: inherit;
  font-size: 13px;
  text-align: left;
  text-decoration: underline;
  cursor: pointer;
}

/* Mes enfants (maquette D-F-Enfants) : une carte par enfant (avatar, qui,
   achats ; une tuile par matiere avec la barre des unites du pack ; heures a
   la carte), puis le formulaire d'ajout. */
.children {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.children:empty {
  display: none;
}

.children__item {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.children__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.children__head .avatar {
  width: 52px;
  height: 52px;
  font-size: 20px;
}

.children__who {
  display: flex;
  flex: 1 1 200px;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.children__who strong {
  font-size: 20px;
  font-weight: 700;
}

.children__who span {
  color: var(--muted);
  font-size: 14px;
}

.children__subjects {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Une matiere : son nom et ce qui reste du pack, le professeur, la barre. */
.children__subjects li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 12px;
  align-items: baseline;
  padding: 16px;
  border-radius: var(--radius);
  background: var(--surface-2);
}

.children__subjects li > span {
  grid-column: 1;
  grid-row: 2;
  color: var(--muted);
  font-size: 14px;
}

.children__subjects .units-bar {
  grid-column: 1 / -1;
  margin-top: 6px;
}

.children__subjects li:only-child:not(:has(strong)) {
  display: block;
  grid-column: 1 / -1;
  color: var(--muted);
}

/* Les compteurs d'heures de l'enfant, en tete de sa carte : bien visibles. */
.children__counters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 12px;
}

.children__counter {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 20px;
  border-radius: var(--radius);
}

.children__counter--total {
  background: var(--red);
  color: var(--white);
}

.children__counter--card {
  background: var(--yellow-soft);
  box-shadow: inset 0 0 0 2px var(--yellow-line);
  color: var(--ink);
}

.children__counter-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.children__counter-value {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.children__counter-detail {
  font-size: 14px;
  font-weight: 500;
}

/* Les heures restantes d'une matiere, en grand dans sa tuile. */
.children__hours {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  text-align: right;
}

.children__hours strong {
  display: block;
  color: var(--ink);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.children__card {
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink);
}

.children__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.child-form {
  max-width: 760px;
  padding-top: 8px;
}

.child-form[hidden],
.child-next[hidden] {
  display: none;
}

/* En-tete d'un bloc : son titre a gauche, ses actions a droite. */
.sheet__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sheet__head h2 {
  margin: 0;
}

/* Niveaux et matieres d'un professeur (administration) : une classe par
   bloc, tronc commun puis specialites, en cases a cocher sur plusieurs
   colonnes. */
.teaching {
  display: grid;
  gap: 8px;
}

.teaching[hidden] {
  display: none;
}

.teaching__class {
  margin: 0;
  padding: 12px 0 4px;
  border: 0;
  border-top: 1px solid var(--line);
}

.teaching__class legend {
  float: left;
  width: 100%;
  margin-bottom: 4px;
  padding: 0;
  font-weight: 700;
}

.teaching__title {
  clear: both;
  margin: 8px 0 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.teaching__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: 6px 16px;
}

.teaching__subject {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  cursor: pointer;
}

.teaching__subject input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--accent);
}

/* Fenetres (achats, fiche professeur, decisions) : au-dessus de la page,
   floutee et assombrie. L'en-tete (sur-titre, titre, fermeture) et le pied
   (actions, ou recapitulatif rouge d'un achat) restent en place ; seul le
   contenu defile entre les deux si l'ecran est court. */
.dialog {
  width: min(760px, calc(100% - 32px));
  max-height: min(calc(100dvh - 48px), 960px);
  padding: 0;
  border: 0;
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: 0 2px 6px rgba(10, 10, 10, 0.08), 0 32px 80px rgba(10, 10, 10, 0.3);
  color: var(--ink);
  overflow: hidden;
}

/* Fenetre courte (heures a la carte, creation, decision). */
.dialog--narrow {
  width: min(560px, calc(100% - 32px));
}

.dialog[open] {
  display: flex;
  flex-direction: column;
  animation: dialog-in 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.dialog::backdrop {
  background: rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(6px);
}

@keyframes dialog-in {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }
}

.dialog__form {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.dialog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 28px 32px 20px;
  border-bottom: 1px solid var(--line);
}

.dialog__heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.dialog__kicker {
  margin: 0;
  color: var(--red);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dialog__head h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.dialog__body {
  flex: 1;
  min-height: 0;
  padding: 24px 32px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Dans une fenetre, un champ par ligne, sur toute sa largeur : rien n'est
   tronque (adresse e-mail, mention de TVA). */
.dialog .fields {
  grid-template-columns: minmax(0, 1fr);
}

/* Les parties d'un formulaire (coordonnees, facturation), bien separees. */
.dialog__body h3 {
  margin: 8px 0 0;
  font-size: 17px;
}

.dialog__body h3 + .fields {
  margin-top: -4px;
}

.dialog__body .fields + h3 {
  margin-top: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.dialog__documents {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Pied d'une fenetre : Annuler, puis l'action principale a droite. */
.dialog__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 32px 24px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}

.dialog__actions--start {
  justify-content: flex-start;
}

/* Recapitulatif d'un achat : le total en grand, sur le rouge, et le
   paiement en bouton blanc a texte rouge. */
.dialog__summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 20px;
  padding: 20px 32px 24px;
  background: var(--red);
  color: var(--white);
}

.dialog__price {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  margin: 0;
}

.dialog__amount {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.dialog__detail {
  font-size: 14px;
  font-weight: 500;
}

.dialog__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.dialog__secure {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 12px;
}

/* Bouton secondaire sur le rouge : texte blanc, bord blanc. */
.button--on-red {
  border: 1px solid var(--sidebar-line);
  background: transparent;
  color: var(--white);
}

.button--on-red:hover {
  background: var(--red-dark);
  color: var(--white);
}

.dialog__summary .button:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
  box-shadow: none;
}

.dialog__close {
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.dialog__close:hover {
  background: var(--hover);
}

.dialog__close:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--ring);
}

/* Sur mobile, la fenetre monte du bas de l'ecran, sur toute la largeur. */
@media (max-width: 560px) {
  .dialog,
  .dialog--narrow {
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - 24px);
    margin: auto 0 0;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }

  .dialog__head,
  .dialog__body,
  .dialog__actions,
  .dialog__summary {
    padding-left: 20px;
    padding-right: 20px;
  }

  .dialog__summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .dialog__buttons {
    justify-content: stretch;
  }

  .dialog__buttons .button {
    flex: 1;
  }
}

.dialog .document {
  max-height: 320px;
  border-width: 1px;
  border-radius: var(--radius-sm);
}

/* Prenom, nom et naissance sur une ligne ; la classe en cartes cote a cote. */
.fields--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.choices--row .choices__list {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}

/* Documents de reference (CGV, confidentialite) lus dans l'espace famille :
   une colonne de lecture, sans cadre. */
.legal-doc {
  max-width: 760px;
  color: var(--muted-2);
  font-size: 15px;
  line-height: 1.7;
}

.legal-doc h2 {
  margin: 28px 0 10px;
  color: var(--ink);
}

.legal-doc h3 {
  margin: 20px 0 8px;
  color: var(--ink);
}

.legal-doc p,
.legal-doc ul,
.legal-doc table {
  margin: 0 0 12px;
}

.legal-doc ul {
  padding-left: 22px;
}

.legal-doc table {
  width: 100%;
  border-collapse: collapse;
}

.legal-doc th,
.legal-doc td {
  padding: 8px 12px;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

/* Profil : deux champs par ligne, l'adresse et le nom sur toute la largeur. */
#profile-form {
  max-width: 760px;
}

#profile-form .fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.app__main {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 1280px;
  min-width: 0;
  padding: 32px clamp(16px, 3vw, 40px) 64px;
}

.app__title {
  margin: 0;
  font-size: clamp(30px, 3.2vw, 44px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.app__subtitle {
  margin: -12px 0 4px;
  color: var(--muted);
  font-size: 17px;
}

.view {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.view[hidden] {
  display: none;
}

.view__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: 20px;
  align-items: start;
}

/* Une carte sur toute la largeur de la grille. */
.sheet--wide {
  grid-column: 1 / -1;
}

/* Formulaire sur une ligne : ses champs, puis le bouton, aligne en bas. */
.inline-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 12px;
  align-items: end;
}

/* Plages d'ouverture : la semaine en sept colonnes, du lundi au dimanche ;
   chaque plage est une pastille, retiree par sa croix. Un jour sans plage
   est ferme. Sous 1100 px, un jour par ligne. */
.week-plan {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.week-plan__empty {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 14px;
}

.week-plan__day {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 120px;
  padding: 12px;
  border-radius: var(--radius);
  background: var(--surface-2);
}

.week-plan__name {
  font-size: 13px;
  font-weight: 700;
}

.week-plan__closed {
  color: var(--muted);
  font-size: 13px;
}

.week-plan__slots {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.week-plan__slot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding-left: 12px;
  border-radius: var(--radius-sm);
  background: var(--red);
  color: var(--white);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.week-plan__remove {
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--white);
  font: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.week-plan__remove:hover {
  background: var(--red-dark);
}

.week-plan__remove:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: -4px;
  box-shadow: none;
}

.week-plan__remove:disabled {
  cursor: wait;
  opacity: 0.6;
}

@media (max-width: 1100px) {
  .week-plan {
    grid-template-columns: minmax(0, 1fr);
  }

  .week-plan__day {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    min-height: 0;
  }

  .week-plan__name {
    width: 6.5em;
  }

  .week-plan__slots {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

@media (max-width: 700px) {
  .inline-form {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .inline-form .field:first-child,
  .inline-form .button {
    grid-column: 1 / -1;
  }
}

/* --- Cartes ---------------------------------------------------------------- */
.sheet {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.sheet[hidden] {
  display: none;
}

/* Dans une carte, etiquettes et boutons gardent leur largeur naturelle. */
.sheet > .pill,
.sheet > .tag,
.sheet > .button {
  align-self: flex-start;
}

/* Hors des barres d'etapes, le bouton tertiaire devient secondaire : blanc
   a bord fin, reperable au milieu d'une carte. */
.sheet .button--ghost,
.slot .button--ghost {
  border-color: var(--line-strong);
  background: var(--surface);
  color: var(--ink);
}

.sheet .button--ghost:hover,
.slot .button--ghost:hover {
  border-color: var(--ink);
  background: var(--surface);
}

.sheet h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.sheet__kicker {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sheet__figure {
  margin: 0;
  font-family: var(--font-title);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
}

/* Cartes fortes : l'action a mettre en avant (rouge), le chiffre ou le
   reglage de reference de la vue (l'ancienne carte encre, rouge elle aussi).
   Tout leur texte est blanc pur ; leur bouton est blanc a texte rouge. */
.sheet--red,
.sheet--ink {
  background: var(--red);
  color: var(--white);
}

.sheet--red h2,
.sheet--ink h2,
.sheet--red .sheet__kicker,
.sheet--ink .sheet__kicker,
.sheet--red .form-note,
.sheet--ink .form-note,
.sheet--ink .field label,
.sheet--ink .field__label,
.sheet--red a:not(.button),
.sheet--ink a:not(.button) {
  color: var(--white);
}

.sheet--yellow {
  background: var(--yellow-soft);
  color: var(--ink);
}

/* Etat d'une contestation, sous le compte-rendu de la seance. */
.tag-dispute {
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--yellow);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}

/* --- Chiffres cles --------------------------------------------------------- */
.kpis {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 16px;
}

.kpi {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 22px;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow);
}

.kpi dt {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

/* Variante forte en rouge (l'ancienne encre aussi), alerte en rouge doux,
   les autres en pastels. Sur le rouge, tout le texte est blanc pur. */
.kpi--red,
.kpi--ink { background: var(--red); color: var(--white); }
.kpi--yellow { background: var(--yellow-soft); color: var(--ink); }
.kpi--coral { background: var(--red-soft); color: var(--red-darker); }
.kpi--green { background: var(--green-soft); color: var(--ink); }

.kpi--red dt,
.kpi--ink dt,
.kpi.kpi--red .kpi__note,
.kpi.kpi--ink .kpi__note,
.kpi--coral dt,
.kpi.kpi--coral .kpi__note {
  color: inherit;
}

.kpi--red .kpi__note a,
.kpi--ink .kpi__note a {
  color: inherit;
}

.kpi dd {
  margin: 0;
  font-family: var(--font-title);
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

.kpi .kpi__note {
  font-family: var(--font-body);
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.45;
}

.kpi__note a {
  color: var(--accent-dark);
  font-weight: 700;
}

/* --- Tuiles de l'espace eleve ---------------------------------------------- */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 16px;
}

.tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 150px;
  margin: 0;
  padding: 20px;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  box-shadow: var(--shadow);
}

a.tile:hover {
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(10, 10, 10, 0.06), 0 16px 36px rgba(10, 10, 10, 0.1);
}

a.tile--red:hover {
  color: var(--white);
}

.tile p {
  margin: 0;
}

.tile--red { background: var(--red); color: var(--white); }
.tile--yellow { background: var(--yellow); color: var(--ink); }
.tile--coral { background: var(--red-soft); color: var(--red-darker); }

.tile__kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tile__title {
  font-family: var(--font-title);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.tile__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
}

.tile--red .tile__body strong {
  font-family: var(--font-title);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}

/* --- Pastilles d'etat ------------------------------------------------------ */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: #EFEFEF;
  color: var(--muted-2);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

/* Pastilles douces : vert (paye, present), jaune (en attente), rouge doux
   (solde bas, a traiter), gris par defaut. */
.pill--ok { background: var(--green-soft); color: var(--green); }
.pill--warn { background: var(--yellow-soft); color: var(--amber); }
.pill--danger { background: var(--red-soft); color: var(--red-dark); }

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  background: var(--hover);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}

.badge--alert,
.sheet .badge--alert {
  min-width: 20px;
  background: var(--red);
  color: var(--white);
}

.badge[hidden] {
  display: none;
}

/* --- Onglets ---------------------------------------------------------------- */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tab {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tab:hover {
  border-color: var(--ink);
  color: var(--ink);
}

/* Onglet actif : rouge, texte blanc. */
.tab[aria-pressed="true"] {
  border-color: var(--red);
  background: var(--red);
  color: var(--white);
}

.tabs--choice .tab {
  border-color: var(--line);
}

.tabs--choice .tab[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--white);
}

/* --- Tableaux ---------------------------------------------------------------- */
/* Positionne : un texte cache en absolu (« Actions » d'un en-tete) reste
   decoupe par le defilement au lieu d'elargir la page sur mobile. */
.table-scroll {
  position: relative;
  overflow-x: auto;
}

.orders {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.orders--admin {
  min-width: 760px;
}

.orders th,
.orders td {
  padding: 12px;
  border-bottom: 1px solid #EFEFEF;
  text-align: left;
  vertical-align: top;
}

.orders thead th {
  border-bottom-color: var(--line);
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.orders tbody tr:hover {
  background: var(--surface-2);
}

.orders tbody tr:last-child td {
  border-bottom: 0;
}

.cell__detail {
  display: block;
  color: var(--muted);
  font-size: 13px;
}

/* Ligne de filtres sous les en-tetes d'un tableau : un champ par colonne. */
.orders__filters td {
  padding-top: 0;
  padding-bottom: 12px;
}

.orders__filters input,
.orders__filters select {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 6px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
}

.orders__filters input:focus-visible,
.orders__filters select:focus-visible {
  outline: 2px solid transparent;
  border-color: var(--red);
  box-shadow: var(--ring);
}

/* --- Listes ------------------------------------------------------------------ */
.slots,
.picks,
.ranking {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Une action dans un tableau tient sur une ligne. */
.orders .link-button {
  white-space: nowrap;
}

/* --- Comptes ---------------------------------------------------------------- */
/* Bouton rond « + » : ouvre la creation d'un compte. */
.button-round {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--red);
  color: var(--white);
  font: inherit;
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.button-round:hover {
  background: var(--accent-dark);
}

.button-round:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--ring);
}

/* Le role colore sa pastille : famille en rouge doux, eleve en jaune,
   professeur en rouge, administration en gris. */
.role-pill[data-role="parent"] { background: var(--red-soft); color: var(--red-dark); }
.role-pill[data-role="eleve"] { background: var(--yellow); color: var(--ink); }
.role-pill[data-role="professeur"] { background: var(--red); color: var(--white); }
.role-pill[data-role="admin"] { background: #EFEFEF; color: var(--muted-2); }

.slot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid #EFEFEF;
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 14px;
}

.slot--empty {
  color: var(--muted);
}

.report {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid #EFEFEF;
  border-radius: var(--radius);
  background: var(--surface);
}

.report__text {
  margin: 0;
  white-space: pre-line;
}

.dispute summary {
  padding: 12px 0;
  cursor: pointer;
  color: var(--red-dark);
  font-size: 14px;
  font-weight: 700;
}

.dispute[open] summary {
  margin-bottom: 0;
}

.assign {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* Affectation : une liste deroulante, « Professeur a affecter » par defaut. */
.assign__select {
  min-width: 190px;
  min-height: 44px;
  padding: 6px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
}

/* Encore sans professeur : la liste se signale par une bordure rouge. */
.assign__select:has(option[value=""]:checked) {
  border: 2px solid var(--red);
  color: var(--red-dark);
  font-weight: 600;
}

.assign__select:focus-visible {
  outline: 2px solid transparent;
  border-color: var(--red);
  box-shadow: var(--ring);
}

/* --- Liste et detail (eleves, conversations) ------------------------------- */
.master {
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.pick {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 12px 16px;
  border: 0;
  border-radius: 18px;
  background: var(--hover);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.pick:hover {
  background: var(--line);
}

.pick strong {
  font-size: 14px;
  font-weight: 700;
}

/* Element choisi : rouge, tout son texte en blanc pur. */
.pick[aria-pressed="true"] {
  background: var(--red);
  color: var(--white);
}

.pick[aria-pressed="true"] .pick__state,
.pick[aria-pressed="true"] .pick__preview {
  color: var(--white);
}

.pick__state {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.pick__preview {
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Compteur -------------------------------------------------------------- */
.stepper {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
}

.stepper__button {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
}

.stepper__button:hover {
  background: var(--hover);
}

.stepper__button:disabled {
  opacity: 0.3;
  cursor: default;
}

.stepper__value {
  min-width: 64px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Compteur d'une saisie (heures a la carte) : la valeur se tape aussi. */
.stepper--large {
  align-self: flex-start;
  padding: 4px;
}

.stepper--large .stepper__value {
  width: 3.5em;
  min-width: 0;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 22px;
  font-weight: 700;
  text-align: right;
  appearance: textfield;
  -moz-appearance: textfield;
}

.stepper--large .stepper__value::-webkit-inner-spin-button,
.stepper--large .stepper__value::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

/* Le focus de la saisie entoure tout le compteur. */
.stepper--large:focus-within {
  border-color: var(--red);
  box-shadow: var(--ring);
}

.stepper--large .stepper__value:focus-visible {
  outline: 2px solid transparent;
  border-color: transparent;
  box-shadow: none;
}

.stepper--large .stepper__unit {
  padding: 0 12px 0 4px;
  font-size: 22px;
  font-weight: 700;
}

/* --- Graphiques (SVG : leurs dimensions sont des attributs, pas du style) -- */
.chart {
  width: 100%;
  height: auto;
  overflow: visible;
}

.chart__bar { fill: var(--accent-line); }
.chart__bar--current { fill: var(--red); }
.chart__track { fill: var(--hover); }

.chart__value,
.chart__label {
  font-family: var(--font-body);
  font-size: 12px;
  fill: var(--ink);
}

.chart__value { font-weight: 700; }
.chart__label { fill: var(--muted); }

.chart__fill--red { fill: var(--units-used); }
.chart__fill--yellow { fill: var(--units-reserved); }
.chart__fill--coral { fill: var(--coral); }
.chart__fill--green { fill: var(--green); }
.chart__fill--ink { fill: var(--ink); }

.ranking__row {
  display: grid;
  grid-template-columns: minmax(0, 160px) 1fr auto;
  align-items: center;
  gap: 14px;
  font-size: 14px;
  font-weight: 600;
}

.ranking__bar {
  width: 100%;
  height: 8px;
}

.ranking__count {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* --- Carte d'une matiere --------------------------------------------------- */
.subject-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.subject-card__balance {
  margin: 0;
  color: var(--muted);
  font-weight: 600;
}

.subject-card__balance strong {
  margin-right: 6px;
  color: var(--ink);
  font-family: var(--font-title);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  vertical-align: -2px;
}

/* Barre des unites : utilisees en rouge, reservees en jaune, la piste pour
   le disponible. */
.units-bar {
  display: block;
  width: 100%;
  height: 10px;
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.units-bar__track { fill: var(--units-track); }
.units-bar__used { fill: var(--units-used); }
.units-bar__reserved { fill: var(--units-reserved); }

.subject-card__units {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.subject-card .button {
  align-self: flex-start;
}

/* --- Agenda ---------------------------------------------------------------- */
.agenda {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

/* Sous le planning : solde, consignes, agenda personnel... en cartes cote a
   cote, sur toute la largeur. */
.agenda__side {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 20px;
  align-items: start;
}

.agenda[hidden] {
  display: none;
}

/* « Valider » : une barre jaune au-dessus de l'agenda, visible tant que
   des changements du planning attendent leur e-mail recapitulatif. */
.agenda__validate {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin-bottom: 20px;
  padding: 14px 16px 14px 24px;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--yellow);
  color: var(--ink);
}

.agenda__validate p {
  flex: 1 1 280px;
  margin: 0;
}

.agenda__week {
  display: flex;
  align-items: center;
  gap: 10px;
}

.agenda__week h2 {
  font-size: 18px;
}

.agenda__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  cursor: pointer;
}

.agenda__nav:hover {
  background: var(--hover);
}

.agenda__nav:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Calendrier a la maniere de Calendly : le mois a gauche, le jour choisi a
   droite. Sous 900 px, le jour passe sous le mois. */
.booking {
  display: grid;
  grid-template-columns: minmax(280px, 400px) minmax(0, 1fr);
  gap: 24px 32px;
  align-items: start;
}

.booking__month {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.booking__day {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 100%;
  padding-left: 32px;
  border-left: 1px solid var(--line);
}

.booking__day h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}

/* Le mois : sept colonnes, du lundi au dimanche. Un jour ouvert est une
   pastille rouge doux ; choisi, il passe au rouge ; un point marque ses
   seances. */
.month {
  width: 100%;
  border-collapse: separate;
  border-spacing: 2px 4px;
  table-layout: fixed;
}

.month th {
  padding: 0 0 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

.month td {
  padding: 0;
  text-align: center;
}

.month__day {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 44px;
  max-width: 100%;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

button.month__day {
  background: var(--red-soft);
  color: var(--red-dark);
  cursor: pointer;
}

button.month__day:hover {
  background: #FFE1DD;
}

button.month__day[aria-pressed="true"] {
  background: var(--red);
  color: var(--white);
}

button.month__day:disabled {
  cursor: wait;
}

.month__day--off {
  color: var(--subtle);
  font-weight: 500;
}

.month__day[aria-current="date"] {
  box-shadow: inset 0 0 0 2px var(--ink);
}

.month__day--booked::after {
  content: "";
  position: absolute;
  bottom: 6px;
  left: 50%;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: var(--radius-pill);
  background: currentColor;
}

/* Le jour : ses seances et ses demi-heures, dans l'ordre de la journee. */
.day {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.day__empty {
  color: var(--muted);
  font-size: 14px;
}

/* Une demi-heure libre, a reserver : un bouton au cadre rouge. */
.day__slot {
  width: 100%;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid var(--red);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--red-dark);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.day__slot:hover {
  background: var(--red);
  color: var(--white);
}

.day__slot:disabled {
  cursor: wait;
}

/* Une seance : qui, quoi, quand, puis ce qui peut s'en faire. */
.day__lesson {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  font-size: 14px;
}

.day__what {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.day__what .day__line:first-child {
  font-weight: 700;
}

.day__notice {
  flex-basis: 100%;
  margin: 0;
  font-size: 13px;
}

.day__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Une demi-heure du professeur : l'heure, son etat (ouverte, fermee, passee), son action. */
.day__half {
  display: grid;
  grid-template-columns: minmax(0, 9em) minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 4px 4px 4px 16px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: 14px;
}

.day__time {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.day__half--open {
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}

.day__half--closed {
  background: repeating-linear-gradient(135deg, #F4F4F5 0 6px, #EAEAEA 6px 7px);
}

.day__half--past {
  color: var(--muted);
}

.day__line {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Couleurs des seances, communes aux deux agendas. */
.day__lesson--mine {
  background: var(--red);
  color: var(--white);
}

/* Entretien decouverte : jaune doux, cadre jaune. */
.day__lesson--cadrage {
  background: var(--yellow-soft);
  box-shadow: inset 0 0 0 2px var(--yellow-line);
  color: var(--amber);
}

/* A moins de 48 heures (plus de changement d'un clic) et suppression
   demandee, en attente du professeur : blanc, cadre en pointille d'encre.
   Apres `day__lesson--mine` et `day__lesson--cadrage` : elles les remplacent. */
.day__lesson--locked,
.day__lesson--pending {
  background: var(--surface);
  box-shadow: none;
  outline: 2px dashed var(--ink);
  outline-offset: -2px;
  color: var(--ink);
}

.agenda__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.month__dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: var(--radius-pill);
}

.month__dot--open {
  background: var(--red-soft);
  box-shadow: inset 0 0 0 1px var(--red);
}

.month__dot--booked {
  background: var(--red);
}

/* Solde de la matiere choisie, au-dessus du calendrier : le total a gauche,
   la part du pack et celle de la carte a droite. */
.agenda__balance {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 20px 24px;
}

.agenda__balance .sheet__figure {
  margin: 0;
}

.agenda__balance-detail {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

/* --- Centre d'aide ----------------------------------------------------------- */
/* Un sujet par carte, sur toute la largeur de la page, ses questions en
   accordeons ; le contact a la fin. */
.help {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

.help__topic {
  gap: 10px;
}

.help__topic h2 {
  margin: 0 0 4px;
}

.accordion__body {
  padding: 0 18px 16px;
  color: var(--muted-2);
  font-size: 15px;
  line-height: 1.6;
}

.accordion__body p {
  margin: 0;
}

.accordion__body p + p {
  margin-top: 8px;
}

.help__contact p {
  margin: 0;
}

/* --- Agenda personnel (abonnement iCal) ------------------------------------ */
.feed__link {
  font-size: 13px;
}

/* --- Messagerie ------------------------------------------------------------ */
.thread__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.thread__head h2,
.thread__head p {
  margin: 0;
}

.thread {
  list-style: none;
  margin: 0;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 55vh;
  overflow-y: auto;
}

.bubble {
  align-self: flex-start;
  max-width: min(520px, 85%);
}

.bubble--mine {
  align-self: flex-end;
  text-align: right;
}

.bubble__text {
  margin: 0;
  padding: 10px 14px;
  border-radius: 20px 20px 20px 6px;
  background: var(--hover);
  text-align: left;
  white-space: pre-line;
}

.bubble--mine .bubble__text {
  border-radius: 20px 20px 6px 20px;
  background: var(--red);
  color: var(--white);
}

/* Demande de suppression a moins de 48 heures : une carte blanche cadree en
   pointille d'encre, quel que soit son auteur ; son etat et, pour le
   professeur, ses deux reponses en dessous. */
.bubble:has(.bubble__request) .bubble__text {
  border: 2px dashed var(--ink);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
}

.bubble__meta {
  display: block;
  margin-top: 4px;
  color: var(--subtle);
  font-size: 12px;
}

/* Sous une demande de suppression : son etat, et pour le professeur ses deux
   reponses, du cote de la bulle. */
.bubble__request {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.bubble--mine .bubble__request {
  justify-content: flex-end;
}

.bubble__actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
}

.thread__form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}

.thread__form .field {
  flex: 1 1 260px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Ecrans etroits
   ========================================================================== */
@media (max-width: 900px) {
  .signup,
  .agenda,
  .booking,
  .master {
    grid-template-columns: minmax(0, 1fr);
  }

  .booking__day {
    padding: 20px 0 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .summary {
    position: static;
  }

  /* Le panneau rouge au-dessus, le formulaire dessous, qui le chevauche en
     carte arrondie. */
  .signup {
    grid-template-rows: auto 1fr;
    min-height: 0;
  }

  .signup__brand {
    gap: 12px;
    padding: 24px 20px 48px;
  }

  .signup__logo img {
    height: 40px;
  }

  .signup__pitch {
    margin-top: 0;
    padding-top: 12px;
  }

  .signup__tagline {
    font-size: 30px;
  }

  .signup__form {
    justify-content: flex-start;
    margin-top: -24px;
    border-radius: 24px 24px 0 0;
  }

  .flow--home,
  .flow--signup {
    padding: 24px 16px 48px;
  }

  /* Barre du haut a sa hauteur ; la page prend le reste, meme courte. */
  .app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
  }

  /* La barre laterale devient une barre du haut blanche : logo en couleurs
     et bouton hamburger. Le menu s'ouvre en tiroir rouge par-dessus la page,
     sous la barre, sur un voile. */
  .sidebar {
    position: sticky;
    top: 0;
    z-index: 30;
    height: auto;
    margin: 0;
    padding: 10px 16px;
    border-radius: 0;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    overflow: visible;
  }

  .sidebar__brand {
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding: 0;
  }

  .sidebar__brand img {
    width: auto;
    height: 42px;
  }

  .sidebar__brand .role-badge {
    display: none;
  }

  .sidebar__brand a:focus-visible {
    outline: 2px solid transparent;
    box-shadow: var(--ring);
  }

  .sidebar__toggle {
    display: inline-grid;
  }

  .sidebar__menu {
    position: fixed;
    top: 65px;
    bottom: 0;
    left: 0;
    z-index: 31;
    display: none;
    width: min(300px, 84%);
    padding: 20px 16px 24px;
    border-radius: 0 24px 24px 0;
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    overflow-y: auto;
  }

  .sidebar[data-open="true"] .sidebar__menu {
    display: flex;
  }

  .sidebar__backdrop:not([hidden]) {
    position: fixed;
    inset: 65px 0 0;
    z-index: 29;
    display: block;
    background: var(--backdrop);
  }

  .sidebar__label {
    display: none;
  }

  .navlink {
    min-height: 48px;
    font-size: 16px;
  }

  .sidebar__footer {
    margin-top: auto;
    padding: 16px 0 0;
  }

  .sidebar__user {
    padding: 12px 0 0;
  }

  .app__main {
    padding: 20px 16px 48px;
  }
}

@media (max-width: 560px) {
  .fields--three,
  .children__subjects {
    grid-template-columns: minmax(0, 1fr);
  }

  .children__item {
    padding: 20px 16px;
  }

  #profile-form .fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .flow--signup .fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .panel .actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .panel .actions [data-back] {
    margin-right: 0;
  }

  .panel .actions #auth-logout {
    order: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }

  .dialog[open] {
    animation: none;
  }
}