/* Espace de l'Institut Qalâmi (directrice et professeurs) — complète site.css.
   Même identité que le site : crème, noir et or, Manrope. Pensé d'abord pour le téléphone (390 px). */

.esp-tete [hidden], .esp-corps [hidden], .esp-dialogue [hidden] { display: none !important; }
/* Pas d'écriture arabe dans l'espace : le nom en arabe du pied de page commun n'est pas écrit dans espace.html
   (en-tête « arabe: non » de src/pages/espace.html, contrôlé par construire.py). */

/* ---------- Bandeau noir : titre, compte, onglets ---------- */
.esp-tete {
  --fond: #000000;
  --titre: #f6f1df;
  --texte: rgba(243, 239, 219, 0.82);
  --texte-faible: rgba(243, 239, 219, 0.6);
  --ligne: rgba(229, 191, 39, 0.22);
  position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse 60% 120% at 85% 0%, rgba(229, 191, 39, 0.16), transparent 60%),
    radial-gradient(ellipse 50% 90% at 5% 100%, rgba(184, 145, 46, 0.14), transparent 60%),
    #000;
  color: var(--texte);
  padding: 5.5rem 0 0;
  border-bottom: 1px solid rgba(229, 191, 39, 0.3);
}
.esp-tete__ligne { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.75rem 1.5rem; padding-bottom: 1rem; }
.esp-tete__sur { margin: 0 0 0.35rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--or); }
.esp-tete__titre { font-size: clamp(1.85rem, 7vw, 3rem); line-height: 1.05; letter-spacing: -0.035em; color: var(--titre); }
.esp-tete__compte { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.9rem; }
.esp-tete__qui { margin: 0; font-size: 0.9rem; color: var(--texte-faible); }
.esp-tete__qui strong { color: var(--titre); font-weight: 600; }

.esp-onglets {
  position: relative;
  display: flex; gap: 0.4rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  margin: 0 calc(var(--gouttiere) * -1); padding: 0 var(--gouttiere) 0.9rem;
  scroll-padding-inline: var(--gouttiere);
}
.esp-onglets::-webkit-scrollbar { display: none; }
.esp-onglet {
  flex: none; display: inline-flex; align-items: center; min-height: 44px;
  padding: 0.55rem 1.05rem; border-radius: 999px; white-space: nowrap;
  font-size: 0.95rem; font-weight: 500; color: var(--texte);
  border: 1px solid rgba(229, 191, 39, 0.25); background: rgba(243, 239, 219, 0.04);
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.esp-onglet__court { display: none; }
@media (max-width: 559px) {
  .esp-onglet__long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .esp-onglet__court { display: inline; }
}
.esp-onglet:hover { border-color: rgba(229, 191, 39, 0.6); color: var(--titre); }
.esp-onglet[aria-current="page"] { background: var(--or); border-color: var(--or); color: #1a1405; font-weight: 600; }
@media (min-width: 1024px) { .esp-tete { padding-top: 6.5rem; } }

/* ---------- Corps ---------- */
.esp-corps { padding: 1.5rem 0 4.5rem; min-height: 62vh; }
@media (min-width: 900px) { .esp-corps { padding-top: 2.25rem; } }
.esp-vue { display: grid; gap: 1.5rem; outline: none; }
.esp-vue > * { min-width: 0; }
.esp-vue--attente { opacity: 0.55; pointer-events: none; transition: opacity 0.2s; }

/* ---------- Boutons ---------- */
.esp-bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 44px; padding: 0.6rem 1.15rem; border-radius: 999px;
  background: var(--noir); color: #f6f1df; border: 1px solid rgba(229, 191, 39, 0.45);
  font: inherit; font-size: 0.95rem; font-weight: 500; line-height: 1.2; text-align: center;
  cursor: pointer; transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.esp-bouton:hover { background: #1d1806; border-color: var(--or-texte); }
.esp-bouton:disabled { opacity: 0.55; cursor: progress; }
.esp-bouton .esp-ico { width: 1.1rem; height: 1.1rem; flex: none; }
.esp-bouton--or { background: var(--or); color: #1a1405; border-color: var(--or-sombre); font-weight: 600; }
.esp-bouton--or:hover { background: var(--or-clair); border-color: var(--or-sombre); }
.esp-bouton--clair { background: var(--surface); color: var(--titre); border-color: rgba(138, 106, 28, 0.4); }
.esp-bouton--clair:hover { background: #fff7dc; border-color: var(--or-texte); }
.esp-bouton--discret { background: transparent; color: var(--texte); border-color: transparent; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(138, 106, 28, 0.5); }
.esp-bouton--discret:hover { background: rgba(229, 191, 39, 0.1); border-color: transparent; }
.esp-bouton--danger { background: var(--surface); color: #8f1d1d; border-color: rgba(143, 29, 29, 0.45); }
.esp-bouton--danger:hover { background: #fbeceb; border-color: #8f1d1d; }
.esp-bouton--sombre { background: rgba(243, 239, 219, 0.06); color: #f6f1df; border-color: rgba(229, 191, 39, 0.35); }
.esp-bouton--sombre:hover { background: rgba(229, 191, 39, 0.14); border-color: var(--or); }
.esp-bouton--whatsapp { background: #0b5f45; color: #fff; border-color: #0b5f45; }
.esp-bouton--whatsapp:hover { background: #094d38; border-color: #094d38; }
.esp-bouton--petit { min-height: 40px; padding: 0.45rem 0.9rem; font-size: 0.9rem; }
.esp-bouton--large { width: 100%; }

.esp-icone-bouton {
  display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none;
  border-radius: 50%; border: 1px solid rgba(138, 106, 28, 0.35); background: var(--surface);
  color: var(--titre); cursor: pointer; transition: background-color 0.2s, border-color 0.2s;
}
.esp-icone-bouton:hover { background: #fff7dc; border-color: var(--or-texte); }
.esp-icone-bouton--danger { color: #8f1d1d; }
.esp-icone-bouton--danger:hover { background: #fbeceb; border-color: #8f1d1d; }
.esp-ico { width: 1.25rem; height: 1.25rem; }

.esp-lien { color: var(--titre); font-weight: 500; text-decoration: underline; text-decoration-color: var(--or-texte); text-underline-offset: 3px; }
.esp-lien:hover { color: var(--or-texte); }
.esp-lien-bouton { background: none; border: 0; padding: 0.5rem 0; min-height: 44px; font: inherit; font-size: 0.95rem; color: var(--titre); text-decoration: underline; text-decoration-color: var(--or-texte); text-underline-offset: 3px; cursor: pointer; justify-self: start; }

.esp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.esp-actions--pile { display: grid; gap: 0.6rem; margin-top: 0.5rem; }
.esp-actions--pile .esp-bouton { width: 100%; }
.esp-actions--serre { gap: 0.5rem; }
@media (min-width: 560px) { .esp-actions--pile { display: flex; flex-wrap: wrap; } .esp-actions--pile .esp-bouton { width: auto; } }

/* ---------- Cartes, sections, tuiles ---------- */
.esp-carte {
  background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--rayon);
  padding: 1.15rem; box-shadow: 0 18px 40px -32px rgba(70, 52, 8, 0.45);
}
@media (min-width: 700px) { .esp-carte { padding: 1.5rem; } }
.esp-carte--etroite { max-width: 30rem; width: 100%; margin: 0.5rem auto 0; padding: 1.5rem 1.25rem; }
@media (min-width: 700px) { .esp-carte--etroite { padding: 2rem; } }
.esp-carte__titre { font-size: 1.5rem; letter-spacing: -0.025em; line-height: 1.15; margin-bottom: 0.5rem; }
.esp-carte__intro { color: var(--texte-faible); font-size: 0.95rem; margin-bottom: 1.25rem; }

.esp-section { display: grid; gap: 0.9rem; min-width: 0; }
.esp-section.esp-carte { gap: 0.9rem; }
.esp-section__tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.5rem 1rem; }
.esp-section__titre { font-size: 1.3rem; letter-spacing: -0.02em; line-height: 1.2; }
.esp-section__sous { margin: 0.2rem 0 0; font-size: 0.875rem; color: var(--texte-faible); max-width: 46rem; }
.esp-section__tete .esp-saisie { width: auto; min-width: 12rem; }
.esp-sous-titre { font-size: 1.05rem; margin: 0.5rem 0 0.25rem; }

.esp-tuiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
@media (min-width: 900px) { .esp-tuiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.9rem; } .esp-tuiles--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .esp-tuiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.esp-tuile { background: var(--surface); border: 1px solid var(--ligne); border-radius: 1rem; padding: 0.9rem 1rem; display: grid; align-content: start; gap: 0.2rem; min-width: 0; }
.esp-tuile--or { background: linear-gradient(160deg, rgba(229, 191, 39, 0.2), rgba(255, 253, 246, 0.9) 70%), var(--surface); border-color: rgba(184, 145, 46, 0.45); }
.esp-tuile__libelle { margin: 0; font-size: 0.82rem; color: var(--texte-faible); line-height: 1.3; }
.esp-tuile__valeur { margin: 0; font-size: clamp(1.2rem, 4.6vw, 1.65rem); font-weight: 650; letter-spacing: -0.025em; line-height: 1.15; color: var(--titre); overflow-wrap: anywhere; }
.esp-tuile__sous { margin: 0; font-size: 0.8rem; color: var(--texte-faible); line-height: 1.35; }
.esp-tuiles--5 .esp-tuile:last-child { grid-column: 1 / -1; }
@media (min-width: 900px) { .esp-tuiles--5 .esp-tuile:last-child { grid-column: auto; } }

.esp-colonnes { display: grid; gap: 1.5rem; }
.esp-colonne { display: grid; gap: 1.5rem; align-content: start; min-width: 0; }
@media (min-width: 1024px) { .esp-colonnes { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 2rem; } }

.esp-note { margin: 0; font-size: 0.9rem; color: var(--texte-faible); }
.esp-note--centre { text-align: center; padding: 0.5rem 0; }
.esp-aide { margin: 0; font-size: 0.85rem; color: var(--texte-faible); line-height: 1.45; }
.esp-info { margin: 0; padding: 0.8rem 1rem; border-radius: 0.9rem; background: rgba(229, 191, 39, 0.12); border: 1px solid rgba(184, 145, 46, 0.35); color: var(--titre); font-size: 0.95rem; }
.esp-erreur { margin: 0; padding: 0.85rem 1rem; border-radius: 0.9rem; background: #fbeceb; border: 1px solid rgba(143, 29, 29, 0.35); border-left-width: 4px; color: #6f1414; font-size: 0.95rem; display: grid; gap: 0.75rem; justify-items: start; }
.esp-erreur p { margin: 0; }
/* « Mot de passe oublié ? » : un paragraphe par cas */
.esp-oubli { display: grid; gap: 0.55rem; padding: 0.85rem 1rem; border-radius: 0.9rem; background: rgba(229, 191, 39, 0.08); border: 1px solid rgba(184, 145, 46, 0.3); font-size: 0.9rem; color: var(--texte); }
.esp-oubli p { margin: 0; }
.esp-oubli strong { color: var(--titre); font-weight: 600; }
/* Rappel du reste dû du mois précédent (tableau de bord) */
.esp-rappel { display: grid; gap: 0.6rem; justify-items: start; }
.esp-rappel p { margin: 0; }
.esp-chargement { display: flex; align-items: center; justify-content: center; gap: 0.75rem; padding: 2.5rem 1rem; color: var(--texte-faible); font-size: 0.95rem; }
.esp-roue { width: 1.25rem; height: 1.25rem; border-radius: 50%; border: 2px solid rgba(184, 145, 46, 0.25); border-top-color: var(--or-sombre); animation: esp-tourner 0.8s linear infinite; }
@keyframes esp-tourner { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .esp-roue { animation: none; border-top-color: rgba(184, 145, 46, 0.25); border-right-color: var(--or-sombre); } }
.esp-vide { display: grid; justify-items: center; gap: 0.6rem; text-align: center; padding: 1.5rem 1rem; color: var(--texte-faible); border: 1px dashed rgba(138, 106, 28, 0.3); border-radius: 1rem; }
.esp-vide img { width: 2.25rem; height: 2.25rem; opacity: 0.55; }
.esp-vide p { margin: 0; max-width: 28rem; font-size: 0.95rem; }

/* ---------- Badges (toujours un mot, jamais la couleur seule) ---------- */
.esp-badge { display: inline-flex; align-items: center; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600; line-height: 1.5; white-space: nowrap; border: 1px solid transparent; }
.esp-badge--neutre { background: rgba(23, 19, 10, 0.06); color: rgba(23, 19, 10, 0.75); border-color: rgba(23, 19, 10, 0.12); }
.esp-badge--attente { background: #f7ecc4; color: #5e4510; border-color: rgba(184, 145, 46, 0.5); }
.esp-badge--partiel { background: #f6e2cc; color: #74390b; border-color: rgba(138, 74, 20, 0.35); }
.esp-badge--ok { background: #e1f0e4; color: #1d5a31; border-color: rgba(29, 90, 49, 0.3); }
.esp-badge--annulee { background: #f6dede; color: #7c1a1a; border-color: rgba(124, 26, 26, 0.25); }
.esp-badge--inactif { background: #ebe6d8; color: #4f4a40; border-color: rgba(79, 74, 64, 0.25); }
.esp-badge--info { background: #e3ecf7; color: #1d4373; border-color: rgba(29, 67, 115, 0.25); }

/* ---------- Formulaires ---------- */
.esp-form { display: grid; gap: 1rem; }
.esp-form__deux, .esp-form__quatre { display: grid; gap: 1rem; }
@media (min-width: 560px) { .esp-form__deux { grid-template-columns: 1fr 1fr; } .esp-form__quatre { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .esp-form__quatre { grid-template-columns: 1fr 1fr 1fr 1.4fr; align-items: start; } }
.esp-form__trois { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 419px) { .esp-form__trois { grid-template-columns: 1fr; } }
/* « Noter un cours » : montant du cours, recalculé à chaque changement de formule ou de durée */
.esp-estimation { font-size: 0.92rem; }
.esp-champ { display: grid; gap: 0.4rem; align-content: start; min-width: 0; }
.esp-champ__libelle { font-size: 0.9rem; font-weight: 600; color: var(--titre); }
.esp-facultatif { font-weight: 400; color: var(--texte-faible); }
.esp-saisie {
  width: 100%; min-height: 48px; font: inherit; font-size: 1rem; color: var(--titre);
  background: #fffefa; border: 1px solid rgba(138, 106, 28, 0.38); border-radius: 0.85rem;
  padding: 0.7rem 0.9rem; transition: border-color 0.2s, box-shadow 0.2s;
}
select.esp-saisie {
  appearance: none; -webkit-appearance: none; padding-right: 2.5rem; cursor: pointer;
  background: #fffefa url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a5c14' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.85rem center / 1rem;
}
textarea.esp-saisie { min-height: 5.5rem; resize: vertical; line-height: 1.5; }
.esp-saisie:focus { outline: none; border-color: var(--or-texte); box-shadow: 0 0 0 3px rgba(229, 191, 39, 0.3); }
.esp-saisie:disabled { background: rgba(23, 19, 10, 0.05); color: var(--texte-faible); cursor: not-allowed; }
.esp-saisie[aria-invalid="true"] { border-color: #8f1d1d; box-shadow: 0 0 0 3px rgba(143, 29, 29, 0.15); }
.esp-saisie[readonly] { background: #fbf6e6; }
.esp-message { min-height: 7.5rem; font-size: 0.95rem; }
.esp-erreur--formulaire { display: block; }

.esp-mdp { position: relative; }
.esp-mdp .esp-saisie { padding-right: 3.25rem; }
.esp-voir { position: absolute; top: 2px; right: 2px; width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; border-radius: 0.7rem; color: var(--or-texte); cursor: pointer; }
.esp-voir[aria-pressed="true"] { color: var(--titre); }

.esp-choix { border: 0; margin: 0; padding: 0; display: grid; gap: 0.45rem; min-width: 0; }
.esp-choix__liste { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.esp-choix__item { position: relative; }
.esp-choix__item input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.esp-choix__item label {
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; padding: 0.5rem 0.95rem;
  border-radius: 999px; border: 1px solid rgba(138, 106, 28, 0.38); background: #fffefa;
  font-size: 0.93rem; color: var(--titre); cursor: pointer; transition: background-color 0.15s, border-color 0.15s;
}
.esp-choix__item input:checked + label { background: var(--noir); color: #f6f1df; border-color: var(--noir); }
.esp-choix__item input[type="checkbox"]:checked + label::before { content: "✓"; color: var(--or); font-weight: 700; }
.esp-choix__item input:focus-visible + label { outline: 2px solid var(--or); outline-offset: 3px; }

.esp-case { display: flex; align-items: center; gap: 0.7rem; min-height: 44px; }
.esp-case input { width: 1.35rem; height: 1.35rem; accent-color: #1a1405; flex: none; }
.esp-case label { font-weight: 600; color: var(--titre); cursor: pointer; }
.esp-champ-groupe { display: grid; gap: 0.4rem; padding: 0.9rem; border-radius: 0.9rem; background: rgba(229, 191, 39, 0.08); border: 1px solid rgba(184, 145, 46, 0.3); }

.esp-puces { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.esp-puce { display: inline-flex; align-items: center; min-height: 36px; padding: 0.35rem 0.8rem; border-radius: 999px; border: 1px solid rgba(138, 106, 28, 0.3); background: #fffefa; font: inherit; font-size: 0.88rem; color: var(--titre); cursor: pointer; }
button.esp-puce:hover { border-color: var(--or-texte); background: #fff7dc; }
.esp-puces--statiques .esp-puce { cursor: default; min-height: 0; padding: 0.2rem 0.7rem; background: rgba(229, 191, 39, 0.1); border-color: rgba(184, 145, 46, 0.3); font-size: 0.82rem; }
/* durée choisie parmi les choix rapides */
button.esp-puce[aria-pressed="true"] { background: var(--noir); color: #f6f1df; border-color: var(--noir); }
button.esp-puce { min-height: 40px; }

.esp-details { border-top: 1px solid var(--ligne); padding-top: 0.75rem; display: grid; gap: 0.75rem; }
.esp-details summary { cursor: pointer; font-weight: 600; color: var(--titre); min-height: 44px; display: flex; align-items: center; }
.esp-details[open] { gap: 0.75rem; }

/* ---------- Barres d'outils, navigation par semaine / par mois ---------- */
.esp-barre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; }
.esp-barre__outils { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.esp-barre__outils .esp-saisie { width: auto; min-width: 13rem; flex: 1 1 13rem; }
.esp-barre--filtres { justify-content: flex-start; }
.esp-barre__statut { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; font-size: 0.9rem; color: var(--texte-faible); }
.esp-barre--filtres .esp-saisie { flex: 1 1 12rem; width: auto; }
@media (max-width: 559px) {
  .esp-barre__outils { width: 100%; }
  .esp-barre__outils > * { flex: 1 1 100%; }
  .esp-barre--filtres > * { flex: 1 1 100%; }
}
/* téléphone : [‹] libellé [›] sur une ligne, « Cette semaine » dessous ; plus large : tout sur une ligne */
.esp-nav-periode { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.5rem; width: 100%; }
.esp-nav-periode > .esp-bouton { grid-column: 1 / -1; justify-self: center; }
.esp-nav-periode__libelle { margin: 0; font-weight: 650; color: var(--titre); font-size: 0.98rem; line-height: 1.3; text-align: center; letter-spacing: -0.01em; }
@media (min-width: 560px) {
  .esp-nav-periode { display: flex; flex-wrap: wrap; width: auto; }
  .esp-nav-periode__libelle { font-size: 1.02rem; min-width: 9rem; }
  .esp-nav-periode > .esp-bouton { margin-left: 0.25rem; }
}

/* ---------- Séances ---------- */
.esp-seance {
  display: grid; gap: 0.15rem; width: 100%; text-align: left; font: inherit; color: var(--texte); cursor: pointer;
  padding: 0.65rem 0.8rem 0.7rem; border-radius: 0.85rem; background: var(--surface);
  border: 1px solid var(--ligne); border-left: 4px solid var(--or-sombre);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.esp-seance:hover { border-color: rgba(138, 106, 28, 0.55); border-left-color: var(--or); box-shadow: 0 10px 24px -18px rgba(70, 52, 8, 0.55); }
.esp-seance__haut { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; flex-wrap: wrap; }
.esp-seance__heure { font-size: 0.85rem; font-weight: 650; color: var(--titre); font-variant-numeric: tabular-nums; }
.esp-seance__matiere { font-weight: 650; color: var(--titre); line-height: 1.25; }
.esp-seance__detail { font-size: 0.85rem; color: var(--texte-faible); line-height: 1.35; overflow-wrap: anywhere; }
.esp-seance__fuseau { font-size: 0.78rem; color: var(--or-texte); }
/* cours noté par le professeur lui-même (et non planifié par la directrice) */
.esp-seance__auteur { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.76rem; font-weight: 600; color: var(--or-texte); }
.esp-seance__auteur::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--or-sombre); flex: none; }
.esp-seance--notee { border-left-style: dashed; }
.esp-mention { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600; color: var(--or-texte); }
.esp-mention::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--or-sombre); flex: none; }
.esp-seance--annulee { border-left-color: rgba(124, 26, 26, 0.45); background: rgba(255, 253, 246, 0.55); }
.esp-seance--annulee .esp-seance__matiere, .esp-seance--annulee .esp-seance__heure { text-decoration: line-through; text-decoration-color: rgba(124, 26, 26, 0.6); color: var(--texte-faible); }
@media (prefers-reduced-motion: reduce) { .esp-seance { transition: none; } }

.esp-liste-seances { display: grid; gap: 0.5rem; }

/* La semaine : une liste par jour sur téléphone, une grille de sept colonnes sur ordinateur */
.esp-semaine { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.65rem; }
.esp-jour { display: grid; gap: 0.5rem; padding: 0.85rem; border-radius: 1rem; background: rgba(255, 253, 246, 0.6); border: 1px solid var(--ligne); min-width: 0; }
.esp-jour--aujourdhui { border-color: rgba(184, 145, 46, 0.7); background: linear-gradient(180deg, rgba(229, 191, 39, 0.14), rgba(255, 253, 246, 0.7)); }
.esp-jour__titre { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 1rem; letter-spacing: -0.01em; }
.esp-jour__court { display: none; }
.esp-jour__auj { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #5e4510; background: rgba(229, 191, 39, 0.35); padding: 0.1rem 0.5rem; border-radius: 999px; }
.esp-jour__seances { display: grid; gap: 0.45rem; }
.esp-jour__rien { margin: 0; font-size: 0.85rem; color: var(--texte-faible); }
@media (max-width: 1023px) {
  .esp-jour--vide { padding-top: 0.6rem; padding-bottom: 0.6rem; grid-template-columns: 1fr auto; align-items: center; }
}
@media (min-width: 1024px) {
  .esp-semaine { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.5rem; align-items: stretch; }
  .esp-jour { align-content: start; padding: 0.6rem; min-height: 16rem; }
  .esp-jour__long { display: none; }
  .esp-jour__court { display: inline; font-size: 0.92rem; }
  .esp-jour__titre { flex-wrap: wrap; }
  .esp-jour__rien { font-size: 0.8rem; }
  .esp-semaine .esp-seance { padding: 0.5rem 0.6rem; }
  .esp-semaine .esp-seance__matiere { font-size: 0.92rem; }
  .esp-semaine .esp-seance__detail { font-size: 0.8rem; }
}

/* Semaine en bref (tableau de bord) */
.esp-semaine-courte { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.esp-semaine-courte > li { display: grid; gap: 0.3rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--ligne); }
.esp-semaine-courte > li:last-child { border-bottom: 0; padding-bottom: 0; }
.esp-semaine-courte__jour { font-size: 0.92rem; color: var(--titre); }
.esp-semaine-courte ul { display: grid; gap: 0.25rem; }
.esp-semaine-courte ul li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.6rem; font-size: 0.92rem; }
.esp-semaine-courte__heure { font-weight: 650; color: var(--titre); font-variant-numeric: tabular-nums; min-width: 3rem; }
.esp-barre-annulee > span:not(.esp-badge) { text-decoration: line-through; color: var(--texte-faible); }

/* ---------- Listes de lignes (salaires, paiements) ---------- */
.esp-lignes { list-style: none; margin: 0; padding: 0; display: grid; }
.esp-ligne { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 0; border-bottom: 1px solid var(--ligne); }
.esp-ligne:first-child { padding-top: 0.25rem; }
.esp-ligne:last-child { border-bottom: 0; }
.esp-ligne__corps { min-width: 0; display: grid; gap: 0.1rem; }
.esp-ligne__titre { margin: 0; font-weight: 600; color: var(--titre); }
.esp-ligne__sous { margin: 0; font-size: 0.86rem; color: var(--texte-faible); }
.esp-ligne__note { margin: 0.15rem 0 0; font-size: 0.86rem; color: var(--texte); font-style: italic; overflow-wrap: anywhere; }
.esp-ligne__fin { display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; flex: none; text-align: right; }
.esp-ligne__montant { font-size: 0.86rem; font-weight: 600; color: var(--titre); font-variant-numeric: tabular-nums; white-space: nowrap; }
.esp-ligne__auteur { margin: 0.1rem 0 0; font-size: 0.78rem; font-weight: 600; color: var(--or-texte); }
/* ligne qui ouvre la séance : toute la ligne est un bouton */
.esp-ligne--action { padding: 0; }
.esp-ligne--action:first-child { padding-top: 0; }
.esp-ligne__bouton {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; width: 100%; min-height: 44px;
  padding: 0.75rem 0.4rem; border: 0; border-radius: 0.6rem; background: none;
  font: inherit; color: inherit; text-align: left; cursor: pointer; transition: background-color 0.15s;
}
.esp-ligne__bouton:hover { background: rgba(229, 191, 39, 0.1); }
.esp-ligne__bouton:focus-visible { outline: 2px solid var(--or); outline-offset: 1px; }

/* Grille des tarifs des professeurs (onglet Salaires) */
.esp-tarifs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
.esp-tarifs__item { display: grid; gap: 0.1rem; padding: 0.7rem 0.85rem; border-radius: 0.9rem; background: rgba(229, 191, 39, 0.1); border: 1px solid rgba(184, 145, 46, 0.3); min-width: 0; }
.esp-tarifs__formule { font-size: 0.82rem; font-weight: 600; color: var(--texte-faible); }
.esp-tarifs__valeur { font-size: clamp(1.1rem, 4.4vw, 1.4rem); font-weight: 650; letter-spacing: -0.02em; color: var(--titre); font-variant-numeric: tabular-nums; }
.esp-tarifs__unite { font-size: 0.78rem; color: var(--texte-faible); }

/* Fiches de détail */
.esp-infos { display: grid; grid-template-columns: minmax(6.5rem, auto) minmax(0, 1fr); gap: 0.45rem 1rem; margin: 0; }
.esp-infos dt { font-size: 0.86rem; color: var(--texte-faible); padding-top: 0.08rem; }
.esp-infos dd { margin: 0; color: var(--titre); overflow-wrap: anywhere; display: grid; gap: 0.15rem; justify-items: start; }
.esp-infos__plus { font-size: 0.85rem; color: var(--texte-faible); }
.esp-infos--compact { gap: 0.3rem 0.9rem; font-size: 0.95rem; }
.esp-texte-libre { white-space: pre-wrap; }
.esp-coupure { overflow-wrap: anywhere; word-break: break-word; }

/* ---------- Professeurs, salaires ---------- */
.esp-profs, .esp-salaires { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
@media (min-width: 760px) { .esp-profs, .esp-salaires { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .esp-profs, .esp-salaires { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.esp-profs > li, .esp-salaires > li { display: grid; min-width: 0; }
.esp-prof { display: flex; flex-direction: column; gap: 0.8rem; }
.esp-prof > .esp-actions { margin-top: auto; } /* boutons alignés en bas des cartes d'une même rangée */
.esp-prof__tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; }
.esp-prof__nom { font-size: 1.2rem; letter-spacing: -0.02em; }
.esp-prof__badges { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.esp-prof--inactif { background: rgba(255, 253, 246, 0.55); }
.esp-prof--inactif .esp-prof__nom { color: var(--texte-faible); }
.esp-prof__liens { margin: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; font-size: 0.9rem; }

/* Tableau de bord : lignes de résumé */
.esp-reseaux-resume { list-style: none; margin: 0; padding: 0; display: grid; }
.esp-reseaux-resume li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.15rem 0.6rem; padding: 0.6rem 0; border-bottom: 1px solid var(--ligne); }
.esp-reseaux-resume li:last-child { border-bottom: 0; }
.esp-reseaux-resume__nom { font-weight: 600; color: var(--titre); }
.esp-reseaux-resume__valeur { font-weight: 650; color: var(--titre); font-variant-numeric: tabular-nums; text-align: right; }
.esp-reseaux-resume__ecart { grid-column: 2 / -1; font-size: 0.84rem; color: var(--texte-faible); }
@media (min-width: 560px) {
  .esp-reseaux-resume li { grid-template-columns: auto minmax(0, 1fr) auto minmax(9rem, auto); }
  .esp-reseaux-resume__ecart { grid-column: auto; text-align: right; }
}
.esp-chiffre { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.35rem 0.75rem; }
.esp-chiffre__valeur { margin: 0; font-size: 2.6rem; font-weight: 650; letter-spacing: -0.04em; line-height: 1; color: var(--titre); }
.esp-chiffre__sous { margin: 0; color: var(--texte-faible); font-size: 0.92rem; }

/* ---------- Réseaux : légende, petits graphiques ---------- */
.esp-cle { display: inline-block; width: 1rem; height: 3px; border-radius: 2px; background: var(--c); flex: none; vertical-align: middle; }
.esp-avec-cle { display: inline-flex; align-items: center; gap: 0.5rem; }
.esp-legende { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.esp-legende__item {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 40px; padding: 0.4rem 0.85rem;
  border-radius: 999px; border: 1px solid rgba(138, 106, 28, 0.35); background: var(--surface);
  font: inherit; font-size: 0.9rem; color: var(--titre); cursor: pointer;
}
.esp-legende__item[aria-pressed="false"] { color: var(--texte-faible); background: transparent; border-style: dashed; }
.esp-legende__item[aria-pressed="false"] .esp-cle { background: rgba(23, 19, 10, 0.2); }
.esp-multiples { display: grid; gap: 0.9rem; }
@media (min-width: 900px) { .esp-multiples { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.esp-reseau { display: grid; gap: 0.3rem; min-width: 0; padding-bottom: 0.75rem; }
.esp-reseau__tete { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.esp-reseau__nom { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 1.1rem; }
.esp-reseau__valeur { margin: 0; font-size: 1.5rem; font-weight: 650; letter-spacing: -0.03em; color: var(--titre); }
.esp-reseau__valeur span { font-size: 0.82rem; font-weight: 400; letter-spacing: 0; color: var(--texte-faible); }
.esp-reseau__ecart { margin: 0 0 0.25rem; font-size: 0.86rem; color: var(--texte-faible); }

.esp-graph { position: relative; width: 100%; min-height: 1px; }
.esp-graph__svg { display: block; overflow: visible; touch-action: pan-y; border-radius: 0.5rem; }
.esp-graph__svg:focus-visible { outline: 2px solid var(--or); outline-offset: 4px; }
.esp-graph__grille line { stroke: rgba(138, 106, 28, 0.16); stroke-width: 1; shape-rendering: crispEdges; }
.esp-graph__grille .esp-graph__base { stroke: rgba(138, 106, 28, 0.38); }
.esp-graph__texte { fill: rgba(23, 19, 10, 0.68); font: 500 11.5px var(--sans); font-variant-numeric: tabular-nums; }
.esp-graph__point { stroke: var(--surface); stroke-width: 2; }
.esp-graph__curseur { stroke: rgba(23, 19, 10, 0.45); stroke-width: 1; }
.esp-graph__zone { cursor: crosshair; }
.esp-graph__bulle {
  position: absolute; z-index: 2; pointer-events: none; display: grid; gap: 0.05rem; white-space: nowrap;
  padding: 0.4rem 0.65rem; border-radius: 0.6rem; background: #17130a; color: #f6f1df;
  font-size: 0.82rem; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.6);
}
.esp-graph__bulle strong { font-size: 0.95rem; font-weight: 650; }
.esp-graph__bulle span { color: rgba(243, 239, 219, 0.72); }

/* ---------- Tableaux (pile de fiches sur téléphone) ---------- */
.esp-table-cadre { width: 100%; }
.esp-table { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
.esp-table th { text-align: left; font-size: 0.8rem; font-weight: 600; color: var(--texte-faible); padding: 0.55rem 0.65rem; border-bottom: 1px solid rgba(138, 106, 28, 0.35); white-space: nowrap; }
.esp-table td { padding: 0.55rem 0.65rem; border-bottom: 1px solid var(--ligne); color: var(--titre); vertical-align: middle; }
.esp-table .esp-num { text-align: right; font-variant-numeric: tabular-nums; }
.esp-table__actions { width: 1%; white-space: nowrap; text-align: right; }
.esp-actions-ligne { display: inline-flex; gap: 0.35rem; }
.esp-table .esp-icone-bouton { width: 40px; height: 40px; }
@media (max-width: 699px) {
  .esp-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .esp-table, .esp-table tbody { display: block; }
  .esp-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.15rem 0.75rem; padding: 0.7rem 0; border-bottom: 1px solid var(--ligne); }
  .esp-table td { display: flex; gap: 0.5rem; padding: 0; border: 0; grid-column: 1; min-width: 0; text-align: left; }
  .esp-table td::before { content: attr(data-libelle); flex: none; min-width: 6.5rem; font-size: 0.8rem; color: var(--texte-faible); padding-top: 0.1rem; }
  .esp-table td:empty { display: none; }
  .esp-table .esp-num { text-align: left; }
  .esp-table td.esp-table__actions { grid-column: 2; grid-row: 1 / span 6; align-self: center; width: auto; }
  .esp-table td.esp-table__actions::before { content: none; }

  /* version compacte : deux lignes par entrée, boutons à droite */
  .esp-table--compacte tr { display: block; position: relative; padding: 0.7rem 0; }
  .esp-table--compacte tr:has(td.m-action) { padding-right: 5.75rem; }
  .esp-table--compacte td, .esp-table--compacte .esp-num { display: inline; padding: 0; text-align: left; }
  .esp-table--compacte td::before { content: none; }
  .esp-table--compacte td.m-l1 { font-weight: 600; color: var(--titre); }
  .esp-table--compacte td.m-l2 { font-size: 0.88rem; color: var(--texte-faible); }
  .esp-table--compacte td.m-l1 + td.m-l1::before, .esp-table--compacte td.m-l2 + td.m-l2::before { content: " · "; }
  .esp-table--compacte td.m-l1 + td.m-l2::before { content: "\A"; white-space: pre; }
  .esp-table--compacte td[data-suffixe]::after { content: attr(data-suffixe); }
  .esp-table--compacte td.m-note { display: block; margin-top: 0.15rem; font-size: 0.85rem; font-style: italic; color: var(--texte); }
  .esp-table--compacte td.m-note:empty { display: none; }
  .esp-table--compacte td.m-action { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: block; }
}

/* ---------- Fenêtre (dialog) : feuille du bas sur téléphone, fenêtre centrée sur ordinateur ---------- */
.esp-dialogue {
  width: 100%; max-width: 100%; max-height: 92svh; margin: auto auto 0; padding: 0;
  border: 1px solid rgba(184, 145, 46, 0.45); border-bottom: 0; border-radius: 1.25rem 1.25rem 0 0;
  background: var(--fond); color: var(--texte); box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.35);
  overflow: auto; overscroll-behavior: contain;
}
.esp-dialogue::backdrop { background: rgba(10, 8, 3, 0.62); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
@media (min-width: 700px) {
  .esp-dialogue { width: calc(100% - 3rem); max-width: 34rem; max-height: 88vh; margin: auto; border-bottom: 1px solid rgba(184, 145, 46, 0.45); border-radius: 1.25rem; }
  .esp-dialogue--large { max-width: 44rem; }
}
.esp-dialogue__tete { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 1rem 0.75rem 1.25rem; background: var(--fond); border-bottom: 1px solid var(--ligne); }
.esp-dialogue__titre { font-size: 1.2rem; letter-spacing: -0.02em; line-height: 1.25; }
.esp-dialogue__corps { display: grid; gap: 1rem; padding: 1.1rem 1.25rem 1.5rem; }
.esp-dialogue__corps > .esp-actions { padding-top: 0.25rem; }
.esp-dialogue__texte { margin: 0; color: var(--texte); }

/* ---------- Message éphémère ---------- */
.esp-toast {
  position: fixed; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 60;
  transform: translate(-50%, 1rem); opacity: 0; pointer-events: none;
  max-width: calc(100% - 2rem); padding: 0.75rem 1.15rem; border-radius: 999px;
  background: #17130a; color: #f6f1df; border: 1px solid rgba(229, 191, 39, 0.5);
  font-size: 0.95rem; box-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.6);
  transition: opacity 0.25s, transform 0.25s;
}
.esp-toast:empty { display: none; }
.esp-toast--visible { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .esp-toast { transition: none; } }