/*
 * Mon Lycée – soutien scolaire : socle commun des pages (variables de la
 * charte, typographie, boutons, en-tete et pied de page) et pages rendues
 * par le serveur (politique de confidentialite, documents, page introuvable).
 *
 * Style « tableau de bord » colore : fond clair et chaud, cartes blanches
 * sans bordure avec une ombre douce, rouge de mon-lycee.fr pour l'action et
 * les surfaces fortes, jaune pour les mises en avant.
 * Aucun style en ligne dans les pages : la CSP n'autorise que ces feuilles.
 * Les polices sont servies par le site, jamais par un tiers.
 */

/* --- Polices (OFL, voir assets/fonts/OFL-*.txt) --------------------------- */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/onest-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('fonts/plus-jakarta-sans-latin.woff2') format('woff2');
}

/* --- Variables de la charte ----------------------------------------------- */
/* Charte « couleur » (2026-10-19) : fond clair et chaud, rouge Mon Lycee pour
   l'action et les surfaces fortes (barre laterale, tiroir mobile, panneaux de
   connexion, recapitulatif d'achat), jaune pour les mises en avant, encre pour
   le texte. Sur le rouge, le texte est toujours blanc pur. Les noms des
   variables sont ceux de l'ancienne charte : le CSS qui les utilise suit. */
:root {
  /* --- Fonds et surfaces ---------------------------------------------------- */
  --bg: #FAF7F5;            /* fond de page, blanc legerement chaud */
  --surface: #FFFFFF;       /* cartes, panneaux, en-tete */
  --surface-2: #F7F7F7;     /* champs en lecture seule, fonds discrets dans une carte */
  --hover: #F2F2F2;
  --lilac: #FFF3F1;         /* ancien lilas : fond doux rouge (en-tetes de tableau, bandeaux) */
  --line: #E6E6E6;          /* separateurs */
  --line-strong: #DCDCDC;   /* bordures de champs et boutons secondaires */

  /* --- Texte ------------------------------------------------------------------ */
  --ink: #0A0A0A;           /* texte principal, boutons noirs secondaires */
  --muted: #5C5C5C;         /* texte secondaire (7:1 sur blanc) */
  --muted-2: #3D3D3D;
  --subtle: #6B6B6B;        /* plus clair autorise sur blanc (AA) */
  --white: #FFFFFF;

  /* --- Rouge Mon Lycee : la couleur d'action et des surfaces fortes ------------- */
  --accent: #DD2628;
  --accent-dark: #C91F25;   /* survol */
  --accent-darker: #8F1416; /* texte rouge sur fond rouge doux */
  --accent-line: #FFD9D6;
  --red: #DD2628;
  --red-dark: #B91C1E;
  --red-darker: #8F1416;
  --red-soft: #FFF3F1;
  --red-line: #FFD9D6;

  /* --- Jaune : mises en avant (heures reservees, pastilles, avatars eleves) ----- */
  --yellow: #FFD323;
  --yellow-soft: #FFF8D6;
  --yellow-line: #E8B400;   /* nouveau : cadrage d'une selection dans l'agenda */
  --amber: #5C4A00;         /* texte sur jaune doux */

  /* --- Etats ------------------------------------------------------------------ */
  --green: #14532D;
  --green-soft: #E3F6EC;
  --coral: #F08A8B;
  --mint: #7EE2B0;

  /* --- Barre laterale et tiroir mobile (nouveau) ---------------------------------- */
  --sidebar-bg: var(--red);
  --sidebar-text: #FFFFFF;          /* jamais de gris ni de transparence sur le rouge */
  --sidebar-active-bg: #FFFFFF;
  --sidebar-active-text: var(--red);
  --sidebar-card: var(--red-dark);  /* encart dans la barre ; un voile blanc ferait tomber le texte blanc sous 4,5:1 */
  --sidebar-line: rgba(255, 255, 255, 0.55);   /* bordure des boutons sur le rouge */
  --badge-bg: var(--yellow);        /* pastille de non-lus dans la barre */
  --badge-text: var(--ink);
  --backdrop: rgba(10, 10, 10, 0.45);          /* voile derriere le tiroir mobile */
  --footer-text: #FFFFFF;

  /* --- Soldes d'heures (nouveau) ---------------------------------------------------- */
  --units-used: var(--red);
  --units-reserved: var(--yellow);
  --units-track: #EFEFEF;

  /* --- Avatars (nouveau) ------------------------------------------------------------ */
  --avatar-eleve-bg: var(--yellow);     /* rond jaune, initiale noire en gras */
  --avatar-eleve-text: var(--ink);
  --avatar-parent-bg: #F2F2F2;
  --avatar-parent-text: var(--ink);
  --avatar-professeur-bg: var(--red);
  --avatar-professeur-text: #FFFFFF;

  /* --- Typographie (inchangee : Onest auto-hebergee) --------------------------------- */
  --font-title: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* --- Formes ------------------------------------------------------------------------ */
  --radius-sm: 12px;        /* cellules, petits blocs */
  --radius: 16px;           /* champs, notices */
  --radius-lg: 24px;        /* cartes */
  --radius-xl: 28px;        /* nouveau : barre laterale, grands panneaux */
  --radius-pill: 999px;     /* tous les boutons, pastilles, puces */
  --shadow-sm: 0 1px 2px rgba(10, 10, 10, 0.04);
  --shadow: 0 1px 2px rgba(10, 10, 10, 0.04), 0 12px 32px rgba(10, 10, 10, 0.06);
  --shadow-sticker: 0 8px 0 rgba(120, 10, 12, 0.3);    /* nouveau : cartes sur panneau rouge */
  --ring: 0 0 0 3px rgba(221, 38, 40, 0.25);           /* focus visible */

  --container: 1360px;
  --gutter: clamp(16px, 4vw, 40px);
}

