/* ==========================================================================
   Sakado — feuille de style
   Couleurs et tailles réglées en haut, dans :root. Changez-les ici, et tout suit.
   ========================================================================== */

@font-face {
  font-family: 'Quicksand';
  src: url('../fonts/quicksand.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('../fonts/bricolage-grotesque.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito Sans';
  src: url('../fonts/nunito-sans.woff2') format('woff2');
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito Sans';
  src: url('../fonts/nunito-sans-italic.woff2') format('woff2');
  font-weight: 200 1000;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Cursive Ecole';
  src: url('../fonts/cursive-ecole.woff2') format('woff2');
  font-weight: 300;
  font-display: block;
}

:root {
  /* Couleurs principales : bleu ciel (le bleu foncé garde un bon contraste pour le texte blanc) */
  --primary: #2A72BD;
  --primary-dark: #1F5C9E;
  --sky-light: #3A8DDE;
  --ink: #1F3550;
  --text: #29405C;
  --text-soft: #4A6079;
  --muted: #5B6F86;
  --line: #E4EEF8;
  --line-strong: #D2E1F1;
  --bg: #FFFFFF;
  --bg-page: #F7FBFF;
  --bg-grey: #F1F7FD;

  /* Pastels, un par cycle, avec leur couleur de texte lisible */
  --mint: #EAF4FF;    --mint-ink: #1F5C9E;
  --coral: #FDE8E3;   --coral-ink: #8A3220;
  --sun: #FFF4D1;     --sun-ink: #7A5600;
  --sky: #DFEDFC;     --sky-ink: #1E5A96;
  --lilac: #EEE8FC;   --lilac-ink: #5B3FA8;
  --green: #E6F5EC;   --green-ink: #1F6B3E;
  --yellow: #FFD25C;
  --red: #FCE4E4;     --red-ink: #A12626;

  /* Typographie : Quicksand, ronde et lisible, pour les titres et le texte */
  --font-title: 'Quicksand', system-ui, sans-serif;
  --font-body: 'Quicksand', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Formes : tout est arrondi, les cartes flottent sur une ombre douce */
  --radius-s: 14px;
  --radius: 18px;
  --radius-l: 28px;
  --radius-xl: 36px;
  --shadow: 0 20px 50px rgba(42, 114, 189, 0.16);
  --shadow-soft: 0 12px 30px rgba(31, 53, 80, 0.08);
  --container: 1240px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
}

h1, h2, h3 {
  font-family: var(--font-title);
  color: var(--ink);
  line-height: 1.1;
  margin: 0 0 .4em;
}
h1 { font-weight: 800; letter-spacing: -0.03em; font-size: clamp(30px, 4vw, 40px); }
h2 { font-weight: 800; letter-spacing: -0.02em; font-size: clamp(26px, 3.2vw, 40px); }
h3 { font-weight: 700; font-size: 21px; }

p { margin: 0 0 1em; }
a { color: var(--primary); }
a:hover { color: var(--primary-dark); }
img, svg { display: block; max-width: 100%; }
.icon { flex: none; }

:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; border-radius: 4px; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.muted { color: var(--muted); }
.muted-dark { color: #4A5964; }
.small { font-size: 14px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--radius-s); }
.skip-link:focus { left: 8px; }

/* --------------------------------------------------------------------------
   Boutons, pastilles, badges
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 18px;
  border-radius: 12px; border: 1.5px solid transparent;
  font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); color: #fff; }
.btn-ghost { background: #fff; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--muted); color: var(--ink); }
.btn-white { background: #fff; color: var(--ink); border-color: #CFE3DA; }
.btn-white:hover { border-color: var(--primary); color: var(--ink); }
.btn-lilac { background: var(--lilac-ink); color: #fff; }
.btn-lilac:hover { background: #4A3290; color: #fff; }
.btn-danger { background: var(--red-ink); color: #fff; }
.btn-danger:hover { background: #821d1d; color: #fff; }
.btn-large { padding: 15px 26px; font-size: 17px; border-radius: var(--radius); }
.btn-small { min-height: 36px; padding: 6px 12px; font-size: 14px; }
.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.pill {
  display: inline-block; align-self: flex-start;
  padding: 6px 14px; border-radius: 999px;
  background: #fff; color: var(--mint-ink); font-weight: 700; font-size: 14px;
}
.pill-white-lilac { color: var(--lilac-ink); }

.tag, .badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 13px; font-weight: 700; white-space: nowrap;
}
.tag-sun { background: var(--sun); color: var(--sun-ink); }
.tag-green { background: var(--green); color: var(--green-ink); }
.tag-red { background: var(--red); color: var(--red-ink); }
.tag-grey { background: var(--bg-grey); color: var(--muted); }
.tag-white { background: #fff; color: var(--mint-ink); }
.badge-green { background: var(--green); color: var(--green-ink); margin-left: 6px; }
.badge-plan-free { background: var(--bg-grey); color: var(--text-soft); }
.badge-plan-crpe { background: var(--lilac); color: var(--lilac-ink); }
.badge-plan-premium, .badge-plan-premium_plus { background: var(--mint); color: var(--mint-ink); }

.tint-mint { background: var(--mint); color: var(--primary); }
.tint-coral { background: var(--coral); color: #B4442D; }
.tint-sun { background: var(--sun); color: var(--sun-ink); }
.tint-sky { background: var(--sky); color: var(--sky-ink); }
.tint-lilac { background: var(--lilac); color: var(--lilac-ink); }

/* --------------------------------------------------------------------------
   En-tête et pied de page
   -------------------------------------------------------------------------- */

.site-header { border-bottom: 1px solid #EEF1F3; background: #fff; }
.header-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 16px; padding-top: 16px; padding-bottom: 16px;
}
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.logo:hover { color: var(--ink); }
.logo-mark {
  width: 40px; height: 40px; border-radius: 12px; background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.logo-text { font-family: var(--font-title); font-weight: 800; font-size: 26px; letter-spacing: -0.02em; }

.header-menu { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; min-width: 0; }
.header-menu .main-nav { margin: 0 auto; }
.nav-toggle {
  display: none; align-items: center; gap: 10px; min-height: 44px; padding: 8px 14px;
  border: 1.5px solid var(--line-strong); border-radius: 12px; background: #fff;
  font: inherit; font-weight: 700; color: var(--ink); cursor: pointer;
}
.nav-toggle-bars { display: inline-flex; flex-direction: column; gap: 4px; width: 20px; }
.nav-toggle-bars span { display: block; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s, opacity .2s; }
.site-header.is-open .nav-toggle-bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.site-header.is-open .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.site-header.is-open .nav-toggle-bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.main-nav { display: flex; flex-wrap: wrap; gap: 2px; }
.main-nav a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px; border-radius: var(--radius-s);
  color: var(--ink); text-decoration: none; font-weight: 600;
}
.main-nav a:hover { background: var(--bg-grey); color: var(--ink); }
.main-nav a[aria-current="page"] { background: var(--mint); color: var(--mint-ink); }
.nav-admin { color: var(--lilac-ink) !important; }

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

.user-chip { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.avatar {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: var(--mint); color: var(--mint-ink);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 800;
}
.avatar-sun { background: var(--yellow); color: #4D3A00; }
.avatar-sky { background: var(--sky); color: var(--sky-ink); }

.site-footer { background: var(--ink); color: #DCE3E8; }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; padding-top: 56px; padding-bottom: 56px; }
.footer-brand { flex: 1 1 280px; }
.footer-brand .logo-text { color: #fff; font-size: 24px; }
.footer-brand p { color: #B8C4CC; max-width: 320px; margin-top: 8px; }
.footer-cols { display: flex; flex-wrap: wrap; gap: 48px; }
.footer-cols nav { display: flex; flex-direction: column; gap: 8px; }
.footer-title { font-weight: 700; color: #fff; }
.footer-cols a { color: #B8C4CC; text-decoration: none; }
.footer-cols a:hover { color: #fff; text-decoration: underline; }

/* --------------------------------------------------------------------------
   Messages flash
   -------------------------------------------------------------------------- */

.flashes { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; margin-bottom: 16px; }
.flash {
  padding: 12px 16px; border-radius: var(--radius); font-weight: 600;
  transition: opacity .4s, max-height .4s, padding .4s, margin .4s;
  max-height: 200px; overflow: hidden;
}
.flash-success { background: var(--green); color: var(--green-ink); }
.flash-error { background: var(--red); color: var(--red-ink); }
.flash-info { background: var(--sky); color: var(--sky-ink); }
.flash.is-hiding { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; }

/* --------------------------------------------------------------------------
   Accueil
   -------------------------------------------------------------------------- */

.hero { background: var(--mint); overflow: hidden; }
.hero-inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 56px;
  padding-top: 72px; padding-bottom: 88px;
}
.hero-text { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.hero h1 { font-size: clamp(42px, 6vw, 64px); line-height: 1.02; margin: 0; }
.lead { font-size: 20px; color: var(--text-soft); max-width: 520px; margin: 0; }
.lead-small { font-size: 18px; color: var(--muted); }
.hero-text .small { margin: 0; }

.hero-visual { flex: 1 1 420px; min-width: 0; position: relative; min-height: 470px; }
.mock-journal {
  position: absolute; top: 0; right: 0; left: 30px;
  background: #fff; border-radius: var(--radius-l); box-shadow: var(--shadow);
  padding: 24px; display: flex; flex-direction: column; gap: 14px;
}
.mock-journal-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.mock-day { font-family: var(--font-title); font-weight: 700; font-size: 22px; color: var(--ink); }
.mock-row { display: flex; gap: 12px; }
.mock-time { width: 56px; flex: none; font-weight: 700; color: var(--muted); font-size: 14px; padding-top: 10px; }
.mock-slot { flex: 1; padding: 10px 14px; border-radius: 12px; display: flex; flex-direction: column; }
.mock-slot span { font-size: 14px; color: var(--text-soft); }
.slot-grey { background: #F3F6F8; }
.slot-coral { background: var(--coral); } .slot-coral strong { color: var(--coral-ink); }
.slot-sky { background: var(--sky); } .slot-sky strong { color: var(--sky-ink); }
.slot-green { background: var(--green); } .slot-green strong { color: var(--green-ink); }
.mock-draw {
  position: absolute; left: 0; bottom: 0; width: 220px;
  background: #fff; border-radius: 18px; box-shadow: var(--shadow-soft);
  padding: 16px; display: flex; flex-direction: column; gap: 6px;
}
.mock-name { font-family: var(--font-title); font-weight: 800; font-size: 30px; color: var(--ink); line-height: 1.1; }
.mock-seats {
  position: absolute; right: -6px; bottom: 30px; width: 190px;
  background: var(--yellow); border-radius: 18px; padding: 16px;
  display: flex; flex-direction: column; gap: 8px; transform: rotate(3deg);
  color: #4D3A00; font-weight: 700;
}
.mock-seats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.mock-seats-grid i { height: 18px; border-radius: 5px; background: #fff; }
.mock-seats-grid i.on { background: var(--ink); }

.section { padding: 88px 0; }
.section-tight-top { padding-top: 24px; }
.section-grey { background: var(--bg-grey); }
.section-band { padding: 0 0; }
.section-head { margin-bottom: 32px; }
.section-head h2 { margin-bottom: 8px; }
.section-head p { color: var(--muted); font-size: 18px; margin: 0; }
.section-head-center { text-align: center; }
.section-head-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }

.cards { display: grid; gap: 20px; }
.cards-3 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.cards-4 { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.cards-5 { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

.cycle-card {
  border-radius: var(--radius-l); padding: 26px;
  display: flex; flex-direction: column; gap: 18px;
  text-decoration: none; color: var(--ink); transition: transform .15s;
}
.cycle-card:hover { transform: translateY(-3px); color: var(--ink); }
.cycle-label { font-size: 14px; font-weight: 700; }
.tint-coral .cycle-label { color: var(--coral-ink); }
.tint-sun .cycle-label { color: var(--sun-ink); }
.tint-sky .cycle-label { color: var(--sky-ink); }
.tint-lilac .cycle-label { color: var(--lilac-ink); }
.cycle-levels { display: flex; flex-wrap: wrap; gap: 8px; }
.level-chip {
  padding: 8px 14px; border-radius: 12px; background: #fff;
  font-family: var(--font-title); font-weight: 800; font-size: 18px; color: var(--ink);
}
.cycle-text { font-size: 15px; color: var(--text-soft); }

.tool-card {
  position: relative; background: #fff;
  border: 1.5px solid var(--line); border-radius: 20px; padding: 24px;
  display: flex; flex-direction: column; gap: 12px;
}
.tool-card h3 { margin: 0; }
.tool-card p { color: var(--muted); font-size: 15px; margin: 0; }
.tool-icon {
  width: 48px; height: 48px; border-radius: var(--radius); flex: none;
  display: flex; align-items: center; justify-content: center;
}
.tool-icon-large { width: 72px; height: 72px; border-radius: 20px; }
.tool-levels { font-size: 13px; font-weight: 700; color: var(--muted); }

.crpe-band {
  background: var(--lilac); border-radius: var(--radius-xl); padding: 56px;
  display: flex; flex-wrap: wrap; gap: 48px; align-items: center;
}
.crpe-text { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.crpe-text h2 { font-size: clamp(30px, 4vw, 44px); margin: 0; }
.crpe-text p { font-size: 18px; color: var(--text-soft); margin: 0; }
.crpe-text .btn { align-self: flex-start; }
.quiz-card {
  flex: 1 1 360px; min-width: 0; background: #fff; border-radius: var(--radius-l); padding: 26px;
  display: flex; flex-direction: column; gap: 10px;
}
.quiz-meta { font-size: 13px; font-weight: 700; color: var(--lilac-ink); }
.quiz-question { font-family: var(--font-title); font-weight: 700; font-size: 20px; line-height: 1.3; color: var(--ink); margin: 0 0 4px; }
.quiz-option { padding: 12px 16px; border-radius: 12px; border: 1.5px solid #E1E6EA; font-weight: 600; }
.quiz-option.is-right {
  border: 2px solid #1F8A4C; background: var(--green); color: #155C33; font-weight: 700;
  display: flex; justify-content: space-between;
}

.split { display: flex; flex-wrap: wrap; gap: 56px; align-items: center; }
.split-text { flex: 1 1 400px; min-width: 0; order: 2; }
.checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.checklist li { display: flex; gap: 10px; align-items: center; font-weight: 600; }
.checklist .icon { color: var(--primary); }
.chat-preview {
  flex: 1 1 420px; min-width: 0; order: 1;
  background: var(--bg-grey); border-radius: var(--radius-l); padding: 24px;
  display: flex; flex-direction: column; gap: 14px;
}
.chat-msg { display: flex; gap: 12px; align-items: flex-start; }
.bubble { background: #fff; border-radius: 4px 16px 16px 16px; padding: 12px 16px; }
.bubble strong { font-size: 14px; }
.bubble p { margin: 2px 0 0; font-size: 15px; }

.pricing { align-items: stretch; }
.price-card {
  position: relative; background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius-l);
  padding: 28px; display: flex; flex-direction: column; gap: 14px;
}
.price-card.is-featured { border: 2.5px solid var(--primary); }
.price-badge {
  position: absolute; top: -14px; left: 24px; padding: 4px 12px; border-radius: 999px;
  background: var(--primary); color: #fff; font-size: 13px; font-weight: 700;
}
.price-card h3 { margin: 0; font-size: 22px; }
.price { font-family: var(--font-title); font-weight: 800; font-size: 40px; color: var(--ink); margin: 0; line-height: 1.1; }
.price span { font-family: var(--font-body); font-weight: 400; font-size: 16px; color: var(--muted); }
.price-text { color: var(--muted); font-size: 15px; flex: 1; margin: 0; }

/* --------------------------------------------------------------------------
   Connexion et inscription
   -------------------------------------------------------------------------- */

.auth { padding: 56px 16px 88px; background: linear-gradient(var(--mint) 0, var(--mint) 220px, #fff 220px); }
.auth-card {
  max-width: 480px; margin: 0 auto; background: #fff;
  border-radius: var(--radius-l); box-shadow: var(--shadow); padding: 36px;
}
.auth-card-center { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.auth-icon {
  width: 56px; height: 56px; border-radius: 50%; background: var(--green); color: var(--green-ink);
  display: flex; align-items: center; justify-content: center; margin-bottom: 8px;
}
.auth-switch { text-align: center; margin: 20px 0 0; color: var(--muted); }

/* --------------------------------------------------------------------------
   Formulaires
   -------------------------------------------------------------------------- */

.field { margin-bottom: 18px; }
.field label, .label-row label { display: block; font-weight: 700; margin-bottom: 6px; }
.label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.small-link { font-size: 14px; }
input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="number"], input[type="date"], select, textarea {
  width: 100%; min-height: 46px; padding: 10px 14px;
  border: 1.5px solid var(--line-strong); border-radius: 12px;
  font: inherit; color: var(--text); background: #fff;
}
input:focus, select:focus, textarea:focus { border-color: var(--primary); outline: 3px solid rgba(42, 114, 189, .2); outline-offset: 0; }
select { width: auto; }
.help { font-size: 14px; color: var(--muted); margin: 6px 0 0; }
.field-error { font-size: 14px; color: var(--red-ink); font-weight: 700; margin: 6px 0 0; }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400 !important; }
.check input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--primary); }
.form-narrow { max-width: 440px; }

.choice-group { border: 0; padding: 0; margin: 0 0 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.choice-group legend { font-weight: 700; margin-bottom: 6px; padding: 0; }
.choice { position: relative; cursor: pointer; }
.choice input { position: absolute; opacity: 0; }
.choice-box {
  display: flex; flex-direction: column; gap: 2px; height: 100%;
  border: 1.5px solid var(--line-strong); border-radius: var(--radius); padding: 14px;
}
.choice-box span { font-size: 14px; color: var(--muted); }
.choice input:checked + .choice-box { border: 2px solid var(--primary); background: var(--mint); padding: 13.5px; }
.choice input:focus-visible + .choice-box { outline: 3px solid var(--primary); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   Espace membre
   -------------------------------------------------------------------------- */

.app-main { padding-bottom: 72px; }
.page-head {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px;
  padding: 32px 0 20px;
}
.page-head h1 { margin: 0; }
.page-head p { margin: 4px 0 0; }

.dash-section { margin-bottom: 40px; }
.dash-title { display: flex; align-items: center; gap: 10px; font-size: 22px; margin-bottom: 16px; }
.dash-title .icon { color: var(--primary); }

.fav-card {
  display: flex; align-items: center; gap: 12px; padding: 14px;
  background: #fff; border: 1.5px solid var(--line); border-radius: 16px;
  text-decoration: none; color: var(--ink); font-weight: 700;
}
.fav-card:hover { border-color: var(--primary); color: var(--ink); }

.tool-card-app { transition: border-color .15s; }
.tool-card-app:hover { border-color: var(--primary); }
.tool-card-top { display: flex; justify-content: space-between; align-items: flex-start; }
.tool-card-app h3 a { color: var(--ink); text-decoration: none; }
.stretched::after { content: ''; position: absolute; inset: 0; border-radius: 20px; }
.fav-form { position: relative; z-index: 2; margin: 0; }
.fav-toggle {
  width: 44px; height: 44px; border-radius: 12px; border: 0; background: transparent;
  color: var(--line-strong); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.fav-toggle:hover { background: var(--bg-grey); color: var(--muted); }
.fav-toggle.is-on, .fav-toggle.is-on:hover { color: #E0A400; }
.fav-toggle.is-on .icon { fill: currentColor; }

.empty {
  padding: 20px 24px; border: 1.5px dashed var(--line-strong); border-radius: 16px;
  color: var(--muted);
}

.upsell {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px;
  background: var(--mint); border-radius: var(--radius-l); padding: 28px 32px;
}
.upsell h2 { font-size: 24px; margin: 0 0 4px; }
.upsell p { margin: 0; color: var(--text-soft); }

.coming-soon { max-width: 560px; margin: 56px auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.coming-soon .btn { margin-top: 8px; }

.panel { background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius-l); padding: 28px; }
.panel h2 { font-size: 22px; margin-bottom: 16px; }
.panel-danger { border-color: #F2C4C4; }
.stack-lg { display: flex; flex-direction: column; gap: 24px; }

.info-list { margin: 0; display: grid; gap: 12px; }
.info-list div { display: grid; grid-template-columns: 160px 1fr; gap: 12px; align-items: center; }
.info-list dt { color: var(--muted); font-weight: 600; }
.info-list dd { margin: 0; font-weight: 600; }

/* --------------------------------------------------------------------------
   Administration
   -------------------------------------------------------------------------- */

.tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 24px; border-bottom: 1.5px solid var(--line); padding-bottom: 10px; }
.tabs a { padding: 8px 14px; border-radius: var(--radius-s); text-decoration: none; color: var(--text); font-weight: 700; }
.tabs a:hover { background: var(--bg-grey); }
.tabs a[aria-current="page"] { background: var(--ink); color: #fff; }
.tab-soon { font-size: 13px; color: var(--muted); margin-left: 8px; }

.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; }
.stat { background: var(--bg-grey); border-radius: var(--radius); padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; }
.stat-label { font-size: 14px; color: var(--muted); font-weight: 600; }
.stat-value { font-family: var(--font-title); font-size: 34px; font-weight: 800; color: var(--ink); line-height: 1.1; }
.stat-value.is-alert { color: var(--red-ink); }

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; }

.table-wrap { overflow-x: auto; border: 1.5px solid var(--line); border-radius: var(--radius-l); }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.table thead th { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); background: var(--bg-grey); }
.table tbody tr:last-child th, .table tbody tr:last-child td { border-bottom: 0; }
.table th[scope="row"] { font-weight: 600; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.table-users { min-width: 820px; }
.verified { display: inline-flex; vertical-align: middle; color: var(--green-ink); margin-left: 4px; }

.search-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.search-bar input { flex: 1 1 260px; width: auto; }

.actions { position: relative; }
.actions summary { list-style: none; }
.actions summary::-webkit-details-marker { display: none; }
.actions-panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 10; width: 340px;
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-soft);
  padding: 16px; display: flex; flex-direction: column; gap: 16px;
}
.actions-panel form { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.actions-title { font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.inline-fields { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.inline-fields select { min-height: 36px; padding: 4px 10px; font-size: 14px; }
.actions-panel input[type="text"] { min-height: 38px; font-size: 14px; }

.pagination { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; }
.pagination a {
  min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-s); border: 1.5px solid var(--line); text-decoration: none; color: var(--text); font-weight: 700;
}
.pagination a[aria-current="page"] { background: var(--primary); border-color: var(--primary); color: #fff; }

/* --------------------------------------------------------------------------
   Pages de texte et erreurs
   -------------------------------------------------------------------------- */

.prose { max-width: 760px; }
.prose h2 { font-size: 24px; margin-top: 1.6em; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: .4em; }
.note { background: var(--sun); color: var(--sun-ink); padding: 12px 16px; border-radius: var(--radius); font-weight: 600; }

.error-page { text-align: center; max-width: 620px; }
.error-code { font-family: var(--font-title); font-weight: 800; font-size: 88px; color: var(--primary); line-height: 1; margin-bottom: 8px; }

/* --------------------------------------------------------------------------
   Gestion de classe
   -------------------------------------------------------------------------- */

.back-link { display: inline-block; margin-bottom: 6px; font-weight: 700; text-decoration: none; font-size: 15px; }
.dash-title-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }

.level-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 8px;
  font-family: var(--font-title); font-weight: 800; font-size: 14px;
}
.level-pill.tint-coral { color: var(--coral-ink); }
.level-count { font-family: var(--font-body); font-weight: 700; font-size: 12px; background: rgba(255,255,255,.7); border-radius: 6px; padding: 0 6px; }

.class-card {
  display: flex; flex-direction: column; gap: 10px;
  background: #fff; border: 1.5px solid var(--line); border-radius: 20px; padding: 20px 22px;
  text-decoration: none; color: var(--ink); transition: border-color .15s, transform .15s;
}
.class-card:hover { border-color: var(--primary); color: var(--ink); transform: translateY(-2px); }
.class-card.is-archived { background: var(--bg-grey); }
.class-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.class-levels { display: flex; flex-wrap: wrap; gap: 6px; }
.class-name { font-family: var(--font-title); font-weight: 700; font-size: 22px; line-height: 1.15; }
.class-meta { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 15px; font-weight: 600; }

.empty-state { text-align: center; max-width: 520px; margin: 32px auto; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.empty-state h2 { font-size: 26px; margin-top: 10px; }
.upsell-small { margin-top: 24px; padding: 18px 22px; }
.upsell-small p { margin: 0; }
.archives { margin-top: 40px; }
.archives summary { cursor: pointer; font-weight: 700; color: var(--muted); margin-bottom: 16px; }

.form-panel { max-width: 640px; }
.level-picker { border: 0; padding: 0; margin: 0 0 22px; }
.level-picker legend { font-weight: 700; padding: 0; }
.level-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 12px; }
.level-row-label { width: 170px; font-size: 14px; font-weight: 700; color: var(--muted); }
.level-options { display: flex; flex-wrap: wrap; gap: 8px; }
.level-option { position: relative; cursor: pointer; background: transparent !important; }
.level-option input { position: absolute; opacity: 0; }
.level-option span {
  display: inline-flex; align-items: center; justify-content: center; min-width: 64px; min-height: 48px; padding: 0 14px;
  border: 1.5px solid var(--line-strong); border-radius: 12px; background: #fff;
  font-family: var(--font-title); font-weight: 800; font-size: 18px; color: var(--ink);
}
.level-option.tint-coral input:checked + span { background: var(--coral); border-color: var(--coral-ink); color: var(--coral-ink); }
.level-option.tint-sun input:checked + span { background: var(--sun); border-color: var(--sun-ink); color: var(--sun-ink); }
.level-option.tint-sky input:checked + span { background: var(--sky); border-color: var(--sky-ink); color: var(--sky-ink); }
.level-option input:checked + span::before { content: '✓'; font-size: 14px; margin-right: 6px; }
.level-option input:focus-visible + span { outline: 3px solid var(--primary); outline-offset: 2px; }

.class-head { align-items: flex-end; }
.class-head-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.head-actions { display: flex; gap: 8px; align-items: flex-start; }

.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: 320px;
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-soft);
  padding: 8px; display: flex; flex-direction: column;
}
.menu-form { margin: 0; padding: 10px; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid var(--line); }
.menu-form:last-child { border-bottom: 0; }
.menu-form p { margin: 0; }
.menu-form input[type="text"], .menu-form select { min-height: 40px; font-size: 15px; width: 100%; }
.menu-title { font-weight: 800; color: var(--ink); }
.menu-item {
  text-align: left; background: none; border: 0; padding: 8px 6px; border-radius: 8px;
  font: inherit; font-weight: 700; color: var(--text); cursor: pointer;
}
.menu-item:hover { background: var(--bg-grey); }
.menu-item-danger { color: var(--red-ink); }
.menu-danger .menu-title { color: var(--red-ink); }

.notice { background: var(--sun); color: var(--sun-ink); padding: 12px 16px; border-radius: var(--radius); font-weight: 600; margin-bottom: 20px; }

.class-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.class-layout .panel h2 { margin-bottom: 12px; }

textarea { min-height: 0; resize: vertical; line-height: 1.5; }
.add-students { background: var(--bg-grey); border-radius: var(--radius); padding: 16px; margin-bottom: 20px; }
.add-students label { display: block; font-weight: 700; margin-bottom: 6px; }
.add-students .help { margin-bottom: 10px; }
.add-students .inline-fields label { display: inline; margin: 0; }

.level-heading { display: flex; align-items: center; gap: 10px; font-family: var(--font-body); font-size: 15px; font-weight: 700; color: var(--muted); margin: 18px 0 8px; }
.student-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.student {
  display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 8px;
  border: 1.5px solid var(--line); border-radius: 14px; background: #fff;
}
.student-name { flex: 1; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.student .avatar { width: 32px; height: 32px; font-size: 14px; }
.avatar-coral { background: var(--coral); color: var(--coral-ink); }
.icon-btn {
  width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  color: var(--muted);
}
.icon-btn:hover { background: var(--bg-grey); color: var(--ink); }
.menu-right .menu-panel { width: 260px; }

.group-card { border-radius: 18px; padding: 16px 18px; margin-bottom: 12px; }
.group-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.group-top h3 { font-size: 19px; margin: 0; }
.group-top .small { font-weight: 700; color: var(--text-soft); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip { background: rgba(255,255,255,.85); border-radius: 999px; padding: 3px 10px; font-size: 14px; font-weight: 700; }
.group-empty { color: var(--text-soft); margin: 8px 0 0; }
.group-edit { margin-top: 10px; }
.group-edit summary { cursor: pointer; font-weight: 700; color: var(--ink); font-size: 14px; }
.group-edit form { margin: 10px 0 0; display: flex; flex-direction: column; gap: 10px; }
.group-edit input[type="text"] { background: #fff; }
.color-picker, .member-picker { border: 0; margin: 0; padding: 0; }
.color-picker legend, .member-picker legend { font-weight: 700; padding: 0; margin-bottom: 6px; }
.color-picker { display: flex; gap: 8px; flex-wrap: wrap; }
.swatch { position: relative; width: 36px; height: 36px; border-radius: 50%; border: 2px solid rgba(18,33,44,.15); cursor: pointer; }
.swatch input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.swatch:has(input:checked) { border: 3px solid var(--ink); }
.swatch:has(input:focus-visible) { outline: 3px solid var(--primary); outline-offset: 2px; }
.member-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; background: rgba(255,255,255,.7); border-radius: 12px; padding: 10px; }
.member-picker legend { float: left; width: 100%; }
.member { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; cursor: pointer; padding: 4px 2px; }
.member input { width: 18px; height: 18px; accent-color: var(--primary); flex: none; }
.member em { font-style: normal; font-size: 12px; color: var(--muted); }
.link-danger { background: none; border: 0; padding: 4px 0; color: var(--red-ink); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.group-edit form + form { margin-top: 6px; }
.new-group { border-top: 1.5px dashed var(--line-strong); padding-top: 16px; margin-top: 4px; }
.new-group label { display: block; font-weight: 700; margin-bottom: 6px; }
.new-group input[type="text"] { flex: 1 1 180px; width: auto; }

@media (max-width: 900px) {
  .class-layout { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .class-head { align-items: flex-start; }
  .menu-panel { width: min(320px, calc(100vw - 48px)); }
  .level-row-label { width: 100%; }
}

/* --------------------------------------------------------------------------
   Emploi du temps
   -------------------------------------------------------------------------- */

.edt-head { align-items: flex-end; }
.edt-help { color: var(--muted); margin: -4px 0 18px; }
.toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1.5px solid var(--line-strong); border-radius: 12px; font-weight: 700; cursor: pointer; }
.toggle input { width: 18px; height: 18px; accent-color: var(--primary); }

.edt-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.edt-wrap { overflow-x: auto; border: 1.5px solid var(--line); border-radius: var(--radius-l); background: #fff; }
.edt-grid { display: grid; min-width: 560px; padding-bottom: 12px; }
.edt-corner { border-bottom: 1.5px solid var(--line); }
.edt-dayhead {
  padding: 12px 8px; text-align: center; font-weight: 800; font-family: var(--font-title); font-size: 17px; color: var(--ink);
  border-bottom: 1.5px solid var(--line); border-left: 1px solid var(--line);
}
.edt-times { position: relative; }
.edt-time { position: absolute; right: 8px; transform: translateY(-50%); font-size: 12px; font-weight: 700; color: var(--muted); }
.edt-time:first-child { transform: none; }
.edt-day {
  position: relative; border-left: 1px solid var(--line);
  background-image: repeating-linear-gradient(to bottom, var(--line) 0, var(--line) 1px, transparent 1px, transparent var(--hour));
}
.edt-day.is-editable { cursor: cell; }
.edt-day.is-editable:hover { background-color: #FBFCFC; }

.edt-slot {
  position: absolute; display: flex; flex-direction: column; gap: 1px; overflow: hidden;
  padding: 5px 8px; border: 0; border-radius: 10px; text-align: left;
  font: inherit; font-size: 13px; line-height: 1.25; color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(18, 33, 44, .08);
  touch-action: manipulation; user-select: none;
}
button.edt-slot { cursor: grab; }
button.edt-slot:hover { box-shadow: inset 0 0 0 2px rgba(18, 33, 44, .35); }
.edt-slot.is-copy { outline: 2px dashed var(--primary); outline-offset: -2px; }
.edt-slot.is-dragging { cursor: grabbing; pointer-events: none; z-index: 5; box-shadow: 0 10px 24px rgba(18, 33, 44, .22), inset 0 0 0 2px var(--primary); opacity: .95; }
.edt-slot > * { flex-shrink: 0; }
.edt-slot-time { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.edt-slot-title { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.edt-slot-sub { color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.edt-slot-meta { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--text-soft); font-size: 12px; }
.edt-slot-level { background: rgba(255, 255, 255, .8); border-radius: 6px; padding: 0 5px; font-weight: 800; color: var(--ink); }
.edt-slot.is-short { flex-direction: row; align-items: center; gap: 6px; padding-top: 2px; padding-bottom: 2px; }
.edt-slot.is-short .edt-slot-sub, .edt-slot.is-short .edt-slot-time { display: none; }
.edt-kind-recre, .edt-kind-pause { color: var(--muted); }
.edt-kind-pause { background-image: repeating-linear-gradient(45deg, transparent 0 8px, rgba(18,33,44,.04) 8px 16px); }
.edt-resize { position: absolute; left: 0; right: 0; bottom: 0; height: 9px; cursor: ns-resize; }
.edt-resize::after { content: ''; position: absolute; left: 50%; bottom: 3px; width: 22px; height: 3px; margin-left: -11px; border-radius: 2px; background: rgba(18,33,44,.25); opacity: 0; }
button.edt-slot:hover .edt-resize::after { opacity: 1; }

.edt-side { position: sticky; top: 16px; }
.edt-hours h2 { font-size: 20px; }
.hours-level + .hours-level { border-top: 1.5px solid var(--line); margin-top: 18px; padding-top: 14px; }
.hours-level-title { font-size: 17px; margin-bottom: 4px; }
.hours-ref { font-size: 13px; color: var(--muted); margin: 0 0 10px; }
.hours-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.hours-row-top { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.hours-name { font-weight: 700; }
.hours-value { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text-soft); }
.hours-bar { height: 6px; border-radius: 3px; background: var(--bg-grey); margin-top: 4px; overflow: hidden; }
.hours-bar span { display: block; height: 100%; border-radius: 3px; background: var(--primary); }
.hours-row.is-under .hours-bar span { background: #D98C1F; }
.hours-row.is-over .hours-bar span { background: var(--sky-ink); }
.hours-gap { display: block; font-size: 12px; font-weight: 700; margin-top: 2px; }
.hours-row.is-under .hours-gap { color: #8A5300; }
.hours-row.is-over .hours-gap { color: var(--sky-ink); }
.hours-total { margin: 14px 0 0; font-size: 15px; }
.hours-note { font-size: 13px; color: var(--muted); margin: 8px 0 0; }

/* Fenêtre d'édition (réutilisable) */
.dialog { border: 0; padding: 0; border-radius: var(--radius-l); width: min(480px, calc(100vw - 24px)); box-shadow: 0 24px 60px rgba(18,33,44,.25); color: var(--text); }
.dialog::backdrop { background: rgba(18, 33, 44, .4); }
.dialog-body { padding: 26px; margin: 0; }
.dialog-body h2 { font-size: 24px; margin-bottom: 16px; }
.dialog-body select { width: 100%; }
.dialog-body fieldset { border: 0; padding: 0; }
.dialog-body legend { font-weight: 700; padding: 0; margin-bottom: 6px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dialog-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.dialog-actions .spacer { flex: 1; }
.day-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.day-option { position: relative; cursor: pointer; }
.day-option input { position: absolute; opacity: 0; }
.day-option span { display: inline-flex; align-items: center; justify-content: center; min-width: 56px; min-height: 44px; padding: 0 10px; border: 1.5px solid var(--line-strong); border-radius: 12px; font-weight: 700; }
.day-option input:checked + span { background: var(--mint); border-color: var(--primary); color: var(--mint-ink); }
.day-option input:focus-visible + span { outline: 3px solid var(--primary); outline-offset: 2px; }
input[type="time"] { width: 100%; min-height: 46px; padding: 8px 12px; border: 1.5px solid var(--line-strong); border-radius: 12px; font: inherit; }

.print-only { display: none; }

@media (max-width: 1000px) {
  .edt-layout { grid-template-columns: 1fr; }
  .edt-side { position: static; }
}

@media print {
  @page { margin: 10mm; }
  @page paysage { size: A4 landscape; }
  .page-timetable main, .page-journal-week main { page: paysage; }
  body { background: #fff; }
  .site-header, .flashes, .no-print, .edt-side, .skip-link { display: none !important; }
  .print-only { display: block; }
  .app-main { padding: 0; }
  .container { max-width: none; padding: 0; }
  .page-head { padding: 0 0 8px; }
  .edt-layout { display: block; }
  .edt-wrap { overflow: visible; border: 0; }
  .edt-grid { min-width: 0; }
  .edt-slot { box-shadow: inset 0 0 0 1px rgba(18,33,44,.25); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .page-timetable .page-head h1 { font-size: 22px; margin: 0; }
  .page-timetable .edt-dayhead { padding: 6px; font-size: 14px; }
  .page-timetable .edt-slot { font-size: 11px; padding: 2px 6px; border-radius: 6px; }
  .page-timetable .edt-slot-meta { font-size: 10px; }
  .page-timetable .edt-time { font-size: 10px; }
  .page-timetable .edt-grid { padding-bottom: 6px; break-inside: avoid; }
  .edt-resize { display: none; }
  .edt-slot:focus, .edt-slot:focus-visible { outline: none; }
}

/* --------------------------------------------------------------------------
   Cahier journal
   -------------------------------------------------------------------------- */

.head-actions { flex-wrap: wrap; }
.journal-head { align-items: flex-end; }
.tabs-inline { display: inline-flex; gap: 4px; background: var(--bg-grey); border-radius: 12px; padding: 4px; }
.tabs-inline a { padding: 8px 16px; border-radius: 9px; text-decoration: none; color: var(--text); font-weight: 700; }
.tabs-inline a:hover { background: #fff; }
.tabs-inline a[aria-current="page"] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(18,33,44,.12); }

.date-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; }
.date-title { margin: 0; font-size: clamp(22px, 2.6vw, 28px); min-width: 0; }
.date-bar .spacer { flex: 1; }
.date-jump { margin: 0; }
.date-jump input { min-height: 36px; padding: 4px 10px; border: 1.5px solid var(--line-strong); border-radius: 10px; font: inherit; font-size: 14px; }
.icon-btn-large { width: 40px; height: 40px; font-size: 26px; line-height: 1; text-decoration: none; border: 1.5px solid var(--line-strong); color: var(--ink); }
.icon-btn.is-disabled { opacity: .35; }

.save-line { margin: -6px 0 16px; font-size: 14px; }
.save-status { color: var(--muted); }
.save-status.is-error { color: var(--red-ink); font-weight: 700; }

.sessions { display: flex; flex-direction: column; gap: 14px; }
.session { background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius-l); padding: 16px 20px 18px; }
.session:focus-within { border-color: var(--primary); }
.session-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.session-time { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.session-subject { padding: 4px 12px; border-radius: 999px; font-weight: 800; font-family: var(--font-title); color: var(--ink); }
.session-label {
  flex: 1 1 180px; min-width: 0; min-height: 36px !important; padding: 4px 10px !important;
  border-color: transparent !important; background: var(--bg-grey) !important; font-weight: 600;
}
.session-label:focus { background: #fff !important; border-color: var(--primary) !important; }
.session-head .spacer { flex: 1; }
.session-state { font-size: 13px; font-weight: 700; color: var(--muted); min-width: 90px; text-align: right; }
.session-state.is-saved { color: var(--green-ink); }
.session-state.is-error { color: var(--red-ink); }
.session-delete { font-size: 22px; line-height: 1; border: 0; background: none; cursor: pointer; }

.session-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.sf label { display: block; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 4px; }
.sf textarea {
  width: 100%; min-height: 42px; padding: 8px 12px; border: 1.5px solid var(--line); border-radius: 12px;
  font: inherit; line-height: 1.5; resize: none; overflow: hidden; background: #fff;
}
.sf textarea:focus { border-color: var(--primary); }
.sf textarea[readonly] { background: var(--bg-grey); }
.sf-objective, .sf-activity, .sf-review { grid-column: 1 / -1; }
.sf-review textarea { background: #FBFCFC; border-style: dashed; }

.session-break {
  display: flex; align-items: center; gap: 12px; padding: 6px 16px;
  color: var(--muted); font-weight: 700; font-size: 14px;
}
.session-break::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.journal-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 20px; }
.add-session { width: 100%; }
.add-session > summary { list-style: none; display: inline-flex; }
.add-session > summary::-webkit-details-marker { display: none; }
.add-session-form { margin-top: 12px; max-width: 760px; }
.field-row-4 { grid-template-columns: 120px 120px minmax(0, 1fr) minmax(0, 1fr); }

.week-grid { display: grid; grid-template-columns: repeat(var(--days), minmax(170px, 1fr)); gap: 12px; overflow-x: auto; }
.week-day { background: var(--bg-grey); border-radius: var(--radius-l); padding: 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.week-day.is-today { background: var(--mint); }
.week-day-title { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 18px; margin: 0 0 4px; }
.week-day-title a { color: var(--ink); text-decoration: none; }
.week-day-title a:hover { text-decoration: underline; }
.week-session {
  display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; border-radius: 12px;
  text-decoration: none; color: var(--ink); font-size: 14px; box-shadow: inset 0 0 0 1px rgba(18,33,44,.06);
}
.week-session:hover { box-shadow: inset 0 0 0 2px rgba(18,33,44,.3); color: var(--ink); }
.week-session-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.week-session-time { font-size: 12px; font-weight: 700; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.week-session-label { color: var(--text-soft); font-size: 13px; }
.week-session-obj { font-size: 13px; color: var(--text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.week-session-empty { font-size: 12px; color: var(--muted); font-style: italic; }

.results { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.result { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px; border: 1.5px solid var(--line); border-radius: 16px; text-decoration: none; color: var(--text); }
.result:hover { border-color: var(--primary); color: var(--text); }
.result-text { color: var(--text-soft); font-size: 15px; }
.result mark { background: var(--sun); color: var(--ink); border-radius: 3px; padding: 0 2px; }

@media (max-width: 760px) {
  .session-fields { grid-template-columns: 1fr; }
  .field-row-4 { grid-template-columns: 1fr 1fr; }
  .session { padding: 14px; }
  .week-grid { grid-template-columns: 1fr; }
}

@media print {
  .page-journal .session { break-inside: avoid; border: 1px solid #ccd; padding: 10px 12px; }
  .page-journal .sessions { gap: 8px; }
  .page-journal .sf textarea { border: 0; padding: 0; min-height: 0; background: none !important; }
  .page-journal .sf textarea:placeholder-shown { display: none; }
  .page-journal .sf:has(textarea:placeholder-shown) { display: none; }
  .page-journal .session-label { background: none !important; padding: 0 !important; }
  .page-journal .session-label:placeholder-shown { display: none; }
  .page-journal .session-state { display: none; }
  .page-journal .week-grid { grid-template-columns: repeat(var(--days), 1fr); overflow: visible; }
  .page-journal .week-day { background: none; border: 1px solid #ccd; }
  .page-journal .week-session { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .page-journal .date-bar { margin-bottom: 8px; }
}

/* --------------------------------------------------------------------------
   Outils de la classe (bandeau sous le titre)
   -------------------------------------------------------------------------- */

.class-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-bottom: 22px; }
.class-tool {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  border: 1.5px solid var(--line); border-radius: 16px; background: #fff;
  text-decoration: none; color: var(--ink); font-weight: 800;
}
.class-tool:hover { border-color: var(--primary); color: var(--ink); }
.class-tool .tool-icon { width: 40px; height: 40px; border-radius: 12px; }

/* --------------------------------------------------------------------------
   Plan de classe
   -------------------------------------------------------------------------- */

.seating-head { align-items: flex-end; }
.plan-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.plan-tabs > a { padding: 8px 14px; border-radius: 10px; text-decoration: none; color: var(--text); font-weight: 700; border: 1.5px solid var(--line); }
.plan-tabs > a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.plan-tab-add { padding: 8px 14px; border-radius: 10px; font-weight: 700; color: var(--primary); border: 1.5px dashed var(--line-strong); }
.menu-panel-wide { width: min(460px, calc(100vw - 32px)); padding: 18px; }

.seating-empty { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 28px; align-items: start; }
.create-plan .field:last-of-type { margin-bottom: 14px; }
.preset-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.preset-option { position: relative; cursor: pointer; }
.preset-option input { position: absolute; opacity: 0; }
.preset-box { display: flex; align-items: center; gap: 12px; height: 100%; padding: 10px 12px; border: 1.5px solid var(--line-strong); border-radius: 14px; font-weight: 700; font-size: 14px; }
.preset-option input:checked + .preset-box { border: 2px solid var(--primary); background: var(--mint); padding: 9.5px 11.5px; }
.preset-option input:focus-visible + .preset-box { outline: 3px solid var(--primary); outline-offset: 2px; }
.mini-layout { flex: none; display: grid; grid-template-columns: repeat(5, 9px); gap: 3px; }
.mini-layout i, .mini-layout b { width: 9px; height: 7px; border-radius: 2px; }
.mini-layout i { background: var(--sun-ink); opacity: .55; }
.mini-layout b { background: transparent; }
.ml-vide b { background: var(--line); }

.seat-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.seat-toolbar .spacer { flex: 1; }
.segmented { display: inline-flex; background: var(--bg-grey); border-radius: 12px; padding: 4px; gap: 2px; }
.segmented button { border: 0; background: none; padding: 7px 14px; border-radius: 9px; font: inherit; font-weight: 700; color: var(--text); cursor: pointer; min-height: 36px; }
.segmented button.is-active { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(18,33,44,.12); }
.toggle-small { min-height: 36px; padding: 0 12px; font-size: 14px; }
.grid-size { display: grid; grid-template-columns: auto 72px; gap: 6px 10px; align-items: center; }
.grid-size input { min-height: 36px; padding: 4px 8px; border: 1.5px solid var(--line-strong); border-radius: 10px; font: inherit; width: 72px; }
.seat-help { color: var(--muted); margin: 0 0 14px; min-height: 1.5em; }

.seat-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 20px; align-items: start; }
.seat-room { background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius-l); padding: 16px; }
.seat-board {
  margin: 0 auto 16px; width: 55%; padding: 8px; border-radius: 8px; text-align: center;
  background: #24433A; color: #EAF4FF; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: 13px;
}
.seat-board-bottom { display: none; margin: 16px auto 0; }
.seat-room.is-flipped .seat-board:first-child { display: none; }
.seat-room.is-flipped .seat-board-bottom { display: block; }
.seat-grid { display: grid; gap: 8px; }
.seat-empty { aspect-ratio: 3 / 2; border-radius: 10px; }
button.seat-empty {
  border: 1.5px dashed var(--line-strong); background: transparent; color: var(--muted); font-size: 20px; cursor: pointer;
}
button.seat-empty:hover { border-color: var(--primary); color: var(--primary); background: var(--mint); }
.desk {
  aspect-ratio: 3 / 2; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 1.5px solid #D9C9A3; border-radius: 10px; background: #FBF6EA; padding: 4px;
  font: inherit; color: var(--muted); font-size: 13px; text-align: center; overflow: hidden;
}
.desk:not(.is-taken) { background: #fff; border-style: dashed; }
.desk.is-taken { color: var(--ink); font-weight: 800; border-color: rgba(18,33,44,.15); }
.desk.is-taken.tint-sun { background: var(--sun); }
.desk-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(11px, 1.2vw, 15px); }
.desk-level { font-size: 11px; font-weight: 800; background: rgba(255,255,255,.75); border-radius: 5px; padding: 0 5px; margin-left: 4px; }
.desk .desk-level { margin: 0; }
button.desk { cursor: pointer; }
button.desk:hover { box-shadow: 0 0 0 2px rgba(18,33,44,.25); }
.desk.is-selected, .pool-chip.is-selected { box-shadow: 0 0 0 3px var(--primary) !important; }
.desk.is-drop { box-shadow: 0 0 0 3px var(--primary); transform: scale(1.04); }
.desk.is-dragging, .pool-chip.is-dragging { opacity: .4; }
.is-desk-mode .desk { border-style: solid; }
.is-desk-mode button.desk:hover { box-shadow: 0 0 0 2px var(--red-ink); background: var(--red); }

.seat-side { position: sticky; top: 16px; }
.seat-pool h2 { font-size: 19px; margin-bottom: 10px; }
.seat-pool .count { color: var(--muted); font-weight: 600; font-family: var(--font-body); font-size: 15px; }
.seat-pool.is-drop { border-color: var(--primary); background: var(--mint); }
.seat-pool-list { display: flex; flex-wrap: wrap; gap: 6px; }
.pool-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; min-height: 36px;
  border: 0; border-radius: 999px; font: inherit; font-weight: 700; font-size: 14px; color: var(--ink); cursor: grab;
}
.pool-warning { width: 100%; margin: 8px 0 0; font-size: 13px; font-weight: 700; color: var(--sun-ink); }
.save-status.is-error { color: var(--red-ink); font-weight: 700; }

/* --------------------------------------------------------------------------
   Outils TBI
   -------------------------------------------------------------------------- */

.tbi { background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius-l); overflow: hidden; }
.tbi.is-fullscreen { position: fixed; inset: 0; z-index: 50; border-radius: 0; border: 0; overflow: auto; }
.tbi:fullscreen { overflow: auto; }
.tbi-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 10px; background: var(--bg-grey); border-bottom: 1.5px solid var(--line); }
.tbi-tabs .spacer { flex: 1; }
.tbi-tabs [role="tab"], .tbi-exit {
  border: 0; background: none; padding: 10px 16px; border-radius: 10px; min-height: 44px;
  font: inherit; font-weight: 800; color: var(--text-soft); cursor: pointer;
}
.tbi-tabs [role="tab"][aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(18,33,44,.12); }
.tbi-exit { color: var(--primary); }
.tbi-panel { padding: 24px; min-height: 480px; display: flex; flex-direction: column; gap: 20px; }
.tbi-panel[hidden] { display: none; }
.tbi-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; font-weight: 700; }
.tbi-controls select { width: auto; min-height: 40px; margin-left: 6px; }
.tbi-controls .check { font-weight: 600; }
.tbi-number input { width: 80px; min-height: 40px; padding: 4px 10px; border: 1.5px solid var(--line-strong); border-radius: 10px; font: inherit; }
.tbi-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; }
.btn-huge { min-height: 60px; padding: 14px 34px; font-size: 22px; border-radius: 18px; }
.tbi-note { text-align: center; color: var(--muted); margin: 0; }

.draw-stage { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 240px; }
.draw-names { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 40px; }
.draw-name, .draw-placeholder {
  font-family: var(--font-title); font-weight: 800; color: var(--ink); line-height: 1;
  font-size: clamp(56px, 11vw, 150px); letter-spacing: -0.02em;
}
.draw-names.is-many .draw-name { font-size: clamp(40px, 6vw, 90px); }
.draw-placeholder { color: var(--line-strong); }
.draw-names:not(.is-final) .draw-name { color: var(--muted); }
.draw-names.is-final .draw-name { animation: pop .35s ease-out; color: var(--primary); }
@keyframes pop { from { transform: scale(.85); opacity: .4; } to { transform: scale(1); opacity: 1; } }

.grp-result { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.grp-result .tbi-note { grid-column: 1 / -1; }
.grp-card { border-radius: 18px; padding: 16px 18px; }
.grp-card h3 { font-size: 20px; margin: 0 0 8px; }
.grp-card ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.grp-card li { font-size: clamp(16px, 1.6vw, 22px); font-weight: 700; color: var(--ink); }

.timer-presets { justify-content: center; }
.chip-btn { border: 1.5px solid var(--line-strong); background: #fff; border-radius: 999px; padding: 8px 16px; min-height: 40px; font: inherit; font-weight: 800; cursor: pointer; }
.chip-btn.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.timer-custom input { width: 80px; min-height: 40px; margin-left: 6px; padding: 4px 10px; border: 1.5px solid var(--line-strong); border-radius: 10px; font: inherit; }
.timer-stage { position: relative; width: min(64vh, 420px, 100%); aspect-ratio: 1; margin: 0 auto; }
.timer-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.timer-track { fill: none; stroke: var(--bg-grey); stroke-width: 18; }
.timer-bar { fill: none; stroke: var(--primary); stroke-width: 18; stroke-linecap: round; transition: stroke-dashoffset .25s linear, stroke .3s; }
.timer-bar.is-mid { stroke: #D98C1F; }
.timer-bar.is-late { stroke: var(--red-ink); }
.timer-digits {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-title); font-weight: 800; font-size: clamp(48px, 9vw, 96px); color: var(--ink); font-variant-numeric: tabular-nums;
}
.timer-digits.is-done { color: var(--red-ink); font-size: clamp(36px, 6vw, 64px); }

.noise-stage { flex: 1; display: flex; align-items: center; justify-content: center; gap: 40px; flex-wrap: wrap; }
.noise-face { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.noise-face svg { width: min(40vh, 240px); height: auto; }
.noise-face-bg { fill: var(--bg-grey); transition: fill .3s; }
.noise-eye { fill: var(--ink); }
.noise-mouth { fill: none; stroke: var(--ink); stroke-width: 6; stroke-linecap: round; }
.noise-face[data-level="calm"] .noise-face-bg { fill: #BFE8D2; }
.noise-face[data-level="mid"] .noise-face-bg { fill: #FFD98A; }
.noise-face[data-level="loud"] .noise-face-bg { fill: #F6A9A0; }
.noise-label { font-family: var(--font-title); font-weight: 800; font-size: clamp(28px, 4vw, 48px); color: var(--ink); }
.noise-meter { position: relative; width: 56px; height: min(46vh, 300px); border-radius: 28px; background: var(--bg-grey); overflow: hidden; }
.noise-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: linear-gradient(to top, #2E9E6B 0 45%, #E3A126 45% 75%, #D9534F 75%); background-size: 100% min(46vh, 300px); background-position: bottom; transition: height .1s linear; }
.noise-mark { position: absolute; left: 0; right: 0; height: 2px; background: rgba(18,33,44,.35); }
.noise-mark-1 { bottom: 45%; }
.noise-mark-2 { bottom: 75%; }
.noise-sens { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; }

.ritual-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.ritual-card { background: var(--bg-grey); border-radius: 20px; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.ritual-date { background: var(--mint); grid-column: 1 / -1; text-align: center; align-items: center; }
.ritual-kicker { margin: 0; font-weight: 800; color: var(--text-soft); text-transform: uppercase; letter-spacing: .05em; font-size: 14px; }
.ritual-today { margin: 0; font-family: var(--font-title); font-weight: 800; font-size: clamp(36px, 6vw, 72px); color: var(--ink); line-height: 1.05; }
.ritual-sub { margin: 0; font-size: clamp(16px, 1.8vw, 22px); color: var(--text-soft); }
.ritual-week { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.week-chip { padding: 6px 12px; border-radius: 10px; background: #fff; font-weight: 800; color: var(--muted); }
.week-chip.is-today { background: var(--primary); color: #fff; }
.weather-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.weather-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px;
  border: 1.5px solid transparent; background: #fff; border-radius: 14px; font: inherit; font-size: 13px; font-weight: 700; color: var(--text-soft); cursor: pointer;
}
.weather-btn svg { width: 44px; height: 44px; fill: none; stroke: var(--sky-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.weather-btn.is-active { border-color: var(--primary); background: var(--mint); color: var(--ink); }
.ritual-weather-text { margin: 0; font-family: var(--font-title); font-weight: 800; font-size: 24px; color: var(--ink); min-height: 1.2em; }
.ritual-count { margin: 0; font-family: var(--font-title); font-weight: 800; font-size: 26px; color: var(--ink); }
.call-list { display: flex; flex-wrap: wrap; gap: 6px; }
.call-btn { border: 1.5px solid var(--line); background: #fff; border-radius: 999px; padding: 6px 12px; min-height: 38px; font: inherit; font-weight: 700; cursor: pointer; }
.call-btn.is-absent { background: var(--red); border-color: #F2C4C4; color: var(--red-ink); text-decoration: line-through; }

@media (max-width: 900px) {
  .seat-layout { grid-template-columns: 1fr; }
  .seat-side { position: static; }
  .seating-empty { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .preset-picker { grid-template-columns: 1fr; }
  .seat-grid { gap: 4px; }
  .desk { font-size: 11px; border-radius: 6px; }
  .tbi-panel { padding: 16px; }
}

@media print {
  .page-seating main { page: paysage; }
  .page-seating .seat-room { border: 0; padding: 0; }
  .page-seating .seat-grid { gap: 6px; }
  .page-seating .desk { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .page-seating .seat-empty { border: 0 !important; }
  .page-seating .seat-board { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Programmes officiels dans le cahier journal */
.session-prog { list-style: none; margin: -4px 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.session-prog li { padding: 3px 10px; border-radius: 999px; background: var(--mint); color: var(--mint-ink); font-size: 13px; font-weight: 700; }
.session-prog-btn .icon { color: var(--primary); }
.dialog-wide { width: min(720px, calc(100vw - 24px)); }
.prog-filters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 220px); gap: 8px; margin: 10px 0 12px; }
.prog-filters select { width: 100%; }
.prog-list { max-height: min(48vh, 420px); overflow: auto; border: 1.5px solid var(--line); border-radius: 14px; padding: 6px 12px; }
.prog-group { border: 0; margin: 0; padding: 8px 0; border-bottom: 1px solid var(--line); }
.prog-group:last-child { border-bottom: 0; }
.prog-group legend { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding: 0; margin-bottom: 4px; float: left; width: 100%; }
.prog-line { clear: both; display: flex; align-items: center; gap: 6px; }
.prog-line label { flex: 1; display: flex; align-items: baseline; gap: 10px; padding: 6px 4px; border-radius: 8px; cursor: pointer; font-weight: 600; }
.prog-line label:hover { background: var(--bg-grey); }
.prog-line input { width: 18px; height: 18px; flex: none; accent-color: var(--primary); transform: translateY(3px); }
.prog-line em { font-style: normal; font-size: 12px; color: var(--muted); white-space: nowrap; margin-left: auto; }
.prog-add { margin-top: 12px; }
.prog-add summary { cursor: pointer; font-weight: 700; color: var(--primary); }
.prog-add .inline-fields { margin-top: 8px; flex-wrap: nowrap; }
.prog-add input[type="text"] { flex: 1; }

.coverage-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.coverage-head h2 { margin: 0 0 4px; font-size: 26px; }
.coverage-head p { margin: 0; max-width: 680px; }
.coverage-score { background: var(--mint); border-radius: 18px; padding: 12px 20px; text-align: center; color: var(--mint-ink); }
.coverage-score strong { font-family: var(--font-title); font-size: 32px; color: var(--ink); }
.coverage-score span { display: block; font-size: 13px; font-weight: 700; }
.coverage-subject { border: 1.5px solid var(--line); border-radius: var(--radius-l); padding: 6px 18px; margin-bottom: 12px; background: #fff; }
.coverage-subject summary { display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 10px 0; }
.coverage-name { font-family: var(--font-title); font-weight: 800; font-size: 19px; color: var(--ink); }
.coverage-meter { flex: 1; max-width: 220px; height: 8px; border-radius: 4px; background: var(--bg-grey); overflow: hidden; margin-left: auto; }
.coverage-meter span { display: block; height: 100%; background: var(--primary); }
.coverage-domain { font-family: var(--font-body); font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 12px 0 6px; }
.coverage-list { list-style: none; margin: 0 0 8px; padding: 0; }
.coverage-list li { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.coverage-list li:last-child { border-bottom: 0; }
.coverage-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--line-strong); transform: translateY(1px); }
.coverage-list li.is-done .coverage-dot { background: var(--primary); border-color: var(--primary); }
.coverage-label { flex: 1; font-weight: 600; }
.coverage-levels { margin-left: 6px; font-size: 12px; color: var(--muted); font-weight: 700; }
.coverage-count { font-size: 13px; color: var(--muted); text-align: right; }
.coverage-list li.is-done .coverage-count { color: var(--green-ink); font-weight: 700; }
.coverage-note { margin-top: 16px; }
@media (max-width: 600px) {
  .prog-filters { grid-template-columns: 1fr; }
  .coverage-list li { flex-wrap: wrap; }
  .coverage-count { width: 100%; text-align: left; padding-left: 20px; }
}

/* --------------------------------------------------------------------------
   Salle des profs
   -------------------------------------------------------------------------- */

.page-chat .app-main { padding-bottom: 24px; }
.chat-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 20px; padding-top: 24px; }
.chat-title { font-size: 26px; margin-bottom: 12px; }
.chat-room-select { display: none; width: 100%; }
.chat-room-list { display: flex; flex-direction: column; gap: 2px; }
.chat-room-list a { padding: 9px 12px; border-radius: 10px; text-decoration: none; color: var(--text); font-weight: 700; }
.chat-room-list a:hover { background: var(--bg-grey); }
.chat-room-list a[aria-current="page"] { background: var(--mint); color: var(--mint-ink); }
.room-hash { color: var(--muted); font-weight: 400; }
.chat-charter { margin-top: 18px; color: var(--muted); }

.chat-main { display: flex; flex-direction: column; min-width: 0; height: calc(100vh - 150px); min-height: 460px; border: 1.5px solid var(--line); border-radius: var(--radius-l); background: #fff; overflow: hidden; }
.chat-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1.5px solid var(--line); }
.chat-head h2 { margin: 0; font-size: 20px; }
.chat-head p { margin: 2px 0 0; }
.chat-feed { flex: 1; overflow-y: auto; padding: 12px 18px; }
.chat-more { display: block; margin: 0 auto 10px; }
.chat-day { display: flex; align-items: center; gap: 10px; margin: 14px 0 8px; font-size: 13px; font-weight: 800; color: var(--muted); }
.chat-day::before, .chat-day::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.chat-empty { text-align: center; margin-top: 40px; }

.msg { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; padding: 6px 8px; border-radius: 12px; }
.msg:hover, .msg:focus-within { background: var(--bg-grey); }
.msg.is-compact { padding-top: 1px; padding-bottom: 1px; }
.msg.is-compact .msg-avatar, .msg.is-compact .msg-head { visibility: hidden; height: 0; }
.msg.is-compact .msg-head { display: none; }
.msg-avatar { width: 38px; height: 38px; }
.msg.is-mine .msg-avatar { background: var(--sun); color: var(--sun-ink); }
.msg-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.msg-pseudo { color: var(--ink); }
.msg-verified { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--green-ink); color: #fff; font-size: 10px; font-weight: 800; }
.tag-lilac-small { background: var(--lilac); color: var(--lilac-ink); font-size: 11px; padding: 1px 8px; }
.msg-time { font-size: 12px; color: var(--muted); }
.msg-body { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-actions { position: absolute; top: 4px; right: 8px; display: none; gap: 4px; }
.msg:hover .msg-actions, .msg:focus-within .msg-actions { display: flex; }
.msg-btn { border: 1px solid var(--line-strong); background: #fff; border-radius: 8px; padding: 2px 8px; font: inherit; font-size: 12px; font-weight: 700; color: var(--text-soft); cursor: pointer; }
.msg-btn:hover { color: var(--red-ink); border-color: var(--red-ink); }

.chat-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; padding: 12px 14px; border-top: 1.5px solid var(--line); background: #FBFCFC; }
.chat-form textarea { resize: none; min-height: 48px; }
.chat-form-side { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 6px; }
.chat-form .field-error { grid-column: 1 / -1; margin: 0; }
.chat-blocked { margin: 12px; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 100; background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 12px; font-weight: 700; box-shadow: var(--shadow-soft); transition: opacity .4s; max-width: calc(100vw - 32px); }
.toast.is-out { opacity: 0; }

.report-card blockquote { margin: 10px 0; padding: 10px 14px; background: var(--bg-grey); border-radius: 12px; white-space: pre-wrap; }
.report-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.report-card .tag { margin: 2px 4px 2px 0; }
.report-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0 0; }
.report-actions input { flex: 1 1 220px; width: auto; min-height: 36px; }
.room-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) 100px; gap: 12px; }
.room-form .inline-fields .spacer { flex: 1; }

@media (max-width: 860px) {
  .chat-layout { grid-template-columns: 1fr; padding-top: 12px; gap: 10px; }
  .chat-room-list, .chat-charter { display: none; }
  .chat-room-select { display: block; }
  .chat-title { font-size: 22px; }
  .chat-main { height: calc(100vh - 210px); }
  .msg-actions { display: flex; position: static; grid-column: 2; }
  .room-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Générateurs de fiches et catalogue d'outils
   -------------------------------------------------------------------------- */

.level-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 24px; }
.crpe-link { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: var(--radius-l); background: var(--lilac); text-decoration: none; color: var(--ink); }
.crpe-link:hover { color: var(--ink); box-shadow: inset 0 0 0 2px var(--lilac-ink); }

.gen-head { align-items: flex-end; }
.gen-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 24px; align-items: start; }
.gen-options { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto; }
.gen-options .label, .gen-options legend { display: block; font-weight: 700; margin-bottom: 6px; padding: 0; }
.gen-options fieldset { border: 0; padding: 0; }
.gen-options .check { margin-bottom: 4px; }
.gen-options input[type="range"] { width: 100%; accent-color: var(--primary); }
.segmented .seg { position: relative; }
.segmented .seg input { position: absolute; opacity: 0; }
.segmented .seg span { display: inline-flex; align-items: center; padding: 7px 12px; border-radius: 9px; font-weight: 700; font-size: 14px; cursor: pointer; min-height: 36px; }
.segmented .seg input:checked + span { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(18,33,44,.12); }
.segmented .seg input:focus-visible + span { outline: 3px solid var(--primary); }
.chip-checks { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-check { position: relative; }
.chip-check input { position: absolute; opacity: 0; }
.chip-check span { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; border: 1.5px solid var(--line-strong); border-radius: 10px; font-weight: 800; cursor: pointer; }
.chip-check input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip-check input:focus-visible + span { outline: 3px solid var(--primary); }

.gen-preview { background: #DDE3E7; border-radius: var(--radius-l); padding: 20px; overflow: auto; }
.gen-pages { zoom: 0.72; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.gen-page {
  width: 210mm; height: 297mm; background: #fff; box-shadow: 0 6px 24px rgba(18,33,44,.18);
  padding: 14mm 14mm 10mm; display: flex; flex-direction: column; color: #12212C; overflow: hidden;
}
.gen-page-svg { padding: 0; }
.gen-page-svg svg { display: block; width: 210mm; height: 297mm; }
.gp-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 10mm; border-bottom: 0.6mm solid #12212C; padding-bottom: 3mm; margin-bottom: 7mm; }
.gp-title { margin: 0; font-family: var(--font-title); font-weight: 800; font-size: 22pt; }
.gp-who { display: flex; flex-direction: column; gap: 2mm; font-size: 11pt; text-align: right; }
.gp-consigne { margin: 0 0 6mm; font-size: 12pt; font-weight: 700; }
.gp-inline { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5.2mm 12mm; font-size: 15pt; font-variant-numeric: tabular-nums; }
.gp-posed { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16mm 6mm; font-size: 19pt; }
.gp-posed-3 { grid-template-columns: repeat(3, 1fr); gap: 20mm 10mm; }
.gp-item { position: relative; display: flex; align-items: flex-start; gap: 3mm; }
.gp-num { font-size: 8pt; color: #8A97A1; font-weight: 700; min-width: 5mm; padding-top: 1.6mm; }
.gp-inline .gp-num { padding-top: 1mm; }
.is-answer { color: #C2410C; font-weight: 800; }
.posed { display: grid; grid-template-columns: repeat(var(--cols), 7.4mm); font-family: var(--font-body); font-weight: 600; font-variant-numeric: tabular-nums; }
.posed-row { display: contents; }
.pc { height: 9.5mm; display: flex; align-items: center; justify-content: center; }
.pc-sign { font-weight: 800; }
.pc-comma { width: 3mm; }
.posed-op .pc { border-bottom: 0.5mm solid #12212C; }
.posed-blank .pc { border-bottom: 0.2mm dashed #C9D2D8; }
.posed-res .pc { height: 11mm; }
.potence { display: grid; grid-template-columns: auto auto; grid-template-rows: 9mm 9mm 30mm; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 46mm; }
.pot-dividend { padding: 0 3mm 0 0; display: flex; align-items: center; }
.pot-divisor { border-left: 0.5mm solid #12212C; border-bottom: 0.5mm solid #12212C; padding: 0 4mm; display: flex; align-items: center; }
.pot-quotient { grid-column: 2; padding: 1mm 4mm 0; border-left: 0.5mm solid #12212C; }
.pot-rest { grid-column: 1; grid-row: 3; align-self: end; font-size: 12pt; }
.gp-foot { margin-top: auto; display: flex; justify-content: space-between; font-size: 8pt; color: #8A97A1; padding-top: 4mm; }

.mm-grid { display: grid; margin: 0 auto; border: 0.5mm solid #12212C; font-family: var(--font-body); font-weight: 700; }
.mm-cell { display: flex; align-items: center; justify-content: center; border-right: 0.2mm solid #D5DCE1; border-bottom: 0.2mm solid #D5DCE1; }
.mm-cell.is-found { background: #FFD25C; }
.mm-list { list-style: none; padding: 0; margin: 8mm 0 0; display: flex; flex-wrap: wrap; gap: 3mm 8mm; font-size: 13pt; font-weight: 700; justify-content: center; }

@media (max-width: 1000px) {
  .gen-layout { grid-template-columns: 1fr; }
  .gen-options { position: static; max-height: none; }
  .gen-pages { zoom: 0.45; }
}

@media print {
  .page-generator .site-header, .page-generator .no-print, .page-generator .flashes { display: none !important; }
  .page-generator .app-main, .page-generator .container { padding: 0; margin: 0; max-width: none; }
  .page-generator .gen-layout { display: block; }
  .page-generator .gen-preview { background: none; padding: 0; border-radius: 0; overflow: visible; }
  .page-generator .gen-pages { zoom: 1; display: block; }
  .page-generator .gen-page { box-shadow: none; break-after: page; margin: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .page-generator .gen-page:last-child { break-after: auto; }
  .page-generator main { page: fiche; }
  @page fiche { size: A4 portrait; margin: 0; }
}

/* Offre de lancement */
.launch-banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 28px;
  padding: 16px 20px; border-radius: var(--radius-l); background: var(--lilac); color: var(--ink);
}
.launch-banner p { margin: 0; flex: 1 1 320px; }
.launch-badge { padding: 4px 12px; border-radius: 999px; background: var(--lilac-ink); color: #fff; font-weight: 800; font-size: 13px; }
.launch-banner-home { margin-bottom: 28px; }

/* --------------------------------------------------------------------------
   Petits écrans
   -------------------------------------------------------------------------- */

/* Menu sur tablette et téléphone : bouton « Menu » qui déplie la navigation */
@media (max-width: 900px) {
  .header-inner { padding-top: 12px; padding-bottom: 12px; }
  .nav-toggle { display: inline-flex; }
  .header-menu { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 14px; padding: 8px 0 6px; }
  .site-header.is-open .header-menu { display: flex; }
  .header-menu .main-nav { margin: 0; flex-direction: column; gap: 4px; }
  .main-nav a { padding: 12px 14px; font-size: 17px; border-radius: 12px; }
  .main-nav a:hover { background: var(--bg-grey); }
  .header-actions { flex-direction: column; align-items: stretch; gap: 10px; border-top: 1.5px solid var(--line); padding-top: 14px; }
  .header-actions .btn { width: 100%; min-height: 48px; }
  .header-actions form { width: 100%; }
  .user-chip { padding: 4px 4px; }
}

@media (max-width: 760px) {
  .hero-inner { padding-top: 48px; padding-bottom: 56px; gap: 40px; }
  .hero-visual { min-height: 0; }
  .mock-journal { position: static; padding: 18px; }
  .mock-seats, .mock-draw { display: none; }
  .section { padding: 64px 0; }
  .crpe-band { padding: 32px 24px; border-radius: var(--radius-l); }
  .auth-card { padding: 28px 22px; }
  .info-list div { grid-template-columns: 1fr; gap: 2px; }
  .actions-panel { width: min(340px, calc(100vw - 48px)); }
}

@media (max-width: 420px) {
  .choice-group { grid-template-columns: 1fr; }
  .logo-text { font-size: 22px; }
  .logo-mark { width: 36px; height: 36px; }
}

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

/* ==========================================================================
   Espace CRPE
   ========================================================================== */
.stack { display: flex; flex-direction: column; gap: 14px; }
.crpe-top { display: grid; grid-template-columns: 1fr minmax(260px, 360px); gap: 20px; align-items: start; margin-bottom: 24px; }
.crpe-countdown {
  background: linear-gradient(135deg, var(--lilac) 0%, var(--sky) 100%);
  border-radius: var(--radius-l); padding: 26px 28px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; color: var(--lilac-ink);
}
.crpe-days { font-family: var(--font-title); font-size: 64px; font-weight: 800; line-height: 1; color: var(--ink); }
.crpe-days-label { font-family: var(--font-title); font-size: 22px; font-weight: 700; color: var(--ink); }
.crpe-countdown .small { flex-basis: 100%; font-weight: 600; }
.crpe-profile { padding: 18px 22px; }
.crpe-profile summary { cursor: pointer; font-weight: 800; font-family: var(--font-title); font-size: 18px; }
.crpe-profile[open] summary { margin-bottom: 14px; }
.crpe-quick { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 32px; }
.crpe-quick .btn { display: inline-flex; align-items: center; gap: 8px; }
.crpe-subject { text-decoration: none; color: inherit; }
.crpe-subject h3 { margin: 12px 0 2px; font-size: 19px; }
.crpe-subject.is-empty { opacity: .6; }
.crpe-meter { display: block; height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; margin-top: 10px; }
.crpe-meter span { display: block; height: 100%; background: var(--primary); border-radius: 99px; }
.crpe-columns { gap: 28px; align-items: start; }
.crpe-sheet-list { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-direction: column; gap: 10px; }
.crpe-sheet-list li { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; }
.crpe-sheet-list .tool-icon { width: 36px; height: 36px; grid-row: span 2; }
.crpe-sheet-list a { font-weight: 700; color: var(--ink); }
.crpe-collab p:first-child { margin-top: 0; }
.crpe-collab .checklist { margin: 14px 0 18px; }
.crpe-collab .checklist li::before { content: '✓'; color: var(--primary); font-weight: 900; }
.crpe-collab .chip, .page-head + .tabs + .dash-section .chip { background: var(--bg-grey); border: 1px solid var(--line); }
.crpe-mini-title { font-size: 15px; margin: 22px 0 8px; }

/* Série de questions */
.crpe-quiz { max-width: 760px; margin: 0 auto; }
.cq-head h1 { font-size: 28px; margin: 8px 0 14px; }
.cq-progress { height: 8px; background: var(--line); border-radius: 99px; overflow: hidden; }
.cq-progress span { display: block; height: 100%; width: 0; background: var(--primary); border-radius: 99px; transition: width .35s ease; }
.cq-head .small { margin: 8px 0 18px; }
.cq-card { background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius-l); padding: 28px; transition: border-color .2s; }
.cq-card.is-right { border-color: #7BC59A; }
.cq-card.is-wrong { border-color: #EBA59B; }
.cq-meta { margin: 0 0 6px; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.cq-question { font-size: 22px; line-height: 1.35; margin: 0 0 22px; }
.cq-options { display: flex; flex-direction: column; gap: 10px; }
.cq-option {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; font: inherit; font-size: 17px; color: var(--text);
  background: var(--bg-grey); border: 2px solid transparent; border-radius: var(--radius); padding: 12px 16px; cursor: pointer; transition: border-color .15s, background .15s;
}
.cq-option:hover:not(:disabled) { border-color: var(--line-strong); background: #fff; }
.cq-option:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.cq-option:disabled { cursor: default; }
.cq-letter { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #fff; font-weight: 800; font-family: var(--font-title); color: var(--ink); }
.cq-option.is-chosen { border-color: var(--line-strong); }
.cq-option.is-answer { color: var(--green-ink); font-weight: 700; background: var(--green); border-color: #7BC59A; }
.cq-option.is-answer .cq-letter { background: var(--green-ink); color: #fff; }
.cq-option.is-wrong { background: var(--red); border-color: #EBA59B; color: var(--red-ink); }
.cq-option.is-wrong .cq-letter { background: var(--red-ink); color: #fff; }
.cq-feedback { margin-top: 22px; padding-top: 20px; border-top: 1.5px dashed var(--line-strong); }
.cq-verdict { font-family: var(--font-title); font-weight: 800; font-size: 20px; margin: 0 0 8px; }
.is-right .cq-verdict { color: var(--green-ink); }
.is-wrong .cq-verdict { color: var(--red-ink); }
.cq-explanation { color: var(--text-soft); line-height: 1.6; }
.cq-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 18px; }
.cq-actions .spacer { flex: 1; }
.cq-actions .btn-small { display: inline-flex; align-items: center; gap: 6px; }
.cq-vote.is-on { background: var(--coral); color: var(--coral-ink); border-color: transparent; }
.cq-end { text-align: center; background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius-l); padding: 32px 28px; }
.cq-score { font-family: var(--font-title); font-size: 56px; font-weight: 800; color: var(--ink); margin: 0; }
.cq-recap { text-align: left; margin: 24px auto; max-width: 620px; padding-left: 1.4em; display: flex; flex-direction: column; gap: 10px; }
.cq-recap li span { display: block; }
.cq-recap li.is-ok::marker { color: var(--green-ink); }
.cq-recap li.is-ko::marker { color: var(--red-ink); }
.cq-end .btn-row { justify-content: center; }

/* Contributions et fiches */
.crpe-contrib { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.crpe-contrib .form-panel { max-width: none; }
.crpe-contrib > * { min-width: 0; }
.crpe-choice-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.crpe-choice-row input[type=radio] { width: 20px; height: 20px; flex: none; accent-color: var(--primary); }
.crpe-choice-row input[type=text] { flex: 1; }
.crpe-mine { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.crpe-mine li { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.crpe-editor { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: 15px; line-height: 1.55; }
.crpe-syntax td { padding: 6px 8px; }
.crpe-sheet-card { text-decoration: none; color: inherit; }
.crpe-sheet-card h3 { margin: 12px 0 4px; font-size: 18px; }
.crpe-sheet-card .tag { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); }
.crpe-sheet { max-width: 800px; margin: 0 auto; }
.crpe-sheet-head { display: flex; gap: 16px; align-items: flex-start; margin: 12px 0 22px; }
.crpe-sheet-head h1 { margin: 0 0 4px; font-size: 32px; }
.crpe-sheet-head p { margin: 0; }
.crpe-sheet-body { background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius-l); padding: 28px 32px; max-width: none; }
.crpe-sheet-body h3 { font-size: 21px; margin: 1.4em 0 .5em; color: var(--primary-dark); }
.crpe-sheet-body h3:first-child { margin-top: 0; }
.crpe-sheet-body h4 { font-size: 17px; margin: 1.2em 0 .4em; }
.crpe-sheet-foot { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 10px; }
.crpe-sheet-foot .btn { display: inline-flex; align-items: center; gap: 6px; }
.crpe-admin-choices li { margin-bottom: 2px; }
.crpe-admin-choices li.is-answer { color: var(--green-ink); }
.crpe-flag-comment { background: var(--sun); color: var(--sun-ink); padding: 10px 14px; border-radius: var(--radius); font-weight: 600; }
a.chip { text-decoration: none; color: var(--ink); }

@media (max-width: 860px) {
  .crpe-top, .crpe-contrib, .crpe-contrib .field-row { grid-template-columns: 1fr; }
  .crpe-contrib .panel { padding: 20px 18px; }
  .crpe-days { font-size: 48px; }
  .cq-card { padding: 20px 18px; }
  .cq-question { font-size: 19px; }
  .cq-option { font-size: 16px; }
  .crpe-sheet-body { padding: 20px 18px; }
}

@media print {
  .crpe-sheet .back-link, .crpe-sheet-foot, .crpe-sheet > .small { display: none !important; }
  .crpe-sheet-body { border: none; padding: 0; }
}

/* ==========================================================================
   Pied de page de l'espace membre, idées et signalements
   ========================================================================== */
.app-footer { border-top: 1px solid var(--line); padding: 18px 0 26px; margin-top: 40px; }
.app-footer .container { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: center; }
.app-footer a { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 14px; font-weight: 600; text-decoration: none; }
.app-footer a:hover { color: var(--primary); }
.page-tbi .app-footer { display: none; }

.chat-ideas-link { display: flex; gap: 10px; align-items: center; margin: 14px 0 6px; padding: 12px 14px; border-radius: var(--radius); background: var(--sun); color: var(--sun-ink); text-decoration: none; font-weight: 800; }
.chat-ideas-link small { display: block; font-weight: 600; font-size: 12.5px; opacity: .85; }
.chat-ideas-link:hover { filter: brightness(.97); }

.fb-filters { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.fb-filters .level-filter { margin: 0; }
.fb-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.fb-card { position: relative; display: flex; align-items: center; gap: 16px; background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius); padding: 12px 16px; }
.fb-card:hover { border-color: var(--line-strong); }
.fb-vote-form { position: relative; z-index: 2; }
.fb-vote { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 54px; padding: 6px 8px; border-radius: 12px; border: 1.5px solid var(--line-strong); background: #fff; color: var(--text-soft); font: inherit; cursor: pointer; line-height: 1.1; }
.fb-vote span { font-size: 12px; }
.fb-vote strong { font-size: 18px; font-family: var(--font-title); }
.fb-vote:hover { border-color: var(--primary); color: var(--primary); }
.fb-vote.is-on { background: var(--mint); border-color: var(--primary); color: var(--primary-dark); }
.fb-vote-large { min-width: 84px; padding: 10px; }
.fb-vote-large small { font-size: 12px; font-weight: 700; margin-top: 2px; }
.fb-main { flex: 1; min-width: 0; }
.fb-title { font-weight: 800; color: var(--ink); text-decoration: none; font-size: 17px; }
.fb-title.stretched::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.fb-meta { margin: 4px 0 0; }
.fb-kind { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
.fb-kind-idea { color: #7A5600; }
.fb-kind-bug { color: var(--red-ink); }
.fb-kind-content { color: var(--sky-ink); }
.fb-side { flex: none; }
.fb-kinds { display: flex; flex-wrap: wrap; gap: 10px; }
.fb-kind-option input { position: absolute; opacity: 0; }
.fb-kind-option span { display: inline-block; padding: 10px 16px; border-radius: 999px; border: 1.5px solid var(--line-strong); font-weight: 700; cursor: pointer; }
.fb-kind-option input:checked + span { background: var(--ink); color: #fff; border-color: var(--ink); }
.fb-kind-option input:focus-visible + span { outline: 3px solid var(--primary); outline-offset: 2px; }
.fb-detail { max-width: 820px; margin: 12px auto 0; }
.fb-detail-head { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 18px; }
.fb-detail-head h1 { margin: 4px 0 8px; font-size: 30px; }
.fb-detail-head p { margin: 0; }
.fb-body { line-height: 1.6; }
.fb-reply { margin: 18px 0; padding: 16px 20px; border-radius: var(--radius); background: var(--mint); color: var(--mint-ink); border-left: 5px solid var(--primary); }
.fb-reply-title { display: flex; align-items: center; gap: 6px; font-weight: 800; margin: 0 0 6px; }
.fb-reply p:last-child { margin-bottom: 0; }
.fb-comments { margin-top: 28px; }
.fb-comments h2 { font-size: 20px; }
.fb-comment { padding: 12px 0; border-bottom: 1px solid var(--line); }
.fb-comment p { margin: 0 0 4px; }
.fb-comment.is-team { background: var(--mint); border-radius: var(--radius); padding: 12px 14px; border-bottom: none; margin: 6px 0; }
.fb-comment form { display: inline; }
.fb-comment-form { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; align-items: flex-start; }
.fb-comment-form textarea { width: 100%; }
.fb-comment-form label { font-weight: 700; }
.fb-similar { margin-top: 24px; }
.fb-similar h2 { font-size: 17px; }
.fb-similar ul { margin: 0; padding-left: 1.1em; }
.fb-admin-form textarea { width: 100%; }

/* Administration : utilisateurs, programmes et horaires */
.tabs-admin { flex-wrap: wrap; }
.user-filters { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.user-filters .search-bar { margin-bottom: 0; }
.user-admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 20px; align-items: start; }
.user-admin-grid h2 { font-size: 20px; margin: 0; }
.account-log { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.account-log li { padding: 10px 14px; background: var(--bg-grey); border-radius: var(--radius-s); }
.ref-year { margin: 4px 0 18px; }
.ref-new { margin-top: 14px; padding: 20px 24px; }
.ref-new h3 { margin-top: 0; font-size: 17px; }
.ref-levels input[type=number] { width: 96px; }
.ref-levels td, .ref-levels th { vertical-align: middle; }
.ref-items { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 18px; }
.ref-item { display: grid; grid-template-columns: 64px 180px minmax(120px, 1fr) minmax(200px, 2fr) 110px auto auto; gap: 6px; align-items: center; padding: 6px; border-radius: var(--radius-s); }
.ref-item:target, .ref-item:hover { background: var(--bg-grey); }
.ref-item input, .ref-item select { min-width: 0; padding: 7px 9px; font-size: 14px; }
.ref-order { width: 64px; }
.ref-bulk textarea { font-family: ui-monospace, Menlo, monospace; font-size: 14px; }
.ref-archived { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 6px; }
.ref-archived li { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.ref-rows { display: flex; flex-direction: column; gap: 12px; }
.ref-row { border: 1.5px solid var(--line); border-radius: var(--radius); padding: 12px 16px 14px; margin: 0; }
.ref-row.is-new { border-style: dashed; }
.ref-row legend { font-weight: 800; padding: 0 6px; }
.ref-row-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.ref-row-top .ref-label { flex: 1; min-width: 200px; }
.ref-num { width: 72px; }
@media (max-width: 960px) {
  .ref-item { grid-template-columns: 56px 1fr 1fr; }
  .ref-item .ref-label { grid-column: 1 / -1; }
}

/* ==========================================================================
   Plan de classe à l'échelle (SVG)
   ========================================================================== */
.seat-stage { background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius-l); padding: 12px; }
.seat-svg { display: block; width: 100%; height: auto; max-height: calc(100vh - 210px); touch-action: none; user-select: none; -webkit-user-select: none; font-family: var(--font-body); }
.seat-board-label { fill: #EAF4FF; font-size: 17px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.furn .top { fill: #F4CE86; stroke: #D7A44A; stroke-width: 2; }
.furn .top.bench { fill: #D8B48C; stroke: #B48655; }
.furn .top.teacher { fill: #D9CCF5; stroke: #8C6BB8; }
.furn .teacher-chair { fill: #B7A6DD; }
.furn .carpet { fill: #DFEDFC; stroke: #8DB7E6; stroke-width: 3; stroke-dasharray: 10 8; }
.furn .shelf { fill: #E3E8EC; stroke: #AEB9C2; stroke-width: 2; }
.furn .sink { fill: #E3F1F8; stroke: #8DB7E6; stroke-width: 2; }
.furn .sink-bowl { fill: #fff; stroke: #8DB7E6; stroke-width: 2; }
.furn .door { fill: #fff; stroke: #8A97A1; stroke-width: 3; }
.furn .door-swing { fill: none; stroke: #8A97A1; stroke-width: 1.5; stroke-dasharray: 6 5; }
.furn .window { fill: #DFF1FB; stroke: #6AA9D8; stroke-width: 2; }
.furn .window-line { stroke: #6AA9D8; stroke-width: 1.5; }
.furn .screen { fill: #26343F; }
.chair-seat { fill: #6D7B86; }
.chair-back { fill: #3F4E59; }
.furn-label { font-size: 15px; font-weight: 800; fill: #5B3FA8; pointer-events: none; }
.furn-label-carpet { fill: #1E5A96; }
.furn-label-shelf, .furn-label-door, .furn-label-sink { fill: #55636F; font-size: 13px; }
.furn-label-window { fill: #1E5A96; font-size: 13px; }
.is-room-mode .furn { cursor: grab; }
.is-room-mode .furn:hover .top, .is-room-mode .furn:hover .carpet, .is-room-mode .furn:hover .shelf { filter: brightness(1.04); stroke: var(--primary); }
.is-room-mode .furn:focus { outline: none; }
.is-room-mode .furn:focus-visible .sel-ring, .is-room-mode .furn:focus-visible { outline: none; }
.sel-ring { fill: none; stroke: var(--primary); stroke-width: 3; stroke-dasharray: 9 6; }
.is-room-mode .seat { pointer-events: none; }
.seat { cursor: pointer; }
.seat:focus { outline: none; }
.seat:focus-visible .seat-pill, .seat:focus-visible .seat-free { stroke: var(--primary); stroke-width: 4; }
.seat-name { font-weight: 800; pointer-events: none; }
.seat-level { font-size: 11px; font-weight: 800; fill: #55636F; pointer-events: none; }
.seat-free { fill: rgba(255,255,255,.85); stroke: #8A97A1; stroke-width: 1.5; stroke-dasharray: 4 3; }
.seat-plus { font-size: 18px; font-weight: 800; fill: #8A97A1; pointer-events: none; }
.seat.is-free:hover .seat-free { fill: var(--mint); stroke: var(--primary); }
.seat.is-taken { cursor: grab; }
.seat.is-taken:hover .seat-pill { stroke-width: 2.5; }
.seat.is-selected .seat-pill { stroke: var(--ink) !important; }
.seat-front-dot { fill: var(--yellow); stroke: #7A5600; stroke-width: 1.5; }
.is-dragging, .is-dragging * { cursor: grabbing !important; }
.seat-ghost {
  position: fixed; z-index: 200; pointer-events: none; transform: translate(-50%, -120%);
  background: var(--ink); color: #fff; font-weight: 800; padding: 6px 14px; border-radius: 999px; box-shadow: var(--shadow-soft); font-size: 15px;
}
.pool-chip { touch-action: none; }
.pool-chip.tint-coral { background: var(--coral); } .pool-chip.tint-sky { background: var(--sky); } .pool-chip.tint-sun { background: var(--sun); }
.pool-chip.tint-mint { background: var(--mint); } .pool-chip.tint-lilac { background: var(--lilac); } .pool-chip.tint-green { background: var(--green); }
.pool-level { font-size: 11px; font-weight: 800; background: rgba(255,255,255,.75); border-radius: 5px; padding: 0 5px; }
.seat-tools { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.seat-toolbar .segmented button { display: inline-flex; align-items: center; gap: 6px; }
.seat-help.is-alert { color: var(--red-ink); font-weight: 700; }
.seat-summary { margin: 10px 2px 0; }
.seat-inspector h2 { font-size: 18px; margin-bottom: 10px; }
.insp-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.furniture-palette { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.palette-item { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; font: inherit; font-size: 14px; font-weight: 700; color: var(--text); text-align: left; cursor: pointer; }
.palette-item:hover { border-color: var(--primary); background: var(--mint); }
.palette-item svg { flex: none; }
.menu-panel-plans { width: min(620px, calc(100vw - 32px)); }
.preset-picker { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.preset-box { flex-direction: column; align-items: flex-start; gap: 6px; }
.mini-plan { display: block; border-radius: 8px; }
.rules-pairs { list-style: none; padding: 0; margin: 0 0 10px; display: flex; flex-direction: column; gap: 4px; }
.print-title { font-weight: 800; }
@media (max-width: 860px) {
  .seat-svg { max-height: none; }
  .seat-stage { padding: 6px; }
}
@media print {
  .page-seating .app-header, .page-seating .app-footer, .page-seating .flashes { display: none !important; }
  .page-seating .seat-layout { display: block; }
  .page-seating .seat-stage { border: 0; padding: 0; }
  .page-seating .seat-svg { width: 100%; height: 158mm; max-height: none; }
  .page-seating .app-main { padding: 0; }
  .page-seating .page-head { display: block; margin: 0 0 2mm; }
  .page-seating .page-head h1 { font-size: 15pt; margin: 0; }
  .page-seating .seat-help, .page-seating .back-link, .page-seating .notice { display: none !important; }
  .page-seating .seat-layout { break-inside: avoid; }
  .page-seating .seat-svg * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .page-seating .seat-free, .page-seating .seat-plus { display: none; }
  .page-seating .page-head { margin-bottom: 4mm; }
}
.seat-legend { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 2px 0; }
.seat-legend:empty { display: none; }
.legend-chip { padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 800; }
.legend-chip.tint-coral { background: var(--coral); color: var(--coral-ink); } .legend-chip.tint-sky { background: var(--sky); color: var(--sky-ink); }
.legend-chip.tint-sun { background: var(--sun); color: var(--sun-ink); } .legend-chip.tint-mint { background: var(--mint); color: var(--mint-ink); }
.legend-chip.tint-lilac { background: var(--lilac); color: var(--lilac-ink); } .legend-chip.tint-green { background: var(--green); color: var(--green-ink); }


/* En-tête de l'espace membre sur écrans moyens : tout tient sur une ligne */
@media (min-width: 901px) and (max-width: 1440px) {
  .app-header .main-nav { flex-wrap: nowrap; }
  .app-header .main-nav a { padding: 8px 10px; font-size: 15px; white-space: nowrap; }
  .app-header .header-actions { flex-wrap: nowrap; gap: 8px; }
  .app-header .header-menu { gap: 10px; }
}
@media (min-width: 901px) and (max-width: 1240px) {
  .app-header .user-name { display: none; }
  .app-header .logo-text { font-size: 22px; }
}
a.chip-btn { text-decoration: none; color: var(--ink); display: inline-flex; align-items: center; }
a.chip-btn.is-active { color: #fff; }

/* Comptes en attente de validation */
.pending-account { max-width: 640px; margin: 24px auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pending-steps { list-style: none; padding: 0; margin: 14px 0; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.pending-steps li { display: flex; align-items: center; gap: 12px; font-weight: 700; color: var(--muted); }
.pending-steps li span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--bg-grey); color: var(--muted); font-weight: 800; }
.pending-steps li.is-done { color: var(--ink); }
.pending-steps li.is-done span { background: var(--green); color: var(--green-ink); }
.pending-steps li.is-now span { background: var(--sun); color: var(--sun-ink); }
.approve-panel { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 20px; background: var(--sun); border-color: #F0D78C; }
.approve-panel h2 { font-size: 20px; margin: 0 0 4px; }
.approve-panel p { margin: 0; }
.approve-panel-list { margin-bottom: 24px; border-color: #F0D78C; }
.approve-panel-list h2 { margin: 0; font-size: 20px; }
.approve-list { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 8px; }
.approve-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 12px; border-radius: var(--radius-s); background: var(--bg-grey); }
.bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 12px; }
.row-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.row-actions form { margin: 0; }
.nav-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--red-ink); color: #fff; font-size: 12px; font-weight: 800; }

/* Salle des profs : sujets (fils de discussion) */
.chat-tabs { display: flex; gap: 4px; padding: 0 16px; border-bottom: 1px solid var(--line); }
.chat-tabs a { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; margin-bottom: -1px; border-bottom: 3px solid transparent; color: var(--muted); font-weight: 800; text-decoration: none; }
.chat-tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--primary); }
.tab-count { padding: 0 7px; border-radius: 999px; background: var(--bg-grey); font-size: 13px; }
.chat-head-text { min-width: 0; flex: 1; }
.chat-head .back-link { display: inline-block; margin-bottom: 2px; }
.thread-title { margin: 0; font-size: 21px; }
.thread-flag { font-size: .9em; margin-right: 2px; }
.room-name { flex: 1; min-width: 0; }
.chat-room-list a { display: flex; align-items: center; gap: 4px; }
.room-count { padding: 0 7px; border-radius: 999px; background: var(--bg-grey); color: var(--muted); font-size: 12px; font-weight: 800; }
.threads-body { padding: 16px; overflow: auto; flex: 1; display: flex; flex-direction: column; gap: 14px; }
.threads-tools { display: flex; gap: 10px; align-items: center; }
.threads-search { flex: 1; }
.threads-search input { width: 100%; }
.thread-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.thread-item { display: flex; align-items: center; gap: 12px; border: 1.5px solid var(--line); border-radius: var(--radius); background: #fff; }
.thread-item:hover { border-color: var(--line-strong); }
.thread-item.is-hidden { opacity: .6; }
.thread-link { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; text-decoration: none; color: inherit; }
.thread-name { font-weight: 800; color: var(--ink); font-size: 16.5px; }
.thread-replies { display: inline-flex; align-items: center; gap: 4px; padding-right: 16px; font-weight: 800; color: var(--muted); }
.new-thread summary { cursor: pointer; font-weight: 800; font-family: var(--font-title); font-size: 18px; }
.new-thread[open] summary { margin-bottom: 14px; }
.chat-main .chat-head { border-bottom: 0; padding-bottom: 8px; }

/* ==========================================================================
   Nouveaux outils : sudoku, mots croisés, étiquettes, mots aux familles, métiers
   ========================================================================== */
/* Sudoku */
.sdk-legend { display: flex; gap: 6mm; justify-content: center; font-size: 18pt; margin: -2mm 0 4mm; }
.sdk-page { flex: 1; display: grid; gap: 8mm; align-content: start; justify-items: center; }
.sdk-count-1 { grid-template-columns: 1fr; }
.sdk-count-2 { grid-template-columns: 1fr; }
.sdk-count-4, .sdk-count-6 { grid-template-columns: 1fr 1fr; }
.sdk-item { display: flex; flex-direction: column; align-items: center; gap: 2mm; }
.sdk-num { font-size: 9pt; font-weight: 700; color: #8A97A1; }
.sdk { display: grid; border: 0.8mm solid #12212C; font-family: var(--font-title); font-weight: 800; }
.sdk-cell { display: flex; align-items: center; justify-content: center; border-right: 0.25mm solid #9AA7B0; border-bottom: 0.25mm solid #9AA7B0; }
.sdk-cell.br { border-right: 0.7mm solid #12212C; }
.sdk-cell.bb { border-bottom: 0.7mm solid #12212C; }
.sdk-cell.is-solution { color: #2468B0; font-weight: 600; }
.sdk-count-1 .sdk-4 .sdk-cell { width: 34mm; height: 34mm; font-size: 30pt; }
.sdk-count-2 .sdk-4 .sdk-cell { width: 24mm; height: 24mm; font-size: 22pt; }
.sdk-count-4 .sdk-4 .sdk-cell { width: 18mm; height: 18mm; font-size: 18pt; }
.sdk-count-6 .sdk-4 .sdk-cell { width: 14mm; height: 14mm; font-size: 15pt; }
.sdk-count-1 .sdk-6 .sdk-cell { width: 26mm; height: 26mm; font-size: 24pt; }
.sdk-count-2 .sdk-6 .sdk-cell { width: 17mm; height: 17mm; font-size: 17pt; }
.sdk-count-4 .sdk-6 .sdk-cell { width: 13mm; height: 13mm; font-size: 14pt; }
.sdk-count-6 .sdk-6 .sdk-cell { width: 10.5mm; height: 10.5mm; font-size: 12pt; }
.sdk-count-1 .sdk-9 .sdk-cell { width: 18mm; height: 18mm; font-size: 20pt; }
.sdk-count-2 .sdk-9 .sdk-cell { width: 12mm; height: 12mm; font-size: 14pt; }
.sdk-count-4 .sdk-9 .sdk-cell, .sdk-count-6 .sdk-9 .sdk-cell { width: 9.2mm; height: 9.2mm; font-size: 12pt; }
.sdk-pics .sdk-cell { font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; }

/* Mots croisés */
.mc-grid { display: grid; margin: 0 auto 6mm; }
.mc-cell { position: relative; border: 0.35mm solid #12212C; margin: -0.175mm; background: #fff; display: flex; align-items: center; justify-content: center; }
.mc-void { background: transparent; }
.mc-n { position: absolute; top: 0.4mm; left: 0.7mm; font-style: normal; font-size: 6.5pt; font-weight: 800; color: #12212C; line-height: 1; }
.mc-l { font-family: var(--font-title); font-weight: 800; color: #2468B0; line-height: 1; }
.mc-given { color: #8A97A1; }
.mc-clues { display: grid; grid-template-columns: 1fr 1fr; gap: 8mm; font-size: 11pt; }
.mc-clues h3 { margin: 0 0 2mm; font-size: 13pt; }
.mc-clues ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.6mm; }
.mc-bank { margin: 5mm 0 0; padding: 3mm 4mm; border: 0.3mm dashed #8A97A1; border-radius: 3mm; font-size: 11pt; }

/* Étiquettes prénoms */
.et-page { padding: 8mm; }
.et-grid { flex: 1; display: grid; gap: 4mm; }
.et-page-porte .et-grid { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, 1fr); }
.et-page-casier .et-grid { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(7, 1fr); gap: 3mm; }
.et-page-table .et-grid { grid-template-rows: 1fr 1fr; gap: 0; }
.et-page-bande .et-grid { grid-template-rows: repeat(8, 1fr); gap: 3mm; }
.et-label { position: relative; display: flex; align-items: center; justify-content: center; gap: 4mm; border: 0.8mm solid var(--et); border-radius: 5mm; padding: 3mm 5mm; min-width: 0; overflow: hidden; background: color-mix(in srgb, var(--et) 10%, #fff); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.et-names { display: flex; flex-direction: column; align-items: center; gap: 1mm; min-width: 0; flex: 1; }
.et-name { white-space: nowrap; line-height: 1.05; color: #12212C; font-size: 20pt; }
.et-name.is-main { font-size: 28pt; }
.et-names.is-big .et-name { font-size: 30pt; }
.et-names.is-big .et-name.is-main { font-size: 46pt; }
.et-names[data-count="1"] .et-name.is-main { font-size: 40pt; }
.et-names.is-big[data-count="1"] .et-name.is-main { font-size: 64pt; }
.et-caps { font-family: var(--font-title); font-weight: 800; letter-spacing: .04em; }
.et-print { font-family: var(--font-body); font-weight: 700; }
.et-cursive { font-family: 'Cursive Ecole', cursive; font-weight: 300; color: #1B2A6B; }
.et-picto { font-size: 26pt; line-height: 1; flex: none; }
.et-level { position: absolute; top: 2mm; right: 3mm; padding: 0.5mm 2.5mm; border-radius: 3mm; background: var(--et); color: #fff; font-weight: 800; font-size: 9pt; }
.et-page-casier .et-label { border-radius: 3mm; padding: 1.5mm 3mm; gap: 2mm; }
.et-page-casier .et-name { font-size: 11pt; }
.et-page-casier .et-name.is-main { font-size: 15pt; }
.et-page-casier .et-picto { font-size: 15pt; }
.et-page-porte .et-picto { font-size: 34pt; }
.et-model-table { flex-direction: column; border-radius: 0; border-width: 0.6mm; padding: 0; gap: 0; height: 100%; }
.et-half { flex: 1; width: 100%; display: flex; align-items: center; justify-content: center; gap: 6mm; padding: 6mm 10mm; }
.et-fold-top { transform: rotate(180deg); border-bottom: 0.3mm dashed #8A97A1; }
.et-fold-line { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #fff; color: #8A97A1; font-size: 8pt; padding: 0 2mm; }
.et-model-table .et-picto { font-size: 44pt; }
.et-model-bande { justify-content: flex-start; padding: 2mm 3mm; border-radius: 3mm; gap: 3mm; }
.et-band-model { display: flex; align-items: center; gap: 2mm; flex: none; width: 46mm; }
.et-model-bande .et-name { font-size: 13pt; }
.et-model-bande .et-name.is-main { font-size: 17pt; }
.et-model-bande .et-picto { font-size: 18pt; }
.et-seyes { flex: 1; height: 100%; min-width: 0; }

/* Mots aux familles */
.fm-page { padding: 8mm 12mm; gap: 0; }
.fm-note { position: relative; flex: 1; display: flex; flex-direction: column; padding: 5mm 4mm 6mm; border-bottom: 0.4mm dashed #8A97A1; overflow: hidden; font-size: 11pt; line-height: 1.45; }
.fm-note:last-child { border-bottom: 0; }
.fm-note::after { content: '✂'; position: absolute; left: -1mm; bottom: -3.2mm; color: #8A97A1; font-size: 12pt; }
.fm-note:last-child::after { content: none; }
.fm-head { display: flex; align-items: center; gap: 3mm; margin-bottom: 2mm; }
.fm-icon { font-size: 18pt; }
.fm-title { margin: 0; flex: 1; font-size: 15pt; font-family: var(--font-title); }
.fm-who { font-size: 10pt; font-weight: 700; color: #3F4E59; }
.fm-text p { margin: 0 0 2mm; }
.fm-blank { display: inline-block; min-width: 28mm; border-bottom: 0.3mm dotted #3F4E59; height: 1em; vertical-align: baseline; }
.fm-blank-long { min-width: 50mm; }
.fm-sign { margin: 1mm 0 0; text-align: right; font-style: italic; }
.fm-reply { margin-top: auto; padding: 3mm 4mm; border: 0.3mm solid #8A97A1; border-radius: 2mm; font-size: 10pt; }
.fm-reply p { margin: 0 0 1.5mm; }
.fm-reply-title { font-weight: 800; }
.fm-signature { margin-top: 3mm !important; }
.fm-per-4 .fm-note { font-size: 9.5pt; line-height: 1.35; padding-top: 3mm; }
.fm-per-4 .fm-title { font-size: 13pt; }
.fm-per-2 .fm-note { font-size: 12.5pt; }

/* Métiers de la classe */
.week-nav { display: flex; align-items: center; gap: 8px; }
.week-label { flex: 1; text-align: center; font-weight: 800; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; color: var(--primary); text-decoration: underline; margin-top: 4px; }
.mt-page { padding: 12mm; gap: 6mm; }
.mt-page:fullscreen { width: 100vw; height: 100vh; padding: 4vh 4vw; overflow: auto; }
.mt-head { text-align: center; }
.mt-title { margin: 0; font-family: var(--font-title); font-size: 28pt; }
.mt-week { margin: 1mm 0 0; color: #55636F; font-weight: 700; font-size: 13pt; }
.mt-grid { flex: 1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 4mm; align-content: stretch; }
.mt-grid[data-count="1"], .mt-grid[data-count="2"], .mt-grid[data-count="3"] { grid-template-columns: 1fr; }
.mt-card { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 4mm; align-items: center; padding: 3mm 5mm; border-radius: 5mm; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.mt-icon { grid-row: span 2; font-size: 26pt; }
.mt-job { font-weight: 800; font-size: 12pt; color: #3F4E59; }
.mt-who { font-family: var(--font-title); font-weight: 800; font-size: 20pt; color: #12212C; }
.mt-page:fullscreen .mt-title { font-size: 6vh; }
.mt-page:fullscreen .mt-icon { font-size: 6vh; }
.mt-page:fullscreen .mt-job { font-size: 2.6vh; }
.mt-page:fullscreen .mt-who { font-size: 4.4vh; }
/* Étiquettes : écritures secondaires lisibles, sans chevauchement */
.et-names { gap: 1.5mm; }
.et-name { line-height: 1.2; }
.et-cursive { line-height: 1.35; padding-bottom: .5mm; }

.et-names .et-name:not(.is-main) { font-size: 22pt; }
.et-names.is-big .et-name:not(.is-main) { font-size: 28pt; }
.et-page-casier .et-names .et-name:not(.is-main) { font-size: 10pt; }
.et-model-bande .et-names .et-name:not(.is-main) { font-size: 11pt; }
.et-page-casier .et-names { gap: .5mm; }

/* ==========================================================================
   Lot outils d'octobre : textes à trous, dictées, géométrie, affichages, syllabes
   ========================================================================== */

/* Textes à trous */
.trous-picker { display: block; white-space: pre-wrap; max-height: 300px; overflow: auto; padding: 8px 10px; border: 1.5px solid var(--line-strong); border-radius: 10px; background: #fff; line-height: 1.9; font-size: 15px; }
.trous-word { border: 0; background: none; padding: 2px 3px; margin: 0 -1px; border-radius: 6px; font: inherit; color: var(--text); cursor: pointer; white-space: nowrap; }
.trous-word:hover { background: var(--soft, #EEF2F4); }
.trous-word.is-on { background: #FFD25C; color: #12212C; font-weight: 800; }
.trous-word:focus-visible { outline: 3px solid var(--primary); }
.trous-text { line-height: 2.3; text-align: justify; hyphens: none; }
.trous-text p { margin: 0 0 3mm; }
.trous-gap { display: inline-block; min-width: 3em; border-bottom: 0.3mm solid #12212C; height: 1em; vertical-align: baseline; margin: 0 .1em; text-align: center; line-height: 1; }
.trous-answer { color: #C2410C; font-weight: 800; border-bottom: 0.3mm solid #C2410C; padding: 0 .15em; }
.trous-bank { display: flex; flex-wrap: wrap; justify-content: center; gap: 2.5mm 6mm; margin: 0 0 7mm; padding: 4mm 5mm; border: 0.4mm dashed #8A97A1; border-radius: 3mm; font-size: 13pt; font-weight: 700; }

/* Dictées */
.dictee-lists { gap: 6mm; }
.dictee-list { border: 0.4mm solid #C9D2D8; border-radius: 3mm; padding: 4mm 6mm; break-inside: avoid; }
.dictee-list h3 { margin: 0 0 3mm; font-family: var(--font-title); font-size: 14pt; }
.dictee-words { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2mm 6mm; font-size: 15pt; }
.dictee-words li { display: flex; flex-direction: column; gap: .5mm; }
.dictee-print .dw-cursive, .dictee-cursive .dw-print { display: none; }
.dw-print { font-weight: 700; }
.dw-cursive { font-family: 'Cursive Ecole', cursive; font-weight: 300; color: #1B2A6B; font-size: 1.25em; line-height: 1.3; }
.seyes-sheet {
  flex: 1; margin: 2mm -2mm 0;
  background-color: #fff;
  background-image:
    linear-gradient(to right, transparent 27.8mm, #E8556D 27.8mm, #E8556D 28.2mm, transparent 28.2mm),
    repeating-linear-gradient(to right, transparent 0, transparent 7.8mm, #A9B6E6 7.8mm, #A9B6E6 8mm),
    repeating-linear-gradient(to bottom, transparent 0, transparent 7.75mm, #7F8FD6 7.75mm, #7F8FD6 8mm),
    repeating-linear-gradient(to bottom, transparent 0, transparent 1.85mm, #C9D1F0 1.85mm, #C9D1F0 2mm);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.dictee-text { font-size: 15pt; line-height: 1.9; margin: 0 0 5mm; }
.dictee-gaps { font-size: 15pt; line-height: 2.4; }
.dictee-mark { background: #FFE89A; color: inherit; padding: 0 .15em; border-radius: 1mm; font-weight: 800; }
.dictee-info { color: #55636F; margin: 0 0 4mm; }
.dictee-reader { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 12px; background: var(--sky, #DFEDFC); }
.dictee-reader .btn { justify-content: center; }
.reader-progress { margin: 0; font-weight: 800; font-size: 15px; min-height: 1.4em; }

/* Géométrie */
.geo-page { padding: 12mm 14mm 10mm; }
.geo-page .gp-head { margin-bottom: 4mm; }
.geo-page .gp-consigne { margin-bottom: 3mm; }
.geo-svg { display: block; margin: 0 auto; max-width: 100%; height: auto; }
.geo-num { margin: 2mm 0 1mm; font-weight: 800; font-size: 11pt; color: #3F4E59; }
.geo-grid line, .geo-grid path { vector-effect: non-scaling-stroke; }

/* Affichages de classe */
.af-page { padding: 12mm; gap: 5mm; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.af-title { margin: 0 0 2mm; font-family: var(--font-title); font-size: 26pt; font-weight: 800; text-align: center; }
.af-help { margin: auto 0 0; font-size: 9pt; color: #55636F; text-align: center; }
.af-strip { display: flex; align-items: stretch; height: 22mm; border: 0.4mm solid #12212C; border-right: 0; width: max-content; margin: 0 auto; }
.af-num { width: 17.5mm; display: flex; align-items: center; justify-content: center; border-right: 0.4mm solid #12212C; font-family: var(--font-title); font-weight: 800; font-size: 22pt; font-variant-numeric: tabular-nums; }
.af-glue { width: 9mm; display: flex; align-items: center; justify-content: center; border: 0.3mm dashed #8A97A1; border-left: 0; margin: -0.4mm 0; writing-mode: vertical-rl; font-size: 7pt; color: #8A97A1; }
.af-alpha-grid { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 4mm; }
.af-letter { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1mm; border: 0.5mm solid #12212C; border-radius: 4mm; padding: 2mm; }
.af-letter.is-vowel { background: #FDE8E3; border-color: #E8556D; }
.af-caps { font-family: var(--font-title); font-weight: 800; font-size: 34pt; line-height: 1; }
.af-print { font-family: var(--font-body); font-weight: 700; font-size: 30pt; line-height: 1; }
.af-cursive { font-family: 'Cursive Ecole', cursive; font-weight: 300; font-size: 30pt; line-height: 1.25; color: #1B2A6B; }
.af-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 6mm; padding: 4mm 7mm; border-radius: 4mm; }
.af-cal-head .af-title { margin: 0; text-align: left; font-size: 30pt; }
.af-season { font-weight: 800; font-size: 13pt; color: #3F4E59; }
.af-cal-grid { flex: 1; display: grid; grid-auto-rows: auto; gap: 1.5mm; grid-template-rows: auto; align-content: stretch; }
.af-cal-day { text-align: center; padding: 2mm 0; border-radius: 2mm; color: #fff; font-weight: 800; font-size: 11pt; }
.af-cal-cell { min-height: 30mm; border: 0.4mm solid #C9D2D8; border-radius: 2mm; padding: 1.5mm 2mm; display: flex; flex-direction: column; gap: 1mm; }
.af-cal-cell.is-empty { border-style: dashed; border-color: #E4E9EC; }
.af-cal-cell.is-weekend { background: #F4F6F8; }
.af-cal-cell.is-holiday { background: #FFF4D1; }
.af-cal-n { font-family: var(--font-title); font-weight: 800; font-size: 18pt; line-height: 1; }
.af-cal-note { font-size: 8pt; font-weight: 700; color: #8A5A00; }
.af-cal-bd { font-size: 9pt; font-weight: 800; color: #B03A55; }
.af-bd-grid { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 4mm; }
.af-bd-month { border-radius: 4mm; padding: 3mm 4mm; overflow: hidden; }
.af-bd-month h3 { margin: 0 0 2mm; font-family: var(--font-title); font-size: 15pt; }
.af-bd-month ul { list-style: none; margin: 0; padding: 0; font-size: 11pt; display: flex; flex-direction: column; gap: 1mm; }
.af-sub { margin: 4mm 0 2mm; font-family: var(--font-title); font-size: 15pt; }
.af-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2mm; }
.af-week span { padding: 5mm 1mm; text-align: center; border-radius: 3mm; color: #fff; font-weight: 800; font-size: 13pt; }
.af-months { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3mm; }
.af-month { display: flex; align-items: center; gap: 3mm; padding: 5mm 4mm; border-radius: 3mm; }
.af-month-n { width: 9mm; height: 9mm; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; }
.af-month-name { font-family: var(--font-title); font-weight: 800; font-size: 16pt; }
.af-seasons { display: flex; justify-content: center; gap: 3mm; margin: 4mm 0 0; }
.af-seasons span { padding: 2mm 5mm; border-radius: 99px; font-weight: 800; }
.af-words { flex: 1; display: grid; grid-template-columns: 1fr; grid-auto-rows: 1fr; gap: 1mm; }
.af-word { display: flex; align-items: center; gap: 5mm; padding: 0 4mm; border-radius: 2mm; font-size: 13pt; }
.af-word-n { width: 12mm; text-align: right; font-family: var(--font-title); font-weight: 800; font-size: 15pt; font-variant-numeric: tabular-nums; }
.af-word-w { font-weight: 700; }

/* Syllabes et mots outils */
.sy-page { padding: 14mm; gap: 6mm; }
.sy-title { margin: 0; font-family: var(--font-title); font-size: 22pt; text-align: center; }
.sy-v { color: #D3283F; }
.sy-table { border-collapse: collapse; margin: 0 auto; }
.sy-table th, .sy-table td { border: 0.4mm solid #12212C; text-align: center; padding: 2mm 3mm; min-width: 20mm; }
.sy-table th { background: #EEF2F4; }
.sy-size-s .sy-table { font-size: 18pt; } .sy-size-m .sy-table { font-size: 24pt; } .sy-size-l .sy-table { font-size: 30pt; }
.sy-line { display: flex; justify-content: space-around; border-bottom: 0.3mm solid #E4E9EC; padding: 2.5mm 0; }
.sy-size-s .sy-line { font-size: 22pt; } .sy-size-m .sy-line { font-size: 30pt; } .sy-size-l .sy-line { font-size: 38pt; }
.sy-item { min-width: 22mm; text-align: center; }
.sy-words { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3mm 8mm; }
.sy-word { padding: 1mm 0; border-bottom: 0.3mm solid #E4E9EC; }
.sy-size-s .sy-words { font-size: 16pt; } .sy-size-m .sy-words { font-size: 21pt; grid-template-columns: repeat(3, 1fr); } .sy-size-l .sy-words { font-size: 28pt; grid-template-columns: repeat(2, 1fr); }
.sy-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 0.3mm dashed #8A97A1; border-left: 0.3mm dashed #8A97A1; }
.sy-card { display: flex; align-items: center; justify-content: center; min-height: 34mm; border-right: 0.3mm dashed #8A97A1; border-bottom: 0.3mm dashed #8A97A1; text-align: center; padding: 2mm; }
.sy-size-s .sy-cards { grid-template-columns: repeat(4, 1fr); font-size: 18pt; } .sy-size-s .sy-card { min-height: 30mm; }
.sy-size-m .sy-cards { font-size: 24pt; }
.sy-size-l .sy-cards { grid-template-columns: repeat(2, 1fr); font-size: 34pt; } .sy-size-l .sy-card { min-height: 40mm; }
.sy-print { font-family: var(--font-body); font-weight: 700; }
.sy-caps { font-family: var(--font-body); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.sy-cursive .sy-table, .sy-cursive .sy-line, .sy-cursive .sy-words, .sy-cursive .sy-cards { font-family: 'Cursive Ecole', cursive; font-weight: 300; color: #1B2A6B; }
.sy-cursive.sy-size-m .sy-line { font-size: 34pt; }

/* Fluence */
.fl-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; padding: 4px; background: var(--soft, #EEF2F4); border-radius: 12px; width: max-content; max-width: 100%; }
.fl-tabs button { border: 0; background: none; padding: 9px 16px; border-radius: 9px; font: inherit; font-weight: 800; color: var(--muted); cursor: pointer; min-height: 40px; }
.fl-tabs button[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(18,33,44,.12); }
.fl-setup { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px 18px; margin-bottom: 16px; }
.fl-setup .field { margin: 0; }
.fl-stage { padding: 0; overflow: hidden; }
.fl-bar { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; padding: 14px 20px; background: #fff; border-bottom: 1px solid var(--line); }
.fl-timer { font-family: var(--font-title); font-weight: 800; font-size: 40px; line-height: 1; min-width: 3.2ch; font-variant-numeric: tabular-nums; color: var(--ink); }
.fl-timer.is-ending { color: #C2410C; }
.fl-timer.is-done { color: var(--primary); }
.fl-step { flex: 1 1 260px; margin: 0; font-weight: 700; color: var(--muted); }
.fl-actions { display: flex; gap: 8px; }
.fl-text { padding: 20px 24px 28px; font-size: 21px; line-height: 2; max-width: 60em; }
.fl-text p { margin: 0 0 .7em; }
.fl-w { border: 0; background: none; font: inherit; color: var(--text); padding: 0 2px; margin: 0 -2px; border-radius: 5px; cursor: pointer; }
.fl-w:hover { background: var(--soft, #EEF2F4); }
.fl-w:focus-visible { outline: 3px solid var(--primary); }
.fl-text.is-running .fl-w:hover { background: #FDE8E3; }
.fl-text.is-choosing .fl-w:hover { background: #DFEDFC; box-shadow: inset -3px 0 0 var(--primary); }
.fl-w.is-error { background: #FDE8E3; color: #B42318; text-decoration: line-through; text-decoration-thickness: 2px; }
.fl-w.is-last { background: #D6F1E8; box-shadow: inset -4px 0 0 var(--primary); font-weight: 800; }
.fl-w.is-after { color: #A3AEB6; }
.fl-punct { color: var(--muted); }
.fl-result { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; padding: 18px 24px; border-top: 1px solid var(--line); background: #F8FAFB; }
.fl-score { display: flex; align-items: baseline; gap: 10px; }
.fl-score strong { font-family: var(--font-title); font-size: 54px; line-height: 1; }
.fl-score span { font-weight: 700; color: var(--muted); max-width: 12em; }
.fl-score .is-ok { color: #157347; } .fl-score .is-near { color: #B45309; } .fl-score .is-low { color: #B42318; }
.fl-detail { display: grid; grid-template-columns: repeat(4, auto); gap: 4px 22px; margin: 0; }
.fl-detail div { display: flex; flex-direction: column; }
.fl-detail dt { font-size: 13px; color: var(--muted); font-weight: 700; }
.fl-detail dd { margin: 0; font-weight: 800; font-size: 18px; display: flex; align-items: center; gap: 6px; }
.fl-mini { width: 30px; height: 30px; border-radius: 8px; border: 1.5px solid var(--line-strong); background: #fff; font: inherit; font-weight: 800; cursor: pointer; }
.fl-ref { flex-basis: 100%; margin: 0; color: var(--muted); }
.fl-result-actions { display: flex; gap: 8px; margin-left: auto; }
.fl-results-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.fl-results-head p { margin: 0; flex: 1 1 400px; }
.fl-table td { vertical-align: middle; }
.fl-table .badge { margin-left: 6px; }
.fl-pill { display: inline-block; padding: 3px 10px; border-radius: 99px; font-weight: 800; background: var(--soft, #EEF2F4); }
.fl-pill.is-ok { background: #D6F1E8; color: #0F5132; } .fl-pill.is-near { background: #FFF1CC; color: #7A4B00; } .fl-pill.is-low { background: #FDE2DE; color: #8A1C12; }
.fl-when { margin-left: 8px; }
.fl-diff { margin-left: 8px; font-weight: 800; font-size: 13px; }
.fl-diff.is-up { color: #157347; } .fl-diff.is-down { color: #B42318; }
.fl-spark { width: 140px; height: 36px; display: block; }
.fl-spark-ref { stroke: #E8556D; stroke-dasharray: 3 3; stroke-width: 1; }
.fl-spark-line { fill: none; stroke: var(--primary); stroke-width: 2; }
.fl-spark-dot { fill: var(--primary); }
.fl-history summary { cursor: pointer; font-weight: 700; color: var(--primary); }
.fl-history ul { margin: 6px 0 0; padding-left: 18px; font-size: 14px; display: flex; flex-direction: column; gap: 4px; }
.fl-history .link-btn { margin-left: 8px; }
.fl-sheets-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 20px; margin-bottom: 16px; }
.fl-sheets-head .field { margin: 0; }
.fl-sheet-text { line-height: 1.9; text-align: left; }
.fl-sheet-text p { margin: 0 0 .8em; text-indent: 1.2em; }
.fl-lines { width: 100%; border-collapse: collapse; font-size: 11.5pt; }
.fl-lines td { padding: 1.6mm 0; border-bottom: 0.2mm solid #E4E9EC; line-height: 1.5; }
.fl-cum { width: 14mm; text-align: right; font-weight: 800; color: #3F4E59; font-variant-numeric: tabular-nums; }
.fl-calc { display: flex; flex-wrap: wrap; gap: 3mm 10mm; margin-top: 7mm; padding: 4mm 5mm; border: 0.4mm solid #12212C; border-radius: 3mm; font-weight: 800; font-size: 11pt; }
.fl-sheet-note { margin: 4mm 0 0; font-size: 9pt; color: #55636F; }
.fl-own { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fl-own li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.fl-own form { margin: 0; }

@media (max-width: 700px) {
  .fl-text { font-size: 18px; padding: 16px; }
  .fl-detail { grid-template-columns: repeat(2, auto); }
  .fl-timer { font-size: 32px; }
}

@media print {
  .page-fluency .site-header, .page-fluency .no-print, .page-fluency .flashes, .page-fluency .page-head { display: none !important; }
  .page-fluency .app-main, .page-fluency .container { padding: 0; margin: 0; max-width: none; }
  body.page-fluency[data-fl-tab="sheets"] main { page: fiche; }
  .page-fluency .gen-preview { background: none; padding: 0; border-radius: 0; overflow: visible; }
  .page-fluency .gen-pages { zoom: 1; display: block; }
  .page-fluency .gen-page { box-shadow: none; break-after: page; margin: 0; }
  .page-fluency .gen-page:last-child { break-after: auto; }
  .page-fluency .fl-spark { width: 110px; }
}
.fl-setup .field, .fl-sheets-head .field { min-width: 0; }
.fl-setup select, .fl-sheets-head select { width: 100%; max-width: 100%; min-width: 0; }
@media (max-width: 700px) { .fl-setup { grid-template-columns: minmax(0, 1fr); } .fl-sheets-head .field { flex: 1 1 100%; } }
.gen-options select, .gen-options input, .gen-options textarea { max-width: 100%; }
.dictee-lists { padding-top: 10mm; padding-bottom: 8mm; gap: 4mm; }
.dictee-lists .dictee-list { flex: 1 1 0; min-height: 0; overflow: hidden; padding: 3mm 5mm; }
.dictee-lists .dictee-list h3 { font-size: 11pt; margin-bottom: 1.5mm; }
.dictee-lists .dictee-words { font-size: 12pt; gap: 1mm 6mm; }
.dictee-lists .dw-cursive { line-height: 1.15; }
.seyes-svg { display: block; margin: 2mm auto 0; }
.af-letter { gap: 2.5mm; padding: 3mm 2mm; }
.af-caps, .af-print { line-height: 1.15; }
.af-print { font-size: 26pt; }
.af-cursive { line-height: 1.6; font-size: 28pt; }
.price { display: flex; flex-direction: column; }
.price-old { display: block; font-family: var(--font-body); font-size: 17px; font-weight: 700; color: var(--muted); text-decoration-thickness: 2px; text-decoration-color: #D3283F; }
.price-old-none { text-decoration: none; color: var(--primary); }

/* Lancement : remerciements pour les retours */
.launch-banner .launch-thanks { flex-basis: 100%; margin: 0; }
.launch-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.thanks-note { display: flex; gap: 14px; align-items: flex-start; max-width: 820px; margin: -8px auto 28px; padding: 14px 18px; border-radius: var(--radius-l); background: #fff; border: 1.5px dashed var(--line-strong); }
.thanks-note p { margin: 0; }
.thanks-icon { font-size: 24px; line-height: 1.2; }
.footer-thanks { margin-top: 8px; font-size: 14px; opacity: .9; }

/* Publicité et cookies */
.ad-slot { margin: 24px auto; max-width: 970px; text-align: center; }
.ad-label { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.consent-banner { position: fixed; z-index: 1000; left: 16px; right: 16px; bottom: 16px; max-width: 640px; margin: 0 auto; padding: 18px 20px; background: #fff; color: var(--text); border-radius: 16px; box-shadow: 0 12px 40px rgba(18,33,44,.25); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.consent-banner p { margin: 0; font-size: 15px; }
.consent-details { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.consent-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
@media print { .consent-banner, .ad-slot { display: none !important; } }

/* Pièces jointes */
.session-files { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 16px 12px; }
.session-files.is-empty .file-list { display: none; }
.file-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.file-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 14px; max-width: 100%; }
.file-chip a { display: inline-flex; gap: 4px; align-items: center; font-weight: 700; color: var(--ink); text-decoration: none; min-width: 0; }
.file-chip a span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 26ch; }
.file-chip a:hover { color: var(--primary); text-decoration: underline; }
.file-size { color: var(--muted); font-size: 12px; }
.file-chip .icon-btn { width: 26px; height: 26px; min-height: 26px; }
.file-add { position: relative; cursor: pointer; }
.file-add input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.file-add:focus-within { outline: 3px solid var(--primary); outline-offset: 2px; }
.file-status.is-error { color: #B42318; font-weight: 700; }
.chat-attach { position: relative; display: inline-grid; place-items: center; cursor: pointer; }
.chat-attach input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.chat-attach:focus-within { outline: 3px solid var(--primary); }
.chat-pending { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 6px 10px; border-radius: 10px; background: var(--soft, #EEF2F4); font-weight: 700; }
.chat-pending .muted { font-weight: 400; flex-basis: 100%; }
.msg-file { display: inline-flex; margin-top: 6px; max-width: 100%; border-radius: 12px; overflow: hidden; text-decoration: none; color: var(--ink); }
.msg-file-image img { display: block; max-width: min(320px, 100%); height: auto; max-height: 260px; object-fit: contain; border-radius: 12px; border: 1px solid var(--line); background: #fff; }
.msg-file-pdf { align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border: 1px solid var(--line); background: #fff; }
.msg-file-pdf:hover { border-color: var(--primary); }
.msg-file-icon { display: grid; place-items: center; width: 40px; height: 46px; border-radius: 6px; background: #FDE8E3; color: #B42318; font-weight: 800; font-size: 12px; }
.msg-file-text { display: flex; flex-direction: column; min-width: 0; }
.msg-file-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 30ch; }
@media print { .session-files.is-empty { display: none; } .file-chip { border: 0; padding: 0; } }

/* Opérations posées : colonnes exactes (virgule étroite), traits continus, division avec de la place */
.gp-posed { gap: 16mm 8mm; align-content: start; }
.posed { font-size: 17pt; justify-content: start; }
.pc { height: 9.5mm; }
.pc-comma { width: auto; font-weight: 800; }
.posed-op .pc, .posed-op .pc-comma { border-bottom: 0.5mm solid #12212C; }
.pc-hint { color: #B5C0C7; }
.potence { grid-template-columns: minmax(26mm, max-content) minmax(24mm, max-content); grid-template-rows: 10mm 10mm 36mm; font-size: 17pt; min-width: 0; }
.pot-dividend { letter-spacing: .12em; }
.pot-divisor { min-width: 24mm; }
.pot-quotient { grid-row: 2 / 4; align-self: stretch; }
.pot-rest { grid-column: 1; grid-row: 3; }
.potence { grid-template-rows: 10mm 10mm 30mm; }

/* ==========================================================================
   Apprendre (élèves, sans inscription)
   ========================================================================== */
.w-caps { font-family: var(--font-body); font-weight: 800; letter-spacing: .02em; }
.w-print { font-family: var(--font-body); font-weight: 700; }
.w-cursive { font-family: 'Cursive Ecole', cursive; font-weight: 300; }
.learn-page { padding: 28px 0 8px; }
.learn-page:fullscreen { background: var(--bg, #F6F8F7); overflow: auto; padding: 20px; }
.learn-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 24px; margin-bottom: 18px; }
.learn-head h1 { margin: 2px 0 6px; font-size: clamp(30px, 5vw, 46px); }
.learn-kicker { margin: 0; font-weight: 800; color: var(--primary); text-transform: uppercase; letter-spacing: .06em; font-size: 13px; }
.learn-lead { margin: 0; color: var(--muted); max-width: 60ch; }
.learn-app { min-height: 60vh; }
.learn-info ul { padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.learn-promo-inner { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.learn-promo-visual { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.learn-promo-visual span { display: grid; place-items: center; aspect-ratio: 1; border-radius: 22px; background: #fff; box-shadow: 0 6px 18px rgba(18,33,44,.08); font-family: var(--font-title); font-weight: 800; font-size: clamp(30px, 5vw, 52px); color: var(--ink); }
.learn-promo-visual span:nth-child(1) { background: #FDE8E3; } .learn-promo-visual span:nth-child(3) { background: #E6F5EC; } .learn-promo-visual span:nth-child(5) { background: #DFEDFC; }
.learn-promo-visual .w-cursive { color: #1B2A6B; font-weight: 300; }
@media (max-width: 760px) { .learn-promo-inner { grid-template-columns: 1fr; } }

/* Menu */
.ln-settings { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding: 14px 18px; border-radius: 18px; background: #fff; border: 1px solid var(--line); margin-bottom: 22px; }
.ln-setting { display: flex; align-items: center; gap: 10px; font-weight: 800; }
.ln-seg { display: inline-flex; padding: 4px; gap: 2px; border-radius: 14px; background: var(--soft, #EEF2F4); }
.ln-seg button { border: 0; background: none; padding: 8px 14px; border-radius: 10px; font: inherit; font-weight: 800; color: var(--muted); cursor: pointer; min-height: 40px; }
.ln-seg button.is-on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(18,33,44,.15); }
.ln-check { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; cursor: pointer; }
.ln-check input { width: 22px; height: 22px; accent-color: var(--primary); }
.ln-hint { color: var(--muted); font-size: 15px; text-align: center; margin: 10px 0 0; }
.ln-group { margin-bottom: 26px; }
.ln-group-title { font-size: 24px; margin: 0 0 12px; display: flex; align-items: center; gap: 10px; }
.ln-group-title::before { content: ''; width: 14px; height: 14px; border-radius: 50%; background: var(--dot, var(--primary)); }
.ln-group-coral { --dot: #F2836B; --tile: #FDE8E3; } .ln-group-sky { --dot: #6AA9D8; --tile: #DFEDFC; } .ln-group-sun { --dot: #F5B94C; --tile: #FFF4D1; } .ln-group-mint { --dot: #7BC59A; --tile: #E6F5EC; }
.ln-tiles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.ln-tile-card { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 12px; row-gap: 2px; padding: 14px 16px; border-radius: 18px; background: #fff; border: 1.5px solid var(--line); text-decoration: none; color: var(--ink); transition: transform .12s, box-shadow .12s, border-color .12s; }
.ln-tile-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(18,33,44,.1); border-color: var(--dot); }
.ln-tile-card:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.ln-tile-icon { grid-row: span 3; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: var(--tile); font-size: 28px; }
.ln-tile-title { font-family: var(--font-title); font-weight: 800; font-size: 18px; }
.ln-tile-desc { font-size: 14px; color: var(--muted); line-height: 1.3; }
.ln-tile-stars { font-size: 16px; color: #D5DCE1; letter-spacing: 2px; }
.ln-tile-stars.has-stars { color: #F5A623; }

/* Activité */
.ln-act { background: #fff; border-radius: 24px; border: 1px solid var(--line); padding: 16px 20px 24px; }
.ln-act-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.ln-back { border: 1.5px solid var(--line-strong); background: #fff; border-radius: 12px; padding: 8px 14px; font: inherit; font-weight: 800; cursor: pointer; min-height: 44px; }
.ln-act-title { margin: 0; flex: 1; font-size: 22px; min-width: 0; }
.ln-progress { display: flex; gap: 6px; }
.ln-dot { width: 14px; height: 14px; border-radius: 50%; background: #E4E9EC; }
.ln-dot.is-done { background: var(--primary); }
.ln-dot.is-now { background: #F5B94C; transform: scale(1.25); }
.ln-act-body { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.ln-listen { position: absolute; top: 0; right: 0; width: 56px; height: 56px; border-radius: 50%; border: 0; background: #DFEDFC; font-size: 26px; cursor: pointer; }
.ln-prompt { text-align: center; min-height: 80px; display: flex; justify-content: center; }
.ln-q { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ln-q-text { margin: 0; font-family: var(--font-title); font-weight: 800; font-size: clamp(22px, 3.2vw, 32px); color: var(--ink); }
.ln-q-sub { margin: 0; font-size: 22px; color: var(--muted); }
.ln-q-glyph { font-size: clamp(70px, 12vw, 130px); line-height: 1.15; color: var(--ink); }
.ln-q-word, .ln-q-sentence { font-size: clamp(30px, 5vw, 54px); color: var(--ink); line-height: 1.3; text-align: center; }
.ln-q-sentence { font-size: clamp(26px, 4.2vw, 44px); max-width: 22ch; }
.ln-q-digit { font-size: clamp(60px, 10vw, 110px) !important; }
.ln-big-emoji { font-size: clamp(80px, 14vw, 140px); line-height: 1; }
.w-cursive.ln-q-word, .w-cursive.ln-q-sentence, .ln-choice .w-cursive { color: #1B2A6B; }
.ln-choices { display: grid; gap: 14px; width: 100%; max-width: 900px; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.ln-choices-words { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.ln-choices-pairs .ln-emoji { letter-spacing: 6px; }
.ln-choice { position: relative; display: grid; place-items: center; min-height: 110px; padding: 10px; border-radius: 22px; border: 3px solid var(--line); background: #fff; color: var(--ink); font: inherit; cursor: pointer; transition: transform .1s, border-color .1s, background .1s; -webkit-tap-highlight-color: transparent; }
.ln-choice:hover { border-color: #6AA9D8; transform: translateY(-2px); }
.ln-choice:focus-visible { outline: 4px solid var(--primary); outline-offset: 2px; }
.ln-choice > span { font-size: 54px; line-height: 1.2; }
.ln-choices-letters .ln-choice > span { font-size: 64px; }
.ln-choices-words .ln-choice > span { font-size: 34px; }
.ln-choices-emoji .ln-choice > span { font-size: 64px; }
.ln-choice .ln-word-small { font-size: 22px; font-weight: 700; }
.ln-choice.is-ok { background: #E6F5EC; border-color: #24804A; animation: ln-pop .35s; }
.ln-choice.is-ok::after { content: '✓'; position: absolute; top: 6px; right: 12px; font-size: 22px; font-weight: 800; color: #24804A; }
.ln-choice.is-ko { background: #FDE8E3; border-color: #E8556D; opacity: .55; animation: ln-shake .35s; }
.ln-feedback { margin: 0; min-height: 1.4em; font-family: var(--font-title); font-weight: 800; font-size: 26px; text-align: center; }
.ln-feedback.is-ok { color: #24804A; } .ln-feedback.is-ko { color: #C2410C; }
@keyframes ln-pop { 50% { transform: scale(1.08); } }
@keyframes ln-shake { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
.ln-btn { min-height: 52px; padding: 10px 20px; border-radius: 14px; border: 2px solid var(--line-strong); background: #fff; color: var(--ink); font: inherit; font-weight: 800; font-size: 18px; cursor: pointer; }
.ln-btn:hover { border-color: var(--primary); }
.ln-btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.ln-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ln-sub { margin: 10px 0 0; font-size: 20px; }
.ln-end { text-align: center; padding: 20px 0; }
.ln-end-stars { margin: 0; font-size: 72px; color: #F5A623; letter-spacing: 8px; }
.ln-end-title { margin: 6px 0; font-family: var(--font-title); font-weight: 800; font-size: 36px; }
.ln-end-score { color: var(--muted); font-size: 18px; }
.ln-end-actions { display: flex; justify-content: center; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.ln-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 100; overflow: hidden; }
.ln-confetti i { position: absolute; top: -20px; width: 12px; height: 18px; border-radius: 3px; animation: ln-fall linear forwards; }
@keyframes ln-fall { to { transform: translateY(110vh) rotate(720deg); } }

/* Alphabet, chiffres */
.ln-letter-card, .ln-number-card { width: 100%; max-width: 820px; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px; border-radius: 22px; background: var(--soft, #F3F6F7); }
.ln-forms { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.ln-form { display: flex; flex-direction: column; align-items: center; min-width: 130px; padding: 10px 18px; border-radius: 18px; background: #fff; }
.ln-form-glyph { font-size: clamp(64px, 10vw, 110px); line-height: 1.2; color: var(--ink); }
.ln-form-glyph.w-cursive { color: #1B2A6B; }
.ln-form-label { font-size: 13px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.ln-example { display: flex; align-items: center; gap: 14px; margin: 0; font-size: clamp(24px, 3.5vw, 34px); font-weight: 700; }
.ln-example .ln-emoji { font-size: 1.8em; }
.ln-example mark { background: #FFE58A; border-radius: 6px; padding: 0 3px; color: inherit; }
.ln-tag { margin: 0; font-weight: 800; color: var(--muted); }
.ln-abc { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 8px; width: 100%; max-width: 900px; }
.ln-abc-btn { min-height: 62px; border-radius: 14px; border: 2px solid var(--line); background: #fff; font: inherit; font-size: 30px; cursor: pointer; color: var(--ink); }
.ln-abc-btn.is-vowel { background: #FDE8E3; }
.ln-abc-btn.is-on { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(42,114,189,.25); }
.ln-abc-btn .w-cursive { color: #1B2A6B; font-size: 34px; }
.ln-digits .ln-abc-btn { font-family: var(--font-title); font-weight: 800; }
.ln-digit { font-family: var(--font-title); font-weight: 800; font-variant-numeric: tabular-nums; }
.ln-number-word { margin: 0; font-size: clamp(26px, 4vw, 40px); font-weight: 800; }
.ln-qty { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; max-width: 640px; }
.ln-qty-item { font-size: 38px; }
.ln-qty-item.is-five { margin-right: 14px; }
.ln-plus { font-family: var(--font-title); font-weight: 800; font-size: 40px; color: var(--muted); padding: 0 8px; }
.ln-frame { display: grid; grid-template-columns: repeat(5, 46px); gap: 4px; padding: 6px; border: 3px solid var(--ink); border-radius: 10px; background: #fff; }
.ln-frame span { width: 46px; height: 46px; border: 2px dashed #C9D2D8; border-radius: 6px; position: relative; }
.ln-frame span.is-on::after { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: #E8556D; }
.ln-frame-20 { grid-template-columns: repeat(10, 34px); }
.ln-frame-20 span { width: 34px; height: 34px; }
.ln-frame-5 { grid-template-columns: repeat(5, 54px); }
.ln-frame-5 span { width: 54px; height: 54px; }

/* Questions particulières */
.ln-seq, .ln-word-hole { display: flex; align-items: center; justify-content: center; gap: 18px; font-size: clamp(54px, 9vw, 96px); }
.ln-word-hole { gap: 4px; font-size: clamp(44px, 7vw, 76px); }
.ln-seq .w-cursive, .ln-word-hole .w-cursive { color: #1B2A6B; }
.ln-seq-hole { display: inline-grid; place-items: center; min-width: 1.1em; height: 1.2em; border-radius: 14px; border: 4px dashed #F5B94C; color: #B07800; font-family: var(--font-title); font-weight: 800; font-size: .8em; }
.ln-sign { display: flex; flex-direction: column; align-items: center; }
.ln-sign strong { font-size: 54px; font-family: var(--font-title); }
.ln-sign small { font-size: 13px; color: var(--muted); font-weight: 700; }
.ln-count { display: grid; grid-template-columns: repeat(6, 64px); gap: 6px; padding: 12px; border-radius: 18px; background: var(--soft, #F3F6F7); }
.ln-count-cell { display: grid; place-items: center; width: 64px; height: 56px; font-size: 40px; }
.ln-blocks { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 8px; max-width: 720px; }
.ln-b100 { width: 100px; height: 100px; background: repeating-linear-gradient(90deg, transparent 0 9px, rgba(0,0,0,.15) 9px 10px), repeating-linear-gradient(0deg, #F5B94C 0 9px, #D69A2C 9px 10px); border: 2px solid #B07800; border-radius: 4px; }
.ln-b10 { width: 12px; height: 100px; background: repeating-linear-gradient(0deg, #6AA9D8 0 9px, #3C7FB3 9px 10px); border: 2px solid #2468B0; border-radius: 3px; }
.ln-b1 { width: 12px; height: 12px; background: #7BC59A; border: 2px solid #24804A; border-radius: 3px; }
.ln-line { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; border-bottom: 4px solid var(--ink); padding-bottom: 10px; }
.ln-line-cell { min-width: 90px; text-align: center; font-family: var(--font-title); font-weight: 800; font-size: clamp(30px, 5vw, 46px); position: relative; padding: 0 8px; }
.ln-line-cell::after { content: ''; position: absolute; left: 50%; bottom: -16px; width: 4px; height: 14px; background: var(--ink); }
.ln-line-cell.is-hole { color: #B07800; }

/* Tracé */
.ln-trace { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 16px; width: 100%; }
.ln-trace-stage { background: #fff; border: 2px solid var(--line); border-radius: 20px; overflow: hidden; touch-action: none; }
.ln-canvas { display: block; width: 100%; touch-action: none; cursor: crosshair; }
.ln-trace-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; max-height: 60vh; overflow: auto; }
.ln-mini { min-height: 44px; border-radius: 10px; border: 2px solid var(--line); background: #fff; font: inherit; font-size: 22px; cursor: pointer; }
.ln-mini.is-on { border-color: var(--primary); background: #E6F5EC; }
.ln-mini .w-cursive { color: #1B2A6B; }
.ln-trace-tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
@media (max-width: 760px) { .ln-trace { grid-template-columns: 1fr; } .ln-trace-pick { grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); max-height: none; } }

/* Syllabes */
.ln-syl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; width: 100%; align-items: start; }
.ln-syl-col { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 6px; }
.ln-syl-head { grid-column: 1 / -1; margin: 0; font-weight: 800; color: var(--muted); text-align: center; }
.ln-syl-btn { min-height: 58px; border-radius: 14px; border: 2px solid var(--line); background: #fff; font: inherit; font-size: 28px; cursor: pointer; }
.ln-syl-btn.is-cons { color: #1E5A96; } .ln-syl-btn.is-vow { color: #B42318; }
.ln-syl-btn.is-on { border-color: currentColor; box-shadow: 0 0 0 3px currentColor inset; }
.ln-syl-result { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px; border-radius: 22px; background: var(--soft, #F3F6F7); }
.ln-syl-eq { display: flex; align-items: center; gap: 10px; font-size: 44px; }
.ln-syl-big { font-size: clamp(80px, 12vw, 140px); line-height: 1.1; }
.ln-syl-result .is-cons { color: #1E5A96; } .ln-syl-result .is-vow { color: #B42318; }
.ln-syl-result.is-anim .ln-syl-big { animation: ln-join .5s; }
@keyframes ln-join { from { letter-spacing: .6em; opacity: .4; } to { letter-spacing: 0; opacity: 1; } }
.ln-syl-line { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ln-syl-read { min-width: 110px; min-height: 80px; border-radius: 18px; border: 2px solid var(--line); background: #fff; font: inherit; font-size: 44px; cursor: pointer; }
.ln-syl-read .w-cursive { color: #1B2A6B; }
@media (max-width: 760px) { .ln-syl { grid-template-columns: 1fr; } .ln-syl-result { order: -1; } }

/* Lettres mobiles */
.ln-slots { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ln-slot { display: grid; place-items: center; width: 64px; height: 76px; border-bottom: 5px solid var(--ink); font-size: 50px; }
.ln-slot.is-full { border-color: var(--primary); }
.ln-slot .w-cursive { color: #1B2A6B; }
.ln-tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ln-tile { width: 70px; height: 76px; border-radius: 16px; border: 3px solid #F5B94C; background: #FFF4D1; font: inherit; font-size: 44px; cursor: pointer; box-shadow: 0 4px 0 #D69A2C; }
.ln-tile.is-used { opacity: .2; box-shadow: none; }
.ln-tile.is-shake { animation: ln-shake .35s; border-color: #E8556D; }
.ln-tile .w-cursive { color: #1B2A6B; }

/* Dictée de nombres */
.ln-typed { min-width: 240px; min-height: 96px; padding: 6px 24px; border-radius: 20px; border: 3px solid var(--ink); background: #fff; font-family: var(--font-title); font-weight: 800; font-size: 72px; text-align: center; letter-spacing: .08em; }
.ln-keypad { display: grid; grid-template-columns: repeat(3, 84px); gap: 10px; }
.ln-key { height: 72px; border-radius: 16px; border: 2px solid var(--line-strong); background: #fff; font: inherit; font-family: var(--font-title); font-weight: 800; font-size: 32px; cursor: pointer; }
.ln-key.is-ok { background: var(--primary); border-color: var(--primary); color: #fff; }
@media (max-width: 560px) {
  .ln-choice { min-height: 90px; }
  .ln-choice > span, .ln-choices-letters .ln-choice > span, .ln-choices-emoji .ln-choice > span { font-size: 44px; }
  .ln-count { grid-template-columns: repeat(4, 56px); }
  .ln-count-cell { width: 56px; }
  .ln-act { padding: 12px; }
  .ln-progress { width: 100%; justify-content: center; }
  .ln-frame-20 { grid-template-columns: repeat(5, 34px); }
}
/* La cursive a de grandes boucles : un peu plus petite, avec plus d'interligne */
.ln-form-glyph.w-cursive { font-size: clamp(46px, 7vw, 80px); line-height: 1.6; }
.ln-q-glyph.w-cursive { font-size: clamp(54px, 9vw, 96px); line-height: 1.6; }
.ln-choice > span.w-cursive { font-size: 0.82em; line-height: 1.55; }
.ln-choices-letters .ln-choice > span.w-cursive { font-size: 50px; }
.ln-choices-words .ln-choice > span.w-cursive { font-size: 30px; }
.ln-syl-big .w-cursive, .ln-syl-big.w-cursive { line-height: 1.5; }
.ln-form { justify-content: flex-end; }

/* Apprendre : écoute et touche, enfants, progrès */
.ln-group-lilac { --dot: #8C6BB8; --tile: #EEE8FC; }
.ln-act-body:has(.ln-touch-prompt) > .ln-listen { display: none; }
.ln-touch-listen { width: 120px; height: 120px; border-radius: 50%; border: 0; background: #EEE8FC; font-size: 56px; cursor: pointer; box-shadow: 0 6px 0 #C9B8EC; transition: transform .1s; }
.ln-touch-listen:active { transform: translateY(4px); box-shadow: 0 2px 0 #C9B8EC; }
.ln-choices-touch .ln-choice { min-height: 150px; }
.ln-choices-touch.ln-choices-letters .ln-choice > span { font-size: 84px; }
.ln-choices-touch.ln-choices-numbers .ln-choice > span { font-size: 70px; }
.ln-choices-touch.ln-choices-words .ln-choice > span { font-size: 40px; }
.ln-who { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -8px 0 22px; }
.ln-who-label { font-weight: 800; margin-right: 4px; }
.ln-who-btn { min-height: 40px; padding: 6px 14px; border-radius: 999px; border: 2px solid var(--line); background: #fff; font: inherit; font-weight: 800; cursor: pointer; color: var(--ink); }
.ln-who-btn.is-on { background: var(--primary); border-color: var(--primary); color: #fff; }
.ln-who-add { display: inline-flex; gap: 4px; }
.ln-who-add input { min-height: 40px; width: 150px; padding: 6px 12px; border-radius: 999px; border: 2px dashed var(--line-strong); font: inherit; background: #fff; }
.ln-progress-link { margin-left: auto; font-weight: 800; color: var(--primary); text-decoration: none; padding: 8px 14px; border-radius: 12px; background: #E6F5EC; }
.ln-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.ln-kpi { padding: 14px 16px; border-radius: 16px; background: var(--soft, #F3F6F7); display: flex; flex-direction: column; }
.ln-kpi strong { font-family: var(--font-title); font-size: 30px; font-variant-numeric: tabular-nums; }
.ln-kpi span { color: var(--muted); font-weight: 700; font-size: 14px; }
.ln-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--muted); font-weight: 700; font-size: 14px; margin: 4px 0; }
.ln-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ln-m-dot { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.ln-mastery { margin-top: 16px; }
.ln-mastery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 6px; }
.ln-m { display: grid; place-items: center; min-height: 48px; border-radius: 10px; font-size: 24px; border: 2px solid transparent; }
.ln-m .w-cursive { font-size: 18px; line-height: 1.8; }
.ln-m-ok { background: #D6F1E8; border-color: #7BC59A; } .ln-m-mid { background: #FFF1CC; border-color: #F5B94C; }
.ln-m-ko { background: #FDE2DE; border-color: #E8556D; } .ln-m-new { background: #F1F4F6; color: #9AA7B0; }
.ln-weak { display: flex; flex-wrap: wrap; gap: 8px; }
.ln-weak-chip { display: inline-flex; flex-direction: column; align-items: center; padding: 6px 14px; border-radius: 14px; background: #FDE2DE; font-size: 28px; }
.ln-weak-chip small { font-size: 11px; font-weight: 800; color: #8A1C12; text-transform: uppercase; letter-spacing: .05em; }
.ln-weak-chip .w-cursive { font-size: 20px; line-height: 1.8; }
.ln-bar-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) 60px; align-items: center; gap: 10px; margin: 6px 0; font-weight: 700; }
.ln-bar-track { height: 14px; border-radius: 7px; background: #EEF2F4; overflow: hidden; }
.ln-bar-fill { display: block; height: 100%; background: var(--dot); }
.ln-bar-value { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
.ln-table-wrap { overflow-x: auto; }
.ln-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.ln-table th, .ln-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.ln-table th { color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.ln-reset { justify-content: flex-start; margin-top: 18px; }
.ln-btn.is-armed { border-color: #E8556D; color: #B42318; }
@media (max-width: 560px) {
  .ln-bar-row { grid-template-columns: 1fr 60px; }
  .ln-bar-label { grid-column: 1 / -1; }
  .ln-progress-link { margin-left: 0; }
  .ln-touch-listen { width: 96px; height: 96px; font-size: 44px; }
}

/* ---------------------------------------------------------------------
   CRPE : révision du jour, cartes mémo, calendrier, simulateur d'oral
   --------------------------------------------------------------------- */
.cq-daily { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; padding: 12px 16px; border-radius: 14px; background: var(--sun); color: var(--sun-ink); font-weight: 700; font-size: 14px; }
.cq-daily-bar { display: block; height: 6px; border-radius: 99px; background: rgba(0,0,0,.08); overflow: hidden; }
.cq-daily-bar span { display: block; height: 100%; background: var(--sun-ink); border-radius: 99px; transition: width .35s ease; }
.cq-daily.is-done { background: var(--mint); color: var(--mint-ink); }
.cq-daily.is-done .cq-daily-bar span { background: var(--primary); }
.cq-card.is-flash { background: linear-gradient(180deg, #fff, var(--bg-grey, #F6F8F9)); border-style: dashed; }
.cq-reveal { margin-top: 8px; }
.cq-back { font-size: 18px; line-height: 1.55; padding: 18px 20px; border-radius: 14px; background: var(--lilac); color: var(--ink); white-space: normal; }
.cq-flash-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 16px; }
.cq-done { text-align: center; padding: 36px 24px; }
.cq-done h2 { margin: 4px 0 8px; }

.crpe-daily-card { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding: 20px 24px; border-radius: var(--radius-l); background: var(--sun); margin-bottom: 18px; }
.crpe-daily-card.is-done { background: var(--mint); }
.crpe-flame { font-size: 40px; line-height: 1; text-align: center; }
.crpe-flame strong { display: block; font-family: var(--font-title); font-size: 26px; color: var(--ink); }
.crpe-flame span { display: block; font-size: 12px; font-weight: 700; color: var(--muted); }
.crpe-daily-card h2 { margin: 0 0 4px; font-size: 22px; }
.crpe-daily-card p { margin: 0; }
.crpe-deck { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 13px; font-weight: 700; }
.crpe-deck span::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; background: currentColor; }
.crpe-deck .d-fragile { color: var(--coral-ink); } .crpe-deck .d-learning { color: var(--sun-ink); } .crpe-deck .d-solid { color: var(--primary); }
.crpe-cal { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 12px); gap: 3px; margin-top: 12px; width: max-content; max-width: 100%; overflow-x: auto; }
.crpe-cal span { width: 12px; height: 12px; border-radius: 3px; background: rgba(0,0,0,.07); }
.crpe-cal .c1 { background: #A8DCCB; } .crpe-cal .c2 { background: #5BB89D; } .crpe-cal .c3 { background: var(--primary); }
.crpe-cal .is-future { background: transparent; }

.oral-modes .oral-mode { text-align: left; cursor: pointer; font: inherit; }
.oral-mode .tool-icon { font-size: 22px; }
.oral-note { margin-top: 14px; }
.oral-setup { max-width: 720px; }
.oral-setup .stack { gap: 16px; }
.oral-back { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: var(--primary); font-weight: 700; }
.oral-choice { display: flex; flex-direction: column; gap: 6px; width: 100%; text-align: left; font: inherit; color: var(--ink); background: #fff; border: 1.5px solid var(--line-strong); border-radius: 16px; padding: 18px 20px; margin-top: 12px; cursor: pointer; }
.oral-choice:hover, .oral-choice:focus-visible { border-color: var(--primary); background: var(--mint); }
.oral-kicker { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--lilac-ink); margin: 0 0 4px; }
.oral-run { display: grid; grid-template-columns: minmax(240px, 320px) 1fr; grid-template-areas: 'steps steps' 'clock content'; gap: 18px; align-items: start; }
.oral-steps { grid-area: steps; display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; counter-reset: step; }
.oral-steps li { counter-increment: step; padding: 6px 12px; border-radius: 99px; background: var(--bg-grey, #F3F5F6); color: var(--muted); font-size: 13px; font-weight: 700; }
.oral-steps li::before { content: counter(step) '. '; }
.oral-steps li.is-current { background: var(--ink); color: #fff; }
.oral-steps li.is-done { background: var(--mint); color: var(--mint-ink); }
.oral-clock { grid-area: clock; position: sticky; top: 16px; background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius-l); padding: 20px; text-align: center; }
.oral-phase { margin: 0; font-weight: 800; font-family: var(--font-title); font-size: 18px; }
.oral-time { margin: 6px 0 10px; font-family: var(--font-title); font-weight: 800; font-size: 64px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink); }
.oral-bar { height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; }
.oral-bar span { display: block; height: 100%; width: 0; background: var(--primary); transition: width 1s linear; }
.oral-run.is-warn .oral-time { color: var(--sun-ink); }
.oral-run.is-warn .oral-bar span { background: var(--sun-ink); }
.oral-run.is-over .oral-time { color: var(--coral-ink); }
.oral-run.is-over .oral-bar span { background: var(--coral-ink); }
.oral-run.is-paused .oral-time { opacity: .45; }
.oral-rec { color: var(--coral-ink); font-weight: 700; min-height: 1.2em; }
.oral-clock .btn-row { justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.oral-content { grid-area: content; min-width: 0; }
.oral-subject { padding: 16px 18px; border-radius: 16px; background: var(--lilac); margin-bottom: 14px; }
.oral-subject h3 { margin: 0; font-size: 21px; }
.oral-list { margin: 10px 0; padding-left: 20px; }
.oral-list li { margin: 4px 0; }
.oral-hints { margin: 10px 0; }
.oral-hint-list { background: var(--sun); border-radius: 12px; padding: 12px 14px 12px 32px; color: var(--ink); }
.oral-deck { border: 1.5px dashed var(--line-strong); border-radius: 16px; padding: 16px 18px; }
.oral-question { font-size: 20px; font-weight: 700; margin: 4px 0 10px; }
.oral-eval { max-width: 760px; }
.oral-eval audio { width: 100%; margin: 6px 0; }
.oral-grid { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 6px; }
.oral-crit { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; border: 0; border-bottom: 1px solid var(--line); padding: 0 0 10px; margin: 0; }
.oral-crit legend { float: left; font-weight: 700; padding: 0; max-width: 60%; }
.oral-scale { display: flex; gap: 6px; }
.oral-dot { position: relative; display: block; }
.oral-dot input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; z-index: 1; cursor: pointer; }
.oral-dot span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--line-strong); font-weight: 800; background: #fff; }
.oral-dot input:checked + span { background: var(--primary); border-color: var(--primary); color: #fff; }
.oral-dot input:focus-visible + span { outline: 3px solid var(--sky-ink); outline-offset: 2px; }
@media (max-width: 760px) {
  .oral-run { grid-template-columns: 1fr; grid-template-areas: 'steps' 'clock' 'content'; }
  .oral-clock { position: static; }
  .oral-time { font-size: 52px; }
  .oral-crit legend { max-width: 100%; float: none; }
  .crpe-daily-card { grid-template-columns: auto 1fr; }
  .crpe-daily-card .btn { grid-column: 1 / -1; justify-self: start; }
}
.table-wrap { position: relative; }
.oral-app { margin-bottom: 36px; }

/* ---------------------------------------------------------------------
   Réputation, profil des membres, mes données
   --------------------------------------------------------------------- */
.panel-title-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 12px; }
.panel-title-row h2 { margin-bottom: 12px; }
.rep-card { display: flex; gap: 16px; align-items: flex-start; padding: 16px 18px; border-radius: 16px; background: var(--sun); }
.rep-emoji { font-size: 44px; line-height: 1; }
.rep-main { flex: 1; min-width: 0; }
.rep-main p { margin: 0 0 4px; }
.rep-level { font-family: var(--font-title); font-weight: 800; font-size: 20px; color: var(--ink); }
.rep-points { color: var(--sun-ink); }
.rep-bar { display: block; height: 8px; border-radius: 99px; background: rgba(0,0,0,.08); overflow: hidden; margin: 8px 0 6px; }
.rep-bar span { display: block; height: 100%; background: var(--sun-ink); border-radius: 99px; }
.rep-counts { list-style: none; padding: 0; margin: 16px 0 8px; display: flex; flex-wrap: wrap; gap: 8px; }
.rep-counts li { padding: 6px 12px; border-radius: 99px; background: var(--bg-grey); font-size: 14px; }
.rep-how summary { cursor: pointer; font-weight: 700; font-size: 14px; color: var(--primary); }
.rep-badges-mini { margin-top: 14px; }
.chip-muted { color: var(--muted); background: transparent !important; border-style: dashed !important; }
.badge-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; }
.badge-grid li { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 14px; border: 1.5px solid var(--line); text-align: center; align-items: center; }
.badge-grid .badge-emoji { font-size: 30px; line-height: 1.2; }
.badge-grid strong { font-size: 14px; }
.badge-grid .small { font-size: 12px; line-height: 1.35; }
.badge-grid .is-earned { background: var(--mint); border-color: transparent; }
.badge-grid .is-locked { opacity: .55; }
.badge-grid .is-locked .badge-emoji { filter: grayscale(1); }
.member-head { display: flex; gap: 18px; align-items: center; }
.member-head h1 { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 4px; }
.avatar-xl { width: 72px; height: 72px; font-size: 32px; flex: none; }
.member-grid { gap: 20px; align-items: start; margin-bottom: 20px; }
.member-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.member-list a { font-weight: 700; color: var(--ink); }
.stats-compact { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.stats-compact .stat-value { font-size: 26px; }
.data-promise { margin-top: 16px; padding: 14px 16px; border-radius: 14px; background: var(--mint); }
.data-promise p { margin: 0 0 8px; }
.data-promise .btn-row { margin: 0; flex-wrap: wrap; }
a.msg-pseudo { color: inherit; text-decoration: none; }
a.msg-pseudo:hover { text-decoration: underline; }
.msg-level { font-size: 14px; line-height: 1; cursor: help; }
.chat-me { display: flex; gap: 10px; align-items: center; margin: 6px 0; padding: 10px 14px; border-radius: var(--radius); background: var(--mint); color: var(--mint-ink); text-decoration: none; }
.chat-me-emoji { font-size: 22px; }
.chat-me small { display: block; font-size: 12.5px; font-weight: 600; opacity: .85; }
.chat-me:hover { filter: brightness(.97); color: var(--mint-ink); }


/* ==========================================================================
   Identité Sakado : style « ciel » (bleu, rond, aéré)
   Tout est regroupé ici pour pouvoir l'ajuster d'un coup.
   ========================================================================== */
body { background: var(--bg-page); font-weight: 500; }
h1, h2, h3 { font-weight: 700; letter-spacing: -0.03em; }
.logo-mark { background: none !important; padding: 0 !important; width: 40px; height: 40px; border-radius: 0; }
.logo-mark svg { display: block; width: 40px; height: 40px; }
.logo-text { font-weight: 700; letter-spacing: -0.02em; }
.site-header .logo-text { color: var(--ink); }
.site-header { background: rgba(247, 251, 255, .94); border-bottom: 0; box-shadow: 0 6px 24px rgba(31, 53, 80, .05); }
.main-nav a { border-radius: 999px; }
.main-nav a[aria-current="page"] { background: #DDEEFF; color: var(--primary-dark); }
.btn { border-radius: 999px; }
.tabs { border-bottom: 0; }
.tabs a { border-radius: 999px; }
.tabs a[aria-current="page"] { background: var(--primary); }
.panel, .tool-card, .cycle-card, .table-wrap, .cq-card, .oral-clock { border-color: transparent; box-shadow: var(--shadow-soft); }
.panel, .tool-card, .table-wrap, .cq-card, .oral-clock { background: #fff; }
.stat { background: #fff; box-shadow: 0 8px 24px rgba(31, 53, 80, .06); border-radius: 22px; }
.tool-icon { border-radius: 50%; }
.level-chip, .tag { border-radius: 999px; }
input, select, textarea { border-radius: var(--radius-s); }
.hero { background: linear-gradient(180deg, #CFE6FF 0%, #EAF4FF 70%, var(--bg-page) 100%); }
.hero-visual > * { box-shadow: 0 30px 60px rgba(42, 114, 189, .18); }
.crpe-countdown { background: linear-gradient(180deg, #CFE6FF, #EAF4FF); }
.crpe-days { color: var(--primary-dark); }
.chat-me { background: #EAF4FF; color: var(--primary-dark); }
.chat-me:hover { color: var(--primary-dark); }
.beta-banner { background: linear-gradient(180deg, #EAF4FF, #F6FAFF); }
.beta-banner .launch-badge { background: var(--primary); }
.beta-banner p { flex-basis: 100%; }
.beta-how { list-style: none; padding: 0; margin: 0; flex-basis: 100%; display: flex; flex-direction: column; gap: 6px; }
.beta-how li { display: flex; gap: 8px; align-items: flex-start; font-size: 15px; }
.beta-how svg { flex: none; margin-top: 3px; color: var(--primary); }
.badge-beta { background: #DDEEFF; color: var(--primary-dark); }
.free-cards { margin-top: 8px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.free-card { background: #fff; border-radius: var(--radius-l); padding: 26px; box-shadow: var(--shadow-soft); display: flex; flex-direction: column; gap: 10px; }
.free-card h3 { margin: 6px 0 0; font-size: 21px; }
.free-card p { margin: 0; color: var(--text-soft); }
.btn-row-center { justify-content: center; margin-top: 28px; }

/* « par Maths En Direct », écrit à la main à côté du nom */
.logo-by { font-family: 'Cursive Ecole', cursive; font-weight: 300; font-size: 17px; line-height: 1; color: var(--primary); transform: rotate(-4deg) translateY(4px); white-space: nowrap; margin-left: -2px; }
.site-footer .logo-by { color: #9CC8F5; margin-left: 6px; display: inline-block; }
@media (min-width: 901px) and (max-width: 1240px) { .app-header .logo-by { display: none; } }

/* Barre fine des visiteurs : logo à gauche, connexion et inscription à droite, toujours visible */
.visitor-header { position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); background: rgba(247, 251, 255, .86); }
.visitor-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; padding-bottom: 10px; }
.visitor-header .logo-mark, .visitor-header .logo-mark svg { width: 34px; height: 34px; }
.visitor-header .logo-text { font-size: 23px; }
.visitor-actions { display: flex; align-items: center; gap: 6px; }
.visitor-actions a:not(.btn) { padding: 8px 12px; border-radius: 999px; color: var(--ink); font-weight: 600; text-decoration: none; font-size: 15px; }
.visitor-actions a:not(.btn):hover { background: #DDEEFF; }
.visitor-learn small { color: var(--muted); font-weight: 500; }
.visitor-signup-short { display: none; }
@media (max-width: 760px) {
  .visitor-learn { display: none; }
}
@media (max-width: 480px) {
  .visitor-header .logo-text { font-size: 20px; }
  .visitor-header .logo-mark, .visitor-header .logo-mark svg { width: 30px; height: 30px; }
  .logo-by { font-size: 14px; }
  .visitor-actions a:not(.btn) { padding: 8px 6px; font-size: 14px; }
  .visitor-signup-long { display: none; }
  .visitor-signup-short { display: inline; }
}
@media (max-width: 370px) {
  .visitor-header .logo-by { display: none; }
}
section[id] { scroll-margin-top: 72px; }
.visitor-actions a { white-space: nowrap; }
/* Petits écrans : « par Maths En Direct » passe sous le nom */
@media (max-width: 560px) {
  .site-header .logo { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 8px; row-gap: 0; align-items: center; }
  .site-header .logo-mark { grid-row: 1 / span 2; }
  .site-header .logo-text { line-height: 1.05; }
  .site-header .logo-by { display: block; font-size: 13px; transform: none; margin: 5px 0 0; }
}
@media (max-width: 370px) {
  .visitor-header .logo-by { display: block; font-size: 12px; }
  .visitor-actions { gap: 2px; }
}
/* Téléphone : le logo et « Se connecter » suffisent (le bouton d'inscription est juste dessous, dans l'accroche) */
@media (max-width: 480px) {
  .visitor-inner { padding-left: 16px; padding-right: 16px; }
  .visitor-signup { display: none; }
  .visitor-actions .visitor-login { border: 1.5px solid var(--line-strong); padding: 7px 12px; background: #fff; }
}

/* « par Maths En Direct » : en petit, sous le nom (remplace la version cursive) */
.logo { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 10px; row-gap: 0; align-items: center; }
.logo .logo-mark { grid-row: 1 / span 2; }
.logo .logo-text { line-height: 1.05; align-self: end; }
.logo-by, .site-header .logo-by { display: block; font-family: var(--font-body); font-weight: 600; font-size: 12px; letter-spacing: .01em; line-height: 1.2; color: var(--muted); transform: none; margin: 1px 0 0; white-space: nowrap; align-self: start; }
.site-footer .logo-by { display: block; color: #9FB3C8; margin: 2px 0 0; font-size: 13px; }
.app-header .logo-by { display: block; }
@media (max-width: 480px) { .logo-by, .site-header .logo-by { font-size: 11px; } }

/* Le pseudo, à droite, mène à « Mon compte » (l'onglet du menu a été fusionné ici) */
.user-chip-link { padding: 4px 12px 4px 4px; border-radius: 999px; color: var(--ink); text-decoration: none; line-height: 1.15; display: inline-grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; }
.user-chip-link .avatar { grid-row: 1 / span 2; }
.user-chip-link .user-name { font-weight: 700; }
.user-chip-link .user-chip-hint { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.user-chip-link:hover { background: #DDEEFF; color: var(--ink); }
.user-chip-link[aria-current="page"] { background: #DDEEFF; }
.user-chip-link[aria-current="page"] .user-chip-hint { color: var(--primary-dark); }
@media (min-width: 901px) and (max-width: 1240px) {
  .app-header .user-chip-link { padding-right: 4px; }
  .app-header .user-chip-link .user-chip-hint { display: none; }
}
@media (max-width: 900px) {
  .user-chip-link { padding: 8px 12px 8px 8px; border-radius: 16px; grid-template-columns: auto 1fr; justify-content: start; }
}
.rep-scale { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 6px; }
.rep-scale li { display: grid; grid-template-columns: 52px 1fr; align-items: baseline; gap: 8px; }
.rep-scale strong { color: var(--primary-dark); font-size: 17px; text-align: right; }
.badges-panel { margin-bottom: 20px; }
.badge-family { font-size: 17px; margin: 22px 0 10px; display: flex; align-items: center; gap: 8px; }
.badge-family:first-of-type { margin-top: 10px; }
.page-head.member-head { justify-content: flex-start; }

/* ---- Apprendre : élèves de la classe, voix, suivi ---- */
.ln-class { padding: 14px 18px; border-radius: 18px; background: #fff; border: 1px solid var(--line); margin: -8px 0 16px; }
.ln-class-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 10px; }
.ln-class-name { font-weight: 800; }
.ln-class-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.ln-student { min-height: 48px; font-size: 1.05rem; }
.ln-student.is-loading { opacity: .6; cursor: progress; }
.ln-who-sub { font-weight: 700; color: var(--muted); font-size: .9rem; }
.ln-playing { margin: -12px 0 20px; padding: 8px 14px; border-radius: 12px; background: #eaf3fc; color: var(--primary-dark); font-weight: 700; }
.ln-select { min-height: 40px; max-width: 100%; padding: 6px 10px; border-radius: 12px; border: 2px solid var(--line); background: #fff; font: inherit; font-weight: 700; }
.ln-voice-setting { flex-wrap: wrap; }
.ln-voice-setting .ln-select { max-width: 280px; }
.ln-btn-small { min-height: 40px; padding: 6px 12px; }
.ln-toast { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); max-width: calc(100% - 32px); padding: 10px 16px; border-radius: 12px; background: #3a2a10; color: #fff; font-weight: 700; z-index: 50; box-shadow: 0 6px 20px rgba(0,0,0,.2); }
.learn-report td, .learn-report th { vertical-align: middle; }
.learn-report tr.is-muted th, .learn-report tr.is-muted td { color: var(--muted); }
.lr-rate { font-weight: 800; padding: 2px 8px; border-radius: 999px; }
.lr-rate.is-good { background: #e3f4e8; color: #1f6b3a; }
.lr-rate.is-mid { background: #fff3d6; color: #7a5600; }
.lr-rate.is-low { background: #fde6e3; color: #9b2c1f; }
.lr-weak { display: flex; flex-wrap: wrap; gap: 4px; }
.lr-chip { display: inline-flex; align-items: baseline; gap: 4px; padding: 2px 8px; border-radius: 8px; background: #fde6e3; font-weight: 800; }
.lr-chip small { font-weight: 600; color: var(--muted); font-size: .72rem; }
@media (max-width: 480px) { .ln-voice-setting .ln-select { max-width: 100%; width: 100%; } }
@media (max-width: 480px) {
  .ln-settings { padding: 12px; }
  .ln-setting { flex-wrap: wrap; gap: 6px 10px; }
  .ln-seg { max-width: 100%; }
  .ln-seg button { padding: 8px 9px; }
}

/* Cahier journal : images jointes visibles */
.file-chip.is-image { padding: 4px 4px 4px 4px; border-radius: 12px; align-items: flex-start; }
.file-chip.is-image a { flex-direction: column; align-items: flex-start; gap: 4px; }
.file-thumb { display: block; width: 180px; max-width: 100%; height: 120px; object-fit: cover; border-radius: 8px; background: var(--soft, #EEF2F4); }
.file-chip.is-image a span:last-child { max-width: 180px; font-size: 12px; font-weight: 600; color: var(--muted); }
.file-chip.is-image .file-size { display: none; }
.week-files { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.week-files img { width: 44px; height: 32px; object-fit: cover; border-radius: 5px; border: 1px solid rgba(0,0,0,.08); background: #fff; }
.week-file-pdf, .week-file-more { font-size: 11px; font-weight: 800; padding: 2px 6px; border-radius: 5px; background: rgba(255,255,255,.75); color: var(--ink); line-height: 28px; }
@media print { .file-thumb { width: 60mm; height: auto; max-height: 45mm; object-fit: contain; } }

/* Formulaires en cadres empilés (Admin › Réglages…) : de l'air entre deux cadres */
.form-panel + .form-panel, .form-panel + .panel, .panel + .form-panel { margin-top: 24px; }

/* CRPE : figures des questions */
.cq-figure { margin: 4px 0 18px; }
.crpe-figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px; border-radius: 16px; background: #fff; border: 1px solid var(--line); }
.crpe-figure svg { max-width: 100%; height: auto; }
.crpe-figure figcaption { font-size: 13px; color: var(--muted); font-weight: 700; }
.crpe-fig-table-wrap { overflow-x: auto; max-width: 100%; }
.crpe-fig-table { border-collapse: collapse; font-variant-numeric: tabular-nums; }
.crpe-fig-table th, .crpe-fig-table td { border: 1px solid var(--line-strong, #C9D3DD); padding: 6px 12px; text-align: center; }
.crpe-fig-table thead th, .crpe-fig-table tbody th { background: #EEF4FB; font-weight: 800; }
.crpe-fig-table caption { font-weight: 700; color: var(--muted); padding-bottom: 6px; }
.crpe-fig-clock svg, .crpe-fig-fraction svg { max-width: 220px; }
.crpe-gen-example { margin: 14px 0; padding: 12px 14px; border-radius: 12px; background: var(--soft, #F3F6F9); }
.crpe-gen-example .crpe-figure { margin: 8px 0; }
textarea.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; }

/* ================================================================
   Registre d'appel
   ================================================================ */
.att-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 16px; }
.att-nav h2 { margin: 0; font-size: 1.35rem; }
.att-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.att-half-card { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-radius: 16px; background: #fff; border: 1px solid var(--line); }
.att-half-card.is-done { border-color: #9BD3B0; background: #F2FBF5; }
.att-count { color: var(--muted); font-weight: 700; margin-right: auto; }
.att-list { background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.att-row { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(0, 1.4fr) minmax(0, 1.4fr); gap: 10px 16px; align-items: start; padding: 10px 16px; border-top: 1px solid var(--line); }
.att-row-head { border-top: 0; background: var(--soft, #F3F6F9); font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.att-name { font-weight: 800; padding-top: 8px; }
.att-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 12px; background: var(--soft, #EEF2F4); }
.att-seg button { border: 0; background: none; padding: 7px 12px; border-radius: 9px; font: inherit; font-weight: 700; font-size: 14px; color: var(--muted); cursor: pointer; min-height: 38px; }
.att-seg button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(18,33,44,.15); }
.att-cell[data-status="absent"] .att-seg button[data-set="absent"] { background: var(--red-ink); color: #fff; }
.att-cell[data-status="late"] .att-seg button[data-set="late"] { background: #C27A00; color: #fff; }
.att-extra { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 6px; }
.att-note { flex: 1 1 140px; min-height: 34px; padding: 4px 10px; border-radius: 10px; border: 1px solid var(--line-strong, #C9D3DD); font: inherit; font-size: 14px; }
.att-toast { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); padding: 8px 16px; border-radius: 12px; background: #1F2D3A; color: #fff; font-weight: 700; z-index: 60; box-shadow: 0 6px 20px rgba(0,0,0,.2); margin: 0; }
.att-toast.is-error { background: var(--red-ink); }
@media (max-width: 720px) {
  .att-summary { grid-template-columns: 1fr; }
  .att-row { grid-template-columns: 1fr; }
  .att-row-head { display: none; }
  .att-name { padding-top: 0; }
  .att-cell::before { content: attr(data-half); display: none; }
  .att-cell[data-half="am"]::before { content: "Matin"; display: block; font-size: 12px; font-weight: 800; color: var(--muted); margin-bottom: 4px; }
  .att-cell[data-half="pm"]::before { content: "Après-midi"; display: block; font-size: 12px; font-weight: 800; color: var(--muted); margin-bottom: 4px; }
}

.reg-wrap { background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.reg-table { border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.reg-table th, .reg-table td { border: 1px solid var(--line); padding: 4px 6px; text-align: center; }
.reg-table .reg-name { text-align: left; white-space: nowrap; position: sticky; left: 0; background: #fff; z-index: 1; min-width: 110px; }
.reg-day { font-size: 11px; white-space: nowrap; }
.reg-day a { color: inherit; text-decoration: none; }
.reg-day.is-today { background: #EAF3FC; }
.reg-cell { width: 20px; min-width: 20px; font-weight: 800; color: var(--muted); }
.reg-cell.reg-pm { border-left-style: dashed; }
.reg-cell.is-called { background: #F2FBF5; }
.reg-cell.is-abs { background: #FCE4E4; color: #A12626; }
.reg-cell.is-just { background: #FFF3D6; color: #7A5600; }
.reg-cell.is-late { background: #EAF3FC; color: #1F5C9E; }
.reg-total { font-weight: 800; }
.reg-total.is-alert { background: #A12626; color: #fff; }
.reg-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 12px; }
.reg-key { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 1px solid var(--line); border-radius: 4px; font-weight: 800; background: #fff; }
.reg-key.is-abs { background: #FCE4E4; color: #A12626; } .reg-key.is-just { background: #FFF3D6; color: #7A5600; } .reg-key.is-late { background: #EAF3FC; color: #1F5C9E; } .reg-key.is-called { background: #F2FBF5; }
@media print {
  .page-register .site-header, .page-register .site-footer, .page-register .no-print, .page-register .flashes, .page-register .launch-banner { display: none !important; }
  .page-register .reg-wrap { border: 0; overflow: visible; }
  .page-register .reg-table { font-size: 8pt; width: 100%; }
  .page-register .reg-table th, .page-register .reg-table td { padding: 1px 2px; }
  .page-register .reg-cell { min-width: 0; width: auto; }
  @page { size: A4 landscape; margin: 8mm; }
}

/* ================================================================
   Évaluations
   ================================================================ */
.ev-periods { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.ev-period { padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-weight: 800; color: var(--ink); text-decoration: none; }
.ev-period small { display: inline-block; margin-left: 4px; padding: 0 7px; border-radius: 999px; background: var(--soft, #EEF2F4); font-size: 12px; }
.ev-period.is-on { background: var(--primary); border-color: var(--primary); color: #fff; }
.ev-period.is-on small { background: rgba(255,255,255,.25); }
.ev-add summary { cursor: pointer; }
.ev-add-form { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.ev-add-label { flex: 1 1 320px; }
.ev-filter { width: 100%; max-width: 420px; min-height: 40px; padding: 6px 12px; border-radius: 12px; border: 1px solid var(--line-strong, #C9D3DD); font: inherit; margin-bottom: 8px; }
.ev-items { max-height: 340px; overflow: auto; border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; }
.ev-subject > summary { font-weight: 800; cursor: pointer; padding: 4px 0; }
.ev-domain { margin: 8px 0 2px; font-size: 13px; font-weight: 800; color: var(--muted); }
.ev-item { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; margin: 2px 0; }
.ev-skills { margin-top: 18px; }
.ev-skill-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ev-skill-subject { margin-top: 8px; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.ev-skill { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ev-skill-num { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; border-radius: 8px; background: var(--soft, #EEF2F4); font-weight: 800; font-size: 13px; }
.ev-skill-label { flex: 1 1 260px; }
.ev-rename { flex: 1 1 260px; min-height: 34px; padding: 4px 10px; border-radius: 10px; border: 1px solid var(--primary); font: inherit; }
.ev-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 18px 0 10px; font-size: 14px; }
.ev-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 24px; padding: 0 6px; border-radius: 7px; font-weight: 800; font-size: 12px; }
.ev-l0 { background: #fff; color: #9AA6B0; }
.ev-l1 { background: #FCE4E4; color: #A12626; }
.ev-l2 { background: #FFF0D1; color: #8A5A00; }
.ev-l3 { background: #E3F4E8; color: #1F6B3A; }
.ev-l4 { background: #DCEBFA; color: #1F5C9E; }
.ev-wrap { background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.ev-grid { border-collapse: collapse; }
.ev-grid th, .ev-grid td { border: 1px solid var(--line); padding: 3px; text-align: center; }
.ev-grid thead th { font-size: 13px; padding: 6px 4px; background: var(--soft, #F3F6F9); }
.ev-grid .ev-name { text-align: left; padding: 4px 10px; white-space: nowrap; position: sticky; left: 0; background: #fff; z-index: 1; }
.ev-grid thead .ev-name { background: var(--soft, #F3F6F9); }
.ev-grid .ev-name a { color: var(--ink); text-decoration: none; font-weight: 700; }
.ev-cell { width: 42px; height: 36px; border: 0; border-radius: 8px; font: inherit; font-weight: 800; font-size: 13px; cursor: pointer; }
.ev-cell:focus-visible { outline: 3px solid var(--primary); outline-offset: 1px; }
.ev-tally { white-space: nowrap; text-align: left !important; padding: 3px 8px !important; }
.ev-tally .ev-chip { margin-right: 3px; min-width: 24px; }
.ev-comments { margin-top: 18px; }
.ev-comment textarea { width: 100%; }

/* ================================================================
   Programmations
   ================================================================ */
.pg-periods summary { cursor: pointer; }
.pg-period-form { margin-top: 12px; }
.pg-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 16px 0; }
.pg-toolbar input[type="search"] { min-height: 40px; padding: 6px 12px; border-radius: 12px; border: 1px solid var(--line-strong, #C9D3DD); font: inherit; min-width: 240px; }
.pg-subject { margin-bottom: 14px; }
.pg-subject > summary { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; cursor: pointer; }
.pg-subject > summary h2 { margin: 0; font-size: 1.2rem; display: inline; }
.pg-table { border-collapse: collapse; width: 100%; margin-top: 10px; }
.pg-table th, .pg-table td { border-bottom: 1px solid var(--line); padding: 5px 6px; vertical-align: middle; }
.pg-table thead th { font-size: 13px; text-align: center; background: var(--soft, #F3F6F9); }
.pg-table thead th small { display: block; font-weight: 600; color: var(--muted); font-size: 11px; }
.pg-table .pg-label { text-align: left; min-width: 260px; font-size: 14px; }
.pg-table .is-current { background: #F1F7FD; }
.pg-domain th { text-align: left; font-size: 13px; font-weight: 800; color: var(--muted); padding-top: 12px; background: #fff; }
.pg-notes textarea { width: 100%; min-width: 110px; font-size: 13px; padding: 4px 6px; border-radius: 8px; border: 1px dashed var(--line-strong, #C9D3DD); background: #FFFDF6; font-family: inherit; resize: vertical; }
.pg-cell { text-align: center; width: 13%; white-space: nowrap; }
.pg-toggle { width: 34px; height: 30px; border-radius: 9px; border: 1.5px solid var(--line-strong, #C9D3DD); background: #fff; color: var(--primary); font-size: 16px; line-height: 1; cursor: pointer; }
.pg-toggle[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }
.pg-worked { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; margin-left: 4px; border-radius: 999px; background: #E3F4E8; color: #1F6B3A; font-weight: 800; font-size: 11px; vertical-align: middle; }
.pg-row.is-planned .pg-label { font-weight: 600; }
.pg-legend-dot { color: var(--primary); }
@media print {
  .page-progressions .site-header, .page-progressions .site-footer, .page-progressions .no-print, .page-progressions .flashes, .page-progressions .launch-banner { display: none !important; }
  .page-progressions .pg-subject { border: 0; padding: 0; break-inside: auto; }
  .page-progressions .pg-table { font-size: 8.5pt; }
  .page-progressions .pg-toggle { border: 0; width: auto; height: auto; background: none !important; color: #12212C !important; }
  .page-progressions .pg-notes textarea { border: 0; background: none; resize: none; }
  .page-progressions .pg-row[hidden], .page-progressions .pg-subject[hidden] { display: table-row; }
  @page { size: A4 landscape; margin: 8mm; }
}

/* Champs côte à côte : jamais plus larges que l'écran */
.field-row > * { min-width: 0; }
.field input, .field select, .field textarea { max-width: 100%; }
@media (max-width: 600px) { .field-row { grid-template-columns: minmax(0, 1fr); } }

/* Étiquette « Bêta » façon tampon, en travers du logo */
.logo-text { position: relative; }
.logo-beta {
  position: absolute; left: calc(100% - 6px); top: -11px; transform: rotate(-14deg);
  border: 2px solid #E2563A; color: #E2563A; background: rgba(255,255,255,.88);
  font: 800 10.5px/1 var(--font-body, 'Quicksand'), sans-serif; letter-spacing: .18em; text-transform: uppercase;
  padding: 3px 5px 2px 7px; border-radius: 5px; box-shadow: inset 0 0 0 1.5px rgba(226,86,58,.3);
  white-space: nowrap; pointer-events: none; -webkit-font-smoothing: antialiased;
}
.site-footer .logo-beta, .footer-brand .logo-beta { display: none; }
@media (max-width: 480px) { .logo-beta { font-size: 9px; padding: 2px 4px 1px 6px; top: -9px; left: calc(100% - 8px); } }

/* « Les plus utilisés » */
.featured-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.featured-card { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 16px; border-radius: 18px; background: #fff; border: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: transform .12s ease, box-shadow .12s ease; }
.featured-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(31,92,158,.12); border-color: #BFD7F0; }
.featured-card:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.featured-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.featured-text strong { font-size: 1.05rem; }
.featured-text span { font-size: 14px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.featured-rank { position: absolute; top: 10px; right: 12px; font-weight: 800; font-size: 12px; color: #E2563A; background: #FDE8E3; border-radius: 999px; padding: 2px 8px; }
.featured-admin { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 18px; }
.featured-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 0; border-bottom: 1px solid var(--line); }
.featured-order { width: 62px; min-height: 34px; padding: 2px 6px; }
.visitor-header .logo-beta { top: -3px; }

/* Tampon « Bêta » : collé au « o », au-dessus de la fin de « par Maths En Direct » */
.logo-word { position: relative; display: inline-block; }
.logo-beta, .visitor-header .logo-beta { left: calc(100% + 1px); top: -6px; transform: rotate(-14deg); }
@media (max-width: 480px) { .logo-beta, .visitor-header .logo-beta { left: calc(100% + 1px); top: -5px; } }
.logo-beta, .visitor-header .logo-beta { transform: none; top: -3px; left: calc(100% + 4px); }
@media (max-width: 480px) { .logo-beta, .visitor-header .logo-beta { top: -2px; left: calc(100% + 3px); } }
/* Tampon droit, centré sur la hauteur de « Sakado » */
.logo-beta, .visitor-header .logo-beta { top: 50%; transform: translateY(-46%); left: calc(100% + 6px); }
@media (max-width: 480px) { .logo-beta, .visitor-header .logo-beta { top: 50%; left: calc(100% + 5px); } }

/* Grilles : un panneau ne doit jamais élargir la page (tableaux longs sur téléphone) */
.grid-2 > *, .grid-3 > *, .member-grid > * { min-width: 0; }
.table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 480px) {
  .table-compact th, .table-compact td { padding: 8px 6px; font-size: 14px; }
  .table-compact td:last-child { white-space: nowrap; }
}

/* Champ mot de passe avec bouton « œil » */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { width: 100%; padding-right: 48px; }
.pw-toggle { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; }
.pw-toggle:hover, .pw-toggle[aria-pressed="true"] { color: var(--primary); background: #EAF3FC; }
.pw-toggle:focus-visible { outline: 3px solid var(--primary); outline-offset: 1px; }
.remember-check { margin: -4px 0 16px; align-items: flex-start; }

/* Inscription : mise en avant de l'adresse académique */
.aca-callout { display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 20px; padding: 14px 16px; border-radius: 16px; background: linear-gradient(135deg, #E6F6EC, #F1FAF4); border: 1.5px solid #9BD3B0; color: #164D2C; text-align: left; }
.aca-callout p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.45; color: #1F5E37; }
.aca-badge { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: #1F8A4C; color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(31,138,76,.35); }
.aca-callout-ok { margin: 16px 0; }
[data-aca-hint].is-aca { color: #1F8A4C; font-weight: 800; }

/* Dernières mises à jour */
.updates-page h1 { margin-bottom: 6px; }
.updates-legend { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 24px; }
.upd-kind { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 800; white-space: nowrap; }
.upd-new { background: #E6F0FB; color: #1F5C9E; }
.upd-improve { background: #EEE8FC; color: #5B3FA8; }
.upd-fix { background: #FFF3D6; color: #7A5600; }
.upd-month { font-size: 1.1rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 28px 0 10px; }
.upd-list { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 3px solid var(--line); display: flex; flex-direction: column; gap: 14px; }
.upd-item { position: relative; padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.upd-item::before { content: ""; position: absolute; left: -27px; top: 20px; width: 13px; height: 13px; border-radius: 50%; background: var(--primary); border: 3px solid #fff; box-shadow: 0 0 0 1px var(--line); }
.upd-item h3 { margin: 6px 0 4px; font-size: 1.05rem; }
.upd-item p { margin: 0; color: var(--text); }
.upd-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; color: var(--muted); font-weight: 700; }
.upd-cta { margin-top: 28px; }
.news-list { list-style: none; margin: 0; padding: 12px 16px; background: #fff; border: 1px solid var(--line); border-radius: 16px; display: flex; flex-direction: column; gap: 8px; }
.news-list .upd-kind { padding: 2px 6px; }
.nowrap { white-space: nowrap; }
.inline-form { display: inline; margin-left: 8px; }

/* Salle des profs : accueil, groupes de salons */
.chat-home { padding: 20px 22px 28px; display: flex; flex-direction: column; gap: 16px; overflow: auto; }
.chat-home-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.chat-home-head h2 { margin: 0 0 4px; font-size: 1.35rem; }
.chat-home-search input { width: 100%; }
.chat-home-section h3 { margin: 6px 0 10px; font-size: 1rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.room-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.room-card { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 16px; background: #fff; border: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: border-color .12s, box-shadow .12s; }
.room-card:hover { border-color: #BFD7F0; box-shadow: 0 6px 18px rgba(31,92,158,.1); }
.room-card-meta { color: var(--primary-dark); font-weight: 700; margin-top: 2px; }
.room-chip { display: inline-block; padding: 0 8px; margin-right: 4px; border-radius: 999px; background: #EAF3FC; color: var(--primary-dark); font-weight: 800; }
.room-group { display: block; margin: 12px 0 4px 12px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.chat-room-list .room-home { margin-bottom: 2px; }
.page-chat .new-thread { margin: 0; }
/* Le formulaire « nouveau sujet » ne s'affiche qu'au clic sur « + Nouveau sujet » */
.page-chat .new-thread:not([open]) { display: none; }
.page-chat .new-thread[open] summary { cursor: pointer; }
/* Accueil et listes de sujets : la page défile normalement (pas de hauteur fixe comme la discussion) */
.chat-main.chat-home, .chat-main.chat-main-threads { height: auto; min-height: 460px; overflow: visible; }

/* --------------------------------------------------------------------------
   Notifications : cloche en haut de page, page « Notifications »
   -------------------------------------------------------------------------- */
.app-header .header-menu { order: 1; }
.notif-menu { order: 2; flex: none; }
.notif-bell {
  position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50%; color: var(--ink); background: transparent; border: 1.5px solid transparent;
}
.notif-bell:hover, .notif-menu[open] .notif-bell { background: #DDEEFF; }
.notif-bell:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.notif-bell.has-new .icon { animation: notif-ring 1.2s ease 1; transform-origin: 50% 10%; }
@keyframes notif-ring { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(14deg); } 40% { transform: rotate(-12deg); } 60% { transform: rotate(8deg); } 80% { transform: rotate(-4deg); } }
@media (prefers-reduced-motion: reduce) { .notif-bell.has-new .icon { animation: none; } }
.notif-count {
  position: absolute; top: 2px; right: 0; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 10px; background: var(--red-ink); color: #fff; border: 2px solid #fff;
  font-size: 11.5px; font-weight: 800; line-height: 16px; text-align: center;
}
.notif-panel { width: 380px; max-height: min(70vh, 560px); overflow-y: auto; padding: 0; gap: 0; }
.notif-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.notif-head form { margin: 0; }
.notif-readall { background: none; border: 0; padding: 4px 0; font: inherit; font-size: 13.5px; font-weight: 700; color: var(--primary-dark); cursor: pointer; }
.notif-readall:hover { text-decoration: underline; }
.notif-group { margin: 0 0 4px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.notif-todo { padding: 10px 14px; background: var(--sun); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.notif-todo a { display: flex; align-items: center; gap: 6px; color: var(--sun-ink); font-weight: 700; font-size: 14px; text-decoration: none; }
.notif-todo a:hover { text-decoration: underline; }
.notif-updates { display: block; padding: 10px 14px; background: var(--green); color: var(--green-ink); font-weight: 700; font-size: 14px; text-decoration: none; border-bottom: 1px solid var(--line); }
.notif-updates:hover { text-decoration: underline; color: var(--green-ink); }
.notif-list { list-style: none; margin: 0; padding: 0; }
.notif-item a { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line); }
.notif-item a:hover { background: var(--bg-grey); }
.notif-item.is-unread a { background: #F2F8FF; }
.notif-item.is-unread a:hover { background: #E6F1FD; }
.notif-ico { flex: none; width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--sky); color: var(--sky-ink); }
.notif-ico-idea_comment, .notif-ico-idea_status { background: var(--lilac); color: var(--lilac-ink); }
.notif-ico-crpe_ok, .notif-ico-sheet_ok, .notif-ico-welcome { background: var(--green); color: var(--green-ink); }
.notif-ico-crpe_no, .notif-ico-sheet_no { background: var(--sun); color: var(--sun-ink); }
.notif-ico-moderation { background: var(--red); color: var(--red-ink); }
.notif-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14.5px; line-height: 1.35; }
.notif-line strong { color: var(--ink); overflow-wrap: anywhere; }
.notif-detail { font-size: 13px; color: var(--text-soft); overflow-wrap: anywhere; }
.notif-when { font-size: 12.5px; color: var(--muted); }
.notif-dot { flex: none; width: 9px; height: 9px; margin-top: 6px; border-radius: 50%; background: var(--primary); }
.notif-empty { margin: 0; padding: 16px 14px; color: var(--muted); font-size: 14px; }
.notif-all { display: block; padding: 11px 14px; text-align: center; font-weight: 700; font-size: 14px; color: var(--primary-dark); text-decoration: none; }
.notif-all:hover { background: var(--bg-grey); }

.notif-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.notif-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.notif-list-page { padding: 0; overflow: hidden; }
.notif-list-page .notif-item:last-child a { border-bottom: 0; }
.notif-list-page .notif-text { font-size: 15px; }
.notif-updates-page { border-radius: var(--radius); border: 0; }
.notif-todo-panel { background: var(--sun); border-color: transparent; }
.notif-todo-panel h2, .notif-prefs h2 { font-size: 18px; margin: 0 0 10px; }
.notif-todo-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.notif-todo-list a { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--sun-ink); }
.notif-prefs .check { font-size: 15px; }
.notif-empty-page p { margin: 0 0 6px; }

@media (max-width: 900px) {
  .notif-menu { order: 1; margin-left: auto; }
  .app-header .nav-toggle { order: 2; }
  .app-header .header-menu { order: 3; }
  .notif-layout { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .notif-menu { position: static; }
  .notif-panel { position: absolute; left: 12px; right: 12px; width: auto; top: auto; margin-top: 8px; }
  .app-header .header-inner { position: relative; }
}

/* Salle des profs : sujets suivis et messages non lus */
.thread-new { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; background: var(--primary); color: #fff; font-size: 12px; font-weight: 800; vertical-align: 2px; white-space: nowrap; }
.thread-new-soft { background: var(--sky); color: var(--sky-ink); }
.thread-item.has-unread .thread-name { font-weight: 800; }
.thread-follow { margin: 0; }
.thread-follow .btn { white-space: nowrap; }
.chat-followed { margin-bottom: 4px; }

/* --------------------------------------------------------------------------
   En-tête de l'espace membre : menu « compte », pas de retour à la ligne
   -------------------------------------------------------------------------- */
.app-header .main-nav { flex-wrap: nowrap; }
.app-header .main-nav a { white-space: nowrap; }
.app-header .header-actions { flex-wrap: nowrap; }
.account-mobile { display: none; }
.account-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: 999px;
  color: var(--ink); font-weight: 700; cursor: pointer; user-select: none;
}
.account-chip:hover, .account-menu[open] .account-chip, .account-chip.is-current { background: #DDEEFF; }
.account-chip:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.account-chip .user-name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-caret { font-size: 12px; color: var(--muted); }
.account-panel { width: 250px; }
.account-who { margin: 0 0 6px; padding: 6px 8px 10px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.account-who strong { color: var(--ink); overflow-wrap: anywhere; }
.account-who span { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.account-panel .menu-item { display: block; width: 100%; text-decoration: none; }
.account-logout { margin: 4px 0 0; padding-top: 4px; border-top: 1px solid var(--line); }

/* Écran moyen : le pseudo s'efface, l'avatar reste */
@media (min-width: 1081px) and (max-width: 1280px) {
  .app-header .main-nav a { padding: 10px 11px; }
  .account-chip .user-name { display: none; }
}

/* Jusqu'à 1080 px, l'espace membre passe au bouton « Menu » (le menu complet ne tient plus sur une ligne) */
@media (max-width: 1080px) {
  .app-header .header-inner { padding-top: 12px; padding-bottom: 12px; }
  .app-header .nav-toggle { display: inline-flex; order: 2; }
  .app-header .notif-menu { order: 1; margin-left: auto; }
  .app-header .header-menu { order: 3; display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 14px; padding: 8px 0 6px; }
  .app-header.is-open .header-menu { display: flex; }
  .app-header .header-menu .main-nav { margin: 0; flex-direction: column; gap: 4px; }
  .app-header .main-nav a { padding: 12px 14px; font-size: 17px; border-radius: 12px; }
  .app-header .main-nav a:hover { background: var(--bg-grey); }
  .app-header .header-actions { flex-direction: column; align-items: stretch; gap: 10px; border-top: 1.5px solid var(--line); padding-top: 14px; }
  .app-header .account-menu { display: none; }
  .app-header .account-mobile { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
  .app-header .account-mobile form { width: 100%; margin: 0; }
  .app-header .account-mobile .btn { width: 100%; min-height: 48px; }
  .app-header .user-chip-link { padding: 8px 12px 8px 8px; border-radius: 16px; grid-template-columns: auto 1fr; justify-content: start; }
  .app-header .account-mobile .user-name, .app-header .account-mobile .user-chip-hint { display: block; }
}
@media (max-width: 480px) {
  .app-header .header-inner { column-gap: 6px; }
  .app-header .notif-bell { width: 40px; height: 40px; }
  .app-header .nav-toggle { padding: 8px 10px; gap: 8px; min-width: 104px; justify-content: center; }
}
@media (max-width: 370px) {
  .app-header .nav-toggle-text { display: none; }
  .app-header .nav-toggle { min-width: 0; }
}