/* --- Base ------------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

/* Pages a en-tete et pied : le pied reste en bas de l'ecran. */
body:not(.app-body) {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body:not(.app-body) > main {
  flex: 1 0 auto;
  width: 100%;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-title);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* Echelle des titres : le titre de page en 700, de 30 px (mobile) a 44 px ;
   les titres de carte en 600, de 18 a 20 px. */
h1 {
  font-size: clamp(30px, 3.2vw, 44px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

h2 {
  font-size: 20px;
  line-height: 1.2;
}

h3 {
  font-size: 17px;
  line-height: 1.25;
}

p {
  margin: 0;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--accent-dark);
  font-weight: 600;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--accent-darker);
}

/* Focus visible : l'anneau rouge de la charte (le contour transparent reste
   visible en contraste eleve). */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: var(--ring);
}

/* --- Boutons et etiquettes ------------------------------------------------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.button--small {
  min-height: 44px;
  padding: 0 18px;
  font-size: 14px;
}

.button--large {
  min-height: 52px;
  padding: 0 28px;
  font-size: 16px;
}

/* L'action : rouge de la charte, texte blanc. */
.button--red {
  background: var(--red);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}

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

.button--ink {
  background: var(--ink);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}

.button--ink:hover {
  background: #262626;
  color: var(--white);
}

.tag {
  align-self: flex-start;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tag--ink {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--white);
}

/* Un bouton masque (`hidden`) l'est vraiment, malgre son `display`. */
.button[hidden] {
  display: none;
}

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

/* --- En-tete et pied de page ---------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.site-header__inner,
.site-footer__inner,
.hero__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.site-header__inner {
  min-height: 72px;
  padding-top: 14px;
  padding-bottom: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* Meme taille que l'en-tete de mon-lycee.fr (.mock-logo img). */
.site-header__logo img {
  width: 116px;
  height: auto;
}

.site-footer {
  background: var(--ink);
  color: var(--footer-text);
  font-size: 13px;
}

.site-footer__inner {
  padding-top: 40px;
  padding-bottom: 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.site-footer__inner img {
  height: 32px;
  width: auto;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.site-footer a {
  color: var(--white);
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}

/* --- Haut de page ---------------------------------------------------------- */
.hero {
  background: var(--lilac);
}

.hero__inner {
  padding-top: 24px;
  padding-bottom: clamp(36px, 6vw, 64px);
}

.crumbs ol {
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 13px;
  color: var(--subtle);
}

.crumbs li + li::before {
  content: '›';
  margin-right: 6px;
}

.crumbs a {
  color: var(--muted);
  text-decoration: none;
}

.crumbs a:hover {
  text-decoration: underline;
}

.crumbs [aria-current="page"] {
  font-weight: 700;
  color: var(--ink);
}

.hero__main {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.hero h1 {
  font-size: clamp(26px, 2.8vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.04em;
}

.accent {
  color: var(--red);
}

.lead {
  max-width: 640px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--muted);
}

/* Page introuvable : tout est centre. */
.hero--centre .hero__inner {
  padding-top: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
}

.hero--centre .tag {
  align-self: center;
}

.hero--centre .actions {
  justify-content: center;
}

/* --- Sections et pages de texte ------------------------------------------- */
.section {
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(40px, 7vw, 72px) var(--gutter) 80px;
}

.section--narrow {
  max-width: 820px;
}

.legal {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.legal__section h2 {
  margin-bottom: 12px;
  font-size: clamp(20px, 2vw, 22px);
  line-height: 1.2;
}

.legal p,
.legal li {
  font-size: 16px;
  line-height: 1.7;
  color: var(--muted-2);
}

.legal p + p {
  margin-top: 12px;
}

.legal ul {
  margin: 0 0 12px;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.legal table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 15px;
}

.legal th,
.legal td {
  padding: 10px 14px;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  color: var(--muted-2);
}

.legal thead th {
  background: var(--surface-2);
  color: var(--ink);
  font-weight: 700;
}

.legal h2 {
  margin-top: 12px;
  font-size: clamp(20px, 2vw, 22px);
  line-height: 1.2;
